From 4e1f208a9ff46c84870e86930239561d53d47d70 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Tue, 26 May 2026 11:16:32 -0400
Subject: [PATCH] =?UTF-8?q?fix(ui-copy):=20copyText=20utility=20with=20exe?=
 =?UTF-8?q?cCommand=20fallback=20=E2=80=94=20navigator.clipboard=20is=20ga?=
 =?UTF-8?q?ted=20by=20Secure=20Context=20(HTTPS-only)=20and=20is=20undefin?=
 =?UTF-8?q?ed=20on=20plain-HTTP=20self-hosted=20deployments.=20Apply=20to?=
 =?UTF-8?q?=20ExtensionKeyBar=20+=20BrowserExtensionCard.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../credentials/ExtensionKeyBar.vue           |  3 +-
 .../settings/BrowserExtensionCard.vue         |  3 +-
 frontend/src/utils/clipboard.js               | 35 +++++++++++++++++++
 3 files changed, 39 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/utils/clipboard.js

diff --git a/frontend/src/components/credentials/ExtensionKeyBar.vue b/frontend/src/components/credentials/ExtensionKeyBar.vue
index cf56b3c..2563ec6 100644
--- a/frontend/src/components/credentials/ExtensionKeyBar.vue
+++ b/frontend/src/components/credentials/ExtensionKeyBar.vue
@@ -28,6 +28,7 @@
 <script setup>
 import { onMounted, ref } from 'vue'
 import { useCredentialsStore } from '../../stores/credentials.js'
+import { copyText } from '../../utils/clipboard.js'
 
 const store = useCredentialsStore()
 const showRotateConfirm = ref(false)
@@ -37,7 +38,7 @@ onMounted(() => store.loadKey())
 async function copyKey() {
   if (!store.extensionKey) return
   try {
-    await navigator.clipboard.writeText(store.extensionKey)
+    await copyText(store.extensionKey)
     globalThis.window?.__fcToast?.({ text: 'Copied', type: 'success' })
   } catch {
     globalThis.window?.__fcToast?.({ text: 'Copy failed', type: 'error' })
diff --git a/frontend/src/components/settings/BrowserExtensionCard.vue b/frontend/src/components/settings/BrowserExtensionCard.vue
index db5d3a3..2a0bedb 100644
--- a/frontend/src/components/settings/BrowserExtensionCard.vue
+++ b/frontend/src/components/settings/BrowserExtensionCard.vue
@@ -110,6 +110,7 @@
 <script setup>
 import { computed, onMounted, ref } from 'vue'
 import { useApi } from '../../composables/useApi.js'
+import { copyText } from '../../utils/clipboard.js'
 
 const api = useApi()
 
@@ -172,7 +173,7 @@ async function rotateKey() {
 
 async function copy(text, label) {
   try {
-    await navigator.clipboard.writeText(text)
+    await copyText(text)
     window.__fcToast?.({ text: `${label} copied.`, type: 'success' })
   } catch (e) {
     window.__fcToast?.({ text: `Copy failed: ${e.message}`, type: 'error' })
diff --git a/frontend/src/utils/clipboard.js b/frontend/src/utils/clipboard.js
new file mode 100644
index 0000000..8246f27
--- /dev/null
+++ b/frontend/src/utils/clipboard.js
@@ -0,0 +1,35 @@
+// Clipboard write that works on plain-HTTP self-hosted deployments.
+//
+// navigator.clipboard is gated by the browser's Secure Context restriction
+// (HTTPS or localhost only). FabledCurator runs over plain HTTP per the
+// homelab posture, so the modern API is undefined in production. We fall
+// back to the legacy execCommand('copy') path via a temporary off-screen
+// textarea — wide browser support, no HTTPS requirement.
+
+export async function copyText (text) {
+  const str = text == null ? '' : String(text)
+  if (typeof navigator !== 'undefined' && navigator.clipboard?.writeText) {
+    try {
+      await navigator.clipboard.writeText(str)
+      return
+    } catch {
+      // Fall through to the legacy path. Some browsers throw even when
+      // the API exists (permission denied, focus loss, etc.).
+    }
+  }
+  const ta = document.createElement('textarea')
+  ta.value = str
+  ta.setAttribute('readonly', '')
+  ta.style.position = 'fixed'
+  ta.style.top = '0'
+  ta.style.left = '0'
+  ta.style.opacity = '0'
+  ta.style.pointerEvents = 'none'
+  document.body.appendChild(ta)
+  ta.select()
+  ta.setSelectionRange(0, str.length)
+  let ok = false
+  try { ok = document.execCommand('copy') } catch { ok = false }
+  document.body.removeChild(ta)
+  if (!ok) throw new Error('clipboard copy not supported')
+}