Commit Graph
121 Commits
Author SHA1 Message Date
weishu aacab0be51 feat(web): add auto-focus to composer input on desktop devices only
Adds touch device detection via media query (pointer: coarse) to prevent
triggering virtual keyboard on mobile. Input auto-focus is now conditional
on desktop environments where it improves keyboard-based interactions.
2025-12-22 09:46:03 +08:00
weishu 7c86f83d5c feat: add switch to remote button for local mode 2025-12-22 00:05:55 +08:00
weishu e54c9844e8 feat(web): separate pending permissions from task details in tool messages
Add helper functions to identify and split task children into pending
permission blocks and other details, allowing permission prompts to display
immediately while keeping other task details collapsible.
2025-12-22 00:00:10 +08:00
weishu 16c2e7c7ec fix(web): fix navigation in session creation flow with back buttons
- Add back buttons to MachinesPage and SpawnPage for non-Telegram environments
- Fix navigation after session creation to clear spawn flow from history
- Update useAppGoBack hook to use explicit path navigation for consistent behavior
2025-12-21 23:55:33 +08:00
weishu 04725dda72 fix(web): remove streaming dot indicator from markdown component 2025-12-21 23:13:39 +08:00
weishu c1fce7a9cf fix(web): handle codex content type in message normalization
Add isCodexContent() helper and check for failed normalization of codex
content to properly skip unsupported codex message types during decryption
2025-12-21 22:02:58 +08:00
weishu 3aa41fcef2 fix: add type safety improvements and fix Bun runtime type issues
- Replace embeddedAssets stub with generated type definitions
- Fix Bun.isCompiled access with proper type assertion to prevent undefined errors
- Improve router search validation with explicit SessionFileSearch type
- Simplify middleware return patterns for better readability
2025-12-21 19:53:44 +08:00
weishu a665386f05 fix(web): add safe-area-inset-top padding to prevent statusbar overlap on iOS PWA
This fixes an issue where viewport-fit=cover and black-translucent statusbar
configuration allowed content to extend under the iOS statusbar. Added env(safe-area-inset-top)
CSS handling to all main layout components:
- SessionHeader with pt-[env(safe-area-inset-top)]
- SessionsPage, MachinesPage, SpawnPage with safe-area padding
- FilesPage and FilePage headers with safe-area padding
2025-12-21 18:50:40 +08:00
weishu 4f03f29ac3 docs: rebrand Happy to HAPI and add component documentation
This commit rebrands the project from "Happy" to "HAPI" throughout the codebase, including documentation, comments, logs, and tool references. It also adds comprehensive README files for the server and web components, clarifies the monorepo structure in AGENTS.md and root README.md, and removes the outdated roadmap.md file.

Changes include:
- Rebrand references from Happy to HAPI in CLI, server, and web components
- MCP tool names updated from mcp__happy__ to mcp__hapi__
- Process/service names updated consistently
- New server/README.md with deployment and configuration guide
- New web/README.md with stack and development instructions
- Updated root README.md with quickstart guide
- Updated AGENTS.md with cleaner structure documentation
- Removed cli/roadmap.md (now superseded by documentation)
2025-12-21 18:49:04 +08:00
weishu 56ae2c85a2 feat(cli): add Agent Client Protocol (ACP) integration for external agent support
Implements comprehensive ACP backend enabling integration with ACP-compliant agents like Gemini. Includes stdio transport, message handling, permission flow, and registry for agent management. Adds new 'hapi gemini' command to launch ACP agent sessions.
2025-12-21 18:40:04 +08:00
weishu 76a82c27c5 fix(web): prevent text overflow in user message component by adding min-w-0 constraint 2025-12-21 09:16:46 +08:00
weishu afe0e8b892 feat(web): add CLI output message block support with layout improvements
Implement CLI output message type for displaying command output from user/assistant messages. Adds CliOutputBlock component and type with detection logic based on message metadata and CLI tags. Includes merging of adjacent CLI output blocks for cleaner presentation. Enhance layout throughout components with proper overflow handling and width constraints for improved text wrapping and scrolling behavior.
2025-12-21 09:16:46 +08:00
weishu be655f9fcf feat(web): enable scroll restoration in TanStack Router
Adds scrollRestoration: true to createRouter configuration to preserve
scroll position when navigating between pages, improving navigation UX
when switching between views like sessions list and session details.
2025-12-20 23:20:30 +08:00
weishu eac7ff239a fix: improve error handling in git operations and queries 2025-12-20 23:09:53 +08:00
weishu 8ebd4f6ab9 feat: add git integration with file browsing and diff viewing
Add comprehensive git support across the stack:
- CLI: register git RPC handlers (status, diff numstat, diff file)
- Server: create git routes with proper session path resolution
- Web: add file browser, diff viewer, and git status visualization
- Add FileIcon component and git parser utilities
- Add TanStack Router routes for /files and /file pages
- Add git-themed CSS variables for light and dark modes
2025-12-20 23:00:26 +08:00
weishu bf18224d05 fix(web): suppress focus ring on pointer interactions while preserving keyboard accessibility 2025-12-20 19:52:56 +08:00
weishu ce5bdc8bed feat(web): improve AskUserQuestion tool card UX with better answers visualization
- Show selected answers with green borders and checkmarks in the question view
- Use circles (●/○) for single-select and squares (☑/☐) for multi-select
- Multi-question titles now show "N Questions" with subtitle "(+N more)"
- Remove redundant Single/Multi badges from footer
- Hide empty Result section when answers are shown in the view
- Dialog header updates to "Questions & Answers" when answered
- Handle freeform/fallback answers gracefully in all display modes
2025-12-20 18:04:40 +08:00
weishu 3bac5c7bc6 feat(web): integrate TanStack React Router for client-side routing
Replace state-based screen navigation with proper URL-based routing. This includes:
- New router configuration with routes for sessions, machines, and spawn pages
- App context provider to share API and token across the app
- useAppGoBack hook for handling browser and Telegram back navigation
- Refactored App component to render outlet and use router hooks
- Memory history for Telegram app, browser history for web
2025-12-20 16:49:10 +08:00
weishu 05c2cbb724 perf(web): narrow message state subscriptions
- web/src/components/AssistantChat/messages/UserMessage.tsx now subscribes only to role, text, status,
  and localId instead of the entire message object to avoid re-renders caused by unrelated message state
  changes (hover/isLast/etc.).
