From c0fd21a665d3c44d0cc6e3b7fb3602fb21918027 Mon Sep 17 00:00:00 2001
From: Cooldude2606 <25043174+Cooldude2606@users.noreply.github.com>
Date: Mon, 2 Feb 2026 22:17:52 +0000
Subject: [PATCH] Improve the generate host token modal

---
 packages/web_ui/src/components/HostsPage.tsx | 29 +++++++++++++-------
 packages/web_ui/src/style.css                |  3 ++
 2 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/packages/web_ui/src/components/HostsPage.tsx b/packages/web_ui/src/components/HostsPage.tsx
index e6212271..3551ca9b 100644
--- a/packages/web_ui/src/components/HostsPage.tsx
+++ b/packages/web_ui/src/components/HostsPage.tsx
@@ -56,7 +56,7 @@ function GenerateHostTokenButton() {
 
 		let newToken = await control.send(new lib.HostGenerateTokenRequest(id));
 		setToken(newToken);
-		setHostId(id??null);
+		setHostId(id ?? null);
 	}
 
 	// Generate a new random
@@ -89,13 +89,24 @@ function GenerateHostTokenButton() {
 					}} />
 				</Form.Item>
 			</Form>
+			<Typography.Paragraph>
+				Host IDs are randomly generated and unique, leave blank to use a new ID,
+				 otherwise the ID of an existing host can be found using:
+			</Typography.Paragraph>
+			<div className="codeblock">
+				<CopyButton
+					message="Copied get host id to clipboard"
+					text="npx clusteriohost config get host.id"
+				/>
+				npx clusteriohost config get host.id
+			</div>
 			{token !== null && <>
 				<Typography.Paragraph>
 					Host auth token:
 				</Typography.Paragraph>
 				<div className="codeblock">
 					<CopyButton
-						message={"Copied auth token to clipboard"}
+						message="Copied host token to clipboard"
 						text={token}
 					/>
 					{token}
@@ -105,15 +116,13 @@ function GenerateHostTokenButton() {
 				</Typography.Paragraph>
 				<div className="codeblock">
 					<CopyButton
-						message={"Copied configuration commands to clipboard"}
-						text={`npx clusteriohost config set host.controller_token ${token}
-							   npx clusteriohost config set host.id ${hostId}`}
+						message="Copied set host id to clipboard"
+						text={`npx clusteriohost config set host.id ${token}`}
 					/>
-					<p>npx clusteriohost config set host.controller_token &lt;token&gt;</p>
-					<p>npx clusteriohost config set host.id &lt;hostId&gt;</p>
+					npx clusteriohost config set host.id {token}
 				</div>
 				<Typography.Paragraph>
-					Example host setup commands:
+					A new host can be setup using the following commands:
 				</Typography.Paragraph>
 				<div className="codeblock">
 					<CopyButton
@@ -122,7 +131,7 @@ function GenerateHostTokenButton() {
 mkdir clusterio
 cd clusterio
 npm init "@clusterio" -- --controller-token ${token} --mode "host" --download-headless \
---controller-url ${document.location.origin}/ --host-name "Host ${hostId || "?"}" \
+--controller-url ${document.location.origin}/ --host-name "${hostId ? `Host ${hostId}` : "Host"}" \
 --public-address localhost ${pluginString.length ? "--plugins" : ""} ${pluginString}`
 						}/>
 					<p>&gt; mkdir clusterio</p>
@@ -133,7 +142,7 @@ npm init "@clusterio" -- --controller-token ${token} --mode "host" --download-he
 						--mode "host"
 						--download-headless
 						--controller-url <span className="highlight">{document.location.origin}/ </span>
-						--host-name <span className="highlight">"Host {hostId || "?"}" </span>
+						--host-name <span className="highlight">{hostId ? `Host ${hostId}` : "Host"} </span>
 						--public-address <span className="highlight">localhost </span>
 						{pluginString.length ? "--plugins" : ""} <span className="highlight">{pluginString}</span>
 					</p>
diff --git a/packages/web_ui/src/style.css b/packages/web_ui/src/style.css
index 657e23e7..b082d447 100644
--- a/packages/web_ui/src/style.css
+++ b/packages/web_ui/src/style.css
@@ -331,6 +331,9 @@ body {
 .codeblock {
 	background-color: black;
 	padding: 8px;
+	padding-right: 5em;
+	margin-bottom: 1em;
+	min-height: 2.5em;
 	line-height: 18px;
 	font-family: Courier;
 	position: relative;