From 005522786f20874cc8d36a09858f7488e53fbfb1 Mon Sep 17 00:00:00 2001
From: Luke Parker <10430890+Hona@users.noreply.github.com>
Date: Wed, 16 Sep 2026 14:58:54 +1000
Subject: [PATCH] fix(app): enable debug tools toggle on local channel (#49278)

---
 packages/app/src/shell/shell.tsx             | 15 ++++++++++-----
 packages/app/src/shell/titlebar/titlebar.tsx |  2 +-
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/packages/app/src/shell/shell.tsx b/packages/app/src/shell/shell.tsx
index b781f3e2620..0062a843854 100644
--- a/packages/app/src/shell/shell.tsx
+++ b/packages/app/src/shell/shell.tsx
@@ -33,6 +33,15 @@ export default function Layout(props: ParentProps) {
     },
     install: installUpdate,
   }
+  // A plain object avoids the compiler's conditional-prop memo, which leaks when read from event handlers.
+  const debugTools = import.meta.env.DEV
+    ? {
+        get visible() {
+          return state.debugTools
+        },
+        toggle: () => setState("debugTools", (value) => !value),
+      }
+    : undefined
 
   return (
     <TitlebarRightProvider>
@@ -53,11 +62,7 @@ export default function Layout(props: ParentProps) {
         <Titlebar
           update={update}
           verticalTabs={verticalTabs() ? { mount: state.tabsMount } : undefined}
-          debugTools={
-            import.meta.env.DEV
-              ? { visible: state.debugTools, toggle: () => setState("debugTools", (value) => !value) }
-              : undefined
-          }
+          debugTools={debugTools}
         />
         <div class="flex flex-1 min-h-0 min-w-0 flex-row">
           <Show when={verticalTabs()}>
diff --git a/packages/app/src/shell/titlebar/titlebar.tsx b/packages/app/src/shell/titlebar/titlebar.tsx
index cd3bdb8c736..362cc9aaa79 100644
--- a/packages/app/src/shell/titlebar/titlebar.tsx
+++ b/packages/app/src/shell/titlebar/titlebar.tsx
@@ -792,7 +792,7 @@ function ChannelIndicator(props: {
   if (!channel || channel === "prod") return null
 
   const label = () => language.t(`titlebar.channel.${channel}`)
-  const debug = () => (channel === "dev" ? props.debugTools : undefined)
+  const debug = () => (channel === "dev" || channel === "local" ? props.debugTools : undefined)
   return (
     <Tooltip
       placement={props.sidebar ? "right" : "bottom"}