Feat: Host NAT toggle on network details

packages/shared/src/components/NetworkDetailsPage.tsx

@@ -6,6 +6,7 @@ import { Badge } from '@/components/ui/badge';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
 import { Label } from '@/components/ui/label';
+import { Switch } from '@/components/ui/switch';
 import { Separator } from '@/components/ui/separator';
 import { Input } from '@/components/ui/input';
 import { useToast } from '@/hooks/use-toast';
@@ -82,6 +83,7 @@ interface Network {
   encapsulation?: string;
   ovs_bridge?: string;
   network_type?: string;
+  enable_host_nat?: boolean;
   created_at?: string;
   updated_at?: string;
   description?: string;
@@ -214,6 +216,7 @@ export const NetworkDetailsPage: React.FC<NetworkDetailsPageProps> = ({
         ipv6_cidr: networkResponse.ipv6_cidr || '',
         ipv6_gateway: networkResponse.ipv6_gateway || '',
         description: networkResponse.description || '',
+        enable_host_nat: networkResponse.enable_host_nat ?? false,
       };
       setFormData(initial);
       setOriginalFormData(initial);
@@ -276,7 +279,7 @@ export const NetworkDetailsPage: React.FC<NetworkDetailsPageProps> = ({
     }
   };
 
-  const handleInputChange = (field: keyof Network, value: string) => {
+  const handleInputChange = (field: keyof Network, value: string | boolean) => {
     setFormData(prev => ({ ...prev, [field]: value }));
   };
 
@@ -464,13 +467,20 @@ export const NetworkDetailsPage: React.FC<NetworkDetailsPageProps> = ({
         </div>
 
         {/* ── Stats Row ─────────────────────────────────────────────────── */}
-        <div className="grid grid-cols-2 md:grid-cols-5 gap-3">
+        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3">
           {[
             { icon: <Network className="h-5 w-5 text-blue-600" />, label: 'VNI', value: network.vni },
             { icon: <Globe className="h-5 w-5 text-green-600" />, label: 'IPv4 CIDR', value: network.ipv4_cidr || '—' },
             { icon: <Globe className="h-5 w-5 text-purple-600" />, label: 'IPv6 CIDR', value: network.ipv6_cidr || '—' },
             { icon: <LinkIcon className="h-5 w-5 text-indigo-600" />, label: 'Ports', value: `${activePortCount} / ${ports.length}` },
             { icon: <Shield className="h-5 w-5 text-orange-600" />, label: 'Encapsulation', value: network.encapsulation || '—' },
+            {
+              icon: network.enable_host_nat
+                ? <Wifi className="h-5 w-5 text-green-600" />
+                : <WifiOff className="h-5 w-5 text-gray-400" />,
+              label: 'Host NAT',
+              value: network.enable_host_nat ? 'Enabled' : 'Disabled',
+            },
           ].map(({ icon, label, value }) => (
             <Card key={label}>
               <CardContent className="p-4">
@@ -525,6 +535,7 @@ export const NetworkDetailsPage: React.FC<NetworkDetailsPageProps> = ({
                       { label: 'Network Type', value: network.network_type || '—' },
                       { label: 'Encapsulation', value: network.encapsulation || '—' },
                       { label: 'OVS Bridge', value: network.ovs_bridge || '—', mono: true },
+                      { label: 'Host NAT', value: network.enable_host_nat ? 'Enabled' : 'Disabled' },
                       { label: 'Status', value: network.status || '—' },
                     ].map(({ label, value, mono, copyable }) => (
                       <div key={label} className="flex items-start justify-between gap-4">
@@ -986,6 +997,17 @@ export const NetworkDetailsPage: React.FC<NetworkDetailsPageProps> = ({
                         />
                       </div>
                     ))}
+                    <div className="flex items-center justify-between gap-4 rounded-md border p-3">
+                      <div className="space-y-0.5">
+                        <Label htmlFor="enable_host_nat" className="text-sm">Host NAT</Label>
+                        <p className="text-xs text-muted-foreground">Enable internet egress through the NSController host.</p>
+                      </div>
+                      <Switch
+                        id="enable_host_nat"
+                        checked={!!formData.enable_host_nat}
+                        onCheckedChange={(checked) => handleInputChange('enable_host_nat', checked)}
+                      />
+                    </div>
                   </div>
 
                   {/* IP settings */}

packages/shared/src/hooks/useNetworks.ts

@@ -18,6 +18,7 @@ export interface Network {
   network_type?: string;
   encapsulation?: string;
   ovs_bridge?: string;
+  enable_host_nat?: boolean;
   created_at?: string;
   updated_at?: string;
 }