Index: binaries/data/mods/public/globalscripts/utility.js
===================================================================
--- binaries/data/mods/public/globalscripts/utility.js
+++ binaries/data/mods/public/globalscripts/utility.js
@@ -61,6 +61,18 @@
 	return path.slice(path.lastIndexOf("/") + 1);
 }
 
+/**
+ * Returns the directories of a given path.
+ *
+ * ie. a/b/c/file.ext -> a/b/c
+ */
+function dirname(path)
+{
+	if (path.lastIndexOf("/") == -1)
+		return "";
+	return path.slice(0, path.lastIndexOf("/"));
+}
+
 /**
  * Returns names of files found in the given directory, stripping the directory path and file extension.
  */
Index: binaries/data/mods/public/gui/common/tooltips.js
===================================================================
--- binaries/data/mods/public/gui/common/tooltips.js
+++ binaries/data/mods/public/gui/common/tooltips.js
@@ -2,7 +2,10 @@
 	"unit": { "font": "sans-10", "color": "orange" },
 	"header": { "font": "sans-bold-13" },
 	"body": { "font": "sans-13" },
-	"comma": { "font": "sans-12" }
+	"comma": { "font": "sans-12" },
+	"nameSpecificBig": { "font": "sans-bold-16" },
+	"nameSpecificSmall": { "font": "sans-bold-12" },
+	"nameGeneric": { "font": "sans-bold-16" }
 };
 
 var g_AttackTypes = {
@@ -110,6 +113,10 @@
 	});
 }
 
+/**
+ * Entity templates have a `Tooltip` tag in the Identity component.
+ * (The contents of which are copied to a `tooltip` attribute in globalscripts.)
+ */
 function getEntityTooltip(template)
 {
 	if (!template.tooltip)
@@ -118,6 +125,35 @@
 	return bodyFont(template.tooltip);
 }
 
+/**
+ * Technologies have a `description` attribute, and Auras have an `auraDescription`
+ * attribute, which becomes `description`.
+ *
+ * (For technologies, this happens in globalscripts.)
+ *
+ * (For auras, this happens either in the Auras component (for session gui) or
+ * reference/common/load.js (for Reference Suite gui))
+ */
+function getDescriptionTooltip(template)
+{
+	if (!template.description)
+		return "";
+
+	return bodyFont(template.description);
+}
+
+/**
+ * Entity templates have a `History` tag in the Identity component.
+ * (The contents of which are copied to a `history` attribute in globalscripts.)
+ */
+function getHistoryTooltip(template)
+{
+	if (!template.history)
+		return "";
+
+	return bodyFont(template.history);
+}
+
 function getHealthTooltip(template)
 {
 	if (!template.health)
@@ -563,7 +599,15 @@
 	}
 
 	if (template.cost)
-		return getEntityCostComponentsTooltipString(template, entity, buildingsCountToTrainFullBatch, fullBatchSize, remainderBatch).join("  ");
+	{
+		let costs = getEntityCostComponentsTooltipString(template, entity, buildingsCountToTrainFullBatch, fullBatchSize, remainderBatch).join("  ");
+		if (costs)
+			// Translation: Label in tooltip showing cost of a unit, structure or technology.
+			return sprintf(translate("%(label)s %(costs)s"), {
+				"label": headerFont(translate("Cost:")),
+				"costs": costs
+			});
+	}
 
 	return "";
 }
@@ -711,15 +755,15 @@
 function getEntityNamesFormatted(template)
 {
 	if (!template.name.specific)
-		return '[font="sans-bold-16"]' + template.name.generic + "[/font]";
+		return setStringTags(template.name.generic, g_TooltipTextFormats.nameSpecificBig);
 
 	// Translation: Example: "Epibátēs Athēnaîos [font="sans-bold-16"](Athenian Marine)[/font]"
 	return sprintf(translate("%(specificName)s %(fontStart)s(%(genericName)s)%(fontEnd)s"), {
 		"specificName":
-			'[font="sans-bold-16"]' + template.name.specific[0] + '[/font]' +
-			'[font="sans-bold-12"]' + template.name.specific.slice(1).toUpperCase() + '[/font]',
+			setStringTags(template.name.specific[0], g_TooltipTextFormats.nameSpecificBig) +
+			setStringTags(template.name.specific.slice(1).toUpperCase(), g_TooltipTextFormats.nameSpecificSmall),
 		"genericName": template.name.generic,
-		"fontStart": '[font="sans-bold-16"]',
+		"fontStart": '[font="' + g_TooltipTextFormats.nameGeneric.font + '"]',
 		"fontEnd": '[/font]'
 	});
 }
@@ -770,3 +814,13 @@
 		"details": lootLabels.join("  ")
 	});
 }
