feat: Remote Nodes Foundation (Strategy B) - Add nodes table with auto-seeded default local node in DatabaseService - Create NodeRegistry service for multi-instance Docker daemon connections - Add 6 Node management API endpoints (CRUD + test connection) - Create NodeManager component with table UI and connection testing - Add NodeContext for frontend-wide active node state management - Add node switcher dropdown to sidebar (visible when >1 node) - Add Nodes tab to Settings Hub

frontend/src/components/EditorLayout.tsx

@@ -13,7 +13,7 @@ import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent,
 import { Tabs, TabsList, TabsTrigger } from './ui/tabs';
 import { Card, CardContent, CardHeader, CardTitle } from './ui/card';
 import { Badge } from './ui/badge';
-import { Plus, Trash2, Play, Square, Save, Terminal, RotateCw, CloudDownload, Pencil, X, Home, LogOut, ExternalLink, Bell, Settings, MoreVertical, BellRing, Rocket, HardDrive, ScrollText, Activity } from 'lucide-react';
+import { Plus, Trash2, Play, Square, Save, Terminal, RotateCw, CloudDownload, Pencil, X, Home, LogOut, ExternalLink, Bell, Settings, MoreVertical, BellRing, Rocket, HardDrive, ScrollText, Activity, Server } from 'lucide-react';
 import { useAuth } from '@/context/AuthContext';
 import { apiFetch } from '@/lib/api';
 import { toast } from 'sonner';
@@ -31,6 +31,7 @@ import { StackAlertSheet } from './StackAlertSheet';
 import { AppStoreView } from './AppStoreView';
 import { LogViewer } from './LogViewer';
 import { GlobalObservabilityView } from './GlobalObservabilityView';
