Add autoscroll toggle button for timeline

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

1 files changed, 17 insertions, 0 deletions

diff --git a/Omni/Jr/Web/Style.hs b/Omni/Jr/Web/Style.hs
index cf32570..bbf828b 100644
--- a/Omni/Jr/Web/Style.hs
+++ b/Omni/Jr/Web/Style.hs
@@ -1597,6 +1597,23 @@ unifiedTimelineStyles = do
     backgroundColor "#f3f4f6"
     border (px 1) solid "#d1d5db"
     Stylesheet.key "animation" ("none" :: Text)
+  ".timeline-autoscroll-toggle" ? do
+    fontSize (px 10)
+    fontWeight bold
+    color "#3b82f6"
+    backgroundColor "#dbeafe"
+    padding (px 2) (px 6) (px 2) (px 6)
+    borderRadius (px 10) (px 10) (px 10) (px 10)
+    marginLeft (px 4)
+    border (px 1) solid "#93c5fd"
+    cursor pointer
+    Stylesheet.key "transition" ("all 0.2s ease" :: Text)
+  ".timeline-autoscroll-toggle:hover" ? do
+    Stylesheet.key "box-shadow" ("0 0 6px rgba(59,130,246,0.3)" :: Text)
+  ".timeline-autoscroll-toggle.timeline-autoscroll-disabled" ? do
+    color "#6b7280"
+    backgroundColor "#f3f4f6"
+    border (px 1) solid "#d1d5db"
   ".timeline-live" ? do
     fontSize (px 10)
     fontWeight bold