- Centered button using mx-auto w-fit wrapper (matches SystemMessage pattern)
- Changed variant from secondary to outline for subtler appearance
- Reduced visual weight with text-xs opacity-80 hover:opacity-100
- Added ↑ arrow icon before the text
- Adjusted spacing to py-1 mb-2 and gap-1.5
Fixes alignment issues where button wasn't centered with content below and improves visual consistency with page design.
Add additional condition to check for the intermediate auth state where
authSource exists but token hasn't been fetched yet. This prevents the
LoginPrompt from briefly flashing when the page is refreshed and the user
already has a stored access token.
Changes the condition from just `isAuthLoading` to also cover the gap
before the useAuth effect starts fetching the token, displaying the
loading state instead of the login prompt.
Update documentation across the project to reflect current state of codebase:
- cli/README.md: Add all commands (codex, gemini, daemon subcommands, doctor, mcp),
configuration options, storage locations, and source structure references
- server/README.md: Add complete HTTP API reference, Socket.IO events, Telegram bot
features, core logic descriptions, and source structure
- web/README.md: Add all routes, feature descriptions, authentication flow, data
fetching, real-time updates, and source structure
- README.md: Improve feature list clarity, add HTTPS exposure instructions in
quickstart, add multi-agent support section
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
Debounce the sync banner to only show if sync takes longer than 300ms.
This prevents the banner from flashing on quick syncs while still showing
for slower operations.
Changes:
- Added DEBOUNCE_MS constant (300ms)
- Changed doStartSync to delay banner display by 300ms
- Changed endSync to immediately clear all timeouts
- Renamed endSyncTimeoutRef to startDelayTimeoutRef (now for debounce)
Added isFirstConnectRef to distinguish between first SSE connection
(page load) and subsequent reconnects (session switches). Only the
first connection forces the banner to show; subsequent connects use
non-forced mode which only displays the banner when returning from
background within 30s, eliminating unwanted banner flashes on
session changes.
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
Adds maxWidth.content: '720px' to tailwind.config.ts for centralized width management across the web app. Replaces all hardcoded max-w-[720px] references with the new max-w-content class. Adds missing max-width constraints to file.tsx, files.tsx, and SessionList.tsx. Moves border-b dividers from outer full-width divs to inner max-w-content divs for consistent visual hierarchy.
Replace Card-based layout with semantic button elements for better accessibility and keyboard navigation. Add session metadata fields (flavor, activeAt, modelMode) and implement helper functions to format session information including agent flavor, model mode, and relative last-seen timestamps. Update hover styles and add focus-visible indicators.
When switching from local mode to remote mode, the placeholder text now
suggests users can type "continue" to resume interrupted tasks. This helps
users understand they can continue where they left off after experiencing
permission prompts that were stuck in the terminal during local mode.
Move the message loading header UI and infinite scroll logic from SessionChat into HappyThread component. This improves component isolation and adds IntersectionObserver-based automatic loading with proper scroll position preservation and error handling.
The settings popup in HappyComposer did not show any option selected when
permissionMode or modelMode was null, since destructuring defaults only
handle undefined, not null. This fix uses the ?? operator to properly
handle both null and undefined cases, falling back to 'default' in both.
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.
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.
- 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
- 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
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
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)
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.
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.
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.
- 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
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
- 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.
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.
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.
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.
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
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.
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.
weishu