1 files changed, 160 insertions, 0 deletions
diff --git a/Omni/Jr/Web/Style.hs b/Omni/Jr/Web/Style.hs
index 8c423bb..00d66c2 100644
--- a/Omni/Jr/Web/Style.hs
+++ b/Omni/Jr/Web/Style.hs
@@ -39,6 +39,7 @@ stylesheet = do
   taskMetaStyles
   timeFilterStyles
   sortDropdownStyles
+  agentLogStyles
   responsiveStyles
   darkModeStyles
 
@@ -1402,6 +1403,151 @@ 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)
+  ".event-header" ? do
+    display flex
+    alignItems center
+    Stylesheet.key "gap" ("8px" :: Text)
+    marginBottom (px 4)
+  ".event-icon" ? do
+    fontSize (px 14)
+    width (px 20)
+    textAlign center
+  ".event-label" ? do
+    fontWeight (weight 500)
+    color "#374151"
+  ".event-assistant" ? do
+    padding (px 0) (px 0) (px 0) (px 0)
+  ".event-bubble" ? do
+    backgroundColor "#f3f4f6"
+    padding (px 8) (px 12) (px 8) (px 12)
+    borderRadius (px 8) (px 8) (px 8) (px 8)
+    whiteSpace preWrap
+    lineHeight (em 1.5)
+  ".event-truncated" ? do
+    color "#6b7280"
+    fontStyle italic
+  ".event-tool-call" ? do
+    borderLeft (px 3) solid "#3b82f6"
+    paddingLeft (px 8)
+  ".event-tool-call" |> "summary" ? do
+    cursor pointer
+    listStyleType none
+    display flex
+    alignItems center
+    Stylesheet.key "gap" ("8px" :: Text)
+  ".event-tool-call" |> "summary" # before ? do
+    content (stringContent "▶")
+    fontSize (px 10)
+    color "#6b7280"
+    transition "transform" (ms 150) ease (sec 0)
+  ".event-tool-call[open]" |> "summary" # before ? do
+    Stylesheet.key "transform" ("rotate(90deg)" :: Text)
+  ".tool-name" ? do
+    fontFamily ["SF Mono", "Monaco", "Consolas", "monospace"] [monospace]
+    color "#3b82f6"
+  ".tool-args" ? do
+    marginTop (px 4)
+    paddingLeft (px 20)
+  ".tool-output-pre" ? do
+    fontFamily ["SF Mono", "Monaco", "Consolas", "monospace"] [monospace]
+    fontSize (px 11)
+    backgroundColor "#1e1e1e"
+    color "#d4d4d4"
+    padding (px 8) (px 10) (px 8) (px 10)
+    borderRadius (px 4) (px 4) (px 4) (px 4)
+    overflowX auto
+    whiteSpace preWrap
+    maxHeight (px 300)
+    margin (px 0) (px 0) (px 0) (px 0)
+  ".event-tool-result" ? do
+    borderLeft (px 3) solid "#10b981"
+    paddingLeft (px 8)
+  ".result-header" ? do
+    fontSize (px 12)
+  ".line-count" ? do
+    fontSize (px 11)
+    color "#6b7280"
+    backgroundColor "#f3f4f6"
+    padding (px 1) (px 6) (px 1) (px 6)
+    borderRadius (px 10) (px 10) (px 10) (px 10)
+  ".result-collapsible" |> "summary" ? do
+    cursor pointer
+    fontSize (px 12)
+    color "#0066cc"
+    marginBottom (px 4)
+  ".result-collapsible" |> "summary" # hover ? textDecoration underline
+  ".tool-output" ? do
+    fontFamily ["SF Mono", "Monaco", "Consolas", "monospace"] [monospace]
+    fontSize (px 11)
+    backgroundColor "#1e1e1e"
+    color "#d4d4d4"
+    padding (px 8) (px 10) (px 8) (px 10)
+    borderRadius (px 4) (px 4) (px 4) (px 4)
+    overflowX auto
+    whiteSpace preWrap
+    maxHeight (px 300)
+    margin (px 0) (px 0) (px 0) (px 0)
+  ".event-cost" ? do
+    display flex
+    alignItems center
+    Stylesheet.key "gap" ("6px" :: Text)
+    fontSize (px 11)
+    color "#6b7280"
+    padding (px 4) (px 0) (px 4) (px 0)
+  ".cost-text" ? do
+    fontFamily ["SF Mono", "Monaco", "Consolas", "monospace"] [monospace]
+  ".event-error" ? do
+    borderLeft (px 3) solid "#ef4444"
+    paddingLeft (px 8)
+    backgroundColor "#fef2f2"
+    padding (px 8) (px 8) (px 8) (px 12)
+    borderRadius (px 4) (px 4) (px 4) (px 4)
+  ".event-error" |> ".event-label" ? color "#dc2626"
+  ".error-message" ? do
+    color "#dc2626"
+    fontFamily ["SF Mono", "Monaco", "Consolas", "monospace"] [monospace]
+    fontSize (px 12)
+    whiteSpace preWrap
+  ".event-complete" ? do
+    display flex
+    alignItems center
+    Stylesheet.key "gap" ("8px" :: Text)
+    color "#10b981"
+    fontWeight (weight 500)
+    padding (px 8) (px 0) (px 8) (px 0)
+  ".output-collapsible" |> "summary" ? do
+    cursor pointer
+    fontSize (px 12)
+    color "#0066cc"
+    marginBottom (px 4)
+  ".output-collapsible" |> "summary" # hover ? textDecoration underline
+  Stylesheet.key "@keyframes pulse" ("0%, 100% { opacity: 1; } 50% { opacity: 0.5; }" :: Text)
+
 responsiveStyles :: Css
 responsiveStyles = do
   query Media.screen [Media.maxWidth (px 600)] <| do
@@ -1703,6 +1849,20 @@ 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
+      backgroundColor "#374151"
+      color "#9ca3af"
+    ".event-error" ? do
+      backgroundColor "#450a0a"
+      borderColor "#dc2626"
+    ".event-error" |> ".event-label" ? color "#f87171"
+    ".error-message" ? color "#f87171"
     -- Responsive dark mode: dropdown content needs background on mobile
     query Media.screen [Media.maxWidth (px 600)] <| do
       ".navbar-dropdown-content" ? do