From b29f4db52c4722e5ae03a29010e47e42eb32c2a3 Mon Sep 17 00:00:00 2001
From: Bastiaan <17990055+bbassie@users.noreply.github.com>
Date: Thu, 25 Jun 2026 17:15:18 +0200
Subject: [PATCH] Show the public address on the instance details page (#935)

The instance list shows the public connect address but the instance detail
page did not. Add a Public address row (host:port) with a copy button, and
lay the details out 2x2 so the extra row stays balanced.

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../src/components/InstanceViewPage.tsx       | 24 +++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/packages/web_ui/src/components/InstanceViewPage.tsx b/packages/web_ui/src/components/InstanceViewPage.tsx
index e83e206d..e3be3237 100644
--- a/packages/web_ui/src/components/InstanceViewPage.tsx
+++ b/packages/web_ui/src/components/InstanceViewPage.tsx
@@ -1,6 +1,9 @@
 import React, { useContext, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
-import { Alert, Button, Descriptions, Dropdown, Flex, MenuProps, Modal, Space, Spin, Switch, Typography } from "antd";
+import {
+	Alert, Button, Descriptions, Dropdown, Flex, MenuProps, Modal, Space, Spin, Switch, Typography, message,
+} from "antd";
+import CopyOutlined from "@ant-design/icons/CopyOutlined";
 import DeleteOutlined from "@ant-design/icons/DeleteOutlined";
 import DownOutlined from "@ant-design/icons/DownOutlined";
 
@@ -43,10 +46,11 @@ function InstanceDescription(props: InstanceDescriptionProps) {
 
 	const { host, instance } = props;
 	let assigned = instance.assignedHost !== undefined;
+	const publicAddress = instancePublicAddress(instance, host);
 	return <Descriptions
 		bordered
 		size="small"
-		column={{ xs: 1, md: 3, lg: 3, xl: 3, xxl: 3 }}
+		column={{ xs: 1, md: 2, lg: 2, xl: 2, xxl: 2 }}
 	>
 		<Descriptions.Item label="Host">
 			{!assigned
@@ -67,6 +71,22 @@ function InstanceDescription(props: InstanceDescriptionProps) {
 				buttonContent={assigned ? "Reassign" : "Assign"}
 			/>}
 		</Descriptions.Item>
+		<Descriptions.Item label="Public address">
+			{publicAddress
+				? <Space>
+					{publicAddress}
+					<Button
+						type="text"
+						size="small"
+						icon={<CopyOutlined />}
+						onClick={() => {
+							navigator.clipboard.writeText(publicAddress);
+							message.success("Copied public address!");
+						}}
+					/>
+				</Space>
+				: <em>N/A</em>}
+		</Descriptions.Item>
 		<Descriptions.Item label="Version">
 			{instance.factorioVersion ?? "unknown"}
 		</Descriptions.Item>