[cache components] persist cache bypass UI until it's disabled

Author: ztanner

packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/next-logo.tsx

@@ -50,12 +50,12 @@ export function NextLogo({
     state.buildingIndicator ||
     state.renderingIndicator ||
     isCacheFilling ||
-    (isCacheBypassing && state.renderingIndicator)
+    isCacheBypassing
 
   // Delay showing for 400ms to catch fast operations,
   // and keep visible for minimum time (longer for warnings)
   const { rendered: showStatusIndicator } = useDelayedRender(shouldShowStatus, {
-    enterDelay: isCacheBypassing && state.renderingIndicator ? 0 : 400, // Bypass warning shows immediately, others delayed
+    enterDelay: isCacheBypassing ? 0 : 400, // Bypass warning shows immediately, others delayed
     exitDelay: 500,
   })
 
@@ -175,7 +175,8 @@ export function NextLogo({
               }
             }
 
-            &[data-status='cache-bypassing'] {
+            &[data-status='cache-bypassing']:not([data-error='true']),
+            &[data-cache-bypassing='true']:not([data-error='true']) {
               background: rgba(251, 211, 141, 0.95); /* Warm amber background */
               --color-inner-border: rgba(245, 158, 11, 0.8);
 
@@ -379,6 +380,7 @@ export function NextLogo({
         data-error={hasError}
         data-error-expanded={isExpanded}
         data-status={hasError ? Status.None : currentStatus}
+        data-cache-bypassing={isCacheBypassing}
         data-animate={newErrorDetected}
         style={{ width }}
       >
@@ -476,7 +478,10 @@ export function NextLogo({
               {showStatusIndicator &&
                 !hasError &&
                 !state.disableDevIndicator && (
-                  <StatusIndicator status={displayStatus} />
+                  <StatusIndicator
+                    status={displayStatus}
+                    onClick={onTriggerClick}
+                  />
                 )}
             </>
           )}

packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/status-indicator.tsx

@@ -17,16 +17,16 @@ export function getCurrentStatus(
   const isCacheFilling = cacheIndicator === 'filling'
   const isCacheBypassing = cacheIndicator === 'bypass'
 
-  // Priority order: cache bypassing > prerendering > compiling > rendering
-  if (isCacheBypassing && renderingIndicator) {
+  // Priority order: compiling > cache bypassing > prerendering > rendering
+  if (buildingIndicator) {
+    return Status.Compiling
+  }
+  if (isCacheBypassing) {
     return Status.CacheBypassing
   }
   if (isCacheFilling) {
     return Status.Prerendering
   }
-  if (buildingIndicator) {
-    return Status.Compiling
-  }
   if (renderingIndicator) {
     return Status.Rendering
   }
@@ -35,9 +35,10 @@ export function getCurrentStatus(
 
 interface StatusIndicatorProps {
   status: Status
+  onClick?: () => void
 }
 
-export function StatusIndicator({ status }: StatusIndicatorProps) {
+export function StatusIndicator({ status, onClick }: StatusIndicatorProps) {
   const statusText: Record<Status, string> = {
     [Status.None]: '',
     [Status.CacheBypassing]: 'Cache disabled',
@@ -78,6 +79,15 @@ export function StatusIndicator({ status }: StatusIndicatorProps) {
             font-size: var(--size-13);
             font-weight: 500;
             white-space: nowrap;
+            border: none;
+            background: transparent;
+            cursor: pointer;
+            outline: none;
+          }
+
+          [data-indicator-status]:focus-visible {
+            outline: 2px solid var(--color-blue-800, #3b82f6);
+            outline-offset: 3px;
           }
 
           [data-status-dot] {
@@ -149,7 +159,11 @@ export function StatusIndicator({ status }: StatusIndicatorProps) {
           }
         `}
       </style>
-      <div data-indicator-status>
+      <button
+        data-indicator-status
+        onClick={onClick}
+        aria-label="Open Next.js Dev Tools"
+      >
         {statusDotColor[status] && (
           <div
             data-status-dot
@@ -161,29 +175,34 @@ export function StatusIndicator({ status }: StatusIndicatorProps) {
         <AnimateStatusText
           key={status} // Key here triggers re-mount and animation
           statusKey={status}
+          showEllipsis={status !== Status.CacheBypassing}
         >
           {statusText[status]}
         </AnimateStatusText>
-      </div>
+      </button>
     </>
   )
 }
 
 function AnimateStatusText({
   children: text,
+  showEllipsis = true,
 }: {
   children: string
   statusKey?: string // Keep for type compatibility but unused
+  showEllipsis?: boolean
 }) {
   return (
     <div data-status-text-animation>
       <div data-status-text-enter>
         {text}
-        <span data-status-ellipsis>
-          <span>.</span>
-          <span>.</span>
-          <span>.</span>
-        </span>
+        {showEllipsis && (
+          <span data-status-ellipsis>
+            <span>.</span>
+            <span>.</span>
+            <span>.</span>
+          </span>
+        )}
       </div>
     </div>
   )

packages/next/src/server/app-render/app-render.tsx

@@ -2477,6 +2477,10 @@ async function renderToStream(
         if (isBypassingCachesInDev(renderOpts, requestStore)) {
           // Mark the RSC payload to indicate that caches were bypassed in dev.
           // This lets the client know not to cache anything based on this render.
+          if (renderOpts.setCacheStatus) {
+            // we know this is available  when cacheComponents is enabled, but typeguard to be safe
+            renderOpts.setCacheStatus('bypass', htmlRequestId, requestId)
+          }
           payload._bypassCachesInDev = createElement(WarnForBypassCachesInDev, {
             route: workStore.route,
           })

test/development/app-dir/cache-indicator/cache-indicator.test.ts

@@ -40,4 +40,90 @@ describe('cache-indicator', () => {
       expect(status).toBe('none')
     })
   }
+
+  it('shows cache-bypassing indicator when cache is disabled', async () => {
+    const browser = await next.browser('/', {
+      extraHTTPHeaders: { 'cache-control': 'no-cache' },
+    })
+
+    // Wait for the badge to appear and show cache-bypassing status
+    await retry(async () => {
+      const badge = await browser.elementByCss('[data-next-badge]')
+      const cacheBypassingAttr = await badge.getAttribute(
+        'data-cache-bypassing'
+      )
+      expect(cacheBypassingAttr).toBe('true')
+    })
+
+    // Verify the status indicator shows cache-bypassing
+    await retry(async () => {
+      const badge = await browser.elementByCss('[data-next-badge]')
+      const status = await badge.getAttribute('data-status')
+      expect(status).toBe('cache-bypassing')
+    })
+  })
+
+  it('persists cache-bypassing indicator after navigation when cache is disabled', async () => {
+    const browser = await next.browser('/', {
+      extraHTTPHeaders: { 'cache-control': 'no-cache' },
+    })
+
+    // Wait for initial cache-bypassing indicator
+    await retry(async () => {
+      const badge = await browser.elementByCss('[data-next-badge]')
+      const cacheBypassingAttr = await badge.getAttribute(
+        'data-cache-bypassing'
+      )
+      expect(cacheBypassingAttr).toBe('true')
+    })
+
+    // Navigate to another page
+    const link = await browser.waitForElementByCss('a[href="/navigation"]')
+    await link.click()
+
+    // Wait for navigation to complete
+    await retry(async () => {
+      const text = await browser.elementByCss('#navigation-page').text()
+      expect(text).toContain('Hello navigation page!')
+    })
+
+    // Verify cache-bypassing indicator persists
+    await retry(async () => {
+      const badge = await browser.elementByCss('[data-next-badge]')
+      const cacheBypassingAttr = await badge.getAttribute(
+        'data-cache-bypassing'
+      )
+      expect(cacheBypassingAttr).toBe('true')
+    })
+
+    // Verify status shows cache-bypassing (not rendering)
+    const badge = await browser.elementByCss('[data-next-badge]')
+    const status = await badge.getAttribute('data-status')
+    expect(status).toBe('cache-bypassing')
+  })
+
+  it('opens devtools menu when clicking cache-bypassing indicator', async () => {
+    const browser = await next.browser('/', {
+      extraHTTPHeaders: { 'cache-control': 'no-cache' },
+    })
+
+    // Wait for the cache-bypassing indicator to appear
+    await retry(async () => {
+      const badge = await browser.elementByCss('[data-next-badge]')
+      const status = await badge.getAttribute('data-status')
+      expect(status).toBe('cache-bypassing')
+    })
+
+    // Click the status indicator
+    const statusIndicator = await browser.elementByCss(
+      '[data-indicator-status]'
+    )
+    await statusIndicator.click()
+
+    // Verify devtools menu opens
+    await retry(async () => {
+      const hasMenu = await browser.hasElementByCss('#nextjs-dev-tools-menu')
+      expect(hasMenu).toBe(true)
+    })
+  })
 })