Improved install guide

Theremini/webui/app.js

@@ -118,6 +118,7 @@ function updateHealth(health = {}) {
         const guideHtml = typeof health.fluidsynth_guide_html === "string" ? health.fluidsynth_guide_html.trim() : "";
         if (guideHtml) {
             guideContentEl.innerHTML = guideHtml;
+            enhanceGuideContent();
         } else {
             guideContentEl.innerHTML =
                 "<p class=\"meta\">Unable to load the installation guide. Please check the app logs.</p>";
@@ -125,6 +126,64 @@ function updateHealth(health = {}) {
     }
 }
 
+function enhanceGuideContent() {
+    const blocks = guideContentEl.querySelectorAll("pre");
+    blocks.forEach((pre) => {
+        if (pre.dataset.copyEnhanced === "1") {
+            return;
+        }
+        pre.dataset.copyEnhanced = "1";
+        const wrapper = document.createElement("div");
+        wrapper.className = "guide-code-wrapper";
+        pre.parentNode.insertBefore(wrapper, pre);
+        wrapper.appendChild(pre);
+        const button = document.createElement("button");
+        button.type = "button";
+        button.className = "guide-copy-button";
+        button.textContent = "Copy";
+        button.addEventListener("click", () => copyGuideText(pre.innerText, button));
+        wrapper.appendChild(button);
+    });
+}
+
+async function copyGuideText(content, button) {
+    try {
+        await navigator.clipboard.writeText(content);
+        indicateCopySuccess(button);
+        return;
+    } catch (error) {
+        console.warn("Clipboard copy failed", error);
+    }
+    const textarea = document.createElement("textarea");
+    textarea.value = content;
+    textarea.style.position = "fixed";
+    textarea.style.top = "-9999px";
+    document.body.appendChild(textarea);
+    textarea.focus();
+    textarea.select();
+    try {
+        document.execCommand("copy");
+        indicateCopySuccess(button);
+    } catch (error) {
+        console.error("execCommand copy failed", error);
+    } finally {
+        document.body.removeChild(textarea);
+    }
+}
+
+function indicateCopySuccess(button) {
+    if (!button) {
+        return;
+    }
+    const original = button.textContent;
+    button.textContent = "Copied!";
+    button.classList.add("copied");
+    setTimeout(() => {
+        button.textContent = original;
+        button.classList.remove("copied");
+    }, 1500);
+}
+
 async function pollStatus() {
     try {
         const response = await fetch("/api/status", { cache: "no-store" });

Theremini/webui/style.css

@@ -143,6 +143,11 @@ body[data-guide="hidden"] #guidePanel {
     flex-direction: column;
     gap: 0.75rem;
     line-height: 1.5;
+    user-select: text;
+}
+
+.guide-content * {
+    user-select: text;
 }
 
 .guide-content h2,
@@ -163,6 +168,7 @@ body[data-guide="hidden"] #guidePanel {
     background: rgba(15, 23, 42, 0.85);
     border: 1px solid rgba(148, 163, 184, 0.35);
     overflow-x: auto;
+    margin: 0;
 }
 
 .guide-content a {
@@ -179,6 +185,30 @@ body[data-guide="hidden"] #guidePanel {
     margin-top: 0.2rem;
 }
 
+.guide-code-wrapper {
+    position: relative;
+}
+
+.guide-copy-button {
+    position: absolute;
+    top: 0.35rem;
+    right: 0.35rem;
+    border: 1px solid rgba(148, 163, 184, 0.5);
+    background: rgba(2, 6, 23, 0.8);
+    color: var(--text);
+    border-radius: 999px;
+    padding: 0.1rem 0.7rem;
+    font-size: 0.7rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    cursor: pointer;
+}
+
+.guide-copy-button.copied {
+    color: #34d399;
+    border-color: rgba(52, 211, 153, 0.7);
+}
+
 .card h2,
 .card h3 {
     margin: 0.25rem 0;