+
+function templateViewerOnClickMessage(rightClickOnly)
+{
+	if (rightClickOnly)
+		// Translation: Appears in a tooltip to indicate that right-clicking the corresponding GUI element will open the Template Details GUI page.
+		return translate("Right-click to view more information.");
+
+	// Translation: Appears in a tooltip to indicate that clicking the corresponding GUI element will open the Template Details GUI page.
+	return translate("Click to view more information.");
+}
Index: binaries/data/mods/public/gui/page_viewer.xml
===================================================================
--- /dev/null
+++ binaries/data/mods/public/gui/page_viewer.xml
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<page>
+	<include>common/modern/setup.xml</include>
+	<include>common/modern/styles.xml</include>
+	<include>common/modern/sprites.xml</include>
+
+	<include>common/setup_resources.xml</include>
+	<include>common/sprites.xml</include>
+	<include>common/styles.xml</include>
+
+	<include>reference/common/sprites.xml</include>
+	<include>reference/common/styles.xml</include>
+
+	<include>reference/viewer/styles.xml</include>
+	<include>reference/viewer/sprites.xml</include>
+	<include>reference/viewer/viewer.xml</include>
+
+	<include>reference/common/setup.xml</include>
+</page>
Index: binaries/data/mods/public/gui/reference/common/core.js
===================================================================
--- binaries/data/mods/public/gui/reference/common/core.js
+++ binaries/data/mods/public/gui/reference/common/core.js
@@ -1,4 +1,4 @@
-var g_SelectedCiv = "";
+var g_SelectedCiv = "gaia";
 var g_CallbackSet = false;
 
 function closePage()
@@ -94,6 +94,11 @@
 	if (!templateName || !Engine.TemplateExists(templateName))
 		return {};
 
+	// If this is a non-promotion variant (ie. {civ}_support_female_citizen_house)
+	// then it is functionally equivalent to another unit being processed, so skip it.
+	if (getBaseTemplateName(templateName) != templateName)
+		return {};
+
 	let template = loadTemplate(templateName);
 
 	let templateLists = loadProductionQueue(template);
@@ -152,7 +157,7 @@
 		{
 			templateName = templateName.replace(/\{(civ|native)\}/g, g_SelectedCiv);
 			if (Engine.TemplateExists(templateName))
-				production.units.push(templateName);
+				production.units.push(getBaseTemplateName(templateName));
 		}
 
 	if (template.ProductionQueue.Technologies && template.ProductionQueue.Technologies._string)
@@ -173,3 +178,45 @@
 
 	return production;
 }
+
+/**
+ * Returns the name of a template's base, or the template's own name if the base
+ * is of a different promotion rank, or a mirage or resource-supplying corpse.
+ */
+function getBaseTemplateName(templateName)
+{
+	if (!templateName || !Engine.TemplateExists(templateName))
+		return undefined;
+
+	let template = loadTemplate(templateName);
+
+	if (!template["@parent"] || dirname(template["@parent"]) != dirname(templateName))
+		return templateName;
+
+	let parentTemplate = loadTemplate(template["@parent"]);
+
+	if (parentTemplate.Identity && parentTemplate.Identity.Rank &&
+		parentTemplate.Identity.Rank != template.Identity.Rank)
+		return templateName;
+
+	if (!parentTemplate.Cost)
+		return templateName;
+
+	for (let res in parentTemplate.Cost.Resources)
+		if (parentTemplate.Cost.Resources[res] > 0)
+			return getBaseTemplateName(template["@parent"]);
+
+	return templateName;
+}
+
+function setViewerOnPress(guiObjectName, templateName)
+{
+	let viewerFunc = () => {
+		Engine.PushGuiPage("page_viewer.xml", {
+			"templateName": templateName,
+			"civ": g_SelectedCiv
+		});
+	};
+	Engine.GetGUIObjectByName(guiObjectName).onPress = viewerFunc;
+	Engine.GetGUIObjectByName(guiObjectName).onPressRight = viewerFunc;
+}
Index: binaries/data/mods/public/gui/reference/common/draw.js
===================================================================
--- binaries/data/mods/public/gui/reference/common/draw.js
+++ binaries/data/mods/public/gui/reference/common/draw.js
@@ -4,13 +4,12 @@
 var g_DrawLimits = {};
 
 /**
- * These functions are defined in gui/common/tooltips.js
+ * List of functions that get the statistics of any template or entity,
+ * formatted in such a way as to appear in a tooltip.
+ *
+ * The functions listed are defined in gui/common/tooltips.js
  */