+import { useNodes } from '@/context/NodeContext';
 
 interface ContainerInfo {
   Id: string;
@@ -54,6 +55,7 @@ const formatBytes = (bytes: number) => {
 
 export default function EditorLayout() {
   const { logout } = useAuth();
+  const { nodes, activeNode, setActiveNode } = useNodes();
   const [files, setFiles] = useState<string[]>([]);
   const [selectedFile, setSelectedFile] = useState<string | null>(null);
   const [content, setContent] = useState<string>('');
@@ -647,6 +649,39 @@ export default function EditorLayout() {
           </TooltipProvider>
         </div>
 
+        {/* Node Switcher */}
+        {nodes.length > 1 && (
+          <div className="px-4 pt-2 pb-0">
+            <Select
+              value={activeNode?.id?.toString() || ''}
+              onValueChange={(val) => {
+                const node = nodes.find(n => n.id === parseInt(val));
+                if (node) setActiveNode(node);
+              }}
+            >
+              <SelectTrigger className="w-full h-9 text-sm">
+                <div className="flex items-center gap-2">
+                  <Server className="w-3.5 h-3.5 text-muted-foreground" />
+                  <SelectValue placeholder="Select node" />
+                </div>
+              </SelectTrigger>
+              <SelectContent>
+                {nodes.map(node => (
+                  <SelectItem key={node.id} value={node.id.toString()}>
+                    <div className="flex items-center gap-2">
+                      <div className={`w-2 h-2 rounded-full shrink-0 ${
+                        node.status === 'online' ? 'bg-green-500' :
+                        node.status === 'offline' ? 'bg-red-500' : 'bg-gray-400'
+                      }`} />
+                      {node.name}
+                    </div>
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        )}
+
         {/* Create Stack Button */}
         <div className="p-4">
           <Dialog open={createDialogOpen} onOpenChange={setCreateDialogOpen}>

frontend/src/components/NodeManager.tsx

@@ -0,0 +1,414 @@
+import { useState } from 'react';
+import { useNodes } from '@/context/NodeContext';
+import type { Node } from '@/context/NodeContext';
+import { apiFetch } from '@/lib/api';
+import { toast } from 'sonner';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogTrigger } from './ui/dialog';
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from './ui/alert-dialog';
+import { Button } from './ui/button';
+import { Input } from './ui/input';
+import { Label } from './ui/label';
+import { Badge } from './ui/badge';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
+import { Separator } from './ui/separator';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from './ui/table';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './ui/tooltip';
+import { Plus, Trash2, Wifi, WifiOff, Star, Pencil, Server, Monitor, Globe } from 'lucide-react';
+
+interface NodeFormData {
+  name: string;
+  type: 'local' | 'remote';
+  host: string;
+  port: number;
+  compose_dir: string;
+  is_default: boolean;
+}
+
+const defaultFormData: NodeFormData = {
+  name: '',
+  type: 'remote',
+  host: '',
+  port: 2375,
+  compose_dir: '/opt/docker',
+  is_default: false,
+};
+
+export function NodeManager() {
+  const { nodes, refreshNodes } = useNodes();
+  const [createOpen, setCreateOpen] = useState(false);
+  const [editOpen, setEditOpen] = useState(false);
+  const [deleteOpen, setDeleteOpen] = useState(false);
+  const [formData, setFormData] = useState<NodeFormData>(defaultFormData);
+  const [editingNodeId, setEditingNodeId] = useState<number | null>(null);
+  const [deletingNode, setDeletingNode] = useState<Node | null>(null);
+  const [testing, setTesting] = useState<number | null>(null);
+  const [testResult, setTestResult] = useState<{ nodeId: number; info: any } | null>(null);
+
+  const handleCreate = async () => {
+    try {
+      const res = await apiFetch('/nodes', {
+        method: 'POST',
+        body: JSON.stringify(formData),
+      });
+      if (!res.ok) {
+        const err = await res.json();
+        throw new Error(err.error || 'Failed to create node');
+      }
+      toast.success(`Node "${formData.name}" created successfully`);
+      setCreateOpen(false);
+      setFormData(defaultFormData);
+      await refreshNodes();
+    } catch (error: any) {
+      toast.error(error.message || 'Failed to create node');
+    }
+  };
+
+  const handleEdit = async () => {
+    if (!editingNodeId) return;
+    try {
+      const res = await apiFetch(`/nodes/${editingNodeId}`, {
+        method: 'PUT',
+        body: JSON.stringify(formData),
+      });
+      if (!res.ok) {
+        const err = await res.json();
+        throw new Error(err.error || 'Failed to update node');
+      }
+      toast.success(`Node "${formData.name}" updated`);
+      setEditOpen(false);
+      setEditingNodeId(null);
+      setFormData(defaultFormData);
+      await refreshNodes();
+    } catch (error: any) {
+      toast.error(error.message || 'Failed to update node');
+    }
+  };
+
+  const openEditDialog = (node: Node) => {
+    setFormData({
+      name: node.name,
+      type: node.type,
+      host: node.host,
+      port: node.port,
+      compose_dir: node.compose_dir,
+      is_default: node.is_default,
+    });
+    setEditingNodeId(node.id);
+    setEditOpen(true);
+  };
+
+  const handleDelete = async () => {
+    if (!deletingNode) return;
+    try {
+      const res = await apiFetch(`/nodes/${deletingNode.id}`, { method: 'DELETE' });
+      if (!res.ok) {
+        const err = await res.json();
+        throw new Error(err.error || 'Failed to delete node');
+      }
+      toast.success(`Node "${deletingNode.name}" deleted`);
+      setDeleteOpen(false);
+      setDeletingNode(null);
+      await refreshNodes();
+    } catch (error: any) {
+      toast.error(error.message || 'Failed to delete node');
+    }
+  };
+
+  const testConnection = async (node: Node) => {
+    setTesting(node.id);
+    setTestResult(null);
+    try {
+      const res = await apiFetch(`/nodes/${node.id}/test`, { method: 'POST' });
+      const result = await res.json();
+      if (result.success) {
+        toast.success(`Connected to "${node.name}" successfully`);
+        setTestResult({ nodeId: node.id, info: result.info });
+      } else {
+        toast.error(`Failed to connect: ${result.error}`);
+      }
+      await refreshNodes();
+    } catch (error: any) {
+      toast.error(error.message || 'Connection test failed');
+    } finally {
+      setTesting(null);
+    }
+  };
+
+  const getStatusBadge = (status: string) => {
+    switch (status) {
+      case 'online':
+        return <Badge variant="default" className="bg-green-600 text-white gap-1"><Wifi className="w-3 h-3" /> Online</Badge>;
+      case 'offline':
+        return <Badge variant="destructive" className="gap-1"><WifiOff className="w-3 h-3" /> Offline</Badge>;
+      default:
+        return <Badge variant="secondary" className="gap-1">Unknown</Badge>;
+    }
+  };
+
+  const getNodeIcon = (type: string) => {
+    return type === 'local'
+      ? <Monitor className="w-4 h-4 text-muted-foreground" />
+      : <Globe className="w-4 h-4 text-muted-foreground" />;
+  };
+
+  const renderFormFields = () => (
+    <div className="space-y-4 py-4">
+      <div className="space-y-2">
+        <Label htmlFor="node-name">Name</Label>
+        <Input
+          id="node-name"
+          placeholder="e.g., Production VPS"
+          value={formData.name}
+          onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+        />
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="node-type">Type</Label>
+        <Select value={formData.type} onValueChange={(v) => setFormData({ ...formData, type: v as 'local' | 'remote' })}>
+          <SelectTrigger>
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="local">Local (Docker Socket)</SelectItem>
+            <SelectItem value="remote">Remote (TCP)</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      {formData.type === 'remote' && (
+        <>
+          <div className="space-y-2">
+            <Label htmlFor="node-host">Host</Label>
+            <Input
+              id="node-host"
+              placeholder="e.g., 192.168.1.50 or vps.example.com"
+              value={formData.host}
+              onChange={(e) => setFormData({ ...formData, host: e.target.value })}
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="node-port">Docker API Port</Label>
+            <Input
+              id="node-port"
+              type="number"
+              placeholder="2375"
+              value={formData.port}
+              onChange={(e) => setFormData({ ...formData, port: parseInt(e.target.value) || 2375 })}
+            />
+            <p className="text-xs text-muted-foreground">
+              Default: 2375 (unencrypted) or 2376 (TLS)
+            </p>
+          </div>
+        </>
+      )}
+
+      <div className="space-y-2">
+        <Label htmlFor="node-compose-dir">Compose Directory</Label>
+        <Input
+          id="node-compose-dir"
+          placeholder="/opt/docker"
+          value={formData.compose_dir}
+          onChange={(e) => setFormData({ ...formData, compose_dir: e.target.value })}
+        />
+        <p className="text-xs text-muted-foreground">
+          The root directory where compose stack folders live on this node
+        </p>
+      </div>
+    </div>
+  );
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h2 className="text-lg font-semibold flex items-center gap-2">
+            <Server className="w-5 h-5" />
+            Nodes
+          </h2>
+          <p className="text-sm text-muted-foreground">
+            Manage Docker daemon connections across local and remote hosts
+          </p>
+        </div>
+        <Dialog open={createOpen} onOpenChange={setCreateOpen}>
+          <DialogTrigger asChild>
+            <Button size="sm" className="gap-1">
+              <Plus className="w-4 h-4" />
+              Add Node
+            </Button>
+          </DialogTrigger>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Add Remote Node</DialogTitle>
+            </DialogHeader>
+            {renderFormFields()}
+            <DialogFooter>
+              <Button variant="outline" onClick={() => setCreateOpen(false)}>Cancel</Button>
+              <Button onClick={handleCreate} disabled={!formData.name || (formData.type === 'remote' && !formData.host)}>
+                Add Node
+              </Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      </div>
+
+      <Separator />
+
+      {/* Nodes Table */}
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead className="w-10"></TableHead>
+              <TableHead>Name</TableHead>
+              <TableHead>Type</TableHead>
+              <TableHead>Endpoint</TableHead>
+              <TableHead>Compose Dir</TableHead>
+              <TableHead>Status</TableHead>
+              <TableHead className="text-right">Actions</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {nodes.map((node) => (
+              <TableRow key={node.id}>
+                <TableCell>
+                  {node.is_default && (
+                    <TooltipProvider>
+                      <Tooltip>
+                        <TooltipTrigger>
+                          <Star className="w-4 h-4 text-yellow-500 fill-yellow-500" />
+                        </TooltipTrigger>
+                        <TooltipContent>Default Node</TooltipContent>
+                      </Tooltip>
+                    </TooltipProvider>
+                  )}
+                </TableCell>
+                <TableCell className="font-medium">
+                  <div className="flex items-center gap-2">
+                    {getNodeIcon(node.type)}
+                    {node.name}
+                  </div>
+                </TableCell>
+                <TableCell>
+                  <Badge variant="outline">{node.type === 'local' ? 'Local' : 'Remote'}</Badge>
+                </TableCell>
+                <TableCell className="text-muted-foreground text-sm font-mono">
+                  {node.type === 'local' ? 'docker.sock' : `${node.host}:${node.port}`}
+                </TableCell>
+                <TableCell className="text-muted-foreground text-sm font-mono">
+                  {node.compose_dir}
+                </TableCell>
+                <TableCell>{getStatusBadge(node.status)}</TableCell>
+                <TableCell className="text-right">
+                  <div className="flex items-center justify-end gap-1">
+                    <TooltipProvider>
+                      <Tooltip>
+                        <TooltipTrigger asChild>
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            className="h-8 w-8"
+                            onClick={() => testConnection(node)}
+                            disabled={testing === node.id}
+                          >
+                            <Wifi className={`w-4 h-4 ${testing === node.id ? 'animate-pulse' : ''}`} />
+                          </Button>
+                        </TooltipTrigger>
+                        <TooltipContent>Test Connection</TooltipContent>
+                      </Tooltip>
+                    </TooltipProvider>
+
+                    <TooltipProvider>
+                      <Tooltip>
+                        <TooltipTrigger asChild>
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            className="h-8 w-8"
+                            onClick={() => openEditDialog(node)}
+                          >
+                            <Pencil className="w-4 h-4" />
+                          </Button>
+                        </TooltipTrigger>
+                        <TooltipContent>Edit Node</TooltipContent>
+                      </Tooltip>
+                    </TooltipProvider>
+
+                    {!node.is_default && (
+                      <TooltipProvider>
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <Button
+                              variant="ghost"
+                              size="icon"
+                              className="h-8 w-8 text-destructive hover:text-destructive"
+                              onClick={() => { setDeletingNode(node); setDeleteOpen(true); }}
+                            >
+                              <Trash2 className="w-4 h-4" />
+                            </Button>
+                          </TooltipTrigger>
+                          <TooltipContent>Delete Node</TooltipContent>
+                        </Tooltip>
+                      </TooltipProvider>
+                    )}
+                  </div>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+
+      {/* Connection Test Result */}
+      {testResult && (
+        <div className="rounded-md border p-4 bg-muted/30 space-y-2">
+          <h3 className="text-sm font-semibold flex items-center gap-2">
+            <Wifi className="w-4 h-4 text-green-500" />
+            Connection Details — {nodes.find(n => n.id === testResult.nodeId)?.name}
+          </h3>
+          <div className="grid grid-cols-2 md:grid-cols-3 gap-3 text-sm">
+            <div><span className="text-muted-foreground">Docker:</span> v{testResult.info.serverVersion}</div>
+            <div><span className="text-muted-foreground">OS:</span> {testResult.info.os}</div>
+            <div><span className="text-muted-foreground">Arch:</span> {testResult.info.architecture}</div>
+            <div><span className="text-muted-foreground">Containers:</span> {testResult.info.containers} ({testResult.info.containersRunning} running)</div>
+            <div><span className="text-muted-foreground">Images:</span> {testResult.info.images}</div>
+            <div><span className="text-muted-foreground">CPUs:</span> {testResult.info.cpus}</div>
+          </div>
+        </div>
+      )}
+
+      {/* Edit Dialog */}
+      <Dialog open={editOpen} onOpenChange={setEditOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Edit Node</DialogTitle>
+          </DialogHeader>
+          {renderFormFields()}
+          <DialogFooter>
+            <Button variant="outline" onClick={() => { setEditOpen(false); setEditingNodeId(null); }}>Cancel</Button>
+            <Button onClick={handleEdit} disabled={!formData.name || (formData.type === 'remote' && !formData.host)}>
+              Save Changes
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Delete Confirmation */}
+      <AlertDialog open={deleteOpen} onOpenChange={setDeleteOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete Node</AlertDialogTitle>
+            <AlertDialogDescription>
+              Are you sure you want to remove <strong>{deletingNode?.name}</strong>? This will only remove the node from Sencho — it will not affect the remote Docker daemon or any running containers.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction onClick={handleDelete}>Delete</AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+}

frontend/src/components/SettingsModal.tsx

@@ -12,7 +12,8 @@ import { Slider } from '@/components/ui/slider';
 import { toast } from 'sonner';
 import { apiFetch } from '@/lib/api';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { Shield, Activity, Bell, Palette, Moon, Sun, Code } from 'lucide-react';
+import { Shield, Activity, Bell, Palette, Moon, Sun, Code, Server } from 'lucide-react';
+import { NodeManager } from './NodeManager';
 
 interface Agent {
     type: 'discord' | 'slack' | 'webhook';
@@ -28,7 +29,7 @@ interface SettingsModalProps {
 }
 
 export function SettingsModal({ isOpen, onClose, isDarkMode, setIsDarkMode }: SettingsModalProps) {
-    const [activeSection, setActiveSection] = useState<'account' | 'system' | 'notifications' | 'appearance' | 'developer'>('account');
+    const [activeSection, setActiveSection] = useState<'account' | 'system' | 'notifications' | 'appearance' | 'developer' | 'nodes'>('account');
 
     // Auth State
     const [authData, setAuthData] = useState({ oldPassword: '', newPassword: '', confirmPassword: '' });
@@ -221,7 +222,7 @@ export function SettingsModal({ isOpen, onClose, isDarkMode, setIsDarkMode }: Se
 
     return (
         <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
-            <DialogContent className="sm:max-w-[800px] h-[600px] flex p-0 font-sans shadow-lg bg-background border-border overflow-hidden gap-0">
+            <DialogContent className="sm:max-w-[900px] h-[650px] flex p-0 font-sans shadow-lg bg-background border-border overflow-hidden gap-0">
                 {/* Sidebar */}
                 <div className="w-[200px] bg-muted/20 border-r border-border flex flex-col p-4 shrink-0">
                     <div className="font-semibold text-lg mb-6 text-foreground tracking-tight">Settings Hub</div>
@@ -266,6 +267,14 @@ export function SettingsModal({ isOpen, onClose, isDarkMode, setIsDarkMode }: Se
                             <Code className="w-4 h-4 mr-2" />
                             Developer
                         </Button>
+                        <Button
+                            variant={activeSection === 'nodes' ? 'secondary' : 'ghost'}
+                            className="w-full justify-start font-medium"
+                            onClick={() => setActiveSection('nodes')}
+                        >
+                            <Server className="w-4 h-4 mr-2" />
+                            Nodes
+                        </Button>
                     </nav>
                 </div>
 
@@ -478,6 +487,10 @@ export function SettingsModal({ isOpen, onClose, isDarkMode, setIsDarkMode }: Se
                         </div>
                     )}
 
+                    {activeSection === 'nodes' && (
+                        <NodeManager />
+                    )}
+
                 </div>
             </DialogContent>
         </Dialog>