From 3797fdf57e7dc6814072a8a7498a18627caa9997 Mon Sep 17 00:00:00 2001
From: Edouard Durand <edouard.durand@gmail.com>
Date: Sun, 27 Sep 2026 08:31:34 +0000
Subject: [PATCH] Performance: yellow timer when the run is the workflow on
 screen

---
 web/rigshare/panel.js  |  4 ++--
 web/rigshare/perf.js   | 11 ++++++-----
 web/rigshare/styles.js |  2 ++
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/web/rigshare/panel.js b/web/rigshare/panel.js
index 993a552..850e3d7 100644
--- a/web/rigshare/panel.js
+++ b/web/rigshare/panel.js
@@ -49,7 +49,7 @@ export class RigSharePanel {
         // The Performance clock ticks between server updates (only that section redraws).
         setInterval(() => {
             if (this.view === "server" && this.visible && this.perfBody?.isConnected && this.client.stats?.performance?.running?.length) {
-                this.perfBody.replaceChildren(...perfView(this.client.stats.performance, this.statsAt));
+                this.perfBody.replaceChildren(...perfView(this.client.stats.performance, this.statsAt, this.perfWidget.workflow()));
             }
         }, 250);
 
@@ -649,7 +649,7 @@ export class RigSharePanel {
             class: `rs-btn ${perfOn ? "active" : ""}`, title: "Show the performance card over the canvas",
             onclick: () => this.perfWidget.toggle(),
         }, h("i", { class: "pi pi-window-maximize" }), perfOn ? "Floating: on" : "Pop out");
-        this.perfBody = h("div", { class: "rs-perf" }, ...perfView(st.performance, this.statsAt));
+        this.perfBody = h("div", { class: "rs-perf" }, ...perfView(st.performance, this.statsAt, this.perfWidget.workflow()));
         const history = h("button", { class: "rs-btn", title: "Every recorded run", onclick: () => openHistory(this.client) },
             h("i", { class: "pi pi-history" }), "History");
         return [this.section("pi-stopwatch", "Performance", this.perfBody, h("div", { class: "rs-actions" }, history, perfPop)),
diff --git a/web/rigshare/perf.js b/web/rigshare/perf.js
index eafd78c..5105a66 100644
--- a/web/rigshare/perf.js
+++ b/web/rigshare/perf.js
@@ -26,12 +26,13 @@ function ago(ms) {
 }
 
 /** The run in progress: clock, ETA, progress bar. `since`: ms since the stats arrived. */
-function runningBlock(run, since, { big = false } = {}) {
+function runningBlock(run, since, { big = false, workflow = null } = {}) {
     const elapsed = run.elapsed_ms + since;
     const eta = run.eta_ms;
     const over = eta && elapsed > eta;
     const left = eta ? Math.round((eta - elapsed) / 1000) : null;
-    return h("div", { class: `rs-perf-run ${big ? "big" : ""}` },
+    const mine = !!workflow && run.workflow === workflow; // the workflow on screen: yellow clock
+    return h("div", { class: `rs-perf-run ${big ? "big" : ""} ${mine ? "mine" : ""}` },
         h("div", { class: "rs-perf-top" },
             h("span", { class: "rs-perf-clock" }, duration(elapsed), eta ? h("span", { class: "rs-perf-eta" }, ` / ${duration(eta, 0)}`) : null),
             h("span", { class: "rs-grow" }),
@@ -55,11 +56,11 @@ function runRow(run, now, { date = false } = {}) {
 }
 
 /** Server tab: the run in progress and the last 5 runs. */
-export function perfView(perf, receivedAt) {
+export function perfView(perf, receivedAt, workflow = null) {
     if (!perf) return [h("p", { class: "rs-muted rs-small" }, "Waiting for the server…")];
     const since = Date.now() - receivedAt;
     const out = perf.running.length
-        ? perf.running.map((r) => runningBlock(r, since))
+        ? perf.running.map((r) => runningBlock(r, since, { workflow }))
         : [h("div", { class: "rs-perf-idle rs-muted" }, "Idle: nothing running")];
     if (perf.recent.length) {
         out.push(h("div", { class: "rs-perf-head rs-muted rs-small" }, "Last runs"));
@@ -72,7 +73,7 @@ export function perfView(perf, receivedAt) {
 export function timerView(perf, receivedAt, workflow) {
     if (!perf) return [h("p", { class: "rs-muted rs-small" }, "Waiting for the server…")];
     const since = Date.now() - receivedAt;
-    if (perf.running.length) return perf.running.map((r) => runningBlock(r, since, { big: true }));
+    if (perf.running.length) return perf.running.map((r) => runningBlock(r, since, { big: true, workflow }));
     const eta = workflow ? perf.etas?.[workflow] : null;
     return [h("div", { class: "rs-perf-run big idle" },
         h("div", { class: "rs-perf-top" },
diff --git a/web/rigshare/styles.js b/web/rigshare/styles.js
index 0b1286a..82b3816 100644
--- a/web/rigshare/styles.js
+++ b/web/rigshare/styles.js
@@ -254,6 +254,8 @@ body.rs-no-manager [aria-label="ComfyUI Manager"] { display: none !important; }
 .rs-perf-clock { font: 600 20px/1.1 ui-monospace, "SF Mono", Consolas, monospace; font-variant-numeric: tabular-nums; color: #60a5fa; }
 .rs-perf-eta { font-size: 13px; font-weight: 500; color: var(--rs-muted); }
 .rs-perf-over { color: #f59e0b; }
+.rs-perf-run.mine .rs-perf-clock { color: #eab308; }
+.rs-perf-run.mine .rs-perf-bar:not(.over) > div { background: #eab308; }
 .rs-perf-bar { height: 4px; border-radius: 2px; background: var(--rs-bg); overflow: hidden; }
 .rs-perf-bar > div { height: 100%; background: #60a5fa; transition: width .25s linear; }
 .rs-perf-bar.over > div { background: #f59e0b; }