@@ -855,7 +855,7 @@ These tools read the HttpClient calls that `withPangular()` recorded and the SSR
 | `explain-ssr-request` | One request end to end: timings, kept response headers, the router's guard and resolver times, each server call with its transfer cache outcome, then the browser page with its hydration result and the calls the browser made again.                                                                                                                                           | `id`, `url`                                            |
 | `list-http-calls`     | The HttpClient calls of one tab and the server render that served it, newest first: side (SSR or client), method, URL, status, duration, and flags for mocked, faulted, cancelled, redirected, transfer cache hit and the matched rule. With `preview`, the masked response body, for failed calls too. With `view: "waterfall"`, the tab's client calls as a waterfall instead. | `url`, `failed`, `limit`, `preview`, `headers`, `view` |
 
-`explain-ssr-request` picks the request by `id`, else the newest one for `url`, else the newest one.
+`explain-ssr-request` picks the request by `id`, else the newest one for `url`, else the newest one. It names each hydration mismatch by the component class the node hosts when the page could read one, else by the element (`<app-card>`) or text node (`#text`).
 
 `list-http-calls` lists one tab and the server calls of the SSR request that served it: the tab `page` names, or the default page. With no tab connected, it lists the server calls. `url` keeps calls whose URL contains the text. `failed` keeps calls with a status of 400 or more, no response, an error, or a cancel. `limit` defaults to 30 (at most 200). `preview` adds each call's response preview, including the body a failed call got back, such as a validation message or `problem+json`. `headers` adds each call's request and response headers. Secrets in URLs, errors, previews and headers are masked, and `url` matches the masked URL.
 
 
@@ -230,6 +230,7 @@ What remains: `/config` exports `DEFAULT_POPUP_HOTKEY`, `PANGULAR_ACTIONS`, `PAN
 - Browser DevTools show the app's own line as the caller of a `console` call again. The browser entries ship source maps that list the console tap in `x_google_ignoreList`, so its wrapper frame is skipped (#369).
 - The Angular Native overlay gates the injector profiler like the NativeScript overlay: in a development build with no `window`, importing it defines one until Angular publishes its debug utilities, so the **Providers** lists fill (#371).
 - `record-change-detection` with `record: "start"` passes on why a page that answered could not record, from its capability report: the Angular version it runs, or a profiler hook the recording could not attach to yet. It no longer waits out the 3 seconds and blames the Angular version (#366).
+- `explain-ssr-request` names a hydration mismatch as a component only when the page read its class, and as an element (`<app-card>`) or text node (`#text`) otherwise (#366).
 
 ### Docs
 
 
@@ -361,6 +361,31 @@ describe('ssrRequestStory', () => {
     expect(text).toContain('POST `/api/quote`');
   });
 
+  it('names a mismatch by its component class only when the page read one', () => {
+    const pages = [
+      page({
+        hydration: {
+          enabled: true,
+          nodes: { hydrated: 4, skipped: 0, mismatched: 3 },
+          mismatches: [
+            { component: 'ProductCard', isClass: true },
+            { component: 'app-card' },
+            { component: '#text' },
+          ],
+          skipHydrationHosts: [],
+          warnings: [],
+          warningsCaptured: true,
+        },
+      }),
+    ];
+    const text = explainSsrRequestText([ssrRequest()], [], pages, {});
+    expect(text).toContain('Mismatch in component `ProductCard`');
+    expect(text).toContain('Mismatch at element `<app-card>`');
+    expect(text).toContain('Mismatch at a `#text` node');
+    expect(text).not.toContain('Mismatch in `app-card`');
+    expect(text).not.toContain('Mismatch in `#text`');
+  });
+
   it('explains an unknown id and an empty list', () => {
     expect(explainSsrRequestText([], [], [], {})).toContain('devtools.ssrMiddleware');
     expect(explainSsrRequestText([ssrRequest()], [], [], { id: 'nope' })).toContain(
 
@@ -193,6 +193,19 @@ export function ssrRequestStory(
   return { request, serverCalls: own, page, refetched };
 }
 
+/**
+ * One hydration mismatch for the agent text. The page names it by the
+ * component class its node hosts when it could read one (`isClass`); otherwise
+ * `component` is the node name (`app-card`, `#text`), so it is shown as a node,
+ * not as a component.
+ */
+export function mismatchLine(m: { component: string; isClass?: boolean }): string {
+  if (m.isClass) return `Mismatch in component ${code(m.component)}`;
+  return m.component.startsWith('#')
+    ? `Mismatch at a ${code(m.component)} node`
+    : `Mismatch at element ${code(`<${m.component}>`)}`;
+}
+
 function ms(value: number): string {
   return `${value} ms`;
 }
@@ -348,9 +361,7 @@ export function explainSsrRequestText(
             : `${h.nodes?.skipped ?? 0} nodes skipped`
         }.`,
       );
-      for (const m of h.mismatches.slice(0, 10)) {
-        lines.push(`  - Mismatch in ${code(m.component)}`);
-      }
+      for (const m of h.mismatches.slice(0, 10)) lines.push(`  - ${mismatchLine(m)}`);
       for (const w of h.warnings.slice(0, 5)) lines.push(`  - ${code(w)}`);
     }
     if (h?.stableMs !== undefined) {