feat(ui): add copy buttons to feeder ID and claim secret

The claim view previously required manually selecting the feeder ID and
claim secret to copy them. Add a small inline copy icon after each value
that copies it in one tap, with brief visual feedback. Falls back to
execCommand where the async clipboard API is unavailable (the webconfig
is served over plain HTTP, not a secure context).

Author: d4rken

web/assets/app.js

@@ -85,6 +85,13 @@
     const WIFI_ICON =
         "M15.384 6.115a.485.485 0 0 0-.047-.736A12.44 12.44 0 0 0 8 3C5.259 3 2.723 3.882.663 5.379a.485.485 0 0 0-.048.736.518.518 0 0 0 .668.05A11.45 11.45 0 0 1 8 4c2.507 0 4.827.802 6.716 2.164.205.148.49.13.668-.049m-2.55 2.516a.482.482 0 0 0-.063-.745A8.46 8.46 0 0 0 8 7a8.46 8.46 0 0 0-4.77 1.886.482.482 0 0 0-.064.745.525.525 0 0 0 .654.065A7.46 7.46 0 0 1 8 8c1.71 0 3.29.578 4.18 1.696a.525.525 0 0 0 .654-.065zm-2.557 2.514a.483.483 0 0 0-.089-.745A4.47 4.47 0 0 0 8 10c-.83 0-1.605.247-2.188.4a.483.483 0 0 0-.089.745.525.525 0 0 0 .626.085A3.47 3.47 0 0 1 8 11c.488 0 .947.118 1.349.314a.525.525 0 0 0 .626-.085zM9.5 14.25a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z";
 
+    // Bootstrap-icons clipboard glyph (two subpaths in one d string).
+    const COPY_ICON =
+        "M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1z M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0z";
+    // Bootstrap-icons check2 glyph, shown briefly after a successful copy.
+    const COPY_DONE_ICON =
+        "M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0";
+
     // ===== Runtime state =====
 
     const app = document.getElementById("app");
@@ -369,6 +376,76 @@
         return svg;
     }
 
+    // copyTextToClipboard prefers the async Clipboard API but falls back to
+    // an off-screen <textarea> + execCommand("copy"). The fallback is the
+    // path that actually runs on a feeder: the webconfig is served over
+    // plain HTTP on the LAN, which is not a secure context, so
+    // navigator.clipboard is undefined. It is also used when the async API
+    // is present but rejects (permission / user-activation quirks).
+    // try/finally guarantees the textarea is removed even if select throws.
+    function copyTextToClipboard(text) {
+        const fallback = () => new Promise((resolve, reject) => {
+            const ta = document.createElement("textarea");
+            ta.value = text;
+            ta.setAttribute("readonly", "");
+            ta.style.position = "fixed";
+            ta.style.top = "-9999px";
+            ta.style.opacity = "0";
+            document.body.appendChild(ta);
+            try {
+                ta.focus({ preventScroll: true });
+                ta.select();
+                ta.setSelectionRange(0, ta.value.length);
+                if (document.execCommand("copy")) resolve();
+                else reject(new Error("copy failed"));
+            } catch (e) {
+                reject(e);
+            } finally {
+                document.body.removeChild(ta);
+            }
+        });
+        if (navigator.clipboard && window.isSecureContext) {
+            return navigator.clipboard.writeText(text).catch(fallback);
+        }
+        return fallback();
+    }
+
+    // copyButton returns a small inline icon button that copies `value` and
+    // briefly swaps to a check glyph (or an error state) for feedback.
+    // `label` names the value for the aria-label / tooltip. The `gen` token
+    // stops a slow or failed copy from overwriting the state of a newer
+    // click, and stops a stale revert timer from firing.
+    function copyButton(value, label) {
+        const btn = el("button", {
+            class: "wc-copy-btn",
+            type: "button",
+            "aria-label": "Copy " + label,
+            title: "Copy " + label,
+        }, svgIcon(COPY_ICON, 14));
+        let gen = 0;
+        btn.addEventListener("click", async () => {
+            const myGen = ++gen;
+            let done = true;
+            try { await copyTextToClipboard(value); }
+            catch (_) { done = false; }
+            if (myGen !== gen) return;
+            btn.replaceChildren(svgIcon(done ? COPY_DONE_ICON : COPY_ICON, 14));
+            btn.classList.toggle("wc-copy-btn--done", done);
+            btn.classList.toggle("wc-copy-btn--error", !done);
+            btn.title = done ? "Copied" : "Copy failed — select manually";
+            btn.setAttribute("aria-label",
+                done ? label + " copied" : "Copy failed — select manually");
+            setTimeout(() => {
+                if (myGen !== gen) return;
+                btn.replaceChildren(svgIcon(COPY_ICON, 14));
+                btn.classList.remove("wc-copy-btn--done", "wc-copy-btn--error");
+                btn.title = "Copy " + label;
+                btn.setAttribute("aria-label", "Copy " + label);
+            }, 1400);
+        });
+        return btn;
+    }
+
     // ===== Safe claim URL =====
 
     function safeClaimHref(url) {
@@ -1297,13 +1374,24 @@
                         (r.payload && r.payload.error) || "reveal failed"));
                     return;
                 }
+                if (!r.payload.feeder_id || !r.payload.claim_secret) {
+                    parent.replaceChildren(el("p", { class: "error", role: "alert" },
+                        "reveal returned incomplete data"));
+                    return;
+                }
                 const safe = safeClaimHref(r.payload.claim_page);
                 const linkOrText = safe
                     ? el("a", { href: safe, target: "_blank", rel: "noopener noreferrer" }, "Claim this feeder")
                     : el("span", { class: "muted" }, r.payload.claim_page || "");
                 parent.replaceChildren(
-                    el("p", {}, el("strong", {}, "Feeder ID: "), r.payload.feeder_id),
-                    el("p", {}, el("strong", {}, "Claim secret: "), el("code", {}, r.payload.claim_secret)),
+                    el("p", { class: "wc-copy-row" },
+                        el("strong", {}, "Feeder ID: "),
+                        el("span", { class: "wc-copy-val" }, r.payload.feeder_id),
+                        copyButton(r.payload.feeder_id, "feeder ID")),
+                    el("p", { class: "wc-copy-row" },
+                        el("strong", {}, "Claim secret: "),
+                        el("code", { class: "wc-copy-val" }, r.payload.claim_secret),
+                        copyButton(r.payload.claim_secret, "claim secret")),
                     el("p", {}, linkOrText),
                     el("div", { class: "wc-action-grid" }, claimLog),
                 );

web/assets/style.css

@@ -674,6 +674,43 @@ button.secondary:hover,
   .wc-btn-icon--spinning svg { animation: none; }
 }
 
+/* Copyable value row in the claim box: label + value + a small inline copy
+   button that sits right after the value and is sized to the text, not the
+   2.75rem header icon buttons. The value may wrap (overflow-wrap) so a long
+   feeder UUID can't push the button off a narrow screen. */
+.wc-copy-row {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.3rem;
+}
+.wc-copy-val {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+.wc-copy-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: auto;
+  min-width: 0;
+  min-height: 0;
+  /* Transparent padding: the glyph stays text-sized at rest, but the tap
+     target grows to ~24px for touch use. */
+  padding: 0.3rem;
+  line-height: 0;
+  background: transparent;
+  border: none;
+  border-radius: var(--wc-radius-sm);
+  color: var(--wc-ink-3);
+  flex: 0 0 auto;
+}
+.wc-copy-btn:hover { color: var(--wc-ink-1); background: var(--wc-surface-3); }
+.wc-copy-btn--done,
+.wc-copy-btn--done:hover { color: var(--wc-success); background: transparent; }
+.wc-copy-btn--error,
+.wc-copy-btn--error:hover { color: var(--wc-danger); background: transparent; }
+
 /* The header back button visually matches an icon button when collapsed
    on mobile but stretches with text on desktop — keep it as a normal
    ghost button. */