From 8b657b1940dd3f07d9b753465eda822370fc7f27 Mon Sep 17 00:00:00 2001
From: devjiwonchoi <devjiwonchoi@gmail.com>
Date: Tue, 10 Jun 2025 10:26:34 +0200
Subject: [PATCH 01/11] [devtools] add panel ui placeholder under feature flag

---
 .../components/dev-tools-panel/dev-tools-panel.tsx    |  6 ++++++
 .../src/next-devtools/dev-overlay/dev-overlay.tsx     |  3 +++
 packages/next/src/next-devtools/dev-overlay/shared.ts | 11 +++++++++++
 .../dev-overlay/styles/component-styles.tsx           |  2 ++
 4 files changed, 22 insertions(+)
 create mode 100644 packages/next/src/next-devtools/dev-overlay/components/dev-tools-panel/dev-tools-panel.tsx

diff --git a/packages/next/src/next-devtools/dev-overlay/components/dev-tools-panel/dev-tools-panel.tsx b/packages/next/src/next-devtools/dev-overlay/components/dev-tools-panel/dev-tools-panel.tsx
new file mode 100644
index 00000000000..8760de8c825
--- /dev/null
+++ b/packages/next/src/next-devtools/dev-overlay/components/dev-tools-panel/dev-tools-panel.tsx
@@ -0,0 +1,6 @@
+export function DevToolsPanel() {
+  // TODO: Remove style; It is to indicate faster in the browser.
+  return <div style={{ color: 'black' }}>DevToolsPanel</div>
+}
+
+export const DEV_TOOLS_PANEL_STYLES = ``
diff --git a/packages/next/src/next-devtools/dev-overlay/dev-overlay.tsx b/packages/next/src/next-devtools/dev-overlay/dev-overlay.tsx
index d25cb65fd79..9877b499302 100644
--- a/packages/next/src/next-devtools/dev-overlay/dev-overlay.tsx
+++ b/packages/next/src/next-devtools/dev-overlay/dev-overlay.tsx
@@ -12,6 +12,7 @@ import { DarkTheme } from './styles/dark-theme'
 import { useDevToolsScale } from './components/errors/dev-tools-indicator/dev-tools-info/preferences'
 import type { HydrationErrorState } from '../shared/hydration-error'
 import { DevToolsIndicator as DevToolsIndicatorNew } from './components/devtools-indicator/devtools-indicator'
