fix(nodes): make per-node pages reactive to the live fleet

src/lib/nodes.ts

@@ -125,6 +125,15 @@ export const useNodes = (): Node[] => {
   );
 };
 
+// useNode is the reactive single-node lookup for per-node pages. It subscribes
+// via useNodes so the live fleet is fetched and the page re-renders when it
+// arrives — a bare getNode() reads the module store synchronously and, on a
+// direct load or refresh in live mode, finds an empty store and never recovers.
+export const useNode = (name: string | undefined): Node | undefined => {
+  const all = useNodes();
+  return name ? all.find((n) => n.name === name) : undefined;
+};
+
 // The trust chain from the root down to this node, following parentCn. Guards a
 // missing parent link and a cycle so a broken fixture can't loop forever.
 export const chainToRoot = (node: Node): Node[] => {

src/pages/node-config.tsx

@@ -20,11 +20,11 @@ import { Link, Navigate, useParams } from "react-router-dom";
 
 import { ConfigForm } from "@/components/config-form";
 import { Button } from "@/components/ui/button";
-import { getNode } from "@/lib/nodes";
+import { useNode } from "@/lib/nodes";
 
 export const NodeConfigPage = () => {
   const { name } = useParams<{ name: string }>();
-  const node = name ? getNode(name) : undefined;
+  const node = useNode(name);
 
   if (!node || node.identityState === "REVOKED") {
     return <Navigate replace to={`/nodes/${name}`} />;

src/pages/node-detail.tsx

@@ -22,7 +22,7 @@ import { CertInventory } from "@/components/cert-inventory";
 import { NodeDetailPanel } from "@/components/node-detail-panel";
 import { Button } from "@/components/ui/button";
 import { type IdentityState, roleLabels } from "@/lib/mock";
-import { chainToRoot, getNode } from "@/lib/nodes";
+import { chainToRoot, useNode } from "@/lib/nodes";
 import { cn } from "@/lib/utils";
 
 const stateTone: Record<IdentityState, string> = {
@@ -33,7 +33,7 @@ const stateTone: Record<IdentityState, string> = {
 
 export const NodeDetailPage = () => {
   const { name } = useParams<{ name: string }>();
-  const node = name ? getNode(name) : undefined;
+  const node = useNode(name);
 
   if (!node) {
     return (

src/pages/node-issue.tsx

@@ -22,11 +22,11 @@ import { Link, Navigate, useParams } from "react-router-dom";
 import { IssueForm } from "@/components/issue-form";
 import { Button } from "@/components/ui/button";
 import { canIssue, type Cert } from "@/lib/certs";
-import { getNode } from "@/lib/nodes";
+import { useNode } from "@/lib/nodes";
 
 export const NodeIssuePage = () => {
   const { name } = useParams<{ name: string }>();
-  const node = name ? getNode(name) : undefined;
+  const node = useNode(name);
   const [issued, setIssued] = useState<Cert | null>(null);
   // Remount key: bumping it drops the form's issued/export state so "Issue
   // another" starts from a clean form (and a fresh, unexportable key).

src/pages/node-profiles.test.tsx

@@ -52,7 +52,7 @@ vi.mock("@/lib/config", () => ({
   getNodeConfig: (...args: unknown[]) => getNodeConfig(...args),
 }));
 vi.mock("@/lib/nodes", () => ({
-  getNode: (name: string) => ({ identityState: "ESTABLISHED", name }),
+  useNode: (name: string) => ({ identityState: "ESTABLISHED", name }),
 }));
 vi.mock("@/lib/profiles", async (importOriginal) => {
   const actual = await importOriginal<typeof import("@/lib/profiles")>();

src/pages/node-profiles.tsx

@@ -23,7 +23,7 @@ import { Button } from "@/components/ui/button";
 import { useAuth } from "@/context/auth";
 import { getNodeConfig } from "@/lib/config";
 import { fleetMode } from "@/lib/fleet/mode";
-import { getNode } from "@/lib/nodes";
+import { useNode } from "@/lib/nodes";
 import { computeDrift, type DriftRow, type DriftStatus } from "@/lib/profile-drift";
 import { applyProfileToNode, fromProtoProfile, useProfiles } from "@/lib/profiles";
 import { cn } from "@/lib/utils";
@@ -151,7 +151,7 @@ const DriftView = ({ nodeName }: { nodeName: string }) => {
 
 export const NodeProfilesPage = () => {
   const { name } = useParams<{ name: string }>();
-  const node = name ? getNode(name) : undefined;
+  const node = useNode(name);
 
   if (!node) {
     return <Navigate replace to={`/nodes/${name}`} />;

src/pages/node-rekey.tsx

@@ -20,11 +20,11 @@ import { Link, Navigate, useParams } from "react-router-dom";
 
 import { RekeyWizard } from "@/components/rekey-wizard";
 import { Button } from "@/components/ui/button";
-import { getNode } from "@/lib/nodes";
+import { useNode } from "@/lib/nodes";
 
 export const NodeRekeyPage = () => {
   const { name } = useParams<{ name: string }>();
-  const node = name ? getNode(name) : undefined;
+  const node = useNode(name);
 
   if (!node || node.identityState === "REVOKED") {
     return <Navigate replace to={`/nodes/${name}`} />;

src/pages/root-detail.tsx

@@ -21,7 +21,7 @@ import { Link, Navigate, useParams } from "react-router-dom";
 import { ConfigForm } from "@/components/config-form";
 import { RekeyWizard } from "@/components/rekey-wizard";
 import { Button } from "@/components/ui/button";
-import { getNode } from "@/lib/nodes";
+import { useNode } from "@/lib/nodes";
 
 const Panel = ({ children, label }: { children: React.ReactNode; label: string }) => (
   <div className="w-full rounded-xl border bg-card">
@@ -43,7 +43,7 @@ const Field = ({ children, label }: { children: React.ReactNode; label: string }
 
 export const RootDetailPage = () => {
   const { name } = useParams<{ name: string }>();
-  const node = name ? getNode(name) : undefined;
+  const node = useNode(name);
 
   if (!node || node.role !== "root") {
     return <Navigate replace to="/root" />;