From 2778c4c5838bdea4bd393dab19174cbf7404e28d Mon Sep 17 00:00:00 2001
From: wicky <130177258+wicky-zipstack@users.noreply.github.com>
Date: Fri, 17 Apr 2026 17:22:28 +0530
Subject: [PATCH 1/2] fix: move model run status dot to top-right corner of
 icon

Previously the green/red status dot rendered inline before the model
name text. Now it overlays the model icon at the top-right corner.
---
 .../src/ide/explorer/explorer-component.jsx   | 26 +++++++++----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/frontend/src/ide/explorer/explorer-component.jsx b/frontend/src/ide/explorer/explorer-component.jsx
index fd5193e..1f93280 100644
--- a/frontend/src/ide/explorer/explorer-component.jsx
+++ b/frontend/src/ide/explorer/explorer-component.jsx
@@ -74,11 +74,13 @@ const MODEL_SORT_OPTIONS = [
 ];
 
 const MODEL_STATUS_DOT_STYLE = {
-  display: "inline-block",
+  position: "absolute",
+  top: -2,
+  right: -3,
   width: "7px",
   height: "7px",
   borderRadius: "50%",
-  verticalAlign: "middle",
+  border: "1px solid var(--page-bg-2, #fff)",
 };
 
 const getModelRunStatus = (runStatus, failureReason, lastRunAt, token) => {
@@ -659,8 +661,17 @@ const IdeExplorer = ({
             child.last_run_at,
             token
           );
+          const wrappedIcon = statusBadge ? (
+            <span style={{ position: "relative", display: "inline-flex" }}>
+              {child.icon}
+              {statusBadge}
+            </span>
+          ) : (
+            child.icon
+          );
           return {
             ...child,
+            icon: wrappedIcon,
             title: (
               <Typography.Text type="span" disabled={previewTimeTravel}>
                 {modelDeleteModeRef.current && (
@@ -677,17 +688,6 @@ const IdeExplorer = ({
                     style={{ marginRight: 6 }}
                   />
                 )}
-                {statusBadge && (
-                  <span
-                    style={{
-                      position: "relative",
-                      display: "inline-block",
-                      marginRight: 4,
-                    }}
-                  >
-                    {statusBadge}
-                  </span>
-                )}
                 {child.title}
               </Typography.Text>
             ),

From 10c865657c23187a996451c77c4fb79b2d013ba4 Mon Sep 17 00:00:00 2001
From: wicky <130177258+wicky-zipstack@users.noreply.github.com>
Date: Fri, 17 Apr 2026 17:27:20 +0530
Subject: [PATCH 2/2] refactor: move status dot inline styles to CSS classes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- MODEL_STATUS_DOT_STYLE object → .model-status-dot CSS class
- Icon wrapper inline style → .model-icon-badge-wrapper CSS class
- Only backgroundColor remains inline (theme-token driven)
---
 .../src/ide/explorer/explorer-component.jsx   | 30 +++++--------------
 frontend/src/ide/ide-layout.css               | 16 ++++++++++
 2 files changed, 24 insertions(+), 22 deletions(-)

diff --git a/frontend/src/ide/explorer/explorer-component.jsx b/frontend/src/ide/explorer/explorer-component.jsx
index 1f93280..2a0471a 100644
--- a/frontend/src/ide/explorer/explorer-component.jsx
+++ b/frontend/src/ide/explorer/explorer-component.jsx
@@ -73,25 +73,15 @@ const MODEL_SORT_OPTIONS = [
   { label: "Z \u2192 A", key: "alpha_desc" },
 ];
 
-const MODEL_STATUS_DOT_STYLE = {
-  position: "absolute",
-  top: -2,
-  right: -3,
-  width: "7px",
-  height: "7px",
-  borderRadius: "50%",
-  border: "1px solid var(--page-bg-2, #fff)",
-};
+// Only backgroundColor varies per status — layout handled by .model-status-dot CSS class
 
 const getModelRunStatus = (runStatus, failureReason, lastRunAt, token) => {
   if (runStatus === "RUNNING") {
     return (
       <Tooltip title="Running">
         <span
-          style={{
-            ...MODEL_STATUS_DOT_STYLE,
-            backgroundColor: token.colorInfo,
-          }}
+          className="model-status-dot"
+          style={{ backgroundColor: token.colorInfo }}
         />
       </Tooltip>
     );
@@ -132,10 +122,8 @@ const getModelRunStatus = (runStatus, failureReason, lastRunAt, token) => {
         placement="right"
       >
         <span
-          style={{
-            ...MODEL_STATUS_DOT_STYLE,
-            backgroundColor: token.colorError,
-          }}
+          className="model-status-dot"
+          style={{ backgroundColor: token.colorError }}
         />
       </Popover>
     );
@@ -154,10 +142,8 @@ const getModelRunStatus = (runStatus, failureReason, lastRunAt, token) => {
     return (
       <Tooltip title={tooltipTitle}>
         <span
-          style={{
-            ...MODEL_STATUS_DOT_STYLE,
-            backgroundColor: token.colorSuccess,
-          }}
+          className="model-status-dot"
+          style={{ backgroundColor: token.colorSuccess }}
         />
       </Tooltip>
     );
@@ -662,7 +648,7 @@ const IdeExplorer = ({
             token
           );
           const wrappedIcon = statusBadge ? (
-            <span style={{ position: "relative", display: "inline-flex" }}>
+            <span className="model-icon-badge-wrapper">
               {child.icon}
               {statusBadge}
             </span>
diff --git a/frontend/src/ide/ide-layout.css b/frontend/src/ide/ide-layout.css
index b3fcfec..417cffe 100644
--- a/frontend/src/ide/ide-layout.css
+++ b/frontend/src/ide/ide-layout.css
@@ -84,6 +84,22 @@
   padding-left: 12px;
 }
 
+/* Model run status badge overlaid on icon */
+.model-icon-badge-wrapper {
+  position: relative;
+  display: inline-flex;
+}
+
+.model-status-dot {
+  position: absolute;
+  top: -2px;
+  right: -3px;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  border: 1px solid var(--page-bg-2, #fff);
+}
+
 .contextMenu {
   position: fixed;
   z-index: 1000;