- web/src/components/AssistantChat/messages/SystemMessage.tsx now subscribes only to role, text, and icon
  for the same reason.
- This reduces unnecessary renders observed in React DevTools without changing message UI or behavior.
2025-12-19 21:48:03 +08:00
weishu d2ad977394 server: add SSE events stream for webapp
web: switch webapp updates to SSE
2025-12-19 21:28:53 +08:00
weishu c35900888f fix(web): render system messages without MessagePrimitive.Root
https://github.com/assistant-ui/assistant-ui/issues/2954
2025-12-19 21:19:13 +08:00
weishu 3a7272d03d feat(web): integrate TanStack Query for state management
Replace manual state management with TanStack Query (React Query) for more robust server state handling. This refactoring introduces:

- New hooks for queries: useSessions, useSession, useMessages, useMachines
- New hooks for mutations: useSendMessage, useSessionActions, useSpawnSession
- Centralized query client with optimized configuration (5s staleTime, disabled window focus refetch)
- Query key factory for consistent cache invalidation
- Improved message synchronization via socket events with cache updates
- Optimistic updates for message sending with retry capability
- Simplified App.tsx by removing manual state management logic
- Integrated React Query devtools in development mode

This enables automatic cache management, better error handling, and a foundation for more sophisticated data fetching patterns.
2025-12-19 18:25:13 +08:00
weishu 10bed01358 fix(web): align SessionHeader content with centered layout
Wrap SessionHeader content in a centered container using the same
mx-auto w-full max-w-[720px] pattern as HappyThread to ensure the
back button and session info align with the main content area instead
of appearing at the top-left corner.
2025-12-19 17:06:23 +08:00
weishu 21de6282b5 Disable assistant thread auto-scroll
Prevent auto-scroll from forcing the viewport during heavy renders
2025-12-19 16:43:20 +08:00
weishu c94f1c0ea5 ignore dev_dist 2025-12-19 15:26:33 +08:00
weishu db888d90f8 perf: optimize /api/sessions endpoint response payload
Slim down SessionSummary responses to reduce payload size:
- Replace full todos array with computed todoProgress summary
- Replace metadata object with only necessary fields (name, path, summary.text)
- Remove unused fields (thinking, createdAt, permissionMode, modelMode)
- Refactor sorting to work on full Session objects before mapping

This significantly reduces /api/sessions response size, especially for
sessions with many todos or tools.
2025-12-19 15:10:23 +08:00
weishu bb514482a2 perf(web): optimize message conversion with useExternalMessageConverter
Use the cached message converter from @assistant-ui/react to prevent
re-converting all messages on every render. The previous implementation
called convertMessage for every ChatBlock on each render cycle, creating
new objects (Date, arrays, metadata) that triggered unnecessary state
updates and re-render storms.

