Add ability to resume inactive sessions and automatically continue with new
session ID. Includes message merging for preserving conversation history,
UI improvements to allow sending during inactive state, and database schema
migration. close#87
The IntersectionObserver's useEffect had handleLoadMore in its dependency
array, but handleLoadMore depended on isLoadingMoreMessages. When loading
completed, isLoadingMoreMessages changed, causing handleLoadMore to be
recreated and the observer to rebuild, immediately firing again and
triggering continuous load requests.
Fixed by storing handleLoadMore in a ref and removing it from the
IntersectionObserver's dependency array, allowing it to rebuild only when
hasMoreMessages or isLoadingMessages change.
Introduces a new message-window-store module to manage message state with
automatic windowing of visible and pending messages. This replaces manual
React Query cache operations with a centralized, observable state system.
close#39
Key changes:
- New MessageWindowState tracks visible/pending messages with size limits
- Automatic trimming of message windows (400 visible, 200 pending messages)
- Pending message buffering when user scrolls away from bottom
- Centralized status updates for optimistic messages
- Thread component simplified with forwarded scroll and pending callbacks
- Removes message count tracking from components
This improves performance for chats with many messages and provides a
cleaner separation of concerns between UI and state management.
Add hasBootstrappedRef to track component initialization and prevent
counting messages during the initial render. This fixes the new message
counter behavior when messages load on component mount and ensures
accurate message tracking when autoScroll is disabled.
- 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.
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
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.
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.
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.
