From 6baa7ffd552c1413129e7016265caab73d17acd0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Carlos=20Flor=C3=AAncio?= <carlosmflorencio@gmail.com>
Date: Sun, 8 Feb 2026 19:17:35 +0000
Subject: [PATCH] feat: add ui debug on make start-debug

---
 apps/cli/src/start.ts   | 2 +-
 apps/web/app/layout.tsx | 6 ++++--
 apps/web/global.d.ts    | 2 ++
 apps/web/lib/config.ts  | 4 +++-
 4 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/apps/cli/src/start.ts b/apps/cli/src/start.ts
index 98f914b870..a128b1fc64 100644
--- a/apps/cli/src/start.ts
+++ b/apps/cli/src/start.ts
@@ -110,7 +110,7 @@ export async function runStart({
       ...(debug ? { KANDEV_DEBUG_AGENT_MESSAGES: "true" } : {}),
     },
   });
-  const webEnv = buildWebEnv({ ports, includeMcp: true, production: true });
+  const webEnv = buildWebEnv({ ports, includeMcp: true, production: true, debug });
 
   const supervisor = createProcessSupervisor();
   supervisor.attachSignalHandlers();
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
index 98721dc8ff..2ba4f4e5a7 100644
--- a/apps/web/app/layout.tsx
+++ b/apps/web/app/layout.tsx
@@ -41,6 +41,7 @@ export default function RootLayout({
   // This allows accessing the app from any device (iPhone, Tailscale, etc.)
   const apiPort = extractPort(process.env.KANDEV_API_BASE_URL ?? "");
   const mcpPort = extractPort(process.env.KANDEV_MCP_SERVER_URL ?? "");
+  const debugMode = process.env.NEXT_PUBLIC_KANDEV_DEBUG === "true";
 
   return (
     <html lang="en" suppressHydrationWarning>
@@ -48,14 +49,15 @@ export default function RootLayout({
         <meta name="apple-mobile-web-app-title" content="Kandev" />
       </head>
       <body className="antialiased font-sans">
-        {(apiPort || mcpPort) ? (
-          // Inject runtime ports for production bundles where ports are chosen at launch.
+        {(apiPort || mcpPort || debugMode) ? (
+          // Inject runtime config for production bundles where ports are chosen at launch.
           // Client will build full URLs using window.location.hostname + port
           <script
             dangerouslySetInnerHTML={{
               __html: [
                 apiPort ? `window.__KANDEV_API_PORT = ${JSON.stringify(apiPort)};` : '',
                 mcpPort ? `window.__KANDEV_MCP_PORT = ${JSON.stringify(mcpPort)};` : '',
+                debugMode ? `window.__KANDEV_DEBUG = true;` : '',
               ].filter(Boolean).join('\n'),
             }}
           />
diff --git a/apps/web/global.d.ts b/apps/web/global.d.ts
index 2745299e6e..532db63f5a 100644
--- a/apps/web/global.d.ts
+++ b/apps/web/global.d.ts
@@ -8,5 +8,7 @@ declare global {
     // Port-only injection (client builds URL from window.location.hostname + port)
     __KANDEV_API_PORT?: string;
     __KANDEV_MCP_PORT?: string;
+    // Debug mode flag (injected at runtime by layout.tsx)
+    __KANDEV_DEBUG?: boolean;
   }
 }
diff --git a/apps/web/lib/config.ts b/apps/web/lib/config.ts
index 0a7405ebe3..a1166d9d72 100644
--- a/apps/web/lib/config.ts
+++ b/apps/web/lib/config.ts
@@ -11,7 +11,9 @@ const DEFAULT_MCP_PORT = 9090;
 const DEFAULT_API_BASE_URL = `http://localhost:${DEFAULT_API_PORT}`;
 const DEFAULT_MCP_SERVER_URL = `http://localhost:${DEFAULT_MCP_PORT}/sse`;
 
-export const DEBUG_UI = process.env.NEXT_PUBLIC_KANDEV_DEBUG === 'true';
+export const DEBUG_UI =
+  process.env.NEXT_PUBLIC_KANDEV_DEBUG === 'true' ||
+  (typeof window !== 'undefined' && window.__KANDEV_DEBUG === true);
 
 /**
  * Build URL from current page hostname and port.