The new implementation:
- Uses useExternalMessageConverter which internally caches via WeakMap
- Memoizes callbacks with useCallback for stable references
- Memoizes the adapter object to prevent subscription churn
2025-12-19 13:14:17 +08:00
weishu a7b39a5194 feat(web): optimize rendering with chat block reconciliation and component memoization
Implement block reconciliation to maintain object identity across renders when content hasn't changed, reducing unnecessary re-renders. Add memoization and performance optimizations to ToolCard component.
2025-12-19 13:08:39 +08:00
weishu 24d5056169 feat: add Vite dev server proxy configuration for local development
Enable concurrent web development workflow with Vite HMR instead of requiring pre-build. Configure Vite server to listen on 0.0.0.0 for LAN access, proxy /api and /socket.io to backend (127.0.0.1:3006), and run dev:server and dev:web together.
2025-12-19 11:43:11 +08:00
weishu 7da8144ff6 fix(web): restore dark mode styling broken by conditional Telegram SDK loading
The conditional Telegram SDK loading (commit 4606ba2) caused dark mode to
break in non-Telegram browsers. Added dark mode CSS variable overrides with
proper fallbacks, and restored the module-level applyTheme() call that applies
theme before React renders, preventing a flash of incorrect styling.

- web/src/index.css: Added dark mode overrides for primary colors (--app-bg,
  --app-fg, --app-hint, --app-link, --app-button, --app-button-text,
  --app-secondary-bg) with system-appropriate dark fallbacks when Telegram
  theme variables are unavailable
- web/src/hooks/useTheme.ts: Restored module-level applyTheme(currentScheme)
  call to ensure theme is applied before React renders
2025-12-19 00:15:48 +08:00
weishu ac67718ec0 feat: implement AskUserQuestion tool with interactive UI and question flow
Add comprehensive support for the AskUserQuestion tool including:
- New footer component for handling user responses with multi-step question flow
- Type definitions and parsing utilities for question and answer formats
- View component for displaying questions and options
- Integration with permission system to capture user answers
- Support for single and multi-select questions with optional text input
- Haptic feedback and error handling for better UX
2025-12-18 23:24:41 +08:00
weishu 7042596c90 Revert "feat: optimize PWA service worker update strategy for better caching"
This reverts commit 5856db6781.
2025-12-18 23:24:39 +08:00
weishu 55b1a753ba refactor(web): enhance DiffView with modal preview and inline variant 2025-12-18 22:56:00 +08:00
weishu 4606ba23d9 feat(web): implement conditional Telegram SDK loading
Add lazy loading of Telegram SDK only when running inside Telegram Mini App
environment instead of unconditionally loading in all browsers. Includes:

- New environment detection functions: isTelegramEnvironment(), isTelegramApp()
- Dynamic SDK loading with 3s timeout via loadTelegramSdk()
- Removed static script tag from index.html
- Made haptic feedback lazy (SDK check on each call)
- Made theme listeners lazy (attached in initializeTheme())
- Updated all components to use unified detection functions

This prevents SDK load time overhead in regular browser environments while
ensuring the app works correctly both in Telegram and browser contexts.
2025-12-18 22:54:40 +08:00
weishu 2a097d0cdf fix(web): prevent Android Chrome keyboard overlap 2025-12-18 19:05:01 +08:00
weishu 5856db6781 feat: optimize PWA service worker update strategy for better caching
Improve service worker update handling to fix caching issues during development:
- Add skipWaiting and clientsClaim in Workbox config for immediate SW activation
- Remove user confirmation prompt and switch to silent automatic updates
- Replace hourly polling with visibility-based update checks via visibilitychange event

This resolves the issue where web updates would not take effect without manual cache clearing.
2025-12-18 18:18:35 +08:00
weishu 80b8d2e34f fix: remove unreliable Telegram environment detection to fix loading delay
Remove unreliable conditions from Telegram environment detection in useAuthSource:
- window.Telegram !== undefined: Always true due to unconditional SDK loading
- window.self !== window.top: Causes false positives in iframe scenarios

Only keep URL parameter detection (tgWebApp in search/hash) which is reliable.
This prevents 5-second polling delay before login page displays on PC browser.
2025-12-18 16:28:24 +08:00
weishu f95350d245 fix: integrate History API for browser back button navigation
Syncs React routing state with browser History API. Clicking the browser
back button now navigates within the app instead of exiting. Telegram
BackButton behavior is preserved by checking for initData.
2025-12-18 16:06:10 +08:00
weishu 3cf66983fc feat: optimize web bundle with custom minimal Shiki highlighter
Replaces react-shiki with a custom minimal Shiki highlighter to significantly reduce bundle size. Only loads 29 common languages and 2 themes (github-light/dark), using the JavaScript RegExp engine instead of WASM.

