Remove separate Agent Log page, consolidate timeline styles

- Rename agentLogScrollScript to timelineScrollScript - Target
.timeline-events instead of obsolete .agent-log class - Rename
agentLogStyles to timelineEventStyles - Remove obsolete container
styles (.agent-log-section, .agent-log-live, .agent-log) - Remove
dark mode styles for obsolete classes

Task-Id: t-213.6

1 files changed, 152 insertions, 30 deletions

diff --git a/Omni/Jr/Web/Style.hs b/Omni/Jr/Web/Style.hs
index 1f11255..a169cd7 100644
--- a/Omni/Jr/Web/Style.hs
+++ b/Omni/Jr/Web/Style.hs
@@ -39,7 +39,8 @@ stylesheet = do
   taskMetaStyles
   timeFilterStyles
   sortDropdownStyles
-  agentLogStyles
+  timelineEventStyles
+  unifiedTimelineStyles
   responsiveStyles
   darkModeStyles
 
@@ -1422,31 +1423,8 @@ taskMetaStyles = do
     color "#d1d5db"
     Stylesheet.key "user-select" ("none" :: Text)
 
-agentLogStyles :: Css
-agentLogStyles = do
-  ".agent-log-section" ? do
-    marginTop (em 1)
-    paddingTop (em 1)
-    borderTop (px 1) solid "#e5e7eb"
-  ".agent-log-live" ? do
-    fontSize (px 10)
-    fontWeight bold
-    color "#10b981"
-    backgroundColor "#d1fae5"
-    padding (px 2) (px 6) (px 2) (px 6)
-    borderRadius (px 10) (px 10) (px 10) (px 10)
-    marginLeft (px 8)
-    textTransform uppercase
-    Stylesheet.key "animation" ("pulse 2s infinite" :: Text)
-  ".agent-log" ? do
-    maxHeight (px 600)
-    overflowY auto
-    display flex
-    flexDirection column
-    Stylesheet.key "gap" ("8px" :: Text)
-    padding (px 8) (px 0) (px 8) (px 0)
-  ".agent-event" ? do
-    fontSize (px 13)
+timelineEventStyles :: Css
+timelineEventStyles = do
   ".event-header" ? do
     display flex
     alignItems center
@@ -1567,6 +1545,154 @@ agentLogStyles = do
   ".output-collapsible" |> "summary" # hover ? textDecoration underline
   Stylesheet.key "@keyframes pulse" ("0%, 100% { opacity: 1; } 50% { opacity: 0.5; }" :: Text)
 
