From 658b445d5905e4875ed279b2e64a30b061ebfcc2 Mon Sep 17 00:00:00 2001
From: "Patrick W. Healy" <patrick.healy@microsoft.com>
Date: Thu, 17 Sep 2026 01:16:27 +0000
Subject: [PATCH] fix(net): show node overview before loading diagnostics

Keep summary metadata, health and freshness visible independently of the expiring diagnostic tables. Gate tab contents and pagination until explicit collection; retain the overview after failure or expiry. Cover the real dialog lifecycle in Chromium.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Copilot-Session: d2243398-6c36-4c3d-969e-7ed7bfb5b459
---
 frontend/README.md                            | 10 +++-
 frontend/src/App.tsx                          |  2 +
 .../src/components/nodes/NodeDetailDialog.tsx | 42 ++++++++---------
 .../src/components/nodes/NodeDetailModal.tsx  | 24 ++++++----
 frontend/src/components/nodes/NodesTable.tsx  | 13 +++---
 .../nodes/detail/NodeDetailTabsHeader.tsx     |  8 ++--
 frontend/src/state/nodeMetadata.ts            | 21 +++++++++
 frontend/tests/fixtures/nodeDetails.html      | 22 +++++++--
 frontend/tests/nodeDetails.browser.test.mjs   | 35 +++++++++++++-
 frontend/tests/nodeMetadata.test.ts           | 46 +++++++++++++++++++
 10 files changed, 176 insertions(+), 47 deletions(-)
 create mode 100644 frontend/src/state/nodeMetadata.ts
 create mode 100644 frontend/tests/nodeMetadata.test.ts

diff --git a/frontend/README.md b/frontend/README.md
index 34a582a39..ff799c2f1 100644
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -10,6 +10,12 @@ browser snapshot or asks the controller for its cache/current request.
 **Refresh** requests a fresh collection. Neither summary updates, reconnection,
 opening a dialog nor expiry initiates collection.
 
+The left Node Info pane, health badges and last-update ages come from routine
+summaries and remain visible before loading and after details expire. Current
+summary metadata takes precedence over an older diagnostic snapshot. Unloaded
+tabs remain selectable but show no tables, pagination or diagnostic validation
+results. The node table shows the last received status age alongside its source.
+
 The node dialog distinguishes not-loaded, loading, loaded, expired and error.
 Peer/route/BPF tables and full node JSON are available only with valid details.
 A failed Refresh can display the previous still-valid snapshot, labeled with
@@ -54,7 +60,9 @@ cache reuse, refresh failures, cancellation, fixed deadlines and expiry.
 The optional Chromium regression test mounts the real detail dialog and hook
 under React StrictMode, using native browser timers and same-origin HTTP
 requests. It covers button events, correlated polling, cache reuse, failed