- Reduced web bundle from 5.8MB to 2.5MB (57% reduction)
- Saves 622KB by avoiding WASM runtime
- Graceful fallback for unsupported languages
- Removed react-shiki dependency
- Added @shikijs/langs, @shikijs/themes, shiki, hast-util-to-jsx-runtime
- Added light mode CSS rules for syntax highlighting
2025-12-18 15:09:49 +08:00
weishu be00343289 feat: add iOS Safari install guide and improve PWA UX with neutral theme
- Add iOS Safari install prompt with step-by-step modal guide
- Fix Telegram environment detection (check initData, not just SDK presence)
- Fix install prompt re-entrancy issue (clear deferredPrompt immediately)
- Extract icon components to separate file (web/src/components/icons.tsx)
- Rename "Happy App" to "Hapi" throughout the UI and manifests
- Change button/icon colors from blue (--app-button) to neutral theme (--app-fg/--app-bg)
- Add install dismiss state to prevent repeated prompts
- Improve iOS Safari detection with robust user agent parsing
2025-12-18 14:05:50 +08:00
weishu ea9f0f3b1a feat: implement progressive web app support with offline capabilities
Add complete PWA implementation including service worker registration,
offline support, and installation prompts:

- Add vite-plugin-pwa and workbox-window dependencies for PWA tooling
- Configure VitePWA plugin with web app manifest and app metadata
- Set up Workbox caching strategies for API endpoints and CDN assets
- Implement service worker auto-update with user-triggered refresh
- Create usePWAInstall hook to handle beforeinstallprompt events
- Create useOnlineStatus hook for monitoring network connectivity
- Add InstallPrompt component with haptic feedback integration
- Add OfflineBanner component to notify users of offline status
- Configure PWA icons and assets (64x64, 192x192, 512x512 variants)
- Add TypeScript type declarations for virtual PWA register module
- Integrate PWA components and service worker into App.tsx and main.tsx
- Add PWA meta tags and viewport configuration to index.html
2025-12-18 13:40:36 +08:00
weishu 9be0a96af4 feat: add web vibration api fallback for haptic feedback
Replace no-op browser haptic feedback with Web Vibration API support,
allowing haptic feedback when running outside Telegram Mini App. Also
remove stale react-syntax-highlighter type reference from tsconfig.
2025-12-18 12:53:11 +08:00
weishu cf2b96b566 feat: add browser environment support with access token authentication
Enable the web client to run in plain browser environments alongside Telegram Mini App support:

- Server: Add CLI_API_TOKEN authentication path as alternative to Telegram initData
- Client: Add useAuthSource hook to detect and manage Telegram vs browser auth sources
- Client: Add usePlatform hook for platform abstraction with graceful haptic feedback degradation
- Client: Add LoginPrompt component for browser access token login
- Client: Extend useTheme to fall back to system prefers-color-scheme in browser
- Client: Migrate all direct HapticFeedback calls to use usePlatform hook
2025-12-18 12:45:49 +08:00
weishu 5fe1256e11 refactor: replace react-syntax-highlighter with react-shiki
Consolidate markdown rendering logic into dedicated assistant-ui components and update syntax highlighting to use Shiki with GitHub themes. Removes dependency on react-markdown and react-syntax-highlighter in favor of @assistant-ui/react-markdown with Shiki-based highlighting.
2025-12-18 12:45:26 +08:00
weishu fd55750a12 refactor: replace react-syntax-highlighter with react-shiki
Consolidate markdown rendering logic into dedicated assistant-ui components and update syntax highlighting to use Shiki with GitHub themes. Removes dependency on react-markdown and react-syntax-highlighter in favor of @assistant-ui/react-markdown with Shiki-based highlighting.
2025-12-18 12:08:59 +08:00
weishu 35d959dba4 feat: improve event presentation with separate icons and add aria labels to buttons 2025-12-18 08:56:52 +08:00
weishu 279c0c2dd8 fix: change retry button text from Chinese to English 2025-12-18 08:51:44 +08:00
weishu f75a7d46bb feat: add model-aware context budget calculation for status bar warnings 2025-12-18 08:50:07 +08:00
weishu 7f07bdc796 refactor: extract presentation utilities and status indicator component 2025-12-18 08:47:13 +08:00
weishu 120de5515d feat: improve settings overlay and tool message display
- Refactor HappyComposer settings overlay to conditionally render permission and model settings based on their availability
- Add showPermissionSettings and showModelSettings flags for cleaner conditional rendering
- Enhance ToolMessage fallback UI with styled card layout and code blocks for arguments and results
- Improve type validation in isToolCallBlock with comprehensive property checks
- Add safeStringify utility for robust JSON serialization with fallback handling
2025-12-18 08:39:49 +08:00