diff --git a/loop/webui/src/web-components/demo/sketch-timeline.demo.html b/loop/webui/src/web-components/demo/sketch-timeline.demo.html
index f8b7ad4..be8ab8e 100644
--- a/loop/webui/src/web-components/demo/sketch-timeline.demo.html
+++ b/loop/webui/src/web-components/demo/sketch-timeline.demo.html
@@ -6,7 +6,6 @@
       src="/dist/web-components/sketch-timeline.js"
       type="module"
     ></script>
-
     <script>
       const messages = [
         {
@@ -33,16 +32,121 @@
           type: "user",
           content: "a user message",
         },
+        {
+          type: "agent",
+          content: "an agent message",
+        },
+        {
+          type: "user",
+          content: "a user message",
+        },
+        {
+          type: "tool",
+          content: "a tool use message",
+        },
+        {
+          type: "commit",
+          end_of_turn: false,
+          content: "",
+          commits: [
+            {
+              hash: "ece101c103ec231da87f4df05c1b5e6a24e13add",
+              subject: "Add README.md for web components directory",
+              body: "This adds documentation for the web components used in the Loop UI,\nincluding a description of each component, usage examples, and\ndevelopment guidelines.\n\nCo-Authored-By: sketch\nadd README.md for loop/webui/src/web-components",
+              pushed_branch:
+                "sketch/create-readmemd-for-web-components-directory",
+            },
+          ],
+          timestamp: "2025-04-14T16:39:33.639533919Z",
+          conversation_id: "",
+          idx: 17,
+        },
+        {
+          type: "agent",
+          content: "an end-of-turn agent message",
+          end_of_turn: true,
+        },
       ];
+
       document.addEventListener("DOMContentLoaded", () => {
+        const appShell = document.querySelector(".app-shell");
         const timelineEl = document.querySelector("sketch-timeline");
         timelineEl.messages = messages;
+        timelineEl.scrollContainer = appShell;
+        const addMessagesCheckbox = document.querySelector("#addMessages");
+        addMessagesCheckbox.addEventListener("change", toggleAddMessages);
+
+        let addingMessages = false;
+        const addNewMessagesInterval = 1000;
+
+        function addNewMessages() {
+          if (!addingMessages) {
+            return;
+          }
+          const n = new Date().getMilliseconds() % messages.length;
+          const msgToDup = messages[n];
+          const dup = JSON.parse(JSON.stringify(msgToDup));
+          dup.idx = messages.length;
+          dup.timestamp = new Date().toISOString();
+          messages.push(dup);
+          timelineEl.messages = messages.concat();
+          timelineEl.prop;
+          timelineEl.requestUpdate();
+        }
+
+        let addMessagesHandler = setInterval(
+          addNewMessages,
+          addNewMessagesInterval,
+        );
+
+        function toggleAddMessages() {
+          addingMessages = !addingMessages;
+          if (addingMessages) {
+          } else {
+          }
+        }
       });
     </script>
+    <style>
+      .app-shell {
+        display: block;
+        font-family:
+          system-ui,
+          -apple-system,
+          BlinkMacSystemFont,
+          "Segoe UI",
+          Roboto,
+          sans-serif;
+        color: rgb(51, 51, 51);
+        line-height: 1.4;
+        min-height: 100vh;
+        width: 100%;
+        position: relative;
+        overflow-x: hidden;
+      }
+      .app-header {
+        flex-grow: 0;
+      }
+      .view-container {
+        flex-grow: 2;
+      }
+    </style>
   </head>
   <body>
-    <h1>sketch-timeline demo</h1>
-
-    <sketch-timeline></sketch-timeline>
+    <div class="app-shell">
+      <div class="app-header">
+        <h1>sketch-timeline demo</h1>
+        <input
+          type="checkbox"
+          id="addMessages"
+          title="Automatically add new messages"
+        /><label for="addMessages">Automatically add new messages</label>
+      </div>
+      <div class="view-container">
+        <div class="chat-view view-active">
+          <sketch-timeline></sketch-timeline>
+        </div>
+      </div>
+    </div>
   </body>
 </html>
diff --git a/loop/webui/src/web-components/sketch-app-shell.ts b/loop/webui/src/web-components/sketch-app-shell.ts
index 4dcb251..62bcd03 100644
--- a/loop/webui/src/web-components/sketch-app-shell.ts
+++ b/loop/webui/src/web-components/sketch-app-shell.ts
@@ -1,6 +1,5 @@
 import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
-import { PropertyValues } from "lit";
 import { DataManager, ConnectionStatus } from "../data";
 import { State, TimelineMessage, ToolCall } from "../types";
 import "./sketch-container-status";
@@ -193,10 +192,6 @@
   @state()
   private isFirstLoad: boolean = true;
 
-  // Track if we should scroll to the bottom
-  @state()
-  private shouldScrollToBottom: boolean = true;
-
   // Mutation observer to detect when new messages are added
   private mutationObserver: MutationObserver | null = null;
 
