From 0444d54a92ad2745a35ecedb6539bdfd3ee9d780 Mon Sep 17 00:00:00 2001
From: Endri Bezati <endri.bezati@gmail.com>
Date: Fri, 2 Oct 2026 10:33:47 +0200
Subject: [PATCH] The queue-size badges show only while the Debug button is
 pressed

The badge on each edge -- how many tokens sat on it at the step shown --
was drawn whenever the queue overlay was on, covering the graph with
numbers whether or not anyone was stepping through the run. They are the
stepper's, so they now follow the button that opens it: pressing Debug
sets `workflow-debug-expanded` on the body and shows them, pressing it
again hides them, and the stylesheet hides them without the class. They
also go when the stepper has nothing to show. The header's queue toggle
still hides them as before.

Claude-Session: https://claude.ai/code/session_015VK7fH1c4aKbexnq2QcuKU
---
 .../diagram-client/src/diagram-client.css     |  6 +++
 packages/diagram-client/src/navigation-ui.ts  | 17 ++++++
 .../test/queue-badges-with-debug.test.ts      | 52 +++++++++++++++++++
 3 files changed, 75 insertions(+)
 create mode 100644 packages/diagram-client/test/queue-badges-with-debug.test.ts

diff --git a/packages/diagram-client/src/diagram-client.css b/packages/diagram-client/src/diagram-client.css
index fffa3c3..7e9e388 100644
--- a/packages/diagram-client/src/diagram-client.css
+++ b/packages/diagram-client/src/diagram-client.css
@@ -245,6 +245,12 @@ body.workflow-queue-hidden .edge-queue-badge {
     display: none;
 }
 
+/* The queue-size badges are the stepper's: shown only while the Debug button
+   is pressed (navigation-ui `showQueueBadges`). */
+body:not(.workflow-debug-expanded) .edge-queue-badge {
+    display: none;
+}
+
 /* Theme-specific tuning: VS Code sets one of these classes on the webview body. */
 body.vscode-light {
     /* Keep light theme fills unmodified (the VS Code theme already picks a good widget background). */
diff --git a/packages/diagram-client/src/navigation-ui.ts b/packages/diagram-client/src/navigation-ui.ts
index c0ddd69..6546b16 100644
--- a/packages/diagram-client/src/navigation-ui.ts
+++ b/packages/diagram-client/src/navigation-ui.ts
@@ -135,6 +135,21 @@ function isQueueTraceVisible(): boolean {
     }
 }
 
+/** The body class that shows the queue-size badges on the edges. */
+export const DEBUG_EXPANDED_CLASS = 'workflow-debug-expanded';
+
+/**
+ * Show the queue-size badges exactly while the Debug button is pressed.
+ *
+ * The badges are the stepper's: how many tokens sat on each edge at the step
+ * shown. Drawn all the time they cover the graph with numbers nobody asked to
+ * read, so they follow the button that opens the stepper. The stylesheet hides
+ * them unless the body carries the class.
+ */
+export function showQueueBadges(body: { classList: { toggle(name: string, force?: boolean): unknown } } | undefined, shown: boolean): void {
+    body?.classList.toggle(DEBUG_EXPANDED_CLASS, shown);
+}
+
 function labelForParentWorkflow(option: { sourceUri: string; workflowName: string }, currentSourceUri: string): string {
     if (normalizeSourceUriKey(option.sourceUri) === normalizeSourceUriKey(currentSourceUri)) {
         return option.workflowName;
@@ -754,11 +769,13 @@ export class WorkflowNavigationUi {
             this.debugClusterEl.hidden = true;
             this.debugClusterEl.replaceChildren();
             this.debugExpanded = false;
+            showQueueBadges(globalThis.document?.body, false);
             return;
         }
 
         this.debugRowEl.hidden = false;
         this.debugFabEl.classList.toggle('active', this.debugExpanded);
+        showQueueBadges(globalThis.document?.body, this.debugExpanded);
 
         if (!this.debugExpanded) {
             this.debugClusterEl.hidden = true;
diff --git a/packages/diagram-client/test/queue-badges-with-debug.test.ts b/packages/diagram-client/test/queue-badges-with-debug.test.ts
new file mode 100644
index 0000000..f886d3c
--- /dev/null
+++ b/packages/diagram-client/test/queue-badges-with-debug.test.ts
@@ -0,0 +1,52 @@
+/**
+ * The queue-size badges on the edges show only while the Debug button is
+ * pressed, and disappear when it is pressed again.
+ *
+ * They are the stepper's: how many tokens sat on each edge at the step shown.
+ * The button opens the stepper and sets a class on the body; the stylesheet
+ * hides the badges without it.
+ */
+import { readFileSync } from 'node:fs';
+import * as path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { describe, expect, it } from 'vitest';
+import { DEBUG_EXPANDED_CLASS, showQueueBadges } from '../src/navigation-ui';
+
+function fakeBody() {
+    const classes = new Set<string>();
+    return {
+        classes,
+        classList: {
+            toggle(name: string, force?: boolean) {
+                const on = force ?? !classes.has(name);
+                if (on) {
+                    classes.add(name);
+                } else {
+                    classes.delete(name);
+                }
+                return on;
+            }
+        }
+    };
+}
+
+describe('the queue-size badges', () => {
+    it('show when the Debug button is pressed and hide when it is pressed again', () => {
+        const body = fakeBody();
+
+        showQueueBadges(body, true);
+        expect(body.classes.has(DEBUG_EXPANDED_CLASS)).toBe(true);
+
+        showQueueBadges(body, false);
+        expect(body.classes.has(DEBUG_EXPANDED_CLASS)).toBe(false);
+    });
+
+    it('are hidden by the stylesheet unless the body says the stepper is open', () => {
+        const here = path.dirname(fileURLToPath(import.meta.url));
+        const css = readFileSync(path.join(here, '../src/diagram-client.css'), 'utf8');
+
+        expect(css).toMatch(
+            new RegExp(`body:not\\(\\.${DEBUG_EXPANDED_CLASS}\\)\\s+\\.edge-queue-badge\\s*\\{\\s*display:\\s*none;`)
+        );
+    });
+});