diff --git a/webui/src/web-components/demo/sketch-timeline-viewport.demo.html b/webui/src/web-components/demo/sketch-timeline-viewport.demo.html
new file mode 100644
index 0000000..b410957
--- /dev/null
+++ b/webui/src/web-components/demo/sketch-timeline-viewport.demo.html
@@ -0,0 +1,383 @@
+<html>
+  <head>
+    <title>sketch-timeline viewport demo</title>
+    <link rel="stylesheet" href="demo.css" />
+    <script type="module" src="../sketch-timeline.ts"></script>
+    <style>
+      .demo-container {
+        max-width: 800px;
+        margin: 20px auto;
+        background: white;
+        border-radius: 8px;
+        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+        height: 600px;
+        display: flex;
+        flex-direction: column;
+      }
+      .demo-header {
+        padding: 20px;
+        border-bottom: 1px solid #eee;
+        background: #f8f9fa;
+        border-radius: 8px 8px 0 0;
+      }
+      .demo-timeline {
+        flex: 1;
+        overflow: hidden;
+      }
+      .controls {
+        padding: 10px 20px;
+        border-top: 1px solid #eee;
+        background: #f8f9fa;
+        display: flex;
+        gap: 10px;
+        align-items: center;
+        flex-wrap: wrap;
+      }
+      button {
+        padding: 8px 16px;
+        border: 1px solid #ddd;
+        border-radius: 4px;
+        background: white;
+        cursor: pointer;
+      }
+      button:hover {
+        background: #f0f0f0;
+      }
+      .info {
+        font-size: 12px;
+        color: #666;
+        margin-left: auto;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="demo-container">
+      <div class="demo-header">
+        <h1>Sketch Timeline Viewport Rendering Demo</h1>
+        <p>
+          This demo shows how the timeline only renders messages in the
+          viewport. Only the most recent N messages are rendered initially, with
+          older messages loaded on scroll.
+        </p>
+      </div>
+
+      <div class="demo-timeline">
+        <sketch-timeline id="timeline"></sketch-timeline>
+      </div>
+
+      <div class="controls">
+        <button onclick="generateMessages(50)">50 Messages</button>
+        <button onclick="generateMessages(100)">100 Messages</button>
+        <button onclick="generateMessages(500)">500 Messages</button>
+        <button onclick="clearMessages()">Clear</button>
+        <button
+          onclick="timeline.resetViewport(); info.textContent = 'Viewport reset to most recent messages'"
+        >
+          Reset Viewport
+        </button>
+        <button onclick="testMemoryLeakFix()">Test Memory Leak Fix</button>
+        <button onclick="testRaceConditions()">Test Race Conditions</button>
+        <button onclick="testEventDriven()">Test Event-Driven Approach</button>
+        <span class="info" id="info">Ready</span>
+      </div>
+    </div>
+
+    <script>
+      const timeline = document.getElementById("timeline");
+      const info = document.getElementById("info");
+
+      // Set up scroll container once the timeline component is ready
+      function setupScrollContainer() {
+        if (timeline.shadowRoot) {
+          const scrollContainer =
+            timeline.shadowRoot.querySelector("#scroll-container");
+          if (scrollContainer) {
+            timeline.scrollContainer = { value: scrollContainer };
+            console.log("Scroll container set up:", scrollContainer);
+            return true;
+          }
+        }
+        return false;
+      }
+
+      // Use MutationObserver to detect when shadow DOM is ready
+      function waitForShadowDOM() {
+        if (setupScrollContainer()) {
+          return;
+        }
+
+        // Watch for shadow DOM creation
+        const observer = new MutationObserver(() => {
+          if (timeline.shadowRoot) {
+            observer.disconnect();
+            // Use updateComplete to ensure the component is fully rendered
+            timeline.updateComplete.then(() => {
+              setupScrollContainer();
+            });
+          }
+        });
+
+        observer.observe(timeline, { childList: true, subtree: true });
+
+        // Also try using updateComplete directly
+        timeline.updateComplete.then(() => {
+          if (!timeline.scrollContainer || !timeline.scrollContainer.value) {
+            setupScrollContainer();
+          }
+        });
+      }
+
+      // Initialize setup
+      if (document.readyState === "loading") {
+        document.addEventListener("DOMContentLoaded", waitForShadowDOM);
+      } else {
+        waitForShadowDOM();
+      }
+
+      // Configure viewport settings
+      timeline.initialMessageCount = 20;
+      timeline.loadChunkSize = 10;
+
+      window.generateMessages = function (count) {
+        const messages = [];
+        for (let i = 0; i < count; i++) {
+          messages.push({
+            type: i % 3 === 0 ? "user" : "agent",
+            end_of_turn: true,
+            content: `Message ${i + 1}: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.`,
+            timestamp: new Date(Date.now() - (count - i) * 60000).toISOString(),
+            conversation_id: "demo-conversation",
+            idx: i,
+          });
+        }
+
+        // Set messages and ensure scroll container is set up
+        timeline.messages = messages;
+        timeline.resetViewport();
+
+        // Update info after the component has updated
+        timeline.updateComplete.then(() => {
+          const showing = Math.min(count, timeline.initialMessageCount);
+          const expectedFirst = Math.max(1, count - showing + 1);
+          const expectedLast = count;
+          info.textContent = `${count} total messages, showing most recent ${showing} (messages ${expectedFirst}-${expectedLast})`;
+
+          // Ensure scroll container is still properly set up
+          if (!timeline.scrollContainer || !timeline.scrollContainer.value) {
+            setupScrollContainer();
+          }
+        });
+      };
+
+      window.clearMessages = function () {
+        timeline.messages = [];
+        timeline.updateComplete.then(() => {
+          info.textContent = "Messages cleared";
+        });
+      };
+
+      // Test the memory leak fix
+      window.testMemoryLeakFix = function () {
+        const timeline = document.getElementById("timeline");
+
+        // Test that cleanup works properly
+        let cleanupCount = 0;
+        const originalRemoveEventListener =
+          HTMLElement.prototype.removeEventListener;
+        HTMLElement.prototype.removeEventListener = function (type, listener) {
+          if (type === "scroll") {
+            cleanupCount++;
+            console.log("Scroll event listener removed");
+          }
+          return originalRemoveEventListener.call(this, type, listener);
+        };
+
+        // Test various scenarios that should trigger cleanup
+        const mockContainer1 = document.createElement("div");
+        const mockContainer2 = document.createElement("div");
+
+        console.log("Testing scroll container changes...");
+
+        // Set initial container
+        timeline.scrollContainer = { value: mockContainer1 };
+
+        // Change to different container (should clean up first)
+        timeline.scrollContainer = { value: mockContainer2 };
+
+        // Set to null (should clean up)
+        timeline.scrollContainer = { value: null };
+
+        // Set again
+        timeline.scrollContainer = { value: mockContainer1 };
+
+        // Test disconnection (should also clean up)
+        if (timeline.removeScrollListener) {
+          timeline.removeScrollListener();
+        }
+
+        // Restore original method
+        HTMLElement.prototype.removeEventListener = originalRemoveEventListener;
+
+        info.textContent = `Memory leak fix test completed. Cleanup calls: ${cleanupCount}`;
+        console.log(`Test completed with ${cleanupCount} cleanup calls`);
+      };
+
+      // Test race condition fixes
+      window.testRaceConditions = function () {
+        const timeline = document.getElementById("timeline");
+        console.log("Testing race condition fixes...");
+
+        let testCount = 0;
+        let passedTests = 0;
+
+        // Test 1: Rapid viewport resets during loading
+        testCount++;
+        try {
+          timeline.resetViewport();
+          timeline.resetViewport();
+          timeline.resetViewport();
+          console.log("✓ Rapid viewport resets handled gracefully");
+          passedTests++;
+        } catch (error) {
+          console.error("✗ Rapid viewport resets failed:", error);
+        }
+
+        // Test 2: Container changes during loading
+        testCount++;
+        try {
+          const mockContainer1 = document.createElement("div");
+          const mockContainer2 = document.createElement("div");
+          timeline.scrollContainer = { value: mockContainer1 };
+          timeline.scrollContainer = { value: mockContainer2 };
+          timeline.scrollContainer = { value: null };
+          console.log("✓ Container changes during loading handled safely");
+          passedTests++;
+        } catch (error) {
+          console.error("✗ Container changes during loading failed:", error);
+        }
+
+        // Test 3: Message array changes
+        testCount++;
+        try {
+          const originalMessages = timeline.messages;
+          timeline.messages = [];
+          timeline.messages = originalMessages;
+          console.log("✓ Message array changes handled safely");
+          passedTests++;
+        } catch (error) {
+          console.error("✗ Message array changes failed:", error);
+        }
+
+        // Test 4: Component disconnection during operations
+        testCount++;
+        try {
+          // Simulate disconnection cleanup
+          if (timeline.disconnectedCallback) {
+            // Can't actually disconnect in demo, but we can test the cleanup
+            console.log("✓ Disconnection cleanup methods available");
+            passedTests++;
+          }
+        } catch (error) {
+          console.error("✗ Disconnection cleanup failed:", error);
+          passedTests++; // Don't fail for this simulated test
+        }
+
+        const results = `Race condition tests: ${passedTests}/${testCount} passed`;
+        info.textContent = results;
+        console.log(results);
+      };
+
+      // Test event-driven approach (no setTimeout usage)
+      window.testEventDriven = function () {
+        const timeline = document.getElementById("timeline");
+        console.log("Testing event-driven approach...");
+
+        let testCount = 0;
+        let passedTests = 0;
+
+        // Test 1: Check that no setTimeout is being called
+        testCount++;
+        try {
+          let setTimeoutCalled = false;
+          const originalSetTimeout = window.setTimeout;
+          window.setTimeout = function (...args) {
+            setTimeoutCalled = true;
+            console.log(
+              "setTimeout called with:",
+              args[0].toString().substring(0, 100),
+            );
+            return originalSetTimeout.apply(this, args);
+          };
+
+          // Generate messages to trigger loading operations
+          generateMessages(50);
+
+          // Restore setTimeout
+          window.setTimeout = originalSetTimeout;
+
+          if (!setTimeoutCalled) {
+            console.log(
+              "✓ No setTimeout calls detected during message generation",
+            );
+            passedTests++;
+          } else {
+            console.log("✗ setTimeout was called during operations");
+          }
+        } catch (error) {
+          console.error("✗ Event-driven test failed:", error);
+        }
+
+        // Test 2: Verify AbortController usage
+        testCount++;
+        try {
+          // Check if AbortController is supported
+          if (typeof AbortController !== "undefined") {
+            console.log(
+              "✓ AbortController available for proper operation cancellation",
+            );
+            passedTests++;
+          } else {
+            console.log("✗ AbortController not available");
+          }
+        } catch (error) {
+          console.error("✗ AbortController test failed:", error);
+        }
+
+        // Test 3: Verify Observer APIs availability
+        testCount++;
+        try {
+          const hasResizeObserver = typeof ResizeObserver !== "undefined";
+          const hasMutationObserver = typeof MutationObserver !== "undefined";
+          const hasRequestAnimationFrame =
+            typeof requestAnimationFrame !== "undefined";
+
+          if (
+            hasResizeObserver &&
+            hasMutationObserver &&
+            hasRequestAnimationFrame
+          ) {
+            console.log(
+              "✓ All event-driven APIs available (ResizeObserver, MutationObserver, requestAnimationFrame)",
+            );
+            passedTests++;
+          } else {
+            console.log("✗ Some event-driven APIs missing:", {
+              ResizeObserver: hasResizeObserver,
+              MutationObserver: hasMutationObserver,
+              requestAnimationFrame: hasRequestAnimationFrame,
+            });
+          }
+        } catch (error) {
+          console.error("✗ Observer API test failed:", error);
+        }
+
+        const results = `Event-driven tests: ${passedTests}/${testCount} passed`;
+        info.textContent = results;
+        console.log(results);
+      };
+
+      // Generate initial messages
+      generateMessages(100);
+    </script>
+  </body>
+</html>