Fix console logging in Firefox and other browsers (#9775)

Use CSS-based %c styling for browser consoles instead of ANSI escape codes, which don't render properly in Firefox. Keep ANSI codes for native/terminal environments.

Co-authored-by: Claude Haiku 4.5 <noreply@anthropic.com>

src/logger/transports/console.ts

@@ -15,37 +15,52 @@ export const consoleTransport: Transport = (
   timestamp,
 ) => {
   const hasMetadata = Object.keys(metadata).length
-  const colorize = withColor(
-    {
-      [LogLevel.Debug]: colors.magenta,
-      [LogLevel.Info]: colors.blue,
-      [LogLevel.Log]: colors.green,
-      [LogLevel.Warn]: colors.yellow,
-      [LogLevel.Error]: colors.red,
-    }[level],
-  )
-
-  let msg = `${colorize(format(timestamp, 'HH:mm:ss'))}`
-  if (context) {
-    msg += ` ${colorize(`(${context})`)}`
-  }
-  if (message) {
-    msg += ` ${message.toString()}`
-  }
 
   if (IS_WEB) {
+    const cssColor = {
+      [LogLevel.Debug]: 'magenta',
+      [LogLevel.Info]: 'dodgerblue',
+      [LogLevel.Log]: 'green',
+      [LogLevel.Warn]: 'orange',
+      [LogLevel.Error]: 'red',
+    }[level]
+
+    const timestampStr = format(timestamp, 'HH:mm:ss')
+    const contextStr = context ? ` (${context})` : ''
+    const messageStr = message ? ` ${message.toString()}` : ''
+
+    const styledPart = `%c${timestampStr}${contextStr}%c${messageStr}`
+    const styles = [`color: ${cssColor}; font-weight: bold`, 'color: inherit']
+
     if (hasMetadata) {
-      console.groupCollapsed(msg)
+      console.groupCollapsed(styledPart, ...styles)
       console.log(prepareMetadata(metadata))
       console.groupEnd()
     } else {
-      console.log(msg)
+      console.log(styledPart, ...styles)
     }
     if (message instanceof Error) {
       // for stacktrace
       console.error(message)
     }
   } else {
+    const colorize = withColor(
+      {
+        [LogLevel.Debug]: colors.magenta,
+        [LogLevel.Info]: colors.blue,
+        [LogLevel.Log]: colors.green,
+        [LogLevel.Warn]: colors.yellow,
+        [LogLevel.Error]: colors.red,
+      }[level],
+    )
+
+    let msg = `${colorize(format(timestamp, 'HH:mm:ss'))}`
+    if (context) {
+      msg += ` ${colorize(`(${context})`)}`
+    }
+    if (message) {
+      msg += ` ${message.toString()}`
+    }
     if (hasMetadata) {
       msg += ` ${JSON.stringify(prepareMetadata(metadata), null, 2)}`
     }