fix(tui): move debug overlay into developer tools (#42098)

packages/tui/src/app.tsx

@@ -993,6 +993,7 @@ function App(props: { pair?: DialogPairCredentials }) {
         name: "app.debug",
         title: "Toggle debug panel",
         category: "System",
+        palette: undefined,
         run: () => {
           renderer.toggleDebugOverlay()
           dialog.clear()

packages/tui/src/component/devtools-bar.tsx

@@ -1,4 +1,4 @@
-import { TextAttributes, type Renderable } from "@opentui/core"
+import { CliRenderEvents, TextAttributes, type Renderable } from "@opentui/core"
 import { TimeToFirstDraw, useRenderer, useTerminalDimensions } from "@opentui/solid"
 import { open } from "node:fs/promises"
 import { tmpdir } from "node:os"
@@ -45,6 +45,7 @@ export function DevToolsBar() {
   const [dumpPath, setDumpPath] = createSignal<string>()
   const [dumpError, setDumpError] = createSignal<string>()
   const [frontendSamples, setFrontendSamples] = createSignal<readonly ProcessSample[]>([])
+  const [debugOverlay, setDebugOverlay] = createSignal(renderer.debugOverlay.enabled)
   let focus: Renderable | null
   const connected = createMemo(() => client.connection.status() === "connected")
   const serverIndicator = createMemo(() => connectionIndicator(client.connection.status(), client.connection.attempt()))
@@ -94,6 +95,10 @@ export function DevToolsBar() {
   )
   onCleanup(offEscape)
 
+  const onDebugOverlayToggle = (enabled: boolean) => setDebugOverlay(enabled)
+  renderer.on(CliRenderEvents.DEBUG_OVERLAY_TOGGLE, onDebugOverlayToggle)
+  onCleanup(() => renderer.off(CliRenderEvents.DEBUG_OVERLAY_TOGGLE, onDebugOverlayToggle))
+
   onMount(() => {
     const eventLoop = monitorEventLoopDelay({ resolution: 20 })
     let frontendCPU = process.cpuUsage()
@@ -319,6 +324,9 @@ export function DevToolsBar() {
               unit=" MB"
               decimals={0}
             />
+            <Action onClick={() => renderer.toggleDebugOverlay()} hoverBackground>
+              {debugOverlay() ? "[x]" : "[ ]"} Debug overlay
+            </Action>
           </PanelBox>
         </Show>
       </BarItem>