+unifiedTimelineStyles :: Css
+unifiedTimelineStyles = do
+  ".unified-timeline-section" ? do
+    marginTop (em 1.5)
+    paddingTop (em 1)
+    borderTop (px 1) solid "#e5e7eb"
+  ".timeline-live" ? do
+    fontSize (px 10)
+    fontWeight bold
+    color "#10b981"
+    backgroundColor "#d1fae5"
+    padding (px 2) (px 6) (px 2) (px 6)
+    borderRadius (px 10) (px 10) (px 10) (px 10)
+    marginLeft (px 8)
+    textTransform uppercase
+    Stylesheet.key "animation" ("pulse 2s infinite" :: Text)
+  ".timeline-events" ? do
+    maxHeight (px 600)
+    overflowY auto
+    display flex
+    flexDirection column
+    Stylesheet.key "gap" ("12px" :: Text)
+    padding (px 12) (px 0) (px 12) (px 0)
+  ".timeline-event" ? do
+    fontSize (px 13)
+    lineHeight (em 1.4)
+  ".actor-label" ? do
+    fontSize (px 11)
+    fontWeight (weight 500)
+    padding (px 1) (px 4) (px 1) (px 4)
+    borderRadius (px 3) (px 3) (px 3) (px 3)
+    marginLeft (px 4)
+    marginRight (px 4)
+  ".actor-human" ? do
+    color "#7c3aed"
+    backgroundColor "#f3e8ff"
+  ".actor-junior" ? do
+    color "#0369a1"
+    backgroundColor "#e0f2fe"
+  ".actor-system" ? do
+    color "#6b7280"
+    backgroundColor "#f3f4f6"
+  ".timeline-comment" ? do
+    paddingLeft (px 4)
+  ".timeline-comment" |> ".comment-bubble" ? do
+    backgroundColor "#f3f4f6"
+    padding (px 10) (px 14) (px 10) (px 14)
+    borderRadius (px 8) (px 8) (px 8) (px 8)
+    whiteSpace preWrap
+    marginTop (px 6)
+  ".timeline-status-change" ? do
+    display flex
+    alignItems center
+    Stylesheet.key "gap" ("6px" :: Text)
+    flexWrap Flexbox.wrap
+    padding (px 6) (px 8) (px 6) (px 8)
+    backgroundColor "#f0fdf4"
+    borderRadius (px 6) (px 6) (px 6) (px 6)
+    borderLeft (px 3) solid "#22c55e"
+  ".status-change-text" ? do
+    fontWeight (weight 500)
+    color "#166534"
+  ".timeline-activity" ? do
+    display flex
+    alignItems center
+    Stylesheet.key "gap" ("6px" :: Text)
+    flexWrap Flexbox.wrap
+    padding (px 4) (px 0) (px 4) (px 0)
+    color "#6b7280"
+  ".activity-detail" ? do
+    fontSize (px 11)
+    color "#9ca3af"
+    fontFamily ["SF Mono", "Monaco", "Consolas", "monospace"] [monospace]
+  ".timeline-error" ? do
+    borderLeft (px 3) solid "#ef4444"
+    backgroundColor "#fef2f2"
+    padding (px 8) (px 12) (px 8) (px 12)
+    borderRadius (px 4) (px 4) (px 4) (px 4)
+  ".timeline-error" |> ".error-message" ? do
+    marginTop (px 6)
+    color "#dc2626"
+    fontFamily ["SF Mono", "Monaco", "Consolas", "monospace"] [monospace]
+    fontSize (px 12)
+    whiteSpace preWrap
+  ".timeline-thought" ? do
+    paddingLeft (px 4)
+  ".timeline-thought" |> ".thought-bubble" ? do
+    backgroundColor "#fef3c7"
+    padding (px 8) (px 12) (px 8) (px 12)
+    borderRadius (px 8) (px 8) (px 8) (px 8)
+    whiteSpace preWrap
+    marginTop (px 6)
+    fontSize (px 12)
+    lineHeight (em 1.5)
+  ".timeline-tool-call" ? do
+    borderLeft (px 3) solid "#3b82f6"
+    paddingLeft (px 8)
+  ".timeline-tool-call" |> "summary" ? do
+    cursor pointer
+    listStyleType none
+    display flex
+    alignItems center
+    Stylesheet.key "gap" ("6px" :: Text)
+  ".timeline-tool-call" |> "summary" # before ? do
+    content (stringContent "▶")
+    fontSize (px 10)
+    color "#6b7280"
+    transition "transform" (ms 150) ease (sec 0)
+  ".timeline-tool-call[open]" |> "summary" # before ? do
+    Stylesheet.key "transform" ("rotate(90deg)" :: Text)
+  ".timeline-tool-result" ? do
+    borderLeft (px 3) solid "#10b981"
+    paddingLeft (px 8)
+  ".timeline-tool-result" |> "summary" ? do
+    cursor pointer
+    listStyleType none
+    display flex
+    alignItems center
+    Stylesheet.key "gap" ("6px" :: Text)
+  ".timeline-cost" ? do
+    display flex
+    alignItems center
+    Stylesheet.key "gap" ("6px" :: Text)
+    fontSize (px 11)
+    color "#6b7280"
+    padding (px 2) (px 0) (px 2) (px 0)
+  ".timeline-checkpoint" ? do
+    borderLeft (px 3) solid "#8b5cf6"
+    backgroundColor "#faf5ff"
+    padding (px 8) (px 12) (px 8) (px 12)
+    borderRadius (px 4) (px 4) (px 4) (px 4)
+  ".timeline-checkpoint" |> ".checkpoint-content" ? do
+    marginTop (px 6)
+    fontSize (px 12)
+    whiteSpace preWrap
+  ".timeline-guardrail" ? do
+    borderLeft (px 3) solid "#f59e0b"
+    backgroundColor "#fffbeb"
+    padding (px 8) (px 12) (px 8) (px 12)
+    borderRadius (px 4) (px 4) (px 4) (px 4)
+  ".timeline-guardrail" |> ".guardrail-content" ? do
+    marginTop (px 6)
+    fontSize (px 12)
+    color "#92400e"
+  ".timeline-generic" ? do
+    padding (px 4) (px 0) (px 4) (px 0)
+    color "#6b7280"
+
 responsiveStyles :: Css
 responsiveStyles = do
   query Media.screen [Media.maxWidth (px 600)] <| do
@@ -1878,10 +2004,6 @@ darkModeStyles =
     ".retry-banner-details" ? color "#d1d5db"
     ".retry-value" ? color "#9ca3af"
     ".retry-commit" ? backgroundColor "#374151"
-    ".agent-log-section" ? borderTopColor "#374151"
-    ".agent-log-live" ? do
-      backgroundColor "#065f46"
-      color "#a7f3d0"
     ".event-bubble" ? backgroundColor "#374151"
     ".event-label" ? color "#d1d5db"
     ".line-count" ? do