From 5d37d68bc47420ec1304d23e69476c8438efe0eb Mon Sep 17 00:00:00 2001
From: Kit Langton <kit.langton@gmail.com>
Date: Fri, 7 Aug 2026 20:33:54 +0000
Subject: [PATCH] fix(tui): move debug overlay to devtools

---
 packages/tui/src/app.tsx                    | 10 ----------
 packages/tui/src/component/devtools-bar.tsx | 10 ++++++++++
 packages/tui/src/config/v1/keybind.ts       |  2 --
 3 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/packages/tui/src/app.tsx b/packages/tui/src/app.tsx
index 90f8491f384..5e80521ec93 100644
--- a/packages/tui/src/app.tsx
+++ b/packages/tui/src/app.tsx
@@ -156,7 +156,6 @@ const appBindingCommands = [
   "help.show",
   "docs.open",
   "diff.open",
-  "app.debug",
   "app.console",
   "terminal.suspend",
   "terminal.title.toggle",
@@ -958,15 +957,6 @@ function App(props: { pair?: DialogPairCredentials }) {
         run: () => exit(),
         category: "System",
       },
-      {
-        name: "app.debug",
-        title: "Toggle debug panel",
-        category: "System",
-        run: () => {
-          renderer.toggleDebugOverlay()
-          dialog.clear()
-        },
-      },
       {
         name: "app.console",
         title: "Toggle console",
diff --git a/packages/tui/src/component/devtools-bar.tsx b/packages/tui/src/component/devtools-bar.tsx
index f6c387971e5..1331eab56cc 100644
--- a/packages/tui/src/component/devtools-bar.tsx
+++ b/packages/tui/src/component/devtools-bar.tsx
@@ -41,6 +41,7 @@ export function DevToolsBar() {
   const [dumping, setDumping] = createSignal(false)
   const [dumpPath, setDumpPath] = createSignal<string>()
   const [dumpError, setDumpError] = createSignal<string>()
+  const [debugOverlay, setDebugOverlay] = createSignal(Boolean(renderer.debugOverlay.enabled))
   const [frontendSamples, setFrontendSamples] = createSignal<readonly ProcessSample[]>([])
   let focus: Renderable | null
   const connected = createMemo(() => client.connection.status() === "connected")
@@ -391,6 +392,15 @@ export function DevToolsBar() {
               >
                 {verboseTurnTokens() ? "[x]" : "[ ]"} Turn token usage (verbose)
               </Action>
+              <Action
+                onClick={() => {
+                  renderer.toggleDebugOverlay()
+                  setDebugOverlay(Boolean(renderer.debugOverlay.enabled))
+                }}
+                hoverBackground
+              >
+                {debugOverlay() ? "[x]" : "[ ]"} Renderer debug overlay
+              </Action>
             </box>
             <For each={groups()}>
               {(group) => (
diff --git a/packages/tui/src/config/v1/keybind.ts b/packages/tui/src/config/v1/keybind.ts
index eb7a47e9b06..fec9d762693 100644
--- a/packages/tui/src/config/v1/keybind.ts
+++ b/packages/tui/src/config/v1/keybind.ts
@@ -46,7 +46,6 @@ export const Definitions = {
   leader: keybind(LeaderDefault, "Leader key for keybind combinations"),
 
   app_exit: keybind("ctrl+c,ctrl+d,<leader>q", "Exit the application"),
-  app_debug: keybind("none", "Toggle debug panel"),
   app_console: keybind("none", "Toggle console"),
   app_heap_snapshot: keybind("none", "Write heap snapshot"),
   app_toggle_animations: keybind("none", "Toggle animations"),
@@ -251,7 +250,6 @@ export const Descriptions = Object.fromEntries(
 ) as Record<KeybindName, string>
 export const CommandMap = {
   app_exit: "app.exit",
-  app_debug: "app.debug",
   app_console: "app.console",
   app_heap_snapshot: "app.heap_snapshot",
   app_toggle_animations: "app.toggle.animations",