Overhaul rack system with split FLOPS, VRAM, cooling, interconnect, and multi-vendor SKUs

Expand from 10 to 18 rack SKUs across NVIDIA, AMD, and custom ASIC vendors, each with
distinct training vs inference FLOPS, VRAM capacity, cooling requirements, and interconnect
technology. Adds cooling hierarchy (air/liquid/immersion) that gates rack deployment, VRAM
requirements that gate model training by generation, interconnect multipliers for distributed
training scaling, and PUE-based energy cost reduction for advanced cooling. Includes save
migration from v4 to v5, 6 new research nodes, and UI updates showing split compute stats.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

apps/web/src/pages/InfrastructurePage.tsx

@@ -17,6 +17,7 @@ import {
   estimateNetworkSlots, maxComputeRacks,
   SWITCH_TIER_CONFIGS,
   DC_UPGRADE_COST_FRACTION, DC_UPGRADE_INCREMENT,
+  skuTotalFlops,
 } from '@ai-tycoon/shared';
 import type {
   DCTier, RackSkuId, LocationId, PipelineStage, Era,
@@ -357,7 +358,7 @@ function ClusterFillAllModal({ cluster, money, era, research, onConfirm, onClose
 }) {
   const availableSkus = Object.values(RACK_SKU_CONFIGS).filter(s => {
     if (ERA_ORDER.indexOf(era) < ERA_ORDER.indexOf(s.era)) return false;
-    if (s.requiredResearch && !research.includes(s.requiredResearch)) return false;
+    if (s.requiredResearch.length > 0 && !s.requiredResearch.every(r => research.includes(r))) return false;
     return true;
   });
 
@@ -540,7 +541,7 @@ function ClusterDetailView({ clusterId }: { clusterId: string }) {
                 <div><span className="text-surface-400">FLOPS:</span> <span className="font-mono">{
                   formatNumber(campus.dataCenters.reduce((s, d) => {
                     const sku = d.rackSkuId ? RACK_SKU_CONFIGS[d.rackSkuId] : null;
-                    return s + (sku ? d.effectiveComputeRacks * sku.flopsPerRack : 0);
+                    return s + (sku ? d.effectiveComputeRacks * skuTotalFlops(sku) : 0);
                   }, 0))
                 }</span></div>
               </div>
@@ -644,7 +645,7 @@ function FillAllDCsModal({ campus, money, era, research, onConfirm, onClose }: {
 }) {
   const availableSkus = Object.values(RACK_SKU_CONFIGS).filter(s => {
     if (ERA_ORDER.indexOf(era) < ERA_ORDER.indexOf(s.era)) return false;
-    if (s.requiredResearch && !research.includes(s.requiredResearch)) return false;
+    if (s.requiredResearch.length > 0 && !s.requiredResearch.every(r => research.includes(r))) return false;
     return true;
   });
 
@@ -754,7 +755,7 @@ function RetrofitCampusModal({ campus, era, research, onConfirm, onClose }: {
 
   const targetSkus = Object.values(RACK_SKU_CONFIGS).filter(s => {
     if (ERA_ORDER.indexOf(era) < ERA_ORDER.indexOf(s.era)) return false;
-    if (s.requiredResearch && !research.includes(s.requiredResearch)) return false;
+    if (s.requiredResearch.length > 0 && !s.requiredResearch.every(r => research.includes(r))) return false;
     return true;
   });
 
@@ -810,7 +811,7 @@ function RetrofitCampusModal({ campus, era, research, onConfirm, onClose }: {
                     }`}>
                     <div>
                       <div className="font-medium">{s.name}</div>
-                      <div className="text-xs text-surface-400">{s.flopsPerRack} FLOPS | {s.powerDrawKW} kW | {formatMoney(s.baseCost)}/rack</div>
+                      <div className="text-xs text-surface-400">{s.trainingFlops}T / {s.inferenceFlops}I FLOPS | {s.totalVramGB}GB | {s.powerDrawKW} kW | {formatMoney(s.baseCost)}/rack</div>
                     </div>
                     {isCurrentOnly && <span className="text-xs text-surface-500">Current</span>}
                     {selectedSku === s.id && <CheckCircle size={16} className="text-violet-400" />}
@@ -1140,7 +1141,7 @@ function DataCenterDetailView({ clusterId, campusId, datacenterId }: {
 
   const availableSkus = Object.values(RACK_SKU_CONFIGS).filter(s => {
     if (ERA_ORDER.indexOf(era) < ERA_ORDER.indexOf(s.era)) return false;
-    if (s.requiredResearch && !research.includes(s.requiredResearch)) return false;
+    if (s.requiredResearch.length > 0 && !s.requiredResearch.every(r => research.includes(r))) return false;
     if (dc.rackSkuId && dc.rackSkuId !== s.id) return false;
     return true;
   });
@@ -1168,9 +1169,10 @@ function DataCenterDetailView({ clusterId, campusId, datacenterId }: {
       </div>
 
       {/* Stats Grid */}
-      <div className="grid grid-cols-4 gap-3">
+      <div className="grid grid-cols-5 gap-3">
         <FleetStat icon={Cpu} label="Online" value={formatNumber(dc.computeRacksOnline)} sub={`of ${maxCompute} max compute`} />
-        <FleetStat icon={Zap} label="FLOPS" value={formatNumber(sku ? dc.effectiveComputeRacks * sku.flopsPerRack : 0)} />
+        <FleetStat icon={Zap} label="FLOPS" value={`${formatNumber(dc.dcTrainingFlops)}T / ${formatNumber(dc.dcInferenceFlops)}I`} />
+        <FleetStat icon={HardDrive} label="VRAM" value={`${formatNumber(dc.dcTotalVramGB)} GB`} />
         <FleetStat icon={Activity} label="Uptime" value={formatPercent(dc.currentUptime)} />
         <FleetStat icon={DollarSign} label="Cost/s" value={formatMoney(dc.energyCostPerTick + dc.maintenanceCostPerTick)} />
       </div>
@@ -1240,7 +1242,7 @@ function DataCenterDetailView({ clusterId, campusId, datacenterId }: {
                         <input type="radio" name="sku" checked={selectedSku === s.id} onChange={() => setSelectedSku(s.id)} className="accent-accent" />
                         <div className="flex-1">
                           <div className="font-medium text-sm">{s.name}</div>
-                          <div className="text-xs text-surface-400">{s.flopsPerRack} FLOPS | {s.powerDrawKW} kW | {formatMoney(s.baseCost)}</div>
+                          <div className="text-xs text-surface-400">{s.trainingFlops}T / {s.inferenceFlops}I FLOPS | {s.totalVramGB}GB | {s.powerDrawKW} kW | {formatMoney(s.baseCost)}</div>
                         </div>
                       </label>
                     ))}
@@ -1311,14 +1313,14 @@ function DataCenterDetailView({ clusterId, campusId, datacenterId }: {
                     {Object.values(RACK_SKU_CONFIGS).filter(s => {
                       if (s.id === dc.rackSkuId) return false;
                       if (ERA_ORDER.indexOf(era) < ERA_ORDER.indexOf(s.era)) return false;
-                      if (s.requiredResearch && !research.includes(s.requiredResearch)) return false;
+                      if (s.requiredResearch.length > 0 && !s.requiredResearch.every(r => research.includes(r))) return false;
                       return true;
                     }).map(s => (
                       <button key={s.id} onClick={() => setConfirmRetrofit(s.id)}
                         className="w-full flex items-center justify-between p-3 rounded-lg border border-surface-600 hover:border-accent/50 text-left">
                         <div>
                           <div className="font-medium text-sm">{s.name}</div>
-                          <div className="text-xs text-surface-400">{s.flopsPerRack} FLOPS | {s.powerDrawKW} kW | {formatMoney(s.baseCost)}/rack</div>
+                          <div className="text-xs text-surface-400">{s.trainingFlops}T / {s.inferenceFlops}I FLOPS | {s.totalVramGB}GB | {s.powerDrawKW} kW | {formatMoney(s.baseCost)}/rack</div>
                         </div>
                         <RefreshCw size={14} className="text-surface-400" />
                       </button>
@@ -1332,6 +1334,24 @@ function DataCenterDetailView({ clusterId, campusId, datacenterId }: {
           {/* Upgrades Tab */}
           {activeTab === 'upgrades' && (
             <div className="bg-surface-800 border border-surface-700 rounded-xl p-4 space-y-4">
+              {/* Cooling & Network Fabric */}
+              <div className="grid grid-cols-2 gap-3">
+                <div className="flex items-center gap-3 p-3 border border-surface-600 rounded-lg">
+                  <Thermometer size={18} className="text-cyan-400" />
+                  <div>
+                    <div className="text-xs text-surface-400">Cooling Type</div>
+                    <div className="font-medium text-sm capitalize">{dc.coolingType}</div>
+                  </div>
+                </div>
+                <div className="flex items-center gap-3 p-3 border border-surface-600 rounded-lg">
+                  <Network size={18} className="text-blue-400" />
+                  <div>
+                    <div className="text-xs text-surface-400">Network Fabric</div>
+                    <div className="font-medium text-sm">{dc.networkFabric}</div>
+                  </div>
+                </div>
+              </div>
+
               {(['cooling', 'redundancy'] as const).map(upgrade => {
                 const level = upgrade === 'cooling' ? dc.coolingLevel : dc.redundancyLevel;
                 const cost = tierConfig.baseCost * DC_UPGRADE_COST_FRACTION;