From 0651bfe07a8360428b46737abd62929df01abfc3 Mon Sep 17 00:00:00 2001
From: Logan Cusano <logan@simplestepsolutions.com>
Date: Sun, 6 Sep 2026 19:15:55 -0400
Subject: [PATCH] frontend: mint panel shows the full one-shot install command
 (node-26#4)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

After a node enrollment token is minted, the panel now renders the
paste-ready `curl -fsSL .../install.sh | sudo bash -s -- --token <minted>
--node-id node-XXX --c2-url <derived> --mqtt-broker <derived>` line with a
Copy button, alongside the bare token (also kept, also now copyable).

- c2-url from NEXT_PUBLIC_C2_URL (same var lib/c2api.ts reads), fallback
  https://api.example.net
- mqtt-broker derived as mqtt.<api-host minus leading api.> — a DNS
  assumption; the panel text tells the operator to check it
- node id is a node-XXX placeholder; the panel collects none

Pairs with node-26's install.sh (feat/one-shot-install). The raw/tag/v1/
URL resolves once v1 is re-cut at that PR's merge.

NOT typechecked here (no node/npm in this environment); plain React, two
useState booleans + one computed string, reviewed by eye. `next build` in
the deploy workflow will catch a real type error before it ships.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 drb-frontend/app/settings/nodes/page.tsx | 50 +++++++++++++++++++++++-
 1 file changed, 48 insertions(+), 2 deletions(-)

diff --git a/drb-frontend/app/settings/nodes/page.tsx b/drb-frontend/app/settings/nodes/page.tsx
index dc01f8a..1bebcf0 100644
--- a/drb-frontend/app/settings/nodes/page.tsx
+++ b/drb-frontend/app/settings/nodes/page.tsx
@@ -39,6 +39,23 @@ function EnrollmentTokensPanel() {
   const [label, setLabel] = useState("");
   const [minting, setMinting] = useState(false);
   const [justMinted, setJustMinted] = useState<string | null>(null);
+  const [cmdCopied, setCmdCopied] = useState(false);
+  const [tokenCopied, setTokenCopied] = useState(false);
+
+  // The paste-ready one-shot install command for a fresh Pi. node id and the
+  // MQTT broker host aren't known here — left as placeholders the operator
+  // edits. C2 URL comes from this deployment's own config; the broker is the
+  // documented mqtt.<domain> sibling of the api host (install.sh header).
+  const c2Url = (process.env.NEXT_PUBLIC_C2_URL ?? "https://api.example.net").replace(/\/$/, "");
+  const mqttBroker = (() => {
+    try { return `mqtt.${new URL(c2Url).hostname.replace(/^api\./, "")}`; }
+    catch { return "mqtt.example.net"; }
+  })();
+  const installCmd = justMinted
+    ? `curl -fsSL https://git.vpn.cusano.net/logan/node-26/raw/tag/v1/install.sh \\
+  | sudo bash -s -- --token ${justMinted} --node-id node-XXX \\
+      --c2-url ${c2Url} --mqtt-broker ${mqttBroker}`
+    : "";
 
   const load = useCallback(() => {
     c2api.listEnrollmentTokens()
@@ -87,11 +104,40 @@ function EnrollmentTokensPanel() {
           <p className="text-xs text-indigo-200 font-mono mb-1">
             New token — copy it now, it won&apos;t be shown again:
           </p>
-          <p className="text-xs text-indigo-100 font-mono break-all bg-gray-900 rounded px-2 py-1.5">{justMinted}</p>
+
+          <div className="flex items-start gap-2">
+            <p className="flex-1 text-xs text-indigo-100 font-mono break-all bg-gray-900 rounded px-2 py-1.5">{justMinted}</p>
+            <button
+              type="button"
+              onClick={() => navigator.clipboard?.writeText(justMinted).then(() => {
+                setTokenCopied(true); setTimeout(() => setTokenCopied(false), 2000);
+              })}
+              className="text-xs text-indigo-300 hover:text-indigo-200 px-2 py-1.5 transition-colors shrink-0"
+            >
+              {tokenCopied ? "Copied" : "Copy"}
+            </button>
+          </div>
+
+          <p className="text-xs text-indigo-200 font-mono mt-3 mb-1">
+            …or run this on a fresh Pi (edit <span className="text-indigo-100">node-XXX</span> and the broker host):
+          </p>
+          <div className="flex items-start gap-2">
+            <pre className="flex-1 text-xs text-indigo-100 font-mono whitespace-pre-wrap break-all bg-gray-900 rounded px-2 py-1.5">{installCmd}</pre>
+            <button
+              type="button"
+              onClick={() => navigator.clipboard?.writeText(installCmd).then(() => {
+                setCmdCopied(true); setTimeout(() => setCmdCopied(false), 2000);
+              })}
+              className="text-xs text-indigo-300 hover:text-indigo-200 px-2 py-1.5 transition-colors shrink-0"
+            >
+              {cmdCopied ? "Copied" : "Copy"}
+            </button>
+          </div>
+
           <button
             type="button"
             onClick={() => setJustMinted(null)}
-            className="text-xs text-indigo-300 hover:text-indigo-200 mt-2 transition-colors"
+            className="text-xs text-indigo-300 hover:text-indigo-200 mt-3 transition-colors"
           >
             Dismiss
           </button>
-- 
2.54.0