From a64efd6134c8ff565fcf50bed2a816aed70c7452 Mon Sep 17 00:00:00 2001
From: positnuec <93694981+positnuec@users.noreply.github.com>
Date: Wed, 22 Jul 2026 08:00:30 +0800
Subject: [PATCH] Feat: visualize instance running state in sidebar

---
 assets/gui/css/alas.css       | 14 ++++++++++++++
 assets/gui/css/dark-alas.css  | 13 +++++++++++++
 assets/gui/css/light-alas.css | 13 +++++++++++++
 module/webui/app.py           | 16 +++++++++++++++-
 4 files changed, 55 insertions(+), 1 deletion(-)

diff --git a/assets/gui/css/alas.css b/assets/gui/css/alas.css
index 883d2c016..de4b21a09 100644
--- a/assets/gui/css/alas.css
+++ b/assets/gui/css/alas.css
@@ -331,6 +331,20 @@ pre.rich-traceback-code {
     }
 }
 
+/* State animations for aside instance icons */
+.aside-icon-warning {
+    animation: aside-icon-blink 1s ease-in-out infinite;
+}
+
+.aside-icon-updating {
+    animation: aside-icon-blink 1.5s ease-in-out infinite;
+}
+
+@keyframes aside-icon-blink {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.3; }
+}
+
 #pywebio-scope-contents {
     margin-top: 0;
     overflow-y: auto;
diff --git a/assets/gui/css/dark-alas.css b/assets/gui/css/dark-alas.css
index 7d097c06a..166dfe770 100644
--- a/assets/gui/css/dark-alas.css
+++ b/assets/gui/css/dark-alas.css
@@ -95,6 +95,19 @@ textarea {
     fill: #c9d1d9;
 }
 
+/* State colors for aside instance icons */
+.aside-icon.aside-icon-run > path {
+    fill: #5cb85c;
+}
+
+.aside-icon.aside-icon-warning > path {
+    fill: #ff6b6b;
+}
+
+.aside-icon.aside-icon-updating > path {
+    fill: #5cb85c;
+}
+
 .container-log {
     background-color: #2f3136 !important;
     border: 1px solid #21262d;
diff --git a/assets/gui/css/light-alas.css b/assets/gui/css/light-alas.css
index 0f80aedd4..6da334442 100644
--- a/assets/gui/css/light-alas.css
+++ b/assets/gui/css/light-alas.css
@@ -100,6 +100,19 @@ textarea {
     fill: #2c2c2c;
 }
 
+/* State colors for aside instance icons */
+.aside-icon.aside-icon-run > path {
+    fill: #28a745;
+}
+
+.aside-icon.aside-icon-warning > path {
+    fill: #dc3545;
+}
+
+.aside-icon.aside-icon-updating > path {
+    fill: #28a745;
+}
+
 .container-log {
     background-color: white !important;
     border: 1px solid lightgrey;
diff --git a/module/webui/app.py b/module/webui/app.py
index 5668feead..e983e5d3d 100644
--- a/module/webui/app.py
+++ b/module/webui/app.py
@@ -128,6 +128,12 @@ class AlasGUI(Frame):
     ALAS_ARGS: Dict[str, Dict[str, Dict[str, Dict[str, str]]]]
     theme = "default"
     _log = RichLog
+    # state 2 (inactive) is unmapped to keep default aside-icon color
+    ASIDE_ICON_STATE_CLASS = {
+        1: "aside-icon-run",
+        3: "aside-icon-warning",
+        4: "aside-icon-updating",
+    }
 
     def initial(self) -> None:
         self.ALAS_MENU = read_file(filepath_args("menu", self.alas_mod))
@@ -186,8 +192,16 @@ class AlasGUI(Frame):
 
         def update(name, seq):
             with use_scope(f"alas-instance-{seq}", clear=True):
-                icon_html = Icon.RUN
                 rendered_state = ProcessManager.get_manager(inst).state
+                # Inject state class for color and animation
+                state_class = self.ASIDE_ICON_STATE_CLASS.get(rendered_state, "")
+                icon_html = Icon.RUN
+                if state_class:
+                    icon_html = icon_html.replace(
+                        'class="aside-icon icon-run"',
+                        f'class="aside-icon icon-run {state_class}"',
+                        1,
+                    )
                 if rendered_state == 1 and self.af_flag:
                     icon_html = icon_html[:31] + ' anim-rotate' + icon_html[31:]
                 put_icon_buttons(