)]}'
{
  "commit": "e68613d5105c86652d5287102e1bd4ad0859b781",
  "tree": "ed2b409f2c3649ae0afc14cc3df31c89382106eb",
  "parents": [
    "e0a9f7252a39c66ffa409daa9fd0ac5c6b08a100"
  ],
  "author": {
    "name": "Sean McCullough",
    "email": "banksean@gmail.com",
    "time": "Wed Jun 18 14:48:53 2025 +0000"
  },
  "committer": {
    "name": "Autoformatter",
    "email": "bot@sketch.dev",
    "time": "Wed Jun 18 23:44:00 2025 +0000"
  },
  "message": "webui: implement viewport-based message rendering in sketch-timeline\n\nAdd viewport-based rendering to SketchTimeline component to optimize performance\nwith large conversation histories by only rendering messages in current viewport.\n\nImplementation Changes:\n\n1. Viewport Management:\n   - Add initialMessageCount property (default: 30) to control initial render\n   - Add loadChunkSize property (default: 20) for batch loading older messages\n   - Add visibleMessageStartIndex state to track current viewport window\n   - Add isLoadingOlderMessages state to prevent concurrent load operations\n\n2. Message Filtering and Windowing:\n   - Create filteredMessages getter to exclude hidden messages\n   - Create visibleMessages getter to return current viewport slice\n   - Implement loadOlderMessages() to expand viewport window on scroll\n   - Preserve scroll position when prepending older messages\n\n3. Scroll-Based Loading:\n   - Add loadMoreThreshold property (100px from top) for trigger distance\n   - Enhance _handleScroll() to detect near-top scroll and trigger loading\n   - Add loading indicator with spinner for older message loading states\n   - Maintain existing \u0027pinToLatest\u0027 and \u0027floating\u0027 scroll behaviors\n\n4. Updated Rendering Logic:\n   - Replace direct messages.filter() with visibleMessages getter\n   - Add loading indicator rendering above message list\n   - Preserve message key generation for efficient re-rendering\n   - Maintain proper previousMessage calculation for filtered messages\n\n5. Lifecycle Management:\n   - Reset viewport window on significant message changes\n   - Preserve scroll-to-bottom behavior for new messages\n   - Handle edge cases for empty messages and initial load states\n\nTechnical Details:\n- Uses slice-based windowing instead of full virtual scrolling for simplicity\n- Implements scroll position preservation using scrollHeight differences\n- Maintains efficient message key generation for Lit\u0027s repeat directive\n- Preserves all existing timeline functionality and styling\n- Loading indicator appears only during older message fetching operations\n\nBenefits:\n- Significant performance improvement for large conversation histories\n- Reduced initial render time by limiting message count\n- Progressive loading maintains responsive UI during scroll\n- Maintains existing scroll behaviors and user experience\n- Memory usage scales with viewport size rather than total messages\n\nThis implements the requested viewport-based rendering while preserving all\nexisting SketchTimeline functionality and user experience patterns.\n\nCo-Authored-By: sketch \u003chello@sketch.dev\u003e\nChange-ID: sbe64498bdb5fd1cck\n\nwebui: fix viewport rendering to always show most recent messages initially\n\nFix viewport calculation logic in SketchTimeline to ensure the most recent\nmessages are always displayed on initial load, addressing issue where first\nmessages were shown instead of latest ones.\n\nRoot Cause:\nThe original viewport calculation used subtraction logic that was prone to\nshowing older messages when the viewport state wasn\u0027t properly initialized\nor when messages loaded incrementally.\n\nImplementation Changes:\n\n1. Simplified Viewport Logic:\n   - Replace complex subtraction-based calculation with direct slice approach\n   - Use \u0027totalVisible \u003d initialMessageCount + visibleMessageStartIndex\u0027\n   - Calculate startIndex as \u0027max(0, filteredMessages.length - totalVisible)\u0027\n   - Always slice from startIndex to end to show most recent messages\n\n2. Enhanced Viewport Reset Logic:\n   - Trigger viewport reset for large message count changes (\u003e20 difference)\n   - Reset viewport on initial load (oldMessages.length \u003d\u003d\u003d 0)\n   - Reset viewport when message count decreases (session change)\n\n3. Added Public Reset Method:\n   - Add resetViewport() public method for external viewport reset\n   - Useful for app shell to call when loading new sessions\n   - Updated demo to demonstrate manual viewport reset\n\n4. Improved Demo:\n   - Add expected message range display in demo info\n   - Add viewport reset button for testing\n   - Call resetViewport() on message generation for consistent behavior\n\nTechnical Details:\n- Viewport now correctly shows messages [N-30, N] initially for N total messages\n- Scroll-up loading expands to show [N-30-X, N] where X is loaded chunk size\n- Eliminates race conditions between message loading and viewport calculation\n- Maintains all existing scroll behaviors and performance optimizations\n\nThis ensures users always see the most recent conversation content when\nloading sessions with large message histories, matching expected chat UX.\n\nCo-Authored-By: sketch \u003chello@sketch.dev\u003e\nChange-ID: s56dda43278ce4d5bk\n\nwebui: fix scroll container height and demo setup for viewport rendering\n\nFix scroll container CSS and demo JavaScript to enable proper scrolling and\nviewport testing in the sketch-timeline component.\n\nCSS Fix:\n- Add \u0027height: 100%\u0027 to #scroll-container to properly constrain container height\n- Enables overflow scrolling when content exceeds available space\n- Fixes issue where scrollHeight \u003d\u003d\u003d clientHeight prevented scrolling\n\nDemo Setup Fix:\n- Correct scrollContainer property setup using shadow DOM reference\n- Wait for component render before setting scroll container reference\n- Use proper Lit Ref pattern: { value: scrollContainerElement }\n- Add console logging for debugging scroll container setup\n\nTesting Results:\n- Viewport rendering now works correctly with 500+ messages\n- Initial load shows most recent 20 messages (e.g., 481-500 for 500 total)\n- Scroll-up loading successfully expands viewport (20 → 30 → 40 messages)\n- Proper scroll position preservation when loading older messages\n- Jump-to-latest button appears when not pinned to bottom\n\nThis fixes the demo functionality and confirms viewport rendering works as\ndesigned for performance optimization with large conversation histories.\n\nCo-Authored-By: sketch \u003chello@sketch.dev\u003e\nChange-ID: s998bb29cf9f06291k\n\nwebui: eliminate setTimeout in viewport demo for reliable initialization\n\nReplace setTimeout-based initialization with proper event-driven setup using\nMutationObserver and Lit\u0027s updateComplete promise for robust demo functionality.\n\nProblems with setTimeout Approach:\n- Race conditions between component rendering and scroll setup\n- Arbitrary delays cause flakiness in different environments\n- No guarantee that shadow DOM or scroll container exists after timeout\n- Unreliable for automated testing or slower systems\n\nImproved Event-Driven Approach:\n\n1. MutationObserver Pattern:\n   - Watch for shadow DOM creation using MutationObserver\n   - Disconnect observer once shadow DOM is detected\n   - Eliminates timing-based guesswork\n\n2. Lit updateComplete Promise:\n   - Use timeline.updateComplete to ensure full component render\n   - Promise-based approach guarantees completion before setup\n   - Handles both initial render and re-renders reliably\n\n3. Robust Fallback Strategy:\n   - Try immediate setup first (component may already be ready)\n   - Use MutationObserver for shadow DOM detection\n   - Apply updateComplete promise for render completion\n   - Multiple strategies ensure setup works in all scenarios\n\n4. Promise-Based Message Generation:\n   - Use updateComplete in generateMessages() for reliable info updates\n   - Ensure scroll container setup after each message array change\n   - Eliminates race between message updates and UI state\n\nTesting Results:\n- Reliable setup across page reloads and component re-initialization\n- Consistent scroll container configuration without timing issues\n- Proper viewport loading functionality (20→30 messages on scroll up)\n- No console errors or failed setup attempts\n\nThis eliminates demo flakiness and provides a robust example of proper\nLit component initialization patterns for complex shadow DOM interactions.\n\nCo-Authored-By: sketch \u003chello@sketch.dev\u003e\nChange-ID: s6b897544f3af8454k\n\nwebui: fix memory leaks and race conditions in sketch-timeline scroll handling\n\nImplement proper event listener cleanup and debounced scroll handling to prevent\nmemory leaks and race conditions in SketchTimeline incremental rendering.\n\nMemory Leak Fixes:\n\n1. Scroll Container Tracking:\n   - Add currentScrollContainer property to track active scroll listener\n   - Implement addScrollListener() with automatic cleanup of previous listeners\n   - Implement removeScrollListener() with guaranteed cleanup\n   - Replace fragile scrollContainer.value?.removeEventListener with tracked cleanup\n\n2. Event Listener Lifecycle:\n   - Ensure proper cleanup in disconnectedCallback() using removeScrollListener()\n   - Handle scrollContainer property changes with proper cleanup sequence\n   - Add scroll timeout cleanup to prevent lingering timers\n   - Track and clean up scroll container references to prevent stale listeners\n\nRace Condition Prevention:\n\n3. Debounced Scroll Handling:\n   - Add scrollTimeout property to debounce scroll events\n   - Implement 100ms debounce for loadOlderMessages() calls\n   - Maintain immediate scroll state updates for responsive UI\n   - Clear pending timeouts during cleanup to prevent memory leaks\n\n4. Loading State Protection:\n   - Add comprehensive error handling in loadOlderMessages()\n   - Implement 5-second timeout fallback to prevent stuck loading state\n   - Add bounds checking for visibleMessageStartIndex calculation\n   - Use try-catch blocks for scroll position restoration\n\n5. Robust Error Recovery:\n   - Check container.isConnected before DOM manipulation\n   - Add fallback timeout to reset loading state if updateComplete fails\n   - Log warnings for debugging without breaking functionality\n   - Ensure isLoadingOlderMessages always gets reset\n\nTechnical Implementation:\n- Uses proper TypeScript typing with HTMLElement | null for container tracking\n- Implements window.setTimeout for proper timeout management\n- Maintains all existing scroll behavior while preventing memory leaks\n- Preserves scroll position restoration with error recovery\n- Compatible with existing viewport rendering functionality\n\nTesting:\n- Add testMemoryLeakFix() function to viewport demo for validation\n- Verify cleanup happens correctly during scroll container changes\n- Confirm no lingering event listeners after component disconnection\n- Test loading state timeout recovery mechanisms\n\nThis resolves the critical memory leak issues identified in the timeline\ncomponent while maintaining all existing functionality and user experience.\n\nCo-Authored-By: sketch \u003chello@sketch.dev\u003e\nChange-ID: seb56a936de452cefk\n\nwebui: enhance memory leak test in timeline viewport demo\n\nAdd comprehensive test for scroll event listener cleanup validation with\nimproved logging and multiple cleanup scenarios for testing memory leak fixes.\n\nCo-Authored-By: sketch \u003chello@sketch.dev\u003e\nChange-ID: sd1928398dca67ad9k\n\nwebui: eliminate race conditions in sketch-timeline scroll handling and loading operations\n\nImplement comprehensive race condition prevention in SketchTimeline incremental\nrendering with async loading operations and proper state management.\n\nRace Condition Fixes:\n\n1. Async Loading Operations:\n   - Convert loadOlderMessages() to async/await pattern for proper sequencing\n   - Add currentLoadingOperation tracking to prevent concurrent loads\n   - Implement executeScrollPositionRestoration() with proper error handling\n   - Use Promise-based DOM update waiting instead of fire-and-forget callbacks\n\n2. Loading State Management:\n   - Add cancelCurrentLoadingOperation() method for safe operation cancellation\n   - Implement clearAllPendingOperations() to clean up all timeouts and operations\n   - Add loadingTimeoutId tracking for proper timeout cleanup\n   - Add pendingScrollRestoration tracking for cancellable scroll operations\n\n3. Scroll Container Validation:\n   - Add isStableForLoading() method to validate component state before operations\n   - Verify scroll container hasn\u0027t changed during async operations\n   - Check container.isConnected before DOM manipulation\n   - Validate container matches currentScrollContainer throughout operation lifecycle\n\n4. Property Change Coordination:\n   - Cancel loading operations when scrollContainer property changes\n   - Cancel operations during significant message array changes\n   - Handle viewport resets during loading with proper state cleanup\n   - Prevent scroll-to-bottom during loading operations to avoid conflicts\n\n5. Enhanced Scroll Position Restoration:\n   - Add comprehensive validation for scroll calculations before applying\n   - Implement bounds checking for scroll position values\n   - Add debug logging for invalid restoration attempts\n   - Ensure restoration only happens if calculations are mathematically valid\n\n6. Component Lifecycle Protection:\n   - Cancel loading operations in disconnectedCallback() before cleanup\n   - Handle rapid property changes without state corruption\n   - Prevent operations on disconnected or invalid containers\n   - Ensure all timeouts and promises are cleaned up during disconnection\n\nTechnical Implementation:\n- Uses async/await throughout loading pipeline for proper sequencing\n- Implements operation cancellation with proper cleanup guarantees\n- Added container stability checks before all DOM operations\n- Uses typed Promise returns for better error handling\n- Maintains backward compatibility with existing scroll behavior\n\nTesting Enhancements:\n- Add testRaceConditions() function to demo for validation\n- Test rapid viewport resets, container changes, and message updates\n- Verify graceful handling of component state changes during loading\n- Validate proper cleanup during simulated disconnection scenarios\n\nBenefits:\n- Eliminates concurrent loading operations that could corrupt state\n- Prevents scroll position restoration conflicts and invalid calculations\n- Ensures consistent component state during rapid user interactions\n- Provides robust error recovery for all async operations\n- Maintains responsive UI while preventing race-related bugs\n\nThis resolves all identified race conditions while preserving existing\nfunctionality and improving overall component reliability and performance.\n\nCo-Authored-By: sketch \u003chello@sketch.dev\u003e\nChange-ID: sc0c567cfff13ae3fk\n\nwebui: replace setTimeout with event-driven patterns in sketch-timeline\n\nEliminate setTimeout dependencies in favor of proper event-driven and async/await\npatterns for more reliable and performant timeline operations.\n\nEvent-Driven Replacements:\n\n1. Scroll Debouncing:\n   - Replace setTimeout-based debouncing with requestAnimationFrame\n   - Use scrollDebounceFrame with cancelAnimationFrame for smooth performance\n   - Eliminate arbitrary 100ms delays in favor of browser-optimized frame timing\n   - Maintain responsive UI updates while preventing excessive loading calls\n\n2. Loading Operation Management:\n   - Replace setTimeout fallback with AbortController for proper cancellation\n   - Add loadingAbortController for clean operation abortion\n   - Implement signal-based cancellation throughout loading pipeline\n   - Remove 5-second timeout fallback in favor of proper Promise rejection handling\n\n3. Scroll Position Restoration:\n   - Replace setTimeout retry logic with ResizeObserver-based content detection\n   - Add waitForContentReady() using ResizeObserver to detect when DOM is ready\n   - Use requestAnimationFrame for frame-perfect scroll position updates\n   - Eliminate arbitrary delays and retry intervals\n\n4. Auto-Scroll to Bottom:\n   - Replace setTimeout-based retry with MutationObserver approach\n   - Use scrollToBottomWithRetry() with event-driven content change detection\n   - Implement requestAnimationFrame for smooth scroll operations\n   - Remove hardcoded retry intervals and attempt limits\n\n5. Component Lifecycle:\n   - Add disconnectObservers() for proper cleanup of ResizeObserver and MutationObserver\n   - Replace clearTimeout calls with cancelAnimationFrame and AbortController.abort()\n   - Ensure all async operations can be properly cancelled during component lifecycle\n\nTechnical Benefits:\n- Uses browser-native APIs (ResizeObserver, MutationObserver, AbortController)\n- Eliminates race conditions from setTimeout timing assumptions\n- Provides frame-perfect animations with requestAnimationFrame\n- Enables proper cancellation of async operations with AbortController\n- Reduces arbitrary delays and improves perceived performance\n\nImplementation Details:\n- AbortController provides clean cancellation semantics for loading operations\n- ResizeObserver detects content changes without polling or timeouts\n- MutationObserver monitors DOM changes for scroll position adjustments\n- requestAnimationFrame ensures operations happen at optimal frame timing\n- All observers are created on-demand and properly cleaned up\n\nTesting Enhancements:\n- Add testEventDriven() function to validate no setTimeout usage\n- Test AbortController availability and proper operation cancellation\n- Verify ResizeObserver, MutationObserver, and requestAnimationFrame support\n- Monitor setTimeout calls during operations to ensure elimination\n\nThis modernizes the timeline component to use proper browser APIs instead of\nsetTimeout workarounds, improving reliability and performance while eliminating\ntiming-based race conditions.\n\nCo-Authored-By: sketch \u003chello@sketch.dev\u003e\nChange-ID: se869d73b455454a5k\n",
  "tree_diff": [
    {
      "type": "add",
      "old_id": "0000000000000000000000000000000000000000",
      "old_mode": 0,
      "old_path": "/dev/null",
      "new_id": "b410957a44ea82dc0ff9be6b82823fcd682cd580",
      "new_mode": 33188,
      "new_path": "webui/src/web-components/demo/sketch-timeline-viewport.demo.html"
    },
    {
      "type": "modify",
      "old_id": "c450330076f715a63c5cc1fd30cd02b3df0510d3",
      "old_mode": 33188,
      "old_path": "webui/src/web-components/sketch-timeline.ts",
      "new_id": "5dae38a2ecbd92015c594fa2d2c316cc957ddf2e",
      "new_mode": 33188,
      "new_path": "webui/src/web-components/sketch-timeline.ts"
    }
  ]
}