Navigation inspector UI updates

[samselikoff]

Updates the Navigation Inspector panel UI to match the new shell-inspection design.

• Reworks the idle, waiting, static shell, and client shell states around the new “Pause on navigations” toggle
• Adds full-width waiting/debugger banners, updated copy, URL labels, and the Resume action
• Simplifies the panel expansion animation so only the panel opens/closes, without fading the inner content

To try it out, run

pnpm next dev test/development/app-dir/instant-navs-devtools

Screen.Recording.2026-06-18.at.5.56.00.PM.mov

[github-actions]

Failing test suites

Commit: bd389c0 | About building and testing Next.js

pnpm test-start test/e2e/telemetry/telemetry.test.ts (job)

• Telemetry CLI > production mode > cli session: babel tooling config (DD)
• Telemetry CLI > production mode > cli session: custom babel config (plugin) (DD)
• Telemetry CLI > production mode > cli session: package.json custom babel config (plugin) (DD)
• Telemetry CLI > production mode > cli session: custom babel config (preset) (DD)
• Telemetry CLI > production mode > cli session: next config with webpack (DD)
• Telemetry CLI > production mode > detect static 404 correctly for next build (DD)
• Telemetry CLI > production mode > detect page counts correctly for next build (DD)

Expand output

● Telemetry CLI › production mode › cli session: babel tooling config

can not run export while server is running, use next.stop() first

  272 |   ) {
  273 |     if (this.childProcess) {
> 274 |       throw new Error(
      |             ^
  275 |         `can not run export while server is running, use next.stop() first`
  276 |       )
  277 |     }

  at NextStartInstance.build (lib/next-modes/next-start.ts:274:13)
  at build (e2e/telemetry/telemetry.test.ts:196:42)
  at NextStartInstance.runWithTempContent [as patchFile] (lib/next-modes/base.ts:962:15)
  at Object.<anonymous> (e2e/telemetry/telemetry.test.ts:195:7)

● Telemetry CLI › production mode › cli session: custom babel config (plugin)

can not run export while server is running, use next.stop() first

  272 |   ) {
  273 |     if (this.childProcess) {
> 274 |       throw new Error(
      |             ^
  275 |         `can not run export while server is running, use next.stop() first`
  276 |       )
  277 |     }

  at NextStartInstance.build (lib/next-modes/next-start.ts:274:13)
  at build (e2e/telemetry/telemetry.test.ts:219:42)
  at NextStartInstance.runWithTempContent [as patchFile] (lib/next-modes/base.ts:962:15)
  at Object.<anonymous> (e2e/telemetry/telemetry.test.ts:218:7)

● Telemetry CLI › production mode › cli session: package.json custom babel config (plugin)

can not run export while server is running, use next.stop() first

  272 |   ) {
  273 |     if (this.childProcess) {
> 274 |       throw new Error(
      |             ^
  275 |         `can not run export while server is running, use next.stop() first`
  276 |       )
  277 |     }

  at NextStartInstance.build (lib/next-modes/next-start.ts:274:13)
  at build (e2e/telemetry/telemetry.test.ts:246:42)
  at NextStartInstance.runWithTempContent [as patchFile] (lib/next-modes/base.ts:962:15)
  at Object.<anonymous> (e2e/telemetry/telemetry.test.ts:245:7)

● Telemetry CLI › production mode › cli session: custom babel config (preset)

can not run export while server is running, use next.stop() first

  272 |   ) {
  273 |     if (this.childProcess) {
> 274 |       throw new Error(
      |             ^
  275 |         `can not run export while server is running, use next.stop() first`
  276 |       )
  277 |     }

  at NextStartInstance.build (lib/next-modes/next-start.ts:274:13)
  at build (e2e/telemetry/telemetry.test.ts:269:42)
  at NextStartInstance.runWithTempContent [as patchFile] (lib/next-modes/base.ts:962:15)
  at Object.<anonymous> (e2e/telemetry/telemetry.test.ts:268:7)

● Telemetry CLI › production mode › cli session: next config with webpack

can not run export while server is running, use next.stop() first

  272 |   ) {
  273 |     if (this.childProcess) {
> 274 |       throw new Error(
      |             ^
  275 |         `can not run export while server is running, use next.stop() first`
  276 |       )
  277 |     }

  at NextStartInstance.build (lib/next-modes/next-start.ts:274:13)
  at build (e2e/telemetry/telemetry.test.ts:292:42)
  at NextStartInstance.runWithTempContent [as patchFile] (lib/next-modes/base.ts:962:15)
  at Object.<anonymous> (e2e/telemetry/telemetry.test.ts:291:7)

● Telemetry CLI › production mode › detect static 404 correctly for next build

can not run export while server is running, use next.stop() first

  272 |   ) {
  273 |     if (this.childProcess) {
> 274 |       throw new Error(
      |             ^
  275 |         `can not run export while server is running, use next.stop() first`
  276 |       )
  277 |     }

  at NextStartInstance.build (lib/next-modes/next-start.ts:274:13)
  at Object.build (e2e/telemetry/telemetry.test.ts:326:40)

● Telemetry CLI › production mode › detect page counts correctly for next build

can not run export while server is running, use next.stop() first

  272 |   ) {
  273 |     if (this.childProcess) {
> 274 |       throw new Error(
      |             ^
  275 |         `can not run export while server is running, use next.stop() first`
  276 |       )
  277 |     }

  at NextStartInstance.build (lib/next-modes/next-start.ts:274:13)
  at Object.build (e2e/telemetry/telemetry.test.ts:337:40)

[github-actions]

Stats cancelled

Commit: bd389c0
View workflow run

[vercel]

Suggested change

	// its height doesn't change during the fade-out animation.
	const [previousPanel, setPreviousPanel] = useState(panel)
	const [exitingHeight, setExitingHeight] = useState<null | number>(null)
	if (previousPanel !== panel) {
	setPreviousPanel(panel)
	setExitingHeight(containerHeight)
	// its height doesn't change during the fade-out animation. We only freeze
	// the height while leaving the panel; re-entering it must reset back to
	// null so the container can size to its content again. Otherwise, reopening
	// the panel before it unmounts (it stays mounted briefly for the fade-out)
	// would leave the height frozen at the dismissed value (e.g. 0), keeping
	// the panel permanently collapsed.
	const [previousPanel, setPreviousPanel] = useState(panel)
	const [exitingHeight, setExitingHeight] = useState<null | number>(null)
	if (previousPanel !== panel) {
	setPreviousPanel(panel)
	setExitingHeight(panel === 'instant-navs' ? null : containerHeight)

exitingHeight is frozen on every panel change and never reset, so reopening the Navigation Inspector within the fade-out window leaves the panel permanently collapsed (height 0).