From cb779e10d3d503b7572769e66c5a05b66bfcfd8c Mon Sep 17 00:00:00 2001
From: "alexei.dolgolyov" <dolgolyov.alexei@gmail.com>
Date: Sat, 28 Feb 2026 23:49:26 +0300
Subject: [PATCH] Add running target indicator to command palette

Fetch /picture-targets/batch/states alongside entity data and show a
small green glowing dot next to targets that are currently processing.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../src/wled_controller/static/css/layout.css |  9 ++++++++
 .../static/js/core/command-palette.js         | 22 ++++++++++++-------
 2 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/server/src/wled_controller/static/css/layout.css b/server/src/wled_controller/static/css/layout.css
index 6694a04..bc652f2 100644
--- a/server/src/wled_controller/static/css/layout.css
+++ b/server/src/wled_controller/static/css/layout.css
@@ -489,6 +489,15 @@ h2 {
     color: var(--text-secondary);
 }
 
+.cp-running {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: #4caf50;
+    flex-shrink: 0;
+    box-shadow: 0 0 4px #4caf50;
+}
+
 .cp-loading,
 .cp-empty {
     padding: 24px 16px;
diff --git a/server/src/wled_controller/static/js/core/command-palette.js b/server/src/wled_controller/static/js/core/command-palette.js
index 1fcfea2..353ec11 100644
--- a/server/src/wled_controller/static/js/core/command-palette.js
+++ b/server/src/wled_controller/static/js/core/command-palette.js
@@ -31,7 +31,7 @@ function _mapEntities(data, mapFn) {
     return [];
 }
 
-function _buildItems(results) {
+function _buildItems(results, states = {}) {
     const [devices, targets, css, automations, capTempl, ppTempl, patTempl, audioSrc, valSrc, streams, scenePresets] = results;
     const items = [];
 
@@ -41,15 +41,16 @@ function _buildItems(results) {
     }));
 
     _mapEntities(targets, tgt => {
+        const running = !!states[tgt.id]?.processing;
         if (tgt.target_type === 'key_colors') {
             items.push({
                 name: tgt.name, detail: 'key_colors', group: 'kc_targets', icon: getTargetTypeIcon('key_colors'),
-                nav: ['targets', 'key_colors', 'kc-targets', 'data-kc-target-id', tgt.id],
+                nav: ['targets', 'key_colors', 'kc-targets', 'data-kc-target-id', tgt.id], running,
             });
         } else {
             items.push({
                 name: tgt.name, detail: tgt.target_type, group: 'targets', icon: ICON_TARGET,
-                nav: ['targets', 'led', 'led-targets', 'data-target-id', tgt.id],
+                nav: ['targets', 'led', 'led-targets', 'data-target-id', tgt.id], running,
             });
         }
     });
@@ -124,14 +125,18 @@ const _responseKeys = [
 ];
 
 async function _fetchAllEntities() {
-    const results = await Promise.all(
-        _responseKeys.map(([ep, key]) =>
+    const [statesData, ...results] = await Promise.all([
+        fetchWithAuth('/picture-targets/batch/states', { retry: false, timeout: 5000 })
+            .then(r => r.ok ? r.json() : {})
+            .then(data => data.states || {})
+            .catch(() => ({})),
+        ..._responseKeys.map(([ep, key]) =>
             fetchWithAuth(ep, { retry: false, timeout: 5000 })
                 .then(r => r.ok ? r.json() : {})
                 .then(data => data[key] || [])
-                .catch(() => []))
-    );
-    return _buildItems(results);
+                .catch(() => [])),
+    ]);
+    return _buildItems(results, statesData);
 }
 
 // ─── Group ordering ───
@@ -197,6 +202,7 @@ function _render() {
             html += `<div class="cp-result${active}" data-cp-idx="${idx}"${colorStyle}>` +
                 `<span class="cp-icon">${item.icon}</span>` +
                 `<span class="cp-name">${_escHtml(item.name)}</span>` +
+                (item.running ? '<span class="cp-running"></span>' : '') +
                 (item.detail ? `<span class="cp-detail">${_escHtml(item.detail)}</span>` : '') +
                 `</div>`;
             idx++;