From 339d79d9f028bf81543aacc1ea7eebf6ac5a29a5 Mon Sep 17 00:00:00 2001
From: Isaac Johnson <isaac.johnson@gmail.com>
Date: Tue, 28 Jul 2026 06:44:04 -0500
Subject: [PATCH] Show succeeded as Gray

---
 static/app.js        | 5 ++++-
 static/style.css     | 2 ++
 templates/index.html | 1 +
 3 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/static/app.js b/static/app.js
index 95aa07c..4633dc9 100644
--- a/static/app.js
+++ b/static/app.js
@@ -337,6 +337,9 @@ function build3DCluster(data) {
         } else if (p.data.status === 'Pending') {
             color = 0xf59e0b;
             emissive = 0xd97706;
+        } else if (p.data.status === 'Succeeded') {
+            color = 0x94a3b8;
+            emissive = 0x475569;
         } else if (p.data.status !== 'Running') {
             color = 0xef4444;
             emissive = 0xdc2626;
@@ -488,7 +491,7 @@ function onPointerMove(event) {
                 </div>
             `;
         } else {
-            const statusColor = data.status === 'Running' ? '#10b981' : (data.status === 'Pending' ? '#f59e0b' : '#ef4444');
+            const statusColor = data.status === 'Running' ? '#10b981' : (data.status === 'Pending' ? '#f59e0b' : (data.status === 'Succeeded' ? '#94a3b8' : '#ef4444'));
             tooltip.innerHTML = `
                 <div class="tooltip-title">
                     <span>${data.name}</span>
diff --git a/static/style.css b/static/style.css
index c569822..7988726 100644
--- a/static/style.css
+++ b/static/style.css
@@ -10,6 +10,7 @@
     /* Chart Colors */
     --color-running: #10b981;
     --color-pending: #f59e0b;
+    --color-succeeded: #94a3b8;
     --color-failed: #ef4444;
     --color-unused: rgba(148, 163, 184, 0.2);
     --color-node: rgba(30, 41, 59, 0.9);
@@ -269,6 +270,7 @@ body {
 
 .legend-dot.running { background-color: var(--color-running); box-shadow: 0 0 6px var(--color-running); }
 .legend-dot.pending { background-color: var(--color-pending); box-shadow: 0 0 6px var(--color-pending); }
+.legend-dot.succeeded { background-color: var(--color-succeeded); box-shadow: 0 0 6px var(--color-succeeded); }
 .legend-dot.failed { background-color: var(--color-failed); box-shadow: 0 0 6px var(--color-failed); }
 .legend-dot.unused { background-color: #64748b; opacity: 0.5; }
 
diff --git a/templates/index.html b/templates/index.html
index 2b8b4ca..f740bd3 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -63,6 +63,7 @@
             <div class="legend-panel glass-panel">
                 <div class="legend-item"><span class="legend-dot running"></span> Running Pod</div>
                 <div class="legend-item"><span class="legend-dot pending"></span> Pending Pod</div>
+                <div class="legend-item"><span class="legend-dot succeeded"></span> Succeeded Pod</div>
                 <div class="legend-item"><span class="legend-dot failed"></span> Failed Pod</div>
                 <div class="legend-item"><span class="legend-dot unused"></span> Available Capacity</div>
                 <div class="legend-divider"></div>