-var g_TooltipFunctions = [
-	getEntityNamesFormatted,
-	getEntityCostTooltip,
-	getEntityTooltip,
-	getAurasTooltip,
+var g_StatsFunctions = [
 	getHealthTooltip,
 	getHealerTooltip,
 	getAttackTooltip,
@@ -20,6 +19,7 @@
 	getProjectilesTooltip,
 	getSpeedTooltip,
 	getGatherTooltip,
+	getResourceSupplyTooltip,
 	getPopulationBonusTooltip,
 	getResourceTrickleTooltip,
 	getLootTooltip
@@ -37,3 +37,23 @@
 {
 	return textFunctions.map(func => func(template)).filter(tip => tip).join(joiner);
 }
+
+/**
+ * Returns the resources this entity supplies in the specified entity's tooltip
+ */
+function getResourceSupplyTooltip(template)
+{
+	if (!template.supply)
+		return "";
+
+	let supply = template.supply;
+	let type = supply.type[0] == "treasure" ? supply.type[1] : supply.type[0];
+
+	// Translation: Label in tooltip showing the resource type and quantity of a given resource supply.
+	return sprintf(translate("%(label)s %(component)s %(amount)s"), {
+		"label": headerFont(translate("Resource Supply:")),
+		"component": resourceIcon(type),
+		// Translation: Marks that a resource supply entity has an unending, infinite, supply of its resource.
+		"amount": Number.isFinite(+supply.amount) ? supply.amount : translate("∞")
+	});
+}
Index: binaries/data/mods/public/gui/reference/common/helper.js
===================================================================
--- binaries/data/mods/public/gui/reference/common/helper.js
+++ binaries/data/mods/public/gui/reference/common/helper.js
@@ -24,6 +24,7 @@
 		upgrade.entity = upgrade.entity.replace(/\{(civ|native)\}/g, g_SelectedCiv);
 
 		let data = GetTemplateDataHelper(loadTemplate(upgrade.entity), null, g_AuraData, g_ResourceData, g_DamageTypes);
+		data.name.internal = upgrade.entity;
 		data.cost = upgrade.cost;
 		data.icon = upgrade.icon || data.icon;
 		data.tooltip = upgrade.tooltip || data.tooltip;
Index: binaries/data/mods/public/gui/reference/common/load.js
===================================================================
--- binaries/data/mods/public/gui/reference/common/load.js
+++ binaries/data/mods/public/gui/reference/common/load.js
@@ -36,12 +36,16 @@
 	{
 		// We need to clone the template because we want to perform some translations.
 		let data = clone(Engine.GetTemplate(templateName));
-		translateObjectKeys(data, ["GenericName", "SpecificName", "Tooltip"]);
+		translateObjectKeys(data, ["GenericName", "SpecificName", "Tooltip", "History"]);
 
 		if (data.Auras)
 			for (let auraID of data.Auras._string.split(/\s+/))
 				loadAuraData(auraID);
 
+		if (data.Identity.Civ != "gaia" && g_SelectedCiv != "gaia" && data.Identity.Civ != g_SelectedCiv)
+			warn("The \"" + templateName + "\" template has a defined civ of \"" + data.Identity.Civ + "\". " +
+				"This does not match the currently selected civ \"" + g_SelectedCiv + "\".");
+
 		g_TemplateData[templateName] = data;
 	}
 
@@ -61,7 +65,7 @@
 	if (!(templateName in g_TechnologyData))
 	{
 		let data = Engine.ReadJSONFile(g_TechnologyPath + templateName + ".json");
-		translateObjectKeys(data, ["genericName", "tooltip"]);
+		translateObjectKeys(data, ["genericName", "tooltip", "description"]);
 
 		g_TechnologyData[templateName] = data;
 	}
@@ -108,8 +112,18 @@
 
 	let template = loadTemplate(templateName);
 	let unit = GetTemplateDataHelper(template, null, g_AuraData, g_ResourceData, g_DamageTypes, g_CurrentModifiers);
+	unit.name.internal = templateName;
+
+	unit.history = template.Identity.History;
+
 	unit.production = loadProductionQueue(template);
 
+	if (template.Identity.Rank)
+		unit.promotion = {
+			"current_rank": template.Identity.Rank,
+			"entity": template.Promotion && template.Promotion.Entity
+		};
+
 	if (template.Builder && template.Builder.Entities._string)
 	{
 		unit.builder = [];
@@ -124,6 +138,12 @@
 	if (unit.upgrades)
 		unit.upgrades = getActualUpgradeData(unit.upgrades);
 
+	if (template.ResourceSupply)
+		unit.supply = {
+			"type": template.ResourceSupply.Type.split("."),
+			"amount": template.ResourceSupply.Amount,
+		};
+
 	return unit;
 }
 
@@ -140,6 +160,9 @@
 
 	let template = loadTemplate(templateName);
 	let structure = GetTemplateDataHelper(template, null, g_AuraData, g_ResourceData, g_DamageTypes, g_CurrentModifiers);
+	structure.name.internal = templateName;
+
+	structure.history = template.Identity.History;
 
 	structure.production = loadProductionQueue(template);
 
@@ -208,9 +231,32 @@
 			});
 	}
 
+	if (template.ResourceSupply)
+		structure.supply = {
+			"type": template.ResourceSupply.Type.split("."),
+			"amount": template.ResourceSupply.Amount,
+		};
+
 	return structure;
 }
 
