From 8a602797202e5f6e7b1654df7724b3324ed70254 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 21 Jun 2026 11:43:10 +0000
Subject: [PATCH] Add selectable node status tiles and a Node Detail card

Clicking a tile in Node Status highlights it and surfaces its name,
source integration, status, and detail in a new Node Detail card on
the bottom row, between Integration Health and a now-narrower Recent
Activity card.
---
 src/pages/Infrastructure.tsx | 42 +++++++++++++++++++++++++++++++++---
 1 file changed, 39 insertions(+), 3 deletions(-)

diff --git a/src/pages/Infrastructure.tsx b/src/pages/Infrastructure.tsx
index 4cfdec3..a824104 100644
--- a/src/pages/Infrastructure.tsx
+++ b/src/pages/Infrastructure.tsx
@@ -108,6 +108,7 @@ export default function Infrastructure() {
   const [resources, setResources] = useState<Resource[] | null>(null)
   const [integrations, setIntegrations] = useState<Integration[] | null>(null)
   const [events, setEvents] = useState<Event[] | null>(null)
+  const [selectedNode, setSelectedNode] = useState<Resource | null>(null)
   const navigate = useNavigate()
 
   useEffect(() => {
@@ -251,9 +252,11 @@ export default function Infrastructure() {
                     <div
                       key={i}
                       title={`${node.name}: ${node.detail ?? node.status}`}
+                      onClick={() => setSelectedNode(node)}
+                      className="cursor-pointer transition-colors"
                       style={{
-                        backgroundColor: 'rgba(10, 10, 12, 0.55)',
-                        border: `1px solid ${nodeStatusColor[node.status]}33`,
+                        backgroundColor: selectedNode === node ? 'rgba(200,164,52,0.1)' : 'rgba(10, 10, 12, 0.55)',
+                        border: selectedNode === node ? '1px solid rgba(200,164,52,0.5)' : `1px solid ${nodeStatusColor[node.status]}33`,
                         borderRadius: '8px',
                         padding: '8px 10px',
                         display: 'flex',
@@ -281,7 +284,7 @@ export default function Infrastructure() {
 
       {/* Bottom Row */}
       <div className="shrink-0">
-        <div className="grid w-full grid-cols-2 gap-6">
+        <div className="grid w-full grid-cols-[1fr_1.5fr_0.7fr] gap-6">
           {/* Integration Health */}
           <div style={{ ...framedCard('/archnest-network-traffic-bg.png'), height: 'auto', padding: '20px' }} className="hover:!border-gold/15">
             <div style={cardDim} />
@@ -306,6 +309,39 @@ export default function Infrastructure() {
             </div>
           </div>
 
+          {/* Node Detail — shows the node selected up in Node Status */}
+          <div style={{ ...cardBase, height: 'auto' }} className="hover:!border-gold/15">
+            <div className="relative z-10">
+              <h3 style={sectionTitle}>Node Detail</h3>
+              {selectedNode ? (
+                <div className="flex flex-col gap-3">
+                  <div className="flex items-center gap-2">
+                    <span
+                      style={{
+                        width: '8px',
+                        height: '8px',
+                        borderRadius: '50%',
+                        backgroundColor: nodeStatusColor[selectedNode.status],
+                        boxShadow: `0 0 6px ${nodeStatusColor[selectedNode.status]}`,
+                      }}
+                    />
+                    <span style={{ fontSize: '14px', fontWeight: 600, color: '#E8E6E0' }}>{selectedNode.name}</span>
+                  </div>
+                  <div className="flex items-center gap-3" style={{ fontSize: '11px', color: '#7A7D85' }}>
+                    <span>{selectedNode.integration}</span>
+                    <span style={{ color: 'rgba(200,164,52,0.3)' }}>|</span>
+                    <span style={{ textTransform: 'capitalize', color: nodeStatusColor[selectedNode.status] }}>{selectedNode.status}</span>
+                  </div>
+                  {selectedNode.detail && (
+                    <p style={{ fontSize: '12px', color: '#A8A6A0', lineHeight: 1.5 }}>{selectedNode.detail}</p>
+                  )}
+                </div>
+              ) : (
+                <p style={{ fontSize: '12px', color: '#7A7D85' }}>Select a node above to view its details.</p>
+              )}
+            </div>
+          </div>
+
           {/* Recent Activity */}
           <div style={{ ...cardBase, height: 'auto' }} className="hover:!border-gold/15">
             <div className="relative z-10">