From 2151b67836d209645b85bb64d56a96bfbf2859cd Mon Sep 17 00:00:00 2001
From: Ben Sima <ben@bensima.com>
Date: Mon, 1 Dec 2025 15:41:19 -0500
Subject: Add autoscroll toggle button for timeline
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds a toggle button next to the LIVE indicator that controls whether
the timeline auto-scrolls to new events. Default is ON.

- renderAutoscrollToggle button with ⬇ icon
- toggleAutoscroll() JS function tracks state
- htmx:afterSettle checks autoscrollEnabled before scrolling
- Blue styling to differentiate from green LIVE button

Task-Id: t-222
---
 Omni/Jr/Web.hs | 35 +++++++++++++++++++++++++++++++++--
 1 file changed, 33 insertions(+), 2 deletions(-)

(limited to 'Omni/Jr/Web.hs')

diff --git a/Omni/Jr/Web.hs b/Omni/Jr/Web.hs
index a493395..6a2d826 100644
--- a/Omni/Jr/Web.hs
+++ b/Omni/Jr/Web.hs
@@ -2273,11 +2273,23 @@ renderLiveToggle =
     ]
     " LIVE"
 
--- | JavaScript for toggling live updates
+-- | Render the autoscroll toggle button
+renderAutoscrollToggle :: (Monad m) => Lucid.HtmlT m ()
+renderAutoscrollToggle =
+  Lucid.button_
+    [ Lucid.class_ "timeline-autoscroll-toggle",
+      Lucid.id_ "autoscroll-toggle",
+      Lucid.makeAttribute "onclick" "toggleAutoscroll()",
+      Lucid.title_ "Toggle automatic scrolling to newest events"
+    ]
+    " ⬇ Auto-scroll"
+
+-- | JavaScript for toggling live updates and autoscroll
 liveToggleJs :: Text
 liveToggleJs =
   Text.unlines
     [ "var liveUpdatesEnabled = true;",
+      "var autoscrollEnabled = true;",
       "",
       "function toggleLiveUpdates() {",
       "  liveUpdatesEnabled = !liveUpdatesEnabled;",
@@ -2287,11 +2299,28 @@ liveToggleJs =
       "  }",
       "}",
       "",
+      "function toggleAutoscroll() {",
+      "  autoscrollEnabled = !autoscrollEnabled;",
+      "  var btn = document.getElementById('autoscroll-toggle');",
+      "  if (btn) {",
+      "    btn.classList.toggle('timeline-autoscroll-disabled', !autoscrollEnabled);",
+      "  }",
+      "}",
+      "",
       "document.body.addEventListener('htmx:beforeRequest', function(evt) {",
       "  var timeline = document.getElementById('unified-timeline');",
       "  if (timeline && timeline.contains(evt.target) && !liveUpdatesEnabled) {",
       "    evt.preventDefault();",
       "  }",
+      "});",
+      "",
+      "document.body.addEventListener('htmx:afterSettle', function(evt) {",
+      "  if (autoscrollEnabled) {",
+      "    var log = document.querySelector('.timeline-events');",
+      "    if (log) {",
+      "      log.scrollTop = log.scrollHeight;",
+      "    }",
+      "  }",
       "});"
     ]
 
@@ -2352,7 +2381,9 @@ renderUnifiedTimeline tid legacyComments events status now = do
           when (totalCents > 0) <| Lucid.toHtml (formatCostHeader totalCents)
           when (totalCents > 0 && totalTokens > 0) <| metaSep
           when (totalTokens > 0) <| Lucid.toHtml (formatTokensHeader totalTokens <> " tokens")
-      when isInProgress <| renderLiveToggle
+      when isInProgress <| do
+        renderLiveToggle
+        renderAutoscrollToggle
 
     if null nonCostEvents && null legacyComments
       then Lucid.p_ [Lucid.class_ "empty-msg"] "No activity yet."
-- 
cgit v1.2.3