+import { DevToolsPanel } from './components/dev-tools-panel/dev-tools-panel'
 
 export function DevOverlay({
   state,
@@ -56,6 +57,8 @@ export function DevOverlay({
                   />
                 ))}
 
+              {state.isDevToolsPanelOpen && <DevToolsPanel />}
+
               <ErrorOverlay
                 state={state}
                 dispatch={dispatch}
diff --git a/packages/next/src/next-devtools/dev-overlay/shared.ts b/packages/next/src/next-devtools/dev-overlay/shared.ts
index 008128b948f..2d973bb6afb 100644
--- a/packages/next/src/next-devtools/dev-overlay/shared.ts
+++ b/packages/next/src/next-devtools/dev-overlay/shared.ts
@@ -29,6 +29,7 @@ export interface OverlayState {
   debugInfo: DebugInfo
   routerType: 'pages' | 'app'
   isErrorOverlayOpen: boolean
+  isDevToolsPanelOpen: boolean
 }
 export type OverlayDispatch = React.Dispatch<DispatcherEvent>
 
@@ -49,6 +50,7 @@ export const ACTION_BUILDING_INDICATOR_SHOW = 'building-indicator-show'
 export const ACTION_BUILDING_INDICATOR_HIDE = 'building-indicator-hide'
 export const ACTION_RENDERING_INDICATOR_SHOW = 'rendering-indicator-show'
 export const ACTION_RENDERING_INDICATOR_HIDE = 'rendering-indicator-hide'
+export const ACTION_DEV_TOOLS_PANEL_TOGGLE = 'dev-tools-panel-toggle'
 
 export const STORAGE_KEY_THEME = '__nextjs-dev-tools-theme'
 export const STORAGE_KEY_POSITION = '__nextjs-dev-tools-position'
@@ -121,6 +123,10 @@ export interface RenderingIndicatorHideAction {
   type: typeof ACTION_RENDERING_INDICATOR_HIDE
 }
 
+export interface DevToolsPanelToggleAction {
+  type: typeof ACTION_DEV_TOOLS_PANEL_TOGGLE
+}
+
 export type DispatcherEvent =
   | BuildOkAction
   | BuildErrorAction
@@ -139,6 +145,7 @@ export type DispatcherEvent =
   | BuildingIndicatorHideAction
   | RenderingIndicatorShowAction
   | RenderingIndicatorHideAction
+  | DevToolsPanelToggleAction
 
 const REACT_ERROR_STACK_BOTTOM_FRAME_REGEX =
   // 1st group: v8
@@ -177,6 +184,7 @@ export const INITIAL_OVERLAY_STATE: Omit<
   refreshState: { type: 'idle' },
   versionInfo: { installed: '0.0.0', staleness: 'unknown' },
   debugInfo: { devtoolsFrontendUrl: undefined },
+  isDevToolsPanelOpen: false,
 }
 
 function getInitialState(
@@ -339,6 +347,9 @@ export function useErrorOverlayReducer(
         case ACTION_RENDERING_INDICATOR_HIDE: {
           return { ...state, renderingIndicator: false }
         }
+        case ACTION_DEV_TOOLS_PANEL_TOGGLE: {
+          return { ...state, isDevToolsPanelOpen: !state.isDevToolsPanelOpen }
+        }
         default: {
           return state
         }
diff --git a/packages/next/src/next-devtools/dev-overlay/styles/component-styles.tsx b/packages/next/src/next-devtools/dev-overlay/styles/component-styles.tsx
index b5dc8ef24e5..b7dfd57349a 100644
--- a/packages/next/src/next-devtools/dev-overlay/styles/component-styles.tsx
+++ b/packages/next/src/next-devtools/dev-overlay/styles/component-styles.tsx
@@ -24,6 +24,7 @@ import { DEV_TOOLS_INFO_USER_PREFERENCES_STYLES } from '../components/errors/dev
 import { DEV_TOOLS_INFO_RENDER_FILES_STYLES } from '../components/overview/segment-explorer'
 import { FADER_STYLES } from '../components/fader'
 import { RESTART_SERVER_BUTTON_STYLES } from '../components/errors/error-overlay-toolbar/restart-server-button'
+import { DEV_TOOLS_PANEL_STYLES } from '../components/dev-tools-panel/dev-tools-panel'
 
 export function ComponentStyles() {
   return (
@@ -53,6 +54,7 @@ export function ComponentStyles() {
         ${DEV_TOOLS_INFO_ROUTE_INFO_STYLES}
         ${DEV_TOOLS_INFO_USER_PREFERENCES_STYLES}
         ${DEV_TOOLS_INFO_RENDER_FILES_STYLES}
+        ${DEV_TOOLS_PANEL_STYLES}
         ${FADER_STYLES}
       `}
     </style>

From c38bb9ce6b7c2bf17ef1687823d475a80f90871a Mon Sep 17 00:00:00 2001
From: devjiwonchoi <devjiwonchoi@gmail.com>
Date: Tue, 10 Jun 2025 10:54:00 +0200
Subject: [PATCH 02/11] better feature blocking

---
 packages/next/src/next-devtools/dev-overlay/dev-overlay.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/next/src/next-devtools/dev-overlay/dev-overlay.tsx b/packages/next/src/next-devtools/dev-overlay/dev-overlay.tsx
index 9877b499302..e41ba2ce1d6 100644
--- a/packages/next/src/next-devtools/dev-overlay/dev-overlay.tsx
+++ b/packages/next/src/next-devtools/dev-overlay/dev-overlay.tsx
@@ -57,7 +57,8 @@ export function DevOverlay({
                   />
                 ))}
 
-              {state.isDevToolsPanelOpen && <DevToolsPanel />}
+              {process.env.__NEXT_DEVTOOL_NEW_PANEL_UI &&
+                state.isDevToolsPanelOpen && <DevToolsPanel />}
 
               <ErrorOverlay
                 state={state}

From fe7e9edc2d1d797c931c145e8cee4d71c7a8989d Mon Sep 17 00:00:00 2001
From: devjiwonchoi <devjiwonchoi@gmail.com>
Date: Thu, 12 Jun 2025 13:16:02 +0200
Subject: [PATCH 03/11] remove style porting

---
 .../components/dev-tools-panel/dev-tools-panel.tsx            | 4 +---
 .../src/next-devtools/dev-overlay/styles/component-styles.tsx | 2 --
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/next/src/next-devtools/dev-overlay/components/dev-tools-panel/dev-tools-panel.tsx b/packages/next/src/next-devtools/dev-overlay/components/dev-tools-panel/dev-tools-panel.tsx
index 8760de8c825..51777fb1930 100644
--- a/packages/next/src/next-devtools/dev-overlay/components/dev-tools-panel/dev-tools-panel.tsx
+++ b/packages/next/src/next-devtools/dev-overlay/components/dev-tools-panel/dev-tools-panel.tsx
@@ -1,6 +1,4 @@
 export function DevToolsPanel() {
   // TODO: Remove style; It is to indicate faster in the browser.
-  return <div style={{ color: 'black' }}>DevToolsPanel</div>
+  return <div className="text-black">DevToolsPanel</div>
 }
-
-export const DEV_TOOLS_PANEL_STYLES = ``
diff --git a/packages/next/src/next-devtools/dev-overlay/styles/component-styles.tsx b/packages/next/src/next-devtools/dev-overlay/styles/component-styles.tsx
index b7dfd57349a..b5dc8ef24e5 100644
--- a/packages/next/src/next-devtools/dev-overlay/styles/component-styles.tsx
+++ b/packages/next/src/next-devtools/dev-overlay/styles/component-styles.tsx
@@ -24,7 +24,6 @@ import { DEV_TOOLS_INFO_USER_PREFERENCES_STYLES } from '../components/errors/dev
 import { DEV_TOOLS_INFO_RENDER_FILES_STYLES } from '../components/overview/segment-explorer'
 import { FADER_STYLES } from '../components/fader'
 import { RESTART_SERVER_BUTTON_STYLES } from '../components/errors/error-overlay-toolbar/restart-server-button'
-import { DEV_TOOLS_PANEL_STYLES } from '../components/dev-tools-panel/dev-tools-panel'
 
 export function ComponentStyles() {
   return (
@@ -54,7 +53,6 @@ export function ComponentStyles() {
         ${DEV_TOOLS_INFO_ROUTE_INFO_STYLES}
         ${DEV_TOOLS_INFO_USER_PREFERENCES_STYLES}
         ${DEV_TOOLS_INFO_RENDER_FILES_STYLES}
-        ${DEV_TOOLS_PANEL_STYLES}
         ${FADER_STYLES}
       `}
     </style>

From e61775569074bb85ea8dae715f20af2b3ca9136c Mon Sep 17 00:00:00 2001
From: devjiwonchoi <devjiwonchoi@gmail.com>
Date: Thu, 12 Jun 2025 18:27:27 +0200
Subject: [PATCH 04/11] use forked devtools indicator

---
 .../devtools-indicator/devtools-indicator.tsx        | 12 +++++++++---
 .../devtools-panel.tsx}                              |  0
 .../src/next-devtools/dev-overlay/dev-overlay.tsx    |  2 +-
 3 files changed, 10 insertions(+), 4 deletions(-)
 rename packages/next/src/next-devtools/dev-overlay/components/{dev-tools-panel/dev-tools-panel.tsx => devtools-panel/devtools-panel.tsx} (100%)

diff --git a/packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/devtools-indicator.tsx b/packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/devtools-indicator.tsx
index 0aa668704ae..51f4c3ec8cd 100644
--- a/packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/devtools-indicator.tsx
+++ b/packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/devtools-indicator.tsx
@@ -9,7 +9,11 @@ import {
   MENU_CURVE,
   MENU_DURATION_MS,
 } from '../errors/dev-tools-indicator/utils'
-import { ACTION_ERROR_OVERLAY_TOGGLE, STORAGE_KEY_POSITION } from '../../shared'
+import {
+  ACTION_DEV_TOOLS_PANEL_TOGGLE,
+  ACTION_ERROR_OVERLAY_TOGGLE,
+  STORAGE_KEY_POSITION,
+} from '../../shared'
 import { getInitialPosition } from '../errors/dev-tools-indicator/dev-tools-info/preferences'
 import { Draggable } from '../errors/dev-tools-indicator/draggable'
 
@@ -37,7 +41,9 @@ export function DevToolsIndicator({
     dispatch({ type: ACTION_ERROR_OVERLAY_TOGGLE })
   }
 
-  const onTriggerClick = () => {}
+  const toggleDevToolsPanel = () => {
+    dispatch({ type: ACTION_DEV_TOOLS_PANEL_TOGGLE })
+  }
 
   return (
     <Toast
@@ -71,7 +77,7 @@ export function DevToolsIndicator({
           data-nextjs-dev-tools-button
           disabled={state.disableDevIndicator}
           issueCount={errorCount}
-          onTriggerClick={onTriggerClick}
+          onTriggerClick={toggleDevToolsPanel}
           toggleErrorOverlay={toggleErrorOverlay}
           isDevBuilding={state.buildingIndicator}
           isDevRendering={state.renderingIndicator}
diff --git a/packages/next/src/next-devtools/dev-overlay/components/dev-tools-panel/dev-tools-panel.tsx b/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel.tsx
similarity index 100%
rename from packages/next/src/next-devtools/dev-overlay/components/dev-tools-panel/dev-tools-panel.tsx
rename to packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel.tsx
diff --git a/packages/next/src/next-devtools/dev-overlay/dev-overlay.tsx b/packages/next/src/next-devtools/dev-overlay/dev-overlay.tsx
index e41ba2ce1d6..2ea6ad31cbd 100644
--- a/packages/next/src/next-devtools/dev-overlay/dev-overlay.tsx
+++ b/packages/next/src/next-devtools/dev-overlay/dev-overlay.tsx
@@ -12,7 +12,7 @@ import { DarkTheme } from './styles/dark-theme'
 import { useDevToolsScale } from './components/errors/dev-tools-indicator/dev-tools-info/preferences'
 import type { HydrationErrorState } from '../shared/hydration-error'
 import { DevToolsIndicator as DevToolsIndicatorNew } from './components/devtools-indicator/devtools-indicator'
-import { DevToolsPanel } from './components/dev-tools-panel/dev-tools-panel'
+import { DevToolsPanel } from './components/devtools-panel/devtools-panel'
 
 export function DevOverlay({
   state,

From b5e4d997da57ec029ef6c6b09a657b9a19505f7d Mon Sep 17 00:00:00 2001
From: devjiwonchoi <devjiwonchoi@gmail.com>
Date: Thu, 12 Jun 2025 18:31:08 +0200
Subject: [PATCH 05/11] ACTION_DEV_TOOLS_PANEL_TOGGLE

---
 .../components/devtools-indicator/devtools-indicator.tsx    | 4 ++--
 packages/next/src/next-devtools/dev-overlay/shared.ts       | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/devtools-indicator.tsx b/packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/devtools-indicator.tsx
index 51f4c3ec8cd..548d3a8863d 100644
--- a/packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/devtools-indicator.tsx
+++ b/packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/devtools-indicator.tsx
@@ -10,7 +10,7 @@ import {
   MENU_DURATION_MS,
 } from '../errors/dev-tools-indicator/utils'
 import {
-  ACTION_DEV_TOOLS_PANEL_TOGGLE,
+  ACTION_DEVTOOLS_PANEL_TOGGLE,
   ACTION_ERROR_OVERLAY_TOGGLE,
   STORAGE_KEY_POSITION,
 } from '../../shared'
@@ -42,7 +42,7 @@ export function DevToolsIndicator({
   }
 
   const toggleDevToolsPanel = () => {
-    dispatch({ type: ACTION_DEV_TOOLS_PANEL_TOGGLE })
+    dispatch({ type: ACTION_DEVTOOLS_PANEL_TOGGLE })
   }
 
   return (
diff --git a/packages/next/src/next-devtools/dev-overlay/shared.ts b/packages/next/src/next-devtools/dev-overlay/shared.ts
index 2d973bb6afb..3565b70e2a8 100644
--- a/packages/next/src/next-devtools/dev-overlay/shared.ts
+++ b/packages/next/src/next-devtools/dev-overlay/shared.ts
@@ -50,7 +50,7 @@ export const ACTION_BUILDING_INDICATOR_SHOW = 'building-indicator-show'
 export const ACTION_BUILDING_INDICATOR_HIDE = 'building-indicator-hide'
 export const ACTION_RENDERING_INDICATOR_SHOW = 'rendering-indicator-show'
 export const ACTION_RENDERING_INDICATOR_HIDE = 'rendering-indicator-hide'
-export const ACTION_DEV_TOOLS_PANEL_TOGGLE = 'dev-tools-panel-toggle'
+export const ACTION_DEVTOOLS_PANEL_TOGGLE = 'dev-tools-panel-toggle'
 
 export const STORAGE_KEY_THEME = '__nextjs-dev-tools-theme'
 export const STORAGE_KEY_POSITION = '__nextjs-dev-tools-position'
@@ -124,7 +124,7 @@ export interface RenderingIndicatorHideAction {
 }
 
 export interface DevToolsPanelToggleAction {
-  type: typeof ACTION_DEV_TOOLS_PANEL_TOGGLE
+  type: typeof ACTION_DEVTOOLS_PANEL_TOGGLE
 }
 
 export type DispatcherEvent =
@@ -347,7 +347,7 @@ export function useErrorOverlayReducer(
         case ACTION_RENDERING_INDICATOR_HIDE: {
           return { ...state, renderingIndicator: false }
         }
-        case ACTION_DEV_TOOLS_PANEL_TOGGLE: {
+        case ACTION_DEVTOOLS_PANEL_TOGGLE: {
           return { ...state, isDevToolsPanelOpen: !state.isDevToolsPanelOpen }
         }
         default: {

From 1570554ed1e67b34b111ae9a85498ad08410bcda Mon Sep 17 00:00:00 2001
From: devjiwonchoi <devjiwonchoi@gmail.com>
Date: Thu, 12 Jun 2025 19:38:52 +0200
Subject: [PATCH 06/11] merge conditions

---
 .../next-devtools/dev-overlay/dev-overlay.tsx | 21 ++++++++++---------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/packages/next/src/next-devtools/dev-overlay/dev-overlay.tsx b/packages/next/src/next-devtools/dev-overlay/dev-overlay.tsx
index 2ea6ad31cbd..aa10526cd68 100644
--- a/packages/next/src/next-devtools/dev-overlay/dev-overlay.tsx
+++ b/packages/next/src/next-devtools/dev-overlay/dev-overlay.tsx
@@ -39,13 +39,17 @@ export function DevOverlay({
             <>
               {state.showIndicator &&
                 (process.env.__NEXT_DEVTOOL_NEW_PANEL_UI ? (
-                  <DevToolsIndicatorNew
-                    scale={scale}
-                    state={state}
-                    dispatch={dispatch}
-                    errorCount={totalErrorCount}
-                    isBuildError={isBuildError}
-                  />
+                  <>
+                    <DevToolsIndicatorNew
+                      scale={scale}
+                      state={state}
+                      dispatch={dispatch}
+                      errorCount={totalErrorCount}
+                      isBuildError={isBuildError}
+                    />
+
+                    {state.isDevToolsPanelOpen && <DevToolsPanel />}
+                  </>
                 ) : (
                   <DevToolsIndicator
                     scale={scale}
@@ -57,9 +61,6 @@ export function DevOverlay({
                   />
                 ))}
 
-              {process.env.__NEXT_DEVTOOL_NEW_PANEL_UI &&
-                state.isDevToolsPanelOpen && <DevToolsPanel />}
-
               <ErrorOverlay
                 state={state}
                 dispatch={dispatch}

From 683fda9fb94024a84dcf787bee5da0900f68f525 Mon Sep 17 00:00:00 2001
From: devjiwonchoi <devjiwonchoi@gmail.com>
Date: Thu, 12 Jun 2025 21:02:38 +0200
Subject: [PATCH 07/11] add open close dispatch action

---
 .../devtools-indicator/devtools-indicator.tsx |  4 ++++
 .../src/next-devtools/dev-overlay/shared.ts   | 19 +++++++++++++++++++
 2 files changed, 23 insertions(+)

diff --git a/packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/devtools-indicator.tsx b/packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/devtools-indicator.tsx
index 548d3a8863d..00921a2a0d7 100644
--- a/packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/devtools-indicator.tsx
+++ b/packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/devtools-indicator.tsx
@@ -12,7 +12,9 @@ import {
 import {
   ACTION_DEVTOOLS_PANEL_TOGGLE,
   ACTION_ERROR_OVERLAY_TOGGLE,
+  ACTION_ERROR_OVERLAY_CLOSE,
   STORAGE_KEY_POSITION,
+  ACTION_DEVTOOLS_PANEL_CLOSE,
 } from '../../shared'
 import { getInitialPosition } from '../errors/dev-tools-indicator/dev-tools-info/preferences'
 import { Draggable } from '../errors/dev-tools-indicator/draggable'
@@ -38,10 +40,12 @@ export function DevToolsIndicator({
   const [vertical, horizontal] = position.split('-', 2)
 
   const toggleErrorOverlay = () => {
+    dispatch({ type: ACTION_DEVTOOLS_PANEL_CLOSE })
     dispatch({ type: ACTION_ERROR_OVERLAY_TOGGLE })
   }
 
   const toggleDevToolsPanel = () => {
+    dispatch({ type: ACTION_ERROR_OVERLAY_CLOSE })
     dispatch({ type: ACTION_DEVTOOLS_PANEL_TOGGLE })
   }
 
diff --git a/packages/next/src/next-devtools/dev-overlay/shared.ts b/packages/next/src/next-devtools/dev-overlay/shared.ts
index 3565b70e2a8..e8556ea03aa 100644
--- a/packages/next/src/next-devtools/dev-overlay/shared.ts
+++ b/packages/next/src/next-devtools/dev-overlay/shared.ts
@@ -43,13 +43,18 @@ export const ACTION_UNHANDLED_ERROR = 'unhandled-error'
 export const ACTION_UNHANDLED_REJECTION = 'unhandled-rejection'
 export const ACTION_DEBUG_INFO = 'debug-info'
 export const ACTION_DEV_INDICATOR = 'dev-indicator'
+
 export const ACTION_ERROR_OVERLAY_OPEN = 'error-overlay-open'
 export const ACTION_ERROR_OVERLAY_CLOSE = 'error-overlay-close'
 export const ACTION_ERROR_OVERLAY_TOGGLE = 'error-overlay-toggle'
+
 export const ACTION_BUILDING_INDICATOR_SHOW = 'building-indicator-show'
 export const ACTION_BUILDING_INDICATOR_HIDE = 'building-indicator-hide'
 export const ACTION_RENDERING_INDICATOR_SHOW = 'rendering-indicator-show'
 export const ACTION_RENDERING_INDICATOR_HIDE = 'rendering-indicator-hide'
+
+export const ACTION_DEVTOOLS_PANEL_OPEN = 'dev-tools-panel-open'
+export const ACTION_DEVTOOLS_PANEL_CLOSE = 'dev-tools-panel-close'
 export const ACTION_DEVTOOLS_PANEL_TOGGLE = 'dev-tools-panel-toggle'
 
 export const STORAGE_KEY_THEME = '__nextjs-dev-tools-theme'
@@ -123,6 +128,12 @@ export interface RenderingIndicatorHideAction {
   type: typeof ACTION_RENDERING_INDICATOR_HIDE
 }
 
+export interface DevToolsPanelOpenAction {
+  type: typeof ACTION_DEVTOOLS_PANEL_OPEN
+}
+export interface DevToolsPanelCloseAction {
+  type: typeof ACTION_DEVTOOLS_PANEL_CLOSE
+}
 export interface DevToolsPanelToggleAction {
   type: typeof ACTION_DEVTOOLS_PANEL_TOGGLE
 }
@@ -145,6 +156,8 @@ export type DispatcherEvent =
   | BuildingIndicatorHideAction
   | RenderingIndicatorShowAction
   | RenderingIndicatorHideAction
+  | DevToolsPanelOpenAction
+  | DevToolsPanelCloseAction
   | DevToolsPanelToggleAction
 
 const REACT_ERROR_STACK_BOTTOM_FRAME_REGEX =
@@ -347,6 +360,12 @@ export function useErrorOverlayReducer(
         case ACTION_RENDERING_INDICATOR_HIDE: {
           return { ...state, renderingIndicator: false }
         }
+        case ACTION_DEVTOOLS_PANEL_OPEN: {
+          return { ...state, isDevToolsPanelOpen: true }
+        }
+        case ACTION_DEVTOOLS_PANEL_CLOSE: {
+          return { ...state, isDevToolsPanelOpen: false }
+        }
         case ACTION_DEVTOOLS_PANEL_TOGGLE: {
           return { ...state, isDevToolsPanelOpen: !state.isDevToolsPanelOpen }
         }

From a6742e18930c2a24ec4cf3810ce0615f7d0867b9 Mon Sep 17 00:00:00 2001
From: devjiwonchoi <devjiwonchoi@gmail.com>
Date: Fri, 13 Jun 2025 18:22:55 +0200
Subject: [PATCH 08/11] use style tag

---
 .../components/devtools-panel/devtools-panel.tsx       | 10 +++++++++-
 .../dev-overlay/styles/component-styles.tsx            |  2 ++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel.tsx b/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel.tsx
index 51777fb1930..cce453010e3 100644
--- a/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel.tsx
+++ b/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel.tsx
@@ -1,4 +1,12 @@
+import { css } from '../../utils/css'
+
 export function DevToolsPanel() {
   // TODO: Remove style; It is to indicate faster in the browser.
-  return <div className="text-black">DevToolsPanel</div>
+  return <div data-nextjs-devtools-panel>DevToolsPanel</div>
 }
+
+export const DEVTOOLS_PANEL_STYLES = css`
+  [data-nextjs-devtools-panel] {
+    color: black;
+  }
+`
diff --git a/packages/next/src/next-devtools/dev-overlay/styles/component-styles.tsx b/packages/next/src/next-devtools/dev-overlay/styles/component-styles.tsx
index b5dc8ef24e5..29a7d148c51 100644
--- a/packages/next/src/next-devtools/dev-overlay/styles/component-styles.tsx
+++ b/packages/next/src/next-devtools/dev-overlay/styles/component-styles.tsx
@@ -24,6 +24,7 @@ import { DEV_TOOLS_INFO_USER_PREFERENCES_STYLES } from '../components/errors/dev
 import { DEV_TOOLS_INFO_RENDER_FILES_STYLES } from '../components/overview/segment-explorer'
 import { FADER_STYLES } from '../components/fader'
 import { RESTART_SERVER_BUTTON_STYLES } from '../components/errors/error-overlay-toolbar/restart-server-button'
+import { DEVTOOLS_PANEL_STYLES } from '../components/devtools-panel/devtools-panel'
 
 export function ComponentStyles() {
   return (
@@ -54,6 +55,7 @@ export function ComponentStyles() {
         ${DEV_TOOLS_INFO_USER_PREFERENCES_STYLES}
         ${DEV_TOOLS_INFO_RENDER_FILES_STYLES}
         ${FADER_STYLES}
+        ${DEVTOOLS_PANEL_STYLES}
       `}
     </style>
   )

From 193faecf89263d57c0840f987965fca73fa4ddf2 Mon Sep 17 00:00:00 2001
From: devjiwonchoi <devjiwonchoi@gmail.com>
Date: Tue, 17 Jun 2025 16:21:17 +0200
Subject: [PATCH 09/11] storybook: add missing isDevToolsPanelOpen props

---
 .../next/src/next-devtools/dev-overlay/dev-overlay.stories.tsx  | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/next/src/next-devtools/dev-overlay/dev-overlay.stories.tsx b/packages/next/src/next-devtools/dev-overlay/dev-overlay.stories.tsx
index 7da50428f68..92abe480613 100644
--- a/packages/next/src/next-devtools/dev-overlay/dev-overlay.stories.tsx
+++ b/packages/next/src/next-devtools/dev-overlay/dev-overlay.stories.tsx
@@ -94,6 +94,8 @@ const initialState: OverlayState = {
     staleness: 'fresh',
   },
   isErrorOverlayOpen: true,
+  // TODO: This will be handled on the next stack——with proper story.
+  isDevToolsPanelOpen: false,
 }
 
 function useOverlayReducer() {

From 0b97f78e2af2ee3ee32ace889465f4330fde9c15 Mon Sep 17 00:00:00 2001
From: devjiwonchoi <devjiwonchoi@gmail.com>
Date: Tue, 17 Jun 2025 17:07:45 +0200
Subject: [PATCH 10/11] storybook: add missing isDevToolsPanelOpen props

---
 .../errors/dev-tools-indicator/dev-tools-indicator.stories.tsx  | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/dev-tools-indicator.stories.tsx b/packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/dev-tools-indicator.stories.tsx
index 262b230748e..c53954bb659 100644
--- a/packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/dev-tools-indicator.stories.tsx
+++ b/packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/dev-tools-indicator.stories.tsx
@@ -59,6 +59,8 @@ const state: OverlayState = {
   staticIndicator: true,
   debugInfo: { devtoolsFrontendUrl: undefined },
   isErrorOverlayOpen: false,
+  // TODO: This will be handled on the next stack——with proper story.
+  isDevToolsPanelOpen: false,
 }
 
 export const StaticRoute: Story = {

From 1cf569e3de64e0212ffc8f5a4eee1eda46118b77 Mon Sep 17 00:00:00 2001
From: devjiwonchoi <devjiwonchoi@gmail.com>
Date: Tue, 17 Jun 2025 17:43:16 +0200
Subject: [PATCH 11/11] devtools

---
 packages/next/src/next-devtools/dev-overlay/shared.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/next/src/next-devtools/dev-overlay/shared.ts b/packages/next/src/next-devtools/dev-overlay/shared.ts
index e8556ea03aa..be38f440818 100644
--- a/packages/next/src/next-devtools/dev-overlay/shared.ts
+++ b/packages/next/src/next-devtools/dev-overlay/shared.ts
@@ -53,9 +53,9 @@ export const ACTION_BUILDING_INDICATOR_HIDE = 'building-indicator-hide'
 export const ACTION_RENDERING_INDICATOR_SHOW = 'rendering-indicator-show'
 export const ACTION_RENDERING_INDICATOR_HIDE = 'rendering-indicator-hide'
 
-export const ACTION_DEVTOOLS_PANEL_OPEN = 'dev-tools-panel-open'
-export const ACTION_DEVTOOLS_PANEL_CLOSE = 'dev-tools-panel-close'
-export const ACTION_DEVTOOLS_PANEL_TOGGLE = 'dev-tools-panel-toggle'
+export const ACTION_DEVTOOLS_PANEL_OPEN = 'devtools-panel-open'
+export const ACTION_DEVTOOLS_PANEL_CLOSE = 'devtools-panel-close'
+export const ACTION_DEVTOOLS_PANEL_TOGGLE = 'devtools-panel-toggle'
 
 export const STORAGE_KEY_THEME = '__nextjs-dev-tools-theme'
 export const STORAGE_KEY_POSITION = '__nextjs-dev-tools-position'