From 4fe058fc42cf7a8f8283827269eda5794afae5bc Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Fri, 23 Jan 2026 07:39:01 +0100
Subject: [PATCH] [devtool] Add hydration diff indicator for diff lines
 (#88919)

Add a hydration diff indicator on the top right corner to tell users
which line is from client and which line is from server. Heard feedback
from users that sometimes they got confused about which line is from
where. Now they'll clear know that:

- `+ Client` shows `+` is client rendered content
- `- Server` shows `+` is server rendered content

<img width="579" height="225" alt="image"
src="https://github.com/user-attachments/assets/5285709a-044a-4d7f-87f9-08f1199eed4e"
/>
---
 .../components/hydration-diff/diff-view.tsx   | 26 +++++++++++++------
 .../component-stack-pseudo-html.tsx           | 25 ++++++++++++++++++
 2 files changed, 43 insertions(+), 8 deletions(-)

diff --git a/packages/next/src/next-devtools/dev-overlay/components/hydration-diff/diff-view.tsx b/packages/next/src/next-devtools/dev-overlay/components/hydration-diff/diff-view.tsx
index ad9b78c5f5bfd2..cf2198c669e37e 100644
--- a/packages/next/src/next-devtools/dev-overlay/components/hydration-diff/diff-view.tsx
+++ b/packages/next/src/next-devtools/dev-overlay/components/hydration-diff/diff-view.tsx
@@ -118,14 +118,24 @@ export function PseudoHtmlDiff({
       data-nextjs-container-errors-pseudo-html
       data-nextjs-container-errors-pseudo-html-collapse={isDiffCollapsed}
     >
-      <button
-        aria-expanded={!isDiffCollapsed}
-        aria-label="complete Component Stack"
-        data-nextjs-container-errors-pseudo-html-collapse-button
-        onClick={() => toggleCollapseHtml(!isDiffCollapsed)}
-      >
-        <CollapseIcon collapsed={isDiffCollapsed} />
-      </button>
+      <div data-nextjs-hydration-diff-header>
+        <button
+          aria-expanded={!isDiffCollapsed}
+          aria-label="complete Component Stack"
+          data-nextjs-container-errors-pseudo-html-collapse-button
+          onClick={() => toggleCollapseHtml(!isDiffCollapsed)}
+        >
+          <CollapseIcon collapsed={isDiffCollapsed} />
+        </button>
+        <div data-nextjs-hydration-diff-badge>
+          <span data-nextjs-hydration-diff-badge-item="client">
+            <span>+</span> Client
+          </span>
+          <span data-nextjs-hydration-diff-badge-item="server">
+            <span>-</span> Server
+          </span>
+        </div>
+      </div>
       <pre className="nextjs__container_errors__component-stack">
         <code>{htmlComponents}</code>
       </pre>
diff --git a/packages/next/src/next-devtools/dev-overlay/container/runtime-error/component-stack-pseudo-html.tsx b/packages/next/src/next-devtools/dev-overlay/container/runtime-error/component-stack-pseudo-html.tsx
index f7aab71b89dcfb..8168fa35b9cc9a 100644
--- a/packages/next/src/next-devtools/dev-overlay/container/runtime-error/component-stack-pseudo-html.tsx
+++ b/packages/next/src/next-devtools/dev-overlay/container/runtime-error/component-stack-pseudo-html.tsx
@@ -89,4 +89,29 @@ export const PSEUDO_HTML_DIFF_STYLES = `
   .error-overlay-hydration-error-diff-minus-icon {
     color: var(--color-red-900);
   }
+  [data-nextjs-hydration-diff-header] {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 12px 0 0;
+  }
+  [data-nextjs-hydration-diff-badge] {
+    display: flex;
+    gap: 8px;
+    font-size: var(--size-12);
+  }
+  [data-nextjs-hydration-diff-badge-item] {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    color: var(--color-gray-900);
+  }
+  [data-nextjs-hydration-diff-badge-item='client'] span:first-child {
+    color: var(--color-green-900);
+    font-weight: bold;
+  }
+  [data-nextjs-hydration-diff-badge-item='server'] span:first-child {
+    color: var(--color-red-900);
+    font-weight: bold;
+  }
 `