feat: Implement multi-node support with MQTT and mDNS for service discovery and coordination

app/src/components/NodeBar.tsx

@@ -0,0 +1,41 @@
+import { Link } from "react-router-dom"
+import { cn } from "@/lib/utils"
+import type { NodeSummary } from "@/types"
+
+interface NodeBarProps {
+  nodes: NodeSummary[]
+}
+
+export function NodeBar({ nodes }: NodeBarProps) {
+  // Only show when there are remote nodes
+  if (nodes.length <= 1) return null
+
+  return (
+    <div className="flex items-center gap-2 mb-6">
+      {nodes.map((node) => (
+        <Link
+          key={node.hostname}
+          to={`/node/${node.hostname}`}
+          className={cn(
+            "flex items-center gap-1.5 text-sm px-3 py-1.5 rounded-md border transition-colors",
+            node.is_local
+              ? "border-[var(--primary)] bg-[var(--primary)]/10 text-[var(--foreground)]"
+              : "border-[var(--border)] bg-[var(--card)] text-[var(--muted)] hover:text-[var(--foreground)] hover:border-[var(--foreground)]/20",
+            node.is_stale && "opacity-50",
+          )}
+        >
+          <span
+            className={cn(
+              "w-2 h-2 rounded-full",
+              node.online && !node.is_stale ? "bg-green-400" : "bg-zinc-500",
+            )}
+          />
+          <span className="font-medium">{node.hostname}</span>
+          {!node.is_local && node.deployed_count > 0 && (
+            <span className="text-xs text-[var(--muted)]">({node.deployed_count})</span>
+          )}
+        </Link>
+      ))}
+    </div>
+  )
+}