+function loadResource(templateName)
+{
+	let template = loadTemplate(templateName);
+	let resource = GetTemplateDataHelper(template, null, g_AuraData, g_ResourceData, g_DamageTypes, g_CurrentModifiers);
+	resource.name.internal = templateName;
+
+	resource.history = template.Identity.History;
+
+	if (template.ResourceSupply)
+		resource.supply = {
+			"type": template.ResourceSupply.Type.split("."),
+			"amount": template.ResourceSupply.Amount,
+		};
+
+	return resource;
+}
+
 /**
  * Load and parse technology from json template.
  *
@@ -221,6 +267,7 @@
 {
 	let template = loadTechData(techName);
 	let tech = GetTechnologyDataHelper(template, g_SelectedCiv, g_ResourceData);
+	tech.name.internal = "tech/" + techName;
 
 	if (template.pair !== undefined)
 	{
Index: binaries/data/mods/public/gui/reference/structree/draw.js
===================================================================
--- binaries/data/mods/public/gui/reference/structree/draw.js
+++ binaries/data/mods/public/gui/reference/structree/draw.js
@@ -1,3 +1,13 @@
+/**
+ * Functions used to collate the contents of a tooltip.
+ */
+var g_StructreeTooltipFunctions = [
+	getEntityNamesFormatted,
+	getEntityCostTooltip,
+	getEntityTooltip,
+	getAurasTooltip
+].concat(g_StatsFunctions);
+
 /**
  * Draw the structree
  *
@@ -44,11 +54,12 @@
 				"stretched:session/portraits/"+stru.icon;
 
 			Engine.GetGUIObjectByName("phase["+i+"]_struct["+s+"]_icon").tooltip =
-				buildText(stru, g_TooltipFunctions);
+				compileTooltip(stru);
 
 			Engine.GetGUIObjectByName("phase["+i+"]_struct["+s+"]_name").caption =
 				translate(stru.name.specific);
 
+			setViewerOnPress("phase["+i+"]_struct["+s+"]_icon", stru.name.internal);
 			thisEle.hidden = false;
 
 			for (let r in g_DrawLimits[pha].prodQuant)
@@ -154,8 +165,9 @@
 
 		trainer = g_ParsedData.units[trainer];
 		Engine.GetGUIObjectByName("trainer["+t+"]_icon").sprite = "stretched:session/portraits/"+trainer.icon;
-		Engine.GetGUIObjectByName("trainer["+t+"]_icon").tooltip = buildText(trainer, g_TooltipFunctions);
+		Engine.GetGUIObjectByName("trainer["+t+"]_icon").tooltip = compileTooltip(trainer);
 		Engine.GetGUIObjectByName("trainer["+t+"]_name").caption = translate(trainer.name.specific);
+		setViewerOnPress("trainer["+t+"]_icon", trainer.name.internal);
 		thisEle.hidden = false;
 
 		let p = 0;
@@ -242,11 +254,17 @@
 	}
 
 	prodEle.sprite = "stretched:session/portraits/"+template.icon;
-	prodEle.tooltip = buildText(template, g_TooltipFunctions);
+	prodEle.tooltip = compileTooltip(template);
 	prodEle.hidden = false;
+	setViewerOnPress(prodEle.name, template.name.internal);
 	return true;
 }
 
+function compileTooltip(template)
+{
+	return buildText(template, g_StructreeTooltipFunctions) + "\n" + templateViewerOnClickMessage(false);
+}
+
 /**
  * Calculate row position offset (accounting for different number of prod rows per phase).
  *
Index: binaries/data/mods/public/gui/reference/structree/rows.xml
===================================================================
--- binaries/data/mods/public/gui/reference/structree/rows.xml
+++ binaries/data/mods/public/gui/reference/structree/rows.xml
@@ -6,14 +6,14 @@
 			<repeat count="20" var="s">
 				<object type="image" style="StructBox" name="phase[k]_struct[s]">
 					<object type="text" style="StructNameSpecific" name="phase[k]_struct[s]_name"/>
-					<object type="image" style="StructIcon" name="phase[k]_struct[s]_icon"
+					<object type="button" style="StructIcon" name="phase[k]_struct[s]_icon"
 						sprite="stretched:pregame/shell/logo/wfg_logo_white.png"
 					/>
 					<object name="phase[k]_struct[s]_rows">
 						<repeat count="4" var="r">
 							<object name="phase[k]_struct[s]_row[r]">
 								<repeat count="24" var="p">
-									<object type="image" style="ProdBox" name="phase[k]_struct[s]_row[r]_prod[p]"/>
+									<object type="button" style="ProdBox" name="phase[k]_struct[s]_row[r]_prod[p]"/>
 								</repeat>
 							</object>
 						</repeat>
Index: binaries/data/mods/public/gui/reference/structree/structree.xml
===================================================================
--- binaries/data/mods/public/gui/reference/structree/structree.xml
+++ binaries/data/mods/public/gui/reference/structree/structree.xml
@@ -96,12 +96,12 @@
 				<repeat count="6" var="t">
 					<object type="image" style="StructBox" name="trainer[t]">
 						<object type="text" style="StructNameSpecific" name="trainer[t]_name"/>
-						<object type="image" style="StructIcon" name="trainer[t]_icon"
+						<object type="button" style="StructIcon" name="trainer[t]_icon"
 							sprite="stretched:pregame/shell/logo/wfg_logo_white.png"
 						/>
 						<object name="trainer[t]_row">
 							<repeat count="4" var="p">
-								<object type="image" style="ProdBox" name="trainer[t]_prod[p]"/>
+								<object type="button" style="ProdBox" name="trainer[t]_prod[p]"/>
 							</repeat>
 						</object>
 					</object>
Index: binaries/data/mods/public/gui/reference/viewer/sprites.xml
===================================================================
--- /dev/null
+++ binaries/data/mods/public/gui/reference/viewer/sprites.xml
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<sprites>
+	<sprite name="IconFrame_Gold">
+		<image
+			border="true"
+			bordercolor="163 163 103"
+			backcolor="0 0 0 0"
+			size="0 0 100% 100%"
+		/>
+		<image
+			border="true"
+			bordercolor="0 0 0"
+			backcolor="0 0 0 0"
+			size="1 1 100%-1 100%-1"
+		/>
+	</sprite>
+</sprites>
Index: binaries/data/mods/public/gui/reference/viewer/styles.xml
===================================================================
--- /dev/null
+++ binaries/data/mods/public/gui/reference/viewer/styles.xml
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<styles>
+	<style name="IconFrame"
+		sprite="IconFrame_Gold"
+		size="0 0 100% 100%"
+		ghost="true"
+	/>
+
+	<style name="RankGlyph"
+		size="4 6 20 22"
+		ghost="true"
+	/>
+</styles>
Index: binaries/data/mods/public/gui/reference/viewer/viewer.js
===================================================================
--- /dev/null
+++ binaries/data/mods/public/gui/reference/viewer/viewer.js
@@ -0,0 +1,340 @@
+/**
+ * Holder for the template file being displayed
+ */
+var g_Template = {};
+
+/**
+ * Holder for the template lists generated by compileTemplateLists()
+ */
+var g_TemplateLists = {};
+
+/**
+ * List of functions used to display the stats of the template being displayed.
+ * At present, these appear to the right of the icon.
+ */
+let g_StatFunctions = [getEntityCostTooltip].concat(g_StatsFunctions);
+
+/**
+ * List of functions used to display textual information and build/train
+ * lists of the template being displayed.
+ * At present, these are drawn in the main body of the page.
+ */
+var g_InfoFunctions = [
+	getEntityTooltip,
+	getHistoryTooltip,
+	getDescriptionTooltip,
+	getAurasTooltip,
+	getVisibleEntityClassesFormatted,
+	getProducedByCaption,
+	getBuildCaption,
+	getTrainCaption,
+	getResearchCaption,
+	getUpgradeCaption
+];
+
+/**
+ * Override style so we can get a bigger specific name.
+ */
+g_TooltipTextFormats.nameSpecificBig.font = "sans-bold-20";
+g_TooltipTextFormats.nameSpecificSmall.font = "sans-bold-16";
+g_TooltipTextFormats.nameGeneric.font = "sans-bold-16";
+
+/**
+ * Path to unit rank icons.
+ */
+var g_RankIconPath = "session/icons/ranks/";
+
+/**
+ * Page initialisation. May also eventually pre-draw/arrange objects.
+ *
+ * @param {object} data - Contains the civCode and the name of the template to display.
+ * @param {string} data.templateName
+ * @param {string} [data.civ]
+ * @param {string} [data.researcherTemplateName] - The template name of the researcher, if
+ *                                                 the template we're viewing is a technology.
+ * @param {*} [data.callback] - If set and loosely equivalent to true, a callback is
+ *                              assumed to be setup ready be called by the Engine upon
+ *                              closure of this page.
+ */
+function init(data)
+{
+	if (!data || !data.templateName)
+	{
+		error("Viewer: No template provided");
+		closePage();
+		return;
+	}
+
+	if (data.callback)
+		g_CallbackSet = true;
+
+	let templateName = data.templateName;
+
+	// Attempt to get the civ code from the template, or, if
+	// it's a technology, from the researcher's template.
+	if (getTypeFromName(data.templateName) != "tech")
+	{
+		// Catch and redirect if template is a non-promotion variant of
+		// another (ie. units/{civ}_support_female_citizen_house).
+		templateName = getBaseTemplateName(templateName);
+
+		g_SelectedCiv = loadTemplate(templateName).Identity.Civ;
+	}
+	else if (data.researcherTemplateName)
+		g_SelectedCiv = loadTemplate(getBaseTemplateName(data.researcherTemplateName)).Identity.Civ;
+
+	if (g_SelectedCiv == "gaia" && data.civ)
+		g_SelectedCiv = data.civ;
+
+	g_TemplateLists = compileTemplateLists(g_SelectedCiv);
+	g_CurrentModifiers = deriveModifications(g_AutoResearchTechList);
+
+	g_Template = loadTemplateFromName(templateName);
+	if (!g_Template)
+	{
+		error("Viewer: unable to recognise or load template (" + templateName + ")");
+		closePage();
+		return;
+	}
+
+	draw();
+}
+
+/**
+ * Populate the UI elements.
+ *
+ * @todo (c++ change) Implement and use a function that fetches height of rendered text block from text object.
+ */
+function draw()
+{
+	let iconObject = Engine.GetGUIObjectByName("entityIcon");
+	Engine.GetGUIObjectByName("entityName").caption = getEntityNamesFormatted(g_Template);
+	iconObject.sprite = "stretched:session/portraits/" + g_Template.icon;
+
+	let statsObject = Engine.GetGUIObjectByName("entityStats");
+	statsObject.caption = buildText(g_Template, g_StatFunctions);
+
+	// This is something of a crude hack. See above todo.
+	let infoObject = Engine.GetGUIObjectByName("entityInfo");
+	let lines = statsObject.caption.split("\n").length;
+	let fontSize = +statsObject.font.split("-")[1] + 4;
+	let infoSize = infoObject.size;
+	infoSize.top = Math.max(iconObject.size.bottom, lines * fontSize + statsObject.size.top) + 8;
+	infoObject.size = infoSize;
+
+	infoObject.caption = buildText(g_Template, g_InfoFunctions, "\n\n");
+
+	if (g_Template.promotion)
+		Engine.GetGUIObjectByName("entityRankGlyph").sprite = "stretched:" + g_RankIconPath + g_Template.promotion.current_rank + ".png";
+	Engine.GetGUIObjectByName("entityRankGlyph").hidden = !g_Template.promotion;
+}
+
+/**
+ * Determines the requested template and loads it
+ *
+ * @param {string} templateName - The template name. If loading a technology, then `tech/` must be prefixed.
+ * @return {object} The entity object.
+ */
+function loadTemplateFromName(templateName)
+{
+	if (templateName.indexOf("|") != -1)
+		templateName = templateName.split("|")[1];
+
+	if (g_ParsedData[templateName])
+		return g_ParsedData[templateName];
+
+	let template;
+	switch (getTypeFromName(templateName))
+	{
+	case "structure":
+		template = loadStructure(templateName);
+		break;
+
+	case "unit":
+		template = loadUnit(templateName);
+		break;
+
+	case "resource":
+		template = loadResource(templateName);
+		break;
+
+	case "tech":
+		template = loadTechnology(templateName.substr(templateName.indexOf("/")+1));
+		break;
+
+	default:
+		// Do nothing (error message is given elsewhere).
+	}
+
+	g_ParsedData[templateName] = template;
+
+	return template;
+}
+
+/**
+ * Returns the type of entity created from the provided template.
+ *
+ * This is used by loadTemplateFromName() to know which load function to
+ * use, and by getProducedByList() to pick a suitable label.
+ *
+ * @return {(string|false)} Entity type; "structure", "unit", etc.
+ */
+function getTypeFromName(templateName)
+{
+	templateName = templateName.split("|").pop();
+	let prefix = templateName.slice(0, templateName.indexOf("/"));
+
+	let dict = {
+		"other": "structure",
+		"structures": "structure",
+		"units": "unit",
+		"gaia": "resource",
+		"tech": "tech"
+	};
+
+	return dict[prefix] || false;
+}
+
+/**
+ * @return {string} List of the names of all the buildings/units that build/train/research the selected template.
+ */
+function getProducedByCaption(template)
+{
+	if (g_SelectedCiv == "gaia")
+		return "";
+
+	let builders = [];
+	let buildCaption = "";
+	switch (getTypeFromName(template.name.internal))
+	{
+
+	case "structure":
+		if (!g_TemplateLists.structures.has(template.name.internal))
+			// Wall towers and gates are not built directly by anything,
+			// thus they won't exist in the data store.
+			return "";
+		builders = g_TemplateLists.structures.get(template.name.internal).filter(name => !name.startsWith("structures/"));
+		// Translation: Label before a list of the names of units that build the structure selected.
+		buildCaption = translate("Built by:");
+		break;
+
+	case "unit":
+		builders = g_TemplateLists.units.get(template.name.internal);
+		// Translation: Label before a list of the names of structures or units that train the unit selected.
+		buildCaption = translate("Trained at:");
+		break;
+
+	case "tech":
+	{
+		let templateName = template.name.internal;
+		builders = g_TemplateLists.techs.get(templateName.substr(templateName.indexOf("/")+1));
+		// Translation: Label before a list of names of stuctures or units that research the technology selected.
+		buildCaption = translate("Researched at:");
+		break;
+	}
+
+	default:
+		return "";
+
+	}
+
+	// Some templates cannot be built or trained directly (upgrades) or at all (catafalques).
+	if (!builders || builders.length == 0)
+		return "";
+
+	let builderText = builders.map(builder => getEntityNames(loadTemplateFromName(builder)));
+
+	// Translation: Label followed by a list of unit/structure names.
+	return sprintf(translate("%(listHeader)s %(listOfNames)s"), {
+		"listHeader": headerFont(buildCaption),
+		// Translation: List separator.
+		"listOfNames": bodyFont(builderText.join(translate(", ")))
+	});
+}
+
+/**
+ * @return {string} List of the names of the buildings the selected unit can build.
+ */
+function getBuildCaption(template)
+{
+	if (!template.builder || !template.builder.length)
+		return "";
+
+	let builds = template.builder.map(prod => getEntityNames(loadStructure(prod)));
+
+	// Translation: Label followed by a list of unit or structure names.
+	return sprintf(translate("%(listHeader)s %(listOfNames)s"), {
+		// Translation: Label before a list of the names of structures the selected unit can construct or build.
+		"listHeader": headerFont(translate("Builds:")),
+		// Translation: List separator.
+		"listOfNames": bodyFont(builds.join(translate(", ")))
+	});
+}
+
+/**
+ * @return {string} List of the names of the technologies the selected structure/unit can research.
+ */
+function getResearchCaption(template)
+{
+	if (!template.production || !template.production.technology || !template.production.technology.length)
+		return "";
+
+	let builds = [];
+	for (let prod of template.production.technology)
+	{
+		let research = loadTechnology(prod);
+		if (research.reqs)
+			builds.push(getEntityNames(research));
+	}
+
+	// Translation: Label followed by a list of technology names.
+	return sprintf(translate("%(listHeader)s %(listOfNames)s"), {
+		// Translation: Label before a list of the names of technologies the selected unit or structure can research.
+		"listHeader": headerFont(translate("Researches:")),
+		// Translation: List separator.
+		"listOfNames": bodyFont(builds.join(translate(", ")))
+	});
+}
+
+/**
+ * @return {string} List of the names of the units the selected unit can train.
+ */
+function getTrainCaption(template)
+{
+	if (!template.production || !template.production.units || !template.production.units.length)
+		return "";
+
+	let builds = template.production.units.map(prod => getEntityNames(loadUnit(prod)));
+
+	// Translation: Label followed by a list of unit names.
+	return sprintf(translate("%(listHeader)s %(listOfNames)s"), {
+		// Translation: Label before a list of the names of units the selected unit or structure can train.
+		"listHeader": headerFont(translate("Trains:")),
+		// Translation: List separator.
+		"listOfNames": bodyFont(builds.join(translate(", ")))
+	});
+}
+
+/**
+ * @return {string} List of the names of the buildings/units the selected structure/unit can upgrade to.
+ */
+function getUpgradeCaption(template)
+{
+	if (!template.upgrades)
+		return "";
+
+	let builds = [];
+	for (let prod of template.upgrades)
+		if (!prod.name)
+			builds.push(getEntityNames(getTypeFromName(prod.entity) == "unit" ? loadUnit(prod.entity) : loadStructure(prod.entity)));
+		else
+			builds.push(getEntityNames(prod));
+
+	// Translation: Label followed by a list of unit or structure names.
+	return sprintf(translate("%(listHeader)s %(listOfNames)s"), {
+		// Translation: Label before a list of the names of units or structures the selected unit or structure can be upgradable to.
+		"listHeader": headerFont(translate("Upgradable to:")),
+		// Translation: List separator.
+		"listOfNames": bodyFont(builds.join(translate(", ")))
+	});
+}
Index: binaries/data/mods/public/gui/reference/viewer/viewer.xml
===================================================================
--- /dev/null
+++ binaries/data/mods/public/gui/reference/viewer/viewer.xml
@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<objects>
+	<script directory="gui/common/"/>
+	<script directory="gui/reference/common/"/>
+	<script directory="gui/reference/viewer/"/>
+
+	<!-- Add a translucent black background to fade out whatever's behind this -->
+	<object type="image" z="0" sprite="BackgroundTranslucent"/>
+
+	<object type="image" sprite="ModernDialog" size="50%-250 50%-300 50%+250 50%+300">
+		<object style="TitleText" type="text" size="50%-128 -18 50%+128 14">
+			<translatableAttribute id="caption">Information</translatableAttribute>
+		</object>
+
+		<object name="entityName" type="text" size="8 16 100%-8 48" text_align="center" text_valign="top" textcolor="white"/>
+
+		<object name="entityIcon" type="image"
+			size="16 48 128+16 128+48"
+			sprite="stretched:pregame/shell/logo/wfg_logo_white.png"
+		>
+			<object type="image" style="IconFrame"/>
+			<object type="image" style="RankGlyph" name="entityRankGlyph"/>
+		</object>
+
+		<object name="entityStats" type="text" style="ModernText" size="128+20 44 100%-8 50%" scrollbar="false"/>
+
+		<object name="entityInfo" type="text" style="ModernText" size="16 128+48+8 100%-16 100%-48"/>
+
+		<!-- Close page -->
+		<object
+			type="button"
+			style="StoneButton"
+			size="100%-164 100%-44 100%-16 100%-16"
+			hotkey="cancel"
+		>
+			<translatableAttribute id="caption">Close</translatableAttribute>
+			<action on="Press">closePage();</action>
+		</object>
+	</object>
+
+</objects>
Index: binaries/data/mods/public/gui/session/selection_details.js
===================================================================
--- binaries/data/mods/public/gui/session/selection_details.js
+++ binaries/data/mods/public/gui/session/selection_details.js
@@ -283,6 +283,10 @@
 
 	// TODO: we should require all entities to have icons
 	Engine.GetGUIObjectByName("icon").sprite = template.icon ? ("stretched:session/portraits/" + template.icon) : "BackgroundBlack";
