The queue-size badges show only while the Debug button is pressed

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). */

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;

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;`)
+        );
+    });
+});