@@ -520,13 +515,10 @@
     if (isFirstFetch) {
       console.log("Auto-scroll: First data fetch, will scroll to bottom");
       this.isFirstLoad = true;
-      this.shouldScrollToBottom = true;
       this.messageStatus = "Initial messages loaded";
     } else if (newMessages && newMessages.length > 0) {
       console.log(`Auto-scroll: Received ${newMessages.length} new messages`);
       this.messageStatus = "Updated just now";
-      // Check if we should scroll before updating messages
-      this.shouldScrollToBottom = this.checkShouldScroll();
     } else {
       this.messageStatus = "No new messages";
     }
@@ -546,7 +538,7 @@
     // Log information about the message update
     if (this.messages.length > oldMessageCount) {
       console.log(
-        `Auto-scroll: Messages updated from ${oldMessageCount} to ${this.messages.length}, shouldScroll=${this.shouldScrollToBottom}`,
+        `Auto-scroll: Messages updated from ${oldMessageCount} to ${this.messages.length}`,
       );
     }
   }
@@ -588,10 +580,6 @@
       (this.dataManager as any).nextFetchIndex = 0;
       (this.dataManager as any).currentFetchStartIndex = 0;
 
-      // Always scroll to bottom after sending a message
-      console.log("Auto-scroll: User sent a message, forcing scroll to bottom");
-      this.shouldScrollToBottom = true;
-
       // // If in diff view, switch to conversation view
       // if (this.viewMode === "diff") {
       //   await this.toggleViewMode("chat");
@@ -599,30 +587,6 @@
 
       // Refresh the timeline data to show the new message
       await this.dataManager.fetchData();
