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

1 files changed, 13 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_