Clicking LIVE label toggles live updates on/off

- Add clickable LIVE toggle button that pauses/resumes timeline polling
- Green pulsing when active, grey when paused
- Uses htmx:beforeRequest event to cancel requests when paused
- Increase duplicate tool call guardrail from 20 to 30

Task-Id: t-211

1 files changed, 35 insertions, 1 deletions

diff --git a/Omni/Jr/Web.hs b/Omni/Jr/Web.hs
index ba65a88..cd6f2d7 100644
--- a/Omni/Jr/Web.hs
+++ b/Omni/Jr/Web.hs
@@ -414,6 +414,7 @@ pageHead title =
     Lucid.script_ [] statusDropdownJs
     Lucid.script_ [] priorityDropdownJs
     Lucid.script_ [] navbarDropdownJs
+    Lucid.script_ [] liveToggleJs
 
 navbarDropdownJs :: Text
 navbarDropdownJs =
@@ -2368,6 +2369,39 @@ commentForm tid =
         ""
       Lucid.button_ [Lucid.type_ "submit", Lucid.class_ "btn btn-primary"] "Post Comment"
 
+-- | Render the LIVE toggle button
+renderLiveToggle :: (Monad m) => Lucid.HtmlT m ()
+renderLiveToggle =
+  Lucid.button_
+    [ Lucid.class_ "timeline-live-toggle",
+      Lucid.id_ "live-toggle",
+      Lucid.makeAttribute "onclick" "toggleLiveUpdates()",
+      Lucid.title_ "Click to pause/resume live updates"
+    ]
+    " LIVE"
+
+-- | JavaScript for toggling live updates
+liveToggleJs :: Text
+liveToggleJs =
+  Text.unlines
+    [ "var liveUpdatesEnabled = true;",
+      "",
+      "function toggleLiveUpdates() {",
+      "  liveUpdatesEnabled = !liveUpdatesEnabled;",
+      "  var btn = document.getElementById('live-toggle');",
+      "  if (btn) {",
+      "    btn.classList.toggle('timeline-live-paused', !liveUpdatesEnabled);",
+      "  }",
+      "}",
+      "",
+      "document.body.addEventListener('htmx:beforeRequest', function(evt) {",
+      "  var timeline = document.getElementById('unified-timeline');",
+      "  if (timeline && timeline.contains(evt.target) && !liveUpdatesEnabled) {",
+      "    evt.preventDefault();",
+      "  }",
+      "});"
+    ]
+
 -- | Unified timeline view combining comments, status changes, and agent events
 renderUnifiedTimeline :: (Monad m) => Text -> [TaskCore.Comment] -> [TaskCore.StoredEvent] -> TaskCore.Status -> UTCTime -> Lucid.HtmlT m ()
 renderUnifiedTimeline tid legacyComments events status now = do
@@ -2385,7 +2419,7 @@ renderUnifiedTimeline tid legacyComments events status now = do
   Lucid.div_ ([Lucid.class_ "unified-timeline-section", Lucid.id_ "unified-timeline"] <> pollAttrs) <| do
     Lucid.h3_ <| do
       Lucid.toHtml ("Timeline (" <> tshow (length events + length legacyComments) <> ")")
-      when isInProgress <| Lucid.span_ [Lucid.class_ "timeline-live"] " LIVE"
+      when isInProgress <| renderLiveToggle
 
     if null events && null legacyComments
       then Lucid.p_ [Lucid.class_ "empty-msg"] "No activity yet."