-
-      // Force multiple scroll attempts to ensure the user message is visible
-      // This addresses potential timing issues with DOM updates
-      const forceScrollAttempts = () => {
-        console.log("Auto-scroll: Forcing scroll after user message");
-        this.shouldScrollToBottom = true;
-
-        // Update the timeline component's scroll state
-        const timeline = this.shadowRoot?.querySelector(
-          "sketch-timeline",
-        ) as any;
-        if (timeline && timeline.setShouldScrollToLatest) {
-          timeline.setShouldScrollToLatest(true);
-          timeline.scrollToLatest();
-        } else {
-          this.scrollToBottom();
-        }
-      };
-
-      // Make multiple scroll attempts with different timings
-      // This ensures we catch the DOM after various update stages
-      setTimeout(forceScrollAttempts, 100);
-      setTimeout(forceScrollAttempts, 300);
-      setTimeout(forceScrollAttempts, 600);
     } catch (error) {
       console.error("Error sending chat message:", error);
       const statusText = document.getElementById("statusText");
@@ -666,7 +630,10 @@
 
       <div class="view-container">
         <div class="chat-view ${this.viewMode === "chat" ? "view-active" : ""}">
-          <sketch-timeline .messages=${this.messages}></sketch-timeline>
+          <sketch-timeline
+            .messages=${this.messages}
+            .scrollContainer=${this}
+          ></sketch-timeline>
         </div>
 
         <div class="diff-view ${this.viewMode === "diff" ? "view-active" : ""}">
@@ -698,48 +665,6 @@
   }
 
   /**
-   * Check if the page should scroll to the bottom based on current view position
-   * @returns Boolean indicating if we should scroll to the bottom
-   */
-  private checkShouldScroll(): boolean {
-    // If we're not in chat view, don't auto-scroll
-    if (this.viewMode !== "chat") {
-      return false;
-    }
-
-    // More generous threshold - if we're within 500px of the bottom, auto-scroll
-    // This ensures we start scrolling sooner when new messages appear
-    const scrollPosition = window.scrollY;
-    const windowHeight = window.innerHeight;
-    const documentHeight = document.body.scrollHeight;
-    const distanceFromBottom = documentHeight - (scrollPosition + windowHeight);
-    const threshold = 500; // Increased threshold to be more responsive
-
-    return distanceFromBottom <= threshold;
-  }
-
-  /**
-   * Scroll to the bottom of the timeline
-   */
-  private scrollToBottom(): void {
-    if (!this.checkShouldScroll()) {
-      return;
-    }
-
-    this.scrollTo({ top: this.scrollHeight, behavior: "smooth" });
-  }
-
-  /**
-   * Called after the component's properties have been updated
-   */
-  updated(changedProperties: PropertyValues): void {
-    // If messages have changed, scroll to bottom if needed
-    if (changedProperties.has("messages") && this.messages.length > 0) {
-      setTimeout(() => this.scrollToBottom(), 50);
-    }
-  }
-
-  /**
    * Lifecycle callback when component is first connected to DOM
    */
   firstUpdated(): void {
diff --git a/loop/webui/src/web-components/sketch-timeline.ts b/loop/webui/src/web-components/sketch-timeline.ts
index 7471ded..7deeb97 100644
--- a/loop/webui/src/web-components/sketch-timeline.ts
+++ b/loop/webui/src/web-components/sketch-timeline.ts
@@ -1,6 +1,7 @@
 import { css, html, LitElement } from "lit";
+import { PropertyValues } from "lit";
 import { repeat } from "lit/directives/repeat.js";
-import { customElement, property } from "lit/decorators.js";
+import { customElement, property, state } from "lit/decorators.js";
 import { State, TimelineMessage } from "../types";
 import "./sketch-timeline-message";
 
@@ -9,10 +10,13 @@
   @property()
   messages: TimelineMessage[] = [];
 
-  // See https://lit.dev/docs/components/styles/ for how lit-element handles CSS.
-  // Note that these styles only apply to the scope of this web component's
-  // shadow DOM node, so they won't leak out or collide with CSS declared in
-  // other components or the containing web page (...unless you want it to do that).
+  // Track if we should scroll to the bottom
+  @state()
+  private scrollingState: "pinToLatest" | "floating" = "pinToLatest";
+
+  @property()
+  scrollContainer: HTMLDivElement;
+
   static styles = css`
     /* Hide views initially to prevent flash of content */
     .timeline-container .timeline,
@@ -57,6 +61,31 @@
     .timeline.empty::before {
       display: none;
     }
+
+    #scroll-container {
+      overflow: auto;
+      padding-left: 1em;
+    }
+    #jump-to-latest {
+      display: none;
+      position: fixed;
+      bottom: 100px;
+      right: 0;
+      background: rgb(33, 150, 243);
+      color: white;
+      border-radius: 8px;
+      padding: 0.5em;
+      margin: 0.5em;
+      font-size: x-large;
+      opacity: 0.5;
+      cursor: pointer;
+    }
+    #jump-to-latest:hover {
+      opacity: 1;
+    }
+    #jump-to-latest.floating {
+      display: block;
+    }
   `;
 
   constructor() {
@@ -64,6 +93,32 @@
 
     // Binding methods
     this._handleShowCommitDiff = this._handleShowCommitDiff.bind(this);
+    this._handleScroll = this._handleScroll.bind(this);
+  }
+
+  /**
+   * Scroll to the bottom of the timeline
+   */
+  private scrollToBottom(): void {
+    this.scrollContainer?.scrollTo({
+      top: this.scrollContainer?.scrollHeight,
+      behavior: "smooth",
+    });
+  }
+
+  /**
+   * Called after the component's properties have been updated
+   */
+  updated(changedProperties: PropertyValues): void {
+    // If messages have changed, scroll to bottom if needed
+    if (changedProperties.has("messages") && this.messages.length > 0) {
+      if (this.scrollingState == "pinToLatest") {
+        setTimeout(() => this.scrollToBottom(), 50);
+      }
+    }
+    if (changedProperties.has("scrollContainer")) {
+      this.scrollContainer?.addEventListener("scroll", this._handleScroll);
+    }
   }
 
   /**
@@ -82,6 +137,21 @@
     }
   }
 
+  private _handleScroll(event) {
+    const isAtBottom =
+      Math.abs(
+        this.scrollContainer.scrollHeight -
+          this.scrollContainer.clientHeight -
+          this.scrollContainer.scrollTop,
+      ) <= 1;
+    if (isAtBottom) {
+      this.scrollingState = "pinToLatest";
+    } else {
+      // TODO: does scroll direction matter here?
+      this.scrollingState = "floating";
+    }
+  }
+
   // See https://lit.dev/docs/components/lifecycle/
   connectedCallback() {
     super.connectedCallback();
@@ -91,6 +161,7 @@
       "showCommitDiff",
       this._handleShowCommitDiff as EventListener,
     );
+    this.scrollContainer?.addEventListener("scroll", this._handleScroll);
   }
 
   // See https://lit.dev/docs/components/lifecycle/
@@ -102,8 +173,12 @@
       "showCommitDiff",
       this._handleShowCommitDiff as EventListener,
     );
+
+    this.scrollContainer?.removeEventListener("scroll", this._handleScroll);
   }
 
+  // messageKey uniquely identifes a TimelineMessage based on its ID and tool_calls, so
+  // that we only re-render <sketch-message> elements that we need to re-render.
   messageKey(message: TimelineMessage): string {
     // If the message has tool calls, and any of the tool_calls get a response, we need to
     // re-render that message.
@@ -116,17 +191,26 @@
 
   render() {
     return html`
-      <div class="timeline-container">
-        ${repeat(this.messages, this.messageKey, (message, index) => {
-          let previousMessage: TimelineMessage;
-          if (index > 0) {
-            previousMessage = this.messages[index - 1];
-          }
-          return html`<sketch-timeline-message
-            .message=${message}
-            .previousMessage=${previousMessage}
-          ></sketch-timeline-message>`;
-        })}
+      <div id="scroll-container">
+        <div class="timeline-container">
+          ${repeat(this.messages, this.messageKey, (message, index) => {
+            let previousMessage: TimelineMessage;
+            if (index > 0) {
+              previousMessage = this.messages[index - 1];
+            }
+            return html`<sketch-timeline-message
+              .message=${message}
+              .previousMessage=${previousMessage}
+            ></sketch-timeline-message>`;
+          })}
+        </div>
+      </div>
+      <div
+        id="jump-to-latest"
+        class="${this.scrollingState}"
+        @click=${this.scrollToBottom}
+      >
+        ⇩
       </div>
     `;
   }