-refresh, expiry, close/reopen and unmount cancellation. Run it with an existing
+refresh, expiry, close/reopen and unmount cancellation. It also checks summary
+metadata and health badges, unloaded tabs, and the persistent info pane across
+loading, failure and expiry. Run it with an existing
 Playwright installation and its Chromium browser (no production dependency):
 
 ```sh
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 5ed4a0328..682141b46 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -268,6 +268,7 @@ export default function App() {
         <Suspense fallback={null}>
           <NodeDetailModal
             nodeName={selectedNodeName}
+            summary={nodeSummaries.find((node) => node.name === selectedNodeName)}
             detail={detail}
             onLoad={loadNodeDetail}
             allNodeNames={allNodeNames}
@@ -489,6 +490,7 @@ export default function App() {
         <Suspense fallback={null}>
           <NodeDetailModal
             nodeName={selectedNodeName}
+            summary={nodeSummaries.find((node) => node.name === selectedNodeName)}
             detail={detail}
             onLoad={loadNodeDetail}
             allNodeNames={allNodeNames}
diff --git a/frontend/src/components/nodes/NodeDetailDialog.tsx b/frontend/src/components/nodes/NodeDetailDialog.tsx
index 84220f08b..a6bef8c22 100644
--- a/frontend/src/components/nodes/NodeDetailDialog.tsx
+++ b/frontend/src/components/nodes/NodeDetailDialog.tsx
@@ -1,13 +1,14 @@
 // Copyright (c) Microsoft Corporation.
 // SPDX-License-Identifier: Apache-2.0
 
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import type { ComponentProps } from 'react';
 import type { DetailView } from '../../state/nodeDetails';
+import { nodeForDetailView } from '../../state/nodeMetadata';
 import NodeDetailModal from './NodeDetailModal';
-import { CloseXIcon, formatDateAndAge } from './shared/index';
+import { formatDateAndAge } from './shared/index';
 
-type Props = Omit<ComponentProps<typeof NodeDetailModal>, 'node' | 'detailControls'> & {
+type Props = Omit<ComponentProps<typeof NodeDetailModal>, 'node' | 'detailControls' | 'detailsLoaded'> & {
   detail: DetailView;
   onLoad: (forceRefresh?: boolean) => void;
 };
@@ -17,19 +18,17 @@ export default function NodeDetailDialog({ detail, onLoad, ...props }: Props) {
   const [, setClock] = useState(0);
   const expiresAt = detail.snapshot?.expiresAt;
   useEffect(() => {
-    if (!expiresAt) return;
+    if (!props.nodeName) return;
     const timer = window.setInterval(() => setClock((clock) => clock + 1), 1000);
     return () => window.clearInterval(timer);
-  }, [expiresAt]);
+  }, [props.nodeName]);
   useEffect(() => setJsonOpen(false), [props.nodeName, expiresAt]);
-  useEffect(() => {
-    if (!props.nodeName) return;
-    const onKeyDown = (event: KeyboardEvent) => { if (event.key === 'Escape') props.onClose(); };
-    window.addEventListener('keydown', onKeyDown);
-    return () => window.removeEventListener('keydown', onKeyDown);
-  }, [props.nodeName, props.onClose]);
-  if (!props.nodeName) return null;
   const snapshot = detail.snapshot && Date.parse(detail.snapshot.expiresAt) > Date.now() ? detail.snapshot : undefined;
+  const node = useMemo(
+    () => props.nodeName ? nodeForDetailView(props.nodeName, props.summary, snapshot?.status) : null,
+    [props.nodeName, props.summary, snapshot?.status],
+  );
+  if (!props.nodeName) return null;
   const busy = detail.state === 'loading';
   const collected = snapshot ? formatDateAndAge(snapshot.collectedAt) : undefined;
   const state = !snapshot && detail.state === 'loaded' ? 'expired' : detail.state;
@@ -62,18 +61,13 @@ export default function NodeDetailDialog({ detail, onLoad, ...props }: Props) {
   );
   // Unmount the heavy tables when data expires so their memoized rows, maps,
   // column callbacks and serialized JSON cannot keep the snapshot alive.
-  if (snapshot) {
-    return <NodeDetailModal {...props} node={snapshot.status} detailControls={controls} />;
-  }
   return (
-    <div className="modal-backdrop" onClick={props.onClose}>
-      <div className="modal" onClick={(event) => event.stopPropagation()}>
-        <div className="modal-header">
-          <div className="modal-title">{props.nodeName}</div>
-          <button className="button zoom-action-button" onClick={props.onClose} aria-label="Close" title="Close"><CloseXIcon /></button>
-        </div>
-        {controls}
-      </div>
-    </div>
+    <NodeDetailModal
+      {...props}
+      key={snapshot ? 'details' : 'overview'}
+      node={node}
+      detailsLoaded={Boolean(snapshot)}
+      detailControls={controls}
+    />
   );
 }
diff --git a/frontend/src/components/nodes/NodeDetailModal.tsx b/frontend/src/components/nodes/NodeDetailModal.tsx
index 297520fb9..21fe01a27 100644
--- a/frontend/src/components/nodes/NodeDetailModal.tsx
+++ b/frontend/src/components/nodes/NodeDetailModal.tsx
@@ -12,7 +12,7 @@ import {
   SortingState,
   useReactTable
 } from '@tanstack/react-table';
-import { NodeStatus } from '../../types';
+import { NodeStatus, NodeSummary } from '../../types';
 import {
   CloseXIcon,
   TableFilterButton,
@@ -43,6 +43,8 @@ import NodeDetailTabsHeader from './detail/NodeDetailTabsHeader';
 
 function NodeDetailModal({
   detailControls,
+  detailsLoaded = true,
+  summary,
   nodeName,
   node,
   allNodeNames,
@@ -57,6 +59,8 @@ function NodeDetailModal({
   onClose
 }: {
   detailControls?: React.ReactNode;
+  detailsLoaded?: boolean;
+  summary?: NodeSummary;
   nodeName: string | null;
   node: NodeStatus | null;
   allNodeNames: string[];
@@ -90,7 +94,9 @@ function NodeDetailModal({
   const nodeInfo = node?.nodeInfo;
   const isGateway = nodeInfo?.isGateway || (nodeDisplayName ? gatewayByNode.has(nodeDisplayName) : false);
   const siteOrPool = (nodeDisplayName ? gatewayByNode.get(nodeDisplayName) : undefined) || nodeInfo?.siteName || '-';
-  const cniStatus = node ? getCniStatus(node, pullEnabled) : { label: 'No data', tone: 'danger' as const };
+  const cniStatus = summary
+    ? { label: summary.cniStatus || 'Unknown', tone: summary.cniTone || 'warning' }
+    : node ? getCniStatus(node, pullEnabled) : { label: 'No data', tone: 'danger' as const };
   const cniProblemMessages = node ? getNodeCniProblemMessages(node) : [];
 
   // Collect all node errors and health check issues for the errors card.
@@ -1698,7 +1704,7 @@ function NodeDetailModal({
                 <span className={`badge ${nodeInfo?.k8sReady === 'Ready' ? 'success' : 'danger'}`}>
                   {nodeInfo?.k8sReady || 'NotReady'}
                 </span>
-                <span className={`badge ${cniStatus.tone}`} title={node ? getCniStatusTooltip(node, pullEnabled) : undefined}>{cniStatus.label}</span>
+                <span className={`badge ${cniStatus.tone}`} title={summary ? summary.fetchError || summary.firstError || summary.cniStatus : node ? getCniStatusTooltip(node, pullEnabled) : undefined}>{cniStatus.label}</span>
               </div>
             </div>
           </div>
@@ -1707,7 +1713,6 @@ function NodeDetailModal({
           </button>
         </div>
 
-        {detailControls}
         <div className="node-detail-grid">
           <div className="node-detail-left">
             <NodeInfoPanel
@@ -1731,6 +1736,7 @@ function NodeDetailModal({
           </div>
 
           <div className="node-detail-right">
+            {detailControls}
             {dataCondition && (
               <div className={`card node-modal-card data-condition-card ${dataCondition.tone}`}>
                 <div className="section-title">{dataCondition.title}</div>
@@ -1760,14 +1766,16 @@ function NodeDetailModal({
             )}
             <div className="card node-modal-card">
               <NodeDetailTabsHeader
+                detailsLoaded={detailsLoaded}
                 detailTab={detailTab}
                 routesValidationSummary={routesValidationSummary}
                 bpfEntryCount={node?.bpfEntries?.length ?? 0}
-                paginationControls={renderDetailPagination()}
+                paginationControls={detailsLoaded ? renderDetailPagination() : null}
                 onDetailTabChange={onDetailTabChange}
               />
 
-              {detailTab === 'peerings' && (
+              {!detailsLoaded && <div className="detail-table-wrapper">Tab data is not loaded. Use Load data to inspect this node.</div>}
+              {detailsLoaded && detailTab === 'peerings' && (
                 <>
                   <div className="detail-table-wrapper" ref={peerTableWrapperRef}>
                     <table className="table sticky-table-header modal-sticky-table-header">
@@ -1929,7 +1937,7 @@ function NodeDetailModal({
                 </>
               )}
 
-              {detailTab === 'routes' && (
+              {detailsLoaded && detailTab === 'routes' && (
                 <>
                   <div className="detail-table-wrapper" ref={routeTableWrapperRef}>
                     <table className="table sticky-table-header modal-sticky-table-header">
@@ -2037,7 +2045,7 @@ function NodeDetailModal({
                 </>
               )}
 
-              {detailTab === 'bpf' && (
+              {detailsLoaded && detailTab === 'bpf' && (
                 <>
                   <div className="detail-table-wrapper">
                     <table className="table sticky-table-header modal-sticky-table-header">
diff --git a/frontend/src/components/nodes/NodesTable.tsx b/frontend/src/components/nodes/NodesTable.tsx
index b71654d0d..912c4dc2e 100644
--- a/frontend/src/components/nodes/NodesTable.tsx
+++ b/frontend/src/components/nodes/NodesTable.tsx
@@ -17,6 +17,7 @@ import {
   CloseXIcon,
   MagnifyPlusIcon,
   TableFilterButton,
+  formatDateAndAge,
   getCountColor,
   getGatewayPoolBadgeTone,
   uiDiag,
@@ -371,25 +372,23 @@ function NodesTable({
       {
         id: 'lastUpdate',
         header: 'Last Update',
-        accessorFn: (row) => {
-          const src = row.statusSource || '';
-          return (src === 'ws' || src === 'apiserver-ws') ? 'Live' : src || '-';
-        },
+        accessorFn: (row) => row.lastPushTime || '',
         cell: ({ row }) => {
           const src = row.original.statusSource || '';
+          const updated = row.original.lastPushTime ? formatDateAndAge(row.original.lastPushTime) : undefined;
           if (src === 'ws' || src === 'apiserver-ws') {
             const viaAPIServer = src === 'apiserver-ws';
             return (
               <span
                 className={`live-indicator${viaAPIServer ? ' warning' : ''}`}
-                title={viaAPIServer ? 'Streaming via API server fallback WebSocket' : 'Streaming via WebSocket'}
+                title={`${viaAPIServer ? 'Streaming via API server fallback WebSocket' : 'Streaming via WebSocket'}${updated ? `; last received ${updated.absolute}` : ''}`}
               >
                 <span className="live-indicator-dot" aria-hidden="true"></span>
-                Live
+                Live{updated ? ` (${updated.age})` : ''}
               </span>
             );
           }
-          return <span>{src || '-'}</span>;
+          return <span title={updated ? `Last received ${updated.absolute} (${src || 'unknown source'})` : undefined}>{updated?.age || src || '-'}</span>;
         }
       }
     ],
diff --git a/frontend/src/components/nodes/detail/NodeDetailTabsHeader.tsx b/frontend/src/components/nodes/detail/NodeDetailTabsHeader.tsx
index 49a16ccfb..be04c5497 100644
--- a/frontend/src/components/nodes/detail/NodeDetailTabsHeader.tsx
+++ b/frontend/src/components/nodes/detail/NodeDetailTabsHeader.tsx
@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 type NodeDetailTabsHeaderProps = {
+  detailsLoaded?: boolean;
   detailTab: 'peerings' | 'routes' | 'bpf';
   routesValidationSummary: { total: number; mismatch: number };
   bpfEntryCount: number;
@@ -10,6 +11,7 @@ type NodeDetailTabsHeaderProps = {
 };
 
 function NodeDetailTabsHeader({
+  detailsLoaded = true,
   detailTab,
   routesValidationSummary,
   bpfEntryCount,
@@ -30,7 +32,7 @@ function NodeDetailTabsHeader({
           onClick={() => onDetailTabChange('routes')}
         >
           Routes
-          {routesValidationSummary.mismatch > 0 && (
+          {detailsLoaded && routesValidationSummary.mismatch > 0 && (
             <span
               className="tab-warning-icon route-presence route-presence-warning"
               title={`${routesValidationSummary.mismatch} mismatched route next hop(s)`}
@@ -39,7 +41,7 @@ function NodeDetailTabsHeader({
             </span>
           )}
         </button>
-        {bpfEntryCount > 0 && (
+        {(!detailsLoaded || bpfEntryCount > 0) && (
           <button
             className={`tab-button ${detailTab === 'bpf' ? 'active' : ''}`}
             onClick={() => onDetailTabChange('bpf')}
@@ -49,7 +51,7 @@ function NodeDetailTabsHeader({
         )}
       </div>
       <div className="detail-tabs-controls">
-        {detailTab !== 'peerings' && detailTab !== 'bpf' && (
+        {detailsLoaded && detailTab !== 'peerings' && detailTab !== 'bpf' && (
           <>
             {(() => {
               const summary = routesValidationSummary;
diff --git a/frontend/src/state/nodeMetadata.ts b/frontend/src/state/nodeMetadata.ts
new file mode 100644
index 000000000..bebcc3959
--- /dev/null
+++ b/frontend/src/state/nodeMetadata.ts
@@ -0,0 +1,21 @@
+// Copyright (c) Microsoft Corporation.
+// SPDX-License-Identifier: Apache-2.0
+
+import type { NodeStatus, NodeSummary } from '../types';
+
+export function nodeForDetailView(name: string, summary?: NodeSummary, details?: NodeStatus): NodeStatus {
+  const info = { ...details?.nodeInfo, ...summary?.nodeInfo };
+  return {
+    ...details,
+    nodeInfo: {
+      ...info,
+      name: summary?.name ?? info.name ?? name,
+      siteName: summary?.siteName ?? info.siteName,
+      isGateway: summary?.isGateway ?? info.isGateway,
+      k8sReady: summary?.k8sReady ?? info.k8sReady,
+    },
+    lastPushTime: summary?.lastPushTime ?? details?.lastPushTime,
+    statusSource: summary?.statusSource ?? details?.statusSource,
+    fetchError: summary ? summary.fetchError : details?.fetchError,
+  };
+}
diff --git a/frontend/tests/fixtures/nodeDetails.html b/frontend/tests/fixtures/nodeDetails.html
index 61390bda6..b6cba7f16 100644
--- a/frontend/tests/fixtures/nodeDetails.html
+++ b/frontend/tests/fixtures/nodeDetails.html
@@ -14,14 +14,30 @@
 
       function Harness() {
         const [selected, select] = useState(null);
+        const [tab, selectTab] = useState('peerings');
+        const [summary, updateSummary] = useState(() => ({
+          name: 'node-a', siteName: 'site-a', k8sReady: 'Ready',
+          cniStatus: 'Healthy', cniTone: 'success', statusSource: 'ws',
+          lastPushTime: new Date().toISOString(),
+          nodeInfo: {
+            internalIPs: ['192.0.2.10'], podCIDRs: ['10.1.0.0/24'],
+            kernel: 'summary-kernel', buildInfo: { version: 'summary-build' },
+          },
+        }));
         const { detail, load } = useNodeDetails(selected);
         return React.createElement(React.Fragment, null,
           React.createElement('button', { onClick: () => select('node-a') }, 'Open node'),
+          React.createElement('button', {
+            onClick: () => updateSummary((previous) => ({
+              ...previous, cniStatus: 'Route mismatch', cniTone: 'warning',
+              nodeInfo: { ...previous.nodeInfo, kernel: 'updated-summary-kernel' },
+            })),
+          }, 'Update summary'),
           React.createElement(NodeDetailDialog, {
-            nodeName: selected, detail, onLoad: load,
+            nodeName: selected, summary, detail, onLoad: load,
             allNodeNames: ['node-a'], gatewayByNode: new Map(),
-            theme: 'light', detailTab: 'peerings',
-            onDetailTabChange: () => {}, onSelectNode: select,
+            theme: 'light', detailTab: tab,
+            onDetailTabChange: selectTab, onSelectNode: select,
             onClose: () => select(null),
           }),
         );
diff --git a/frontend/tests/nodeDetails.browser.test.mjs b/frontend/tests/nodeDetails.browser.test.mjs
index c5d28bf95..bfd497eea 100644
--- a/frontend/tests/nodeDetails.browser.test.mjs
+++ b/frontend/tests/nodeDetails.browser.test.mjs
@@ -49,7 +49,12 @@ test('native browser Load data, polling, refresh, expiry and cleanup lifecycle',
               details: {
                 ...result, collectedAt: now, receivedAt: now,
                 expiresAt: new Date(Date.now() + (mode === 'expire' ? 2000 : 60000)).toISOString(),
-                status: { nodeInfo: { name: 'node-a' }, peers: [], routes: [], bpfEntries: [] },
+                status: {
+                  nodeInfo: { name: 'node-a', kernel: 'old-detail-kernel' },
+                  peers: [{ name: 'loaded-peer', healthCheck: { enabled: true, status: 'up' } }],
+                  routingTable: { routes: [{ destination: '192.0.2.0/24' }] },
+                  bpfEntries: [{ cidr: '198.51.100.0/24' }],
+                },
               },
             }));
           }
@@ -77,9 +82,28 @@ test('native browser Load data, polling, refresh, expiry and cleanup lifecycle',
   const fullJSON = page.getByLabel('Full node JSON');
 
   await open();
+  const info = page.locator('.node-detail-left');
+  const tabs = page.locator('.detail-tabs');
+  const freshness = info.locator('.node-info-card').filter({ hasText: 'Status Push Updated' });
+  await info.getByText('Node Info', { exact: true }).waitFor();
+  assert.match(await info.innerText(), /192\.0\.2\.10/);
+  assert.match(await info.innerText(), /summary-build/);
+  assert.match(await freshness.innerText(), /\ds ago/);
+  assert.equal(await page.getByText('Healthy', { exact: true }).count(), 1);
+  assert.equal(await tabs.getByRole('button').count(), 3);
+  for (const tab of ['Routes', 'BPF', 'Peerings']) {
+    await tabs.getByRole('button', { name: tab, exact: true }).click();
+    assert.equal(await page.locator('.node-detail-right table').count(), 0);
+    assert.equal(await page.getByText('WG Validation N/A', { exact: true }).count(), 0);
+  }
   assert.equal(requests.length, 0, 'selection does not collect details');
   await load();
   await loaded();
+  await page.getByText('loaded-peer', { exact: true }).waitFor();
+  await page.getByRole('button', { name: 'Update summary' }).click();
+  await info.getByText('updated-summary-kernel', { exact: true }).waitFor();
+  assert.equal(await page.getByText('Route mismatch', { exact: true }).count(), 1);
+  assert.equal(await info.getByText('old-detail-kernel', { exact: true }).count(), 0);
   assert.deepEqual(requests.map(({ method }) => method), ['POST', 'GET']);
   assert.deepEqual(requests[0].body, { forceRefresh: false });
   assert.equal(requests[1].requestId, 'request-1');
@@ -104,16 +128,25 @@ test('native browser Load data, polling, refresh, expiry and cleanup lifecycle',
   await fullJSON.waitFor();
   await page.getByText('Detailed data expired and was removed.', { exact: false }).waitFor();
   assert.equal(await fullJSON.count(), 0, 'expiry unmounts the retained full payload');
+  assert.equal(await page.locator('.node-detail-right table').count(), 0);
+  assert.equal(await page.getByText('loaded-peer', { exact: true }).count(), 0);
+  await info.getByText('updated-summary-kernel', { exact: true }).waitFor();
+  assert.equal(await tabs.getByRole('button').count(), 3, 'expiry preserves unloaded tabs');
+  const afterExpiry = requests.length;
+  await page.waitForTimeout(1100);
+  assert.equal(requests.length, afterExpiry, 'expiry never collects replacements');
 
   mode = 'deadline';
   await load();
   await page.getByRole('alert').waitFor();
+  await info.getByText('Node Info', { exact: true }).waitFor();
   assert.match(await page.getByRole('alert').innerText(), /deadline expired/);
   assert.equal(requests.at(-1).method, 'POST', 'expired requests must not start polling');
 
   mode = 'pending';
   await load();
   await deadline();
+  await info.getByText('Node Info', { exact: true }).waitFor();
   await page.getByRole('button', { name: 'Close', exact: true }).click();
   const afterCancel = requests.length;
   await open();
diff --git a/frontend/tests/nodeMetadata.test.ts b/frontend/tests/nodeMetadata.test.ts
new file mode 100644
index 000000000..0de1a9965
--- /dev/null
+++ b/frontend/tests/nodeMetadata.test.ts
@@ -0,0 +1,46 @@
+// Copyright (c) Microsoft Corporation.
+// SPDX-License-Identifier: Apache-2.0
+
+import assert from 'node:assert/strict';
+import { test } from 'node:test';
+import { nodeForDetailView } from '../src/state/nodeMetadata.ts';
+
+test('overview view preserves node information without inventing diagnostic collections', () => {
+  const summary = {
+    name: 'worker', siteName: 'site', k8sReady: 'Ready', isGateway: false,
+    lastPushTime: '2026-09-17T01:00:00Z', statusSource: 'ws',
+    nodeInfo: { internalIPs: ['192.0.2.1'], kernel: 'summary-kernel' },
+  };
+  const view = nodeForDetailView('worker', summary);
+  assert.equal(view.nodeInfo.name, 'worker');
+  assert.equal(view.nodeInfo.siteName, 'site');
+  assert.deepEqual(view.nodeInfo.internalIPs, ['192.0.2.1']);
+  assert.equal(view.lastPushTime, summary.lastPushTime);
+  for (const key of ['peers', 'routingTable', 'bpfEntries']) {
+    assert.equal(key in view, false, key);
+  }
+  assert.equal(nodeForDetailView('unknown').nodeInfo.name, 'unknown');
+});
+
+test('current summary overrides old snapshot metadata without mutating or copying diagnostic arrays', () => {
+  const details = {
+    nodeInfo: { name: 'worker', isGateway: true, kernel: 'old', kubelet: 'version' },
+    lastPushTime: '2026-09-17T01:00:00Z', fetchError: 'old failure',
+    peers: [{ name: 'peer' }], routingTable: { routes: [] }, bpfEntries: [],
+  };
+  const summary = {
+    name: 'worker', isGateway: false, lastPushTime: '2026-09-17T01:01:00Z',
+    nodeInfo: { kernel: 'new' }, statusSource: 'ws',
+  };
+  const view = nodeForDetailView('worker', summary, details);
+  assert.equal(view.nodeInfo.kernel, 'new');
+  assert.equal(view.nodeInfo.kubelet, 'version');
+  assert.equal(view.nodeInfo.isGateway, false);
+  assert.equal(view.lastPushTime, summary.lastPushTime);
+  assert.equal(view.fetchError, undefined);
+  assert.equal(view.peers, details.peers);
+  assert.equal(view.routingTable, details.routingTable);
+  assert.equal(view.bpfEntries, details.bpfEntries);
+  assert.equal(details.nodeInfo.kernel, 'old');
+  assert.equal(nodeForDetailView('worker', undefined, details).fetchError, 'old failure');
+});