+	if (template.icon)
+		Engine.GetGUIObjectByName("iconBorder").onPressRight = () => {
+			showTemplateDetails(entState.template);
+		};
 
 	Engine.GetGUIObjectByName("attackAndArmorStats").tooltip = [
 		getAttackTooltip,
@@ -308,6 +312,7 @@
 		getAurasTooltip,
 		getEntityTooltip
 	].map(func => func(template)));
+	iconTooltips.push(templateViewerOnClickMessage(true));
 
 	Engine.GetGUIObjectByName("iconBorder").tooltip = iconTooltips.filter(tip => tip).join("\n");
 
Index: binaries/data/mods/public/gui/session/selection_panels.js
===================================================================
--- binaries/data/mods/public/gui/session/selection_panels.js
+++ binaries/data/mods/public/gui/session/selection_panels.js
@@ -259,6 +259,7 @@
 			});
 
 		data.button.onPress = function() { startBuildingPlacement(data.item, data.playerState); };
+		data.button.onPressRight = function() { showTemplateDetails(data.item); };
 
 		let tooltips = [
 			getEntityNamesFormatted,
@@ -269,6 +270,7 @@
 			getGarrisonTooltip,
 			getPopulationBonusTooltip
 		].map(func => func(template));
+		tooltips.push(templateViewerOnClickMessage(true));
 
 		let limits = getEntityLimitAndCount(data.playerState, data.item);
 		tooltips.push(
@@ -744,6 +746,7 @@
 				getEntityTooltip,
 				getEntityCostTooltip
 			].map(func => func(template));
+			tooltips.push(templateViewerOnClickMessage(true));
 
 			if (!requirementsPassed)
 			{
@@ -793,6 +796,15 @@
 				addResearchToQueue(data.item.researchFacilityId, tech);
 			};
 
+			button.onPressRight = function () {
+				let researcherTemplate;
+				for (let selectedEntity of data.unitEntStates)
+					if (selectedEntity.id == data.item.researchFacilityId)
+						researcherTemplate = selectedEntity.template;
+
+				showTemplateDetails("tech/" + data.item.tech, researcherTemplate);
+			};
+
 			if (data.item.tech.pair)
 			{
 				// On mouse enter, show a cross over the other icon
@@ -980,6 +992,9 @@
 		data.button.onPress = function() {
 			addTrainingToQueue(data.unitEntStates.map(state => state.id), data.item, data.playerState);
 		};
+		data.button.onPressRight = function() {
+			showTemplateDetails(data.item);
+		};
 
 		data.countDisplay.caption = trainNum > 1 ? trainNum : "";
 
@@ -1008,6 +1023,7 @@
 				getSpeedTooltip
 			].map(func => func(template)));
 
+		tooltips.push(templateViewerOnClickMessage(true));
 		tooltips.push(
 			formatBatchTrainingString(buildingsCountToTrainFullBatch, fullBatchSize, remainderBatch),
 			getRequiredTechnologyTooltip(technologyEnabled, template.requiredTechnology, GetSimState().players[data.player].civ),
@@ -1093,7 +1109,8 @@
 				getEntityCostComponentsTooltipString(data.item, undefined, data.unitEntStates.length),
 				formatLimitString(limits.entLimit, limits.entCount, limits.entLimitChangers),
 				getRequiredTechnologyTooltip(technologyEnabled, data.item.requiredTechnology, GetSimState().players[data.player].civ),
-				getNeededResourcesTooltip(neededResources));
+				getNeededResourcesTooltip(neededResources),
+				templateViewerOnClickMessage(true));
 
 			tooltip = tooltips.filter(tip => tip).join("\n");
 
@@ -1112,6 +1129,10 @@
 		data.button.enabled = controlsPlayer(data.player);
 		data.button.tooltip = tooltip;
 
+		data.button.onPressRight = function() {
+			showTemplateDetails(data.item.entity);
+		};
+
 		let modifier = "";
 		if (!isUpgrading)
 			if (progress || !technologyEnabled || limits.canBeAddedCount == 0 &&
@@ -1146,6 +1167,25 @@
 	}
 };
 
+/**
+ * Pauses game and opens the template details viewer for a selected entity or technology.
+ *
+ * Technologies don't have a set civ, so we pass along the name of the template of
+ * the entity that's researching it so as to derive a civcode from that.
+ *
+ * @param {string} [researcherTemplateName] - The template name of the entity that researches the selected technology.
+ */
+function showTemplateDetails(templateName, researcherTemplateName)
+{
+	pauseGame();
+
+	Engine.PushGuiPage("page_viewer.xml", {
+		"templateName": templateName,
+		"callback": "resumeGame",
+		"researcherTemplateName": researcherTemplateName
+	});
+}
+
 /**
  * If two panels need the same space, so they collide,
  * the one appearing first in the order is rendered.
Index: binaries/data/mods/public/gui/session/selection_panels_middle/single_details_area.xml
===================================================================
--- binaries/data/mods/public/gui/session/selection_panels_middle/single_details_area.xml
+++ binaries/data/mods/public/gui/session/selection_panels_middle/single_details_area.xml
@@ -67,7 +67,7 @@
 		</object>
 
 		<!-- Big unit icon -->
-		<object size="-8 -8 88 88" type="image" name="iconBorder" sprite="iconBorder" tooltip_style="sessionToolTip">
+		<object size="-8 -8 88 88" type="button" name="iconBorder" sprite="iconBorder" tooltip_style="sessionToolTip">
 			<object size="1 1 100%-1 100%-1" type="image" name="icon" ghost="true"/>
 
 			<!-- Experience bar -->
Index: binaries/data/mods/public/l10n/messages.json
===================================================================
--- binaries/data/mods/public/l10n/messages.json
+++ binaries/data/mods/public/l10n/messages.json
@@ -245,6 +245,7 @@
                     "gui/pregame/**.js",
                     "gui/reference/common/**.js",
                     "gui/reference/structree/**.js",
+                    "gui/reference/viewer/**.js",
                     "gui/replaymenu/**.js",
                     "gui/savedgames/**.js",
                     "gui/splashscreen/**.js",
@@ -279,6 +280,7 @@
                     "gui/options/**.xml",
                     "gui/pregame/**.xml",
                     "gui/reference/structree/**.xml",
+                    "gui/reference/viewer/**.xml",
                     "gui/replaymenu/**.xml",
                     "gui/savedgames/**.xml",
                     "gui/splashscreen/**.xml",
@@ -400,6 +402,7 @@
                     "keywords": {
                         "GenericName": {},
                         "SpecificName": {},
+                        "History": {},
                         "VisibleClasses": {
                             "splitOnWhitespace": true
                         },
@@ -431,6 +434,7 @@
                     "keywords": {
                         "GenericName": {},
                         "SpecificName": {},
+                        "History": {},
                         "VisibleClasses": {
                             "splitOnWhitespace": true
                         },
@@ -469,6 +473,7 @@
                     "keywords": {
                         "GenericName": {},
                         "SpecificName": {},
+                        "History": {},
                         "VisibleClasses": {
                             "splitOnWhitespace": true
                         },