feat: Colorize json if detected

packages/webview/src/component/pods/PodLogs.svelte

@@ -1,14 +1,20 @@
 <script lang="ts">
-import type { V1Pod } from '@kubernetes/client-node';
-import { getContext, onDestroy, onMount, tick } from 'svelte';
-import { Streams } from '/@/stream/streams';
 import type { IDisposable } from '@kubernetes-dashboard/channels';
+import type { V1Pod } from '@kubernetes/client-node';
 import { EmptyScreen } from '@podman-desktop/ui-svelte';
-import NoLogIcon from '/@/component/icons/NoLogIcon.svelte';
 import type { Terminal } from '@xterm/xterm';
-import TerminalWindow from '/@/component/terminal/TerminalWindow.svelte';
+import { getContext, onDestroy, onMount, tick } from 'svelte';
 import { SvelteMap } from 'svelte/reactivity';
-import { ansi256Colours, colourizedANSIContainerName } from '/@/component/terminal/terminal-colors';
+import NoLogIcon from '/@/component/icons/NoLogIcon.svelte';
+import { detectJsonLogs } from '/@/component/terminal/json-colorizer';
+import {
+  ansi256Colours,
+  colorizeJSON,
+  colorizeLogLevel,
+  colourizedANSIContainerName,
+} from '/@/component/terminal/terminal-colors';
+import TerminalWindow from '/@/component/terminal/TerminalWindow.svelte';
+import { Streams } from '/@/stream/streams';
 
 interface Props {
   object: V1Pod;
@@ -18,6 +24,12 @@ let { object }: Props = $props();
 // Logs has been initialized
 let noLogs = $state(true);
 
+// Track if logs are JSON format (auto-detected from first 10 lines)
+let isJsonFormat = $state<boolean | undefined>(undefined);
+// TODO once we have a toolbar in logs we can add a checkbox/hamburger menu for this setting
+let shouldColorizeLogs = $state<boolean>(true);
+let logBuffer: string[] = [];
+
 let logsTerminal = $state<Terminal>();
 
 let disposables: IDisposable[] = [];
@@ -27,6 +39,50 @@ const streams = getContext<Streams>(Streams);
 // if we run out of colours, we'll start from the beginning.
 const colourizedContainerName = new SvelteMap<string, string>();
 
+/**
+ * Colorizes and formats log lines with optional container prefix.
+ * Applies log level colorization and JSON colorization (if detected).
+ *
+ * @param data - Raw log data from stream
+ * @param containerName - Name of the container (for multi-container pods)
+ * @param maxNameLength - Maximum container name length for padding (0 for single container)
+ * @returns Formatted and colorized log lines
+ */
+const colorizeAndFormatLogs = (data: string, containerName?: string, maxNameLength: number = 0): string => {
+  let lines = data.split('\n');
+
+  if (shouldColorizeLogs) {
+    // Auto-detect JSON format from first batch of logs
+    if (isJsonFormat === undefined) {
+      logBuffer.push(...lines.filter(l => l.trim()));
+      if (logBuffer.length >= 10) {
+        isJsonFormat = detectJsonLogs(logBuffer);
+        logBuffer = []; // Clear buffer after detection
+      }
+    }
+
+    // Apply colorization: JSON first (if detected/only a few lines of logs), then log levels
+    lines =
+      (isJsonFormat ?? true)
+        ? lines.map(line => colorizeLogLevel(colorizeJSON(line)))
+        : lines.map(line => colorizeLogLevel(line));
+  }
+
+  // Add container prefix for multi-container pods
+  if (containerName && maxNameLength > 0) {
+    const padding = ' '.repeat(maxNameLength - containerName.length);
+    const colouredName = colourizedContainerName.get(containerName);
+    // All lines are prefixed, except the last one if it's empty
+    return lines
+      .map((line, index, arr) =>
+        index < arr.length - 1 || line.length > 0 ? `${padding}${colouredName}|${line}` : line,
+      )
+      .join('\n');
+  }
+
+  return lines.join('\n');
+};
+
 onMount(async () => {
   logsTerminal?.clear();
 
@@ -45,23 +101,14 @@ onMount(async () => {
     });
   }
 
-  const multiContainers =
-    containerCount > 1
-      ? (name: string, data: string, callback: (data: string) => void): void => {
-          const padding = ' '.repeat(maxNameLength - name.length);
-          const colouredName = colourizedContainerName.get(name);
-
-          // All lines are prefixed, except the last one if it's empty.
-          const lines = data
-            .split('\n')
-            .map((line, index, arr) =>
-              index < arr.length - 1 || line.length > 0 ? `${padding}${colouredName}|${line}` : line,
-            );
-          callback(lines.join('\n'));
-        }
-      : (_name: string, data: string, callback: (data: string) => void): void => {
-          callback(data);
-        };
+  const processLogData = (containerName: string, data: string, callback: (data: string) => void): void => {
+    const formattedLogs = colorizeAndFormatLogs(
+      data,
+      containerCount > 1 ? containerName : undefined,
+      containerCount > 1 ? maxNameLength : 0,
+    );
+    callback(formattedLogs);
+  };
 
   for (const containerName of object.spec?.containers.map(c => c.name) ?? []) {
     disposables.push(
@@ -70,7 +117,7 @@ onMount(async () => {
         object.metadata?.namespace ?? '',
         containerName,
         chunk => {
-          multiContainers(containerName, chunk.data, data => {
+          processLogData(containerName, chunk.data, data => {
             if (noLogs) {
               noLogs = false;
             }