Fix lint and build errors in Web components

- Components.hs: Fix escaped quotes in renderFormattedJson
- Style.hs: Use overflowWrap instead of wordBreak for breakWord value

2 files changed, 32 insertions, 2 deletions

diff --git a/Omni/Jr/Web/Components.hs b/Omni/Jr/Web/Components.hs
index f1a8168..7dd13c7 100644
--- a/Omni/Jr/Web/Components.hs
+++ b/Omni/Jr/Web/Components.hs
@@ -113,6 +113,7 @@ module Omni.Jr.Web.Components
     formatToolCallSummary,
     renderCollapsibleOutput,
     renderDecodedToolResult,
+    renderFormattedJson,
     timelineScrollScript,
   )
 where
@@ -1304,7 +1305,7 @@ renderErrorTimelineEvent content actor timestamp now =
       Lucid.span_ [Lucid.class_ "event-label"] "Error"
       renderActorLabel actor
       renderRelativeTimestamp now timestamp
-    Lucid.div_ [Lucid.class_ "event-content error-message"] (Lucid.toHtml content)
+    Lucid.div_ [Lucid.class_ "event-content error-message"] (renderFormattedJson content)
 
 renderAssistantTimelineEvent :: (Monad m) => Text -> TaskCore.CommentAuthor -> UTCTime -> UTCTime -> Lucid.HtmlT m ()
 renderAssistantTimelineEvent content _actor timestamp now =
@@ -1363,7 +1364,7 @@ renderGuardrailEvent content actor timestamp now =
       Lucid.span_ [Lucid.class_ "event-label"] "Guardrail"
       renderActorLabel actor
       renderRelativeTimestamp now timestamp
-    Lucid.div_ [Lucid.class_ "event-content guardrail-content"] (Lucid.toHtml content)
+    Lucid.div_ [Lucid.class_ "event-content guardrail-content"] (renderFormattedJson content)
 
 renderGenericEvent :: (Monad m) => Text -> Text -> TaskCore.CommentAuthor -> UTCTime -> UTCTime -> Lucid.HtmlT m ()
 renderGenericEvent eventType content actor timestamp now =
@@ -1419,6 +1420,16 @@ renderDecodedToolResult content =
         _ -> Lucid.toHtml content
     _ -> Lucid.toHtml content
 
+-- | Format JSON content for human-readable display.
+-- Tries to pretty-print JSON, falls back to raw text if not valid JSON.
+renderFormattedJson :: (Monad m) => Text -> Lucid.HtmlT m ()
+renderFormattedJson content =
+  case Aeson.decode (LBS.fromStrict (str content)) of
+    Just (val :: Aeson.Value) ->
+      Lucid.pre_ [Lucid.class_ "formatted-json"] <| do
+        Lucid.toHtml (decodeUtf8 (LBS.toStrict (Aeson.encode val)))
+    Nothing -> Lucid.toHtml content
+
 timelineScrollScript :: (Monad m) => Lucid.HtmlT m ()
 timelineScrollScript =
   Lucid.script_
diff --git a/Omni/Jr/Web/Style.hs b/Omni/Jr/Web/Style.hs
index bbf828b..c385ac7 100644
--- a/Omni/Jr/Web/Style.hs
+++ b/Omni/Jr/Web/Style.hs
@@ -1757,6 +1757,16 @@ unifiedTimelineStyles = do
   ".timeline-generic" ? do
     padding (px 4) (px 0) (px 4) (px 0)
     color "#6b7280"
+  ".formatted-json" ? do
+    margin (px 0) (px 0) (px 0) (px 0)
+    padding (px 8) (px 8) (px 8) (px 8)
+    backgroundColor "#f9fafb"
+    borderRadius (px 4) (px 4) (px 4) (px 4)
+    overflowX auto
+    fontSize (px 12)
+    fontFamily ["SF Mono", "Monaco", "Consolas", "monospace"] [monospace]
+    whiteSpace preWrap
+    overflowWrap breakWord
 
 responsiveStyles :: Css
 responsiveStyles = do
@@ -2088,6 +2098,15 @@ darkModeStyles =
       borderColor "#dc2626"
     ".event-error" |> ".event-label" ? color "#f87171"
     ".error-message" ? color "#f87171"
+    ".timeline-error" |> ".event-label" ? color "#fca5a5"
+    ".timeline-guardrail" |> ".event-label" ? color "#fbbf24"
+    ".timeline-guardrail" ? do
+      backgroundColor "#451a03"
+      borderColor "#f59e0b"
+    ".timeline-guardrail" |> ".guardrail-content" ? color "#fcd34d"
+    ".formatted-json" ? do
+      backgroundColor "#1e1e1e"
+      color "#d4d4d4"
     -- Responsive dark mode: dropdown content needs background on mobile
     query Media.screen [Media.maxWidth (px 600)] <| do
       ".navbar-dropdown-content" ? do