From b4c74e6a9318bbc743e17bb4c3e52339942d7a90 Mon Sep 17 00:00:00 2001
From: ConnorN <connor.needham2015@gmail.com>
Date: Mon, 15 Dec 2025 16:56:31 -0500
Subject: [PATCH 1/2] feat: colored logs

---
 src/components/ContainerCard.tsx | 22 ++++++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/components/ContainerCard.tsx b/src/components/ContainerCard.tsx
index 5aa8285..520667c 100644
--- a/src/components/ContainerCard.tsx
+++ b/src/components/ContainerCard.tsx
@@ -47,6 +47,12 @@ const ContainerCard: React.FC<ContainerCardProps> = ({
   const handleStart = async () => {
     await onStart(key);
   };
+  const getLogColor = (line: string) => {
+    if (/\bERROR\b/.test(line)) return '#ff4d4d';
+    if (/\bWARN\b/.test(line)) return '#ffd966';
+    if (/\bINFO\b/.test(line)) return '#7CFC00';
+    return '#0f0';
+  };
 
   // Connect WebSocket logs when running and logsWsUrl changes
   useEffect(() => {
@@ -142,18 +148,26 @@ const ContainerCard: React.FC<ContainerCardProps> = ({
             ref={logBoxRef}
             style={{
               backgroundColor: '#111',
-              color: '#0f0',
               padding: 10,
               borderRadius: 4,
               height: 150,
               overflowY: 'auto',
               marginTop: 4,
               fontSize: 12,
-              whiteSpace: 'pre-wrap',
-              wordWrap: 'break-word',
             }}
           >
-            {logs.join('\n')}
+            {logs.map((line, idx) => (
+              <div
+                key={idx}
+                style={{
+                  color: getLogColor(line),
+                  whiteSpace: 'pre-wrap',
+                  wordBreak: 'break-word',
+                }}
+              >
+                {line}
+              </div>
+            ))}
           </pre>
         </div>
       )}

From a0e4c43c0ec4ae5a72d3a203e6a9b9d82f621f87 Mon Sep 17 00:00:00 2001
From: Levi Durocher <levidurocher@gmail.com>
Date: Sat, 24 Oct 2026 15:47:27 -0400
Subject: [PATCH 2/2] chore: changed logging colours

	modified:   src/components/ContainerCard.tsx
---
 src/components/ContainerCard.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/ContainerCard.tsx b/src/components/ContainerCard.tsx
index 520667c..aafbc7a 100644
--- a/src/components/ContainerCard.tsx
+++ b/src/components/ContainerCard.tsx
@@ -49,9 +49,9 @@ const ContainerCard: React.FC<ContainerCardProps> = ({
   };
   const getLogColor = (line: string) => {
     if (/\bERROR\b/.test(line)) return '#ff4d4d';
-    if (/\bWARN\b/.test(line)) return '#ffd966';
-    if (/\bINFO\b/.test(line)) return '#7CFC00';
-    return '#0f0';
+    if (/\bWARN\b/.test(line) || /\bWARNING\b/.test(line)) return '#ffd966';
+    if (/\bINFO\b/.test(line)) return '#87CEEB';
+    return '#ffffff';
   };
 
   // Connect WebSocket logs when running and logsWsUrl changes