fix(tui): move debug overlay to devtools

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",

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) => (

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",