From 5602cf5fc81eecabbf9699e1c2c30608e175e2f1 Mon Sep 17 00:00:00 2001
From: naps62-yolo <yolo-git-naps-pt@naps62.com>
Date: Sun, 21 Jun 2026 15:24:36 +0000
Subject: [PATCH] feat(maestro): navbar debug toggle for the HUD (#20)

Add an always-visible "debug" button to the topbar (next to the design-kit
shortcut) that toggles the debug HUD. Reflects the current state (lit in accent
when on) and stays in sync with the Ctrl+Shift+D keybind via the shared toggle
event.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 web/src/catalog.ts | 21 +++++++++++++++++++++
 web/src/styles.css |  6 ++++++
 2 files changed, 27 insertions(+)

diff --git a/web/src/catalog.ts b/web/src/catalog.ts
index b73395f..640350e 100644
--- a/web/src/catalog.ts
+++ b/web/src/catalog.ts
@@ -1,4 +1,5 @@
 import { killSession } from "./api.js";
+import { HUD_TOGGLE_EVENT, isHudEnabled, toggleHud } from "./debug.js";
 import { CatalogStore } from "./events.js";
 import type { DaemonInfo, Session } from "./types.js";
 import { sessionLabel, sessionName } from "./types.js";
@@ -234,6 +235,25 @@ function renderEmpty(
  * the app-level actions (spawn, theme toggle). Kept out of the sidebar so these
  * stay put and reachable regardless of which pane is showing.
  */
+/** Navbar toggle for the debug HUD (#20), next to the design-kit shortcut.
+ * Reflects the current state and stays in sync with the Ctrl+Shift+D keybind. */
+function createDebugToggle(): HTMLButtonElement {
+  const btn = document.createElement("button");
+  btn.type = "button";
+  btn.className = "btn btn-ghost debug-toggle";
+  btn.textContent = "debug";
+  btn.title = "Toggle the debug HUD (Ctrl+Shift+D)";
+  const sync = () => {
+    const on = isHudEnabled();
+    btn.setAttribute("aria-pressed", String(on));
+    btn.classList.toggle("is-active", on);
+  };
+  btn.addEventListener("click", () => toggleHud());
+  window.addEventListener(HUD_TOGGLE_EVENT, sync);
+  sync();
+  return btn;
+}
+
 export function renderTopbar(store: CatalogStore): HTMLElement {
   const header = document.createElement("header");
   header.className = "app-header";
@@ -268,6 +288,7 @@ export function renderTopbar(store: CatalogStore): HTMLElement {
     kit.title = "Open the design kit (DEV)";
     actions.appendChild(kit);
   }
+  actions.appendChild(createDebugToggle());
   actions.appendChild(createThemeToggle());
   const spawnBtn = document.createElement("button");
   spawnBtn.type = "button";
diff --git a/web/src/styles.css b/web/src/styles.css
index 7b389dd..ec34074 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -1893,3 +1893,9 @@ textarea {
 .hud-v[data-activity="Idle"] {
   color: var(--muted);
 }
+
+/* debug-HUD navbar toggle: lit when the HUD is on. */
+.debug-toggle.is-active {
+  color: var(--accent);
+  border-color: var(--accent);
+}