From f8ba42f34902ee209a55238a42fb0a76ef8049ff Mon Sep 17 00:00:00 2001
From: "mingholy.lmh" <mingholy.lmh@alibaba-inc.com>
Date: Mon, 8 Jun 2026 21:39:18 +0800
Subject: [PATCH 1/2] Fix static copy fallback

---
 public/index.html    | 34 +++++++++++++++++++++++++++++++++-
 public/index.zh.html | 34 +++++++++++++++++++++++++++++++++-
 2 files changed, 66 insertions(+), 2 deletions(-)

diff --git a/public/index.html b/public/index.html
index 6877017d..db3a7933 100644
--- a/public/index.html
+++ b/public/index.html
@@ -766,9 +766,41 @@ <h2 class="section-title">Up and running in seconds</h2>
 </footer>
 
 <script>
+  function fallbackCopyText(text) {
+    return new Promise(function(resolve, reject) {
+      var ta = document.createElement('textarea');
+      ta.value = text;
+      ta.style.position = 'fixed';
+      ta.style.opacity = '0';
+      ta.style.left = '-9999px';
+      document.body.appendChild(ta);
+      ta.select();
+      try {
+        if (document.execCommand('copy')) {
+          resolve();
+        } else {
+          reject(new Error('copy failed'));
+        }
+      } catch (e) {
+        reject(e);
+      } finally {
+        document.body.removeChild(ta);
+      }
+    });
+  }
+
+  function copyText(text) {
+    if (navigator.clipboard && navigator.clipboard.writeText) {
+      return navigator.clipboard.writeText(text).catch(function() {
+        return fallbackCopyText(text);
+      });
+    }
+    return fallbackCopyText(text);
+  }
+
   function copyCode(btn) {
     const code = btn.nextElementSibling.innerText;
-    navigator.clipboard.writeText(code).then(() => {
+    copyText(code).then(() => {
       btn.textContent = 'Copied!';
       btn.classList.add('copied');
       setTimeout(() => {
diff --git a/public/index.zh.html b/public/index.zh.html
index ad1b1114..925ca82b 100644
--- a/public/index.zh.html
+++ b/public/index.zh.html
@@ -766,9 +766,41 @@ <h2 class="section-title">几秒钟内启动运行</h2>
 </footer>
 
 <script>
+  function fallbackCopyText(text) {
+    return new Promise(function(resolve, reject) {
+      var ta = document.createElement('textarea');
+      ta.value = text;
+      ta.style.position = 'fixed';
+      ta.style.opacity = '0';
+      ta.style.left = '-9999px';
+      document.body.appendChild(ta);
+      ta.select();
+      try {
+        if (document.execCommand('copy')) {
+          resolve();
+        } else {
+          reject(new Error('copy failed'));
+        }
+      } catch (e) {
+        reject(e);
+      } finally {
+        document.body.removeChild(ta);
+      }
+    });
+  }
+
+  function copyText(text) {
+    if (navigator.clipboard && navigator.clipboard.writeText) {
+      return navigator.clipboard.writeText(text).catch(function() {
+        return fallbackCopyText(text);
+      });
+    }
+    return fallbackCopyText(text);
+  }
+
   function copyCode(btn) {
     const code = btn.nextElementSibling.innerText;
-    navigator.clipboard.writeText(code).then(() => {
+    copyText(code).then(() => {
       btn.textContent = '已复制！';
       btn.classList.add('copied');
       setTimeout(() => {

From 4df8af44b0ab8a1e3fdf0ad14b16fc158955b8b7 Mon Sep 17 00:00:00 2001
From: "mingholy.lmh" <mingholy.lmh@alibaba-inc.com>
Date: Tue, 9 Jun 2026 21:35:26 +0800
Subject: [PATCH 2/2] refactor(web): centralize clipboard copy into
 lib/clipboard.ts

Introduce web/src/lib/clipboard.ts (copyText + copyRich) backed by the
copy-to-clipboard dependency, which works in non-secure contexts
(http://<ip>) where navigator.clipboard is undefined. Replace ~10 bare
navigator.clipboard.writeText sites that had no fallback, and remove two
duplicated textarea+execCommand fallbacks (OnboardingDevice,
PersonalRepoPanel). TableWithToolbar's rich (text/html) copy moves into
copyRich, with plain-text fallback going through the shared util.

Static public/*.html landing pages keep their own inline fallback
(can't import npm modules); left as-is.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 web/package.json                              |  1 +
 web/src/components/OnboardingDevice.tsx       | 15 +-----
 web/src/components/OnboardingInfo.tsx         |  3 +-
 web/src/components/ShareArtifactDialog.tsx    |  7 +--
 .../components/assistant-ui/markdown-text.tsx |  5 +-
 web/src/components/chat/CopyButton.tsx        |  5 +-
 web/src/components/chat/MarkdownBlock.tsx     |  5 +-
 web/src/components/chat/SvgRenderer.tsx       |  3 +-
 web/src/components/chat/TableWithToolbar.tsx  | 15 +-----
 .../components/dialog/PersonalRepoPanel.tsx   | 37 ++------------
 web/src/components/settings/A2ASection.tsx    |  3 +-
 web/src/lib/clipboard.ts                      | 48 +++++++++++++++++++
 web/src/pages/LoopPage.tsx                    |  8 ++--
 web/src/pages/SettingsPage.tsx                |  5 +-
 14 files changed, 82 insertions(+), 78 deletions(-)
 create mode 100644 web/src/lib/clipboard.ts

diff --git a/web/package.json b/web/package.json
index da813ac3..e574947b 100644
--- a/web/package.json
+++ b/web/package.json
@@ -39,6 +39,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "codemirror": "^6.0.2",
+    "copy-to-clipboard": "^3.3.3",
     "dompurify": "^3.4.8",
     "highlight.js": "^11.11.1",
     "katex": "^0.17.0",
diff --git a/web/src/components/OnboardingDevice.tsx b/web/src/components/OnboardingDevice.tsx
index 7aea1607..67fc0f90 100644
--- a/web/src/components/OnboardingDevice.tsx
+++ b/web/src/components/OnboardingDevice.tsx
@@ -7,20 +7,7 @@
 import { useEffect, useRef, useState } from "react"
 import { deviceStart, devicePoll, getOnboarding, type OnboardingStatus } from "../api"
 import { PersonalRepoPanel } from "./dialog/PersonalRepoPanel"
-
-// navigator.clipboard is undefined over http://<ip> (non-secure context); fall
-// back to a hidden textarea + execCommand so copy works there too.
-async function copyText(text: string): Promise<boolean> {
-  try {
-    if (navigator.clipboard && window.isSecureContext) { await navigator.clipboard.writeText(text); return true }
-  } catch {}
-  try {
-    const ta = document.createElement("textarea")
-    ta.value = text; ta.style.position = "fixed"; ta.style.left = "-9999px"
-    document.body.appendChild(ta); ta.focus(); ta.select()
-    const ok = document.execCommand("copy"); document.body.removeChild(ta); return ok
-  } catch { return false }
-}
+import { copyText } from "@/lib/clipboard"
 
 export function OnboardingDevice({
   show,
diff --git a/web/src/components/OnboardingInfo.tsx b/web/src/components/OnboardingInfo.tsx
index 893c222a..86db040c 100644
--- a/web/src/components/OnboardingInfo.tsx
+++ b/web/src/components/OnboardingInfo.tsx
@@ -6,6 +6,7 @@
  */
 import { useState } from "react"
 import { getOnboarding, type OnboardingStatus } from "../api"
+import { copyText } from "@/lib/clipboard"
 
 export function OnboardingInfo({
   show,
@@ -44,7 +45,7 @@ export function OnboardingInfo({
               <div className="flex items-start gap-2">
                 <code className="flex-1 min-w-0 break-all bg-gray-50 border border-gray-200 rounded px-2 py-1.5 text-[10px] font-mono">{v.value}</code>
                 <button
-                  onClick={() => { navigator.clipboard.writeText(v.value); setCopied(v.label); setTimeout(() => setCopied(null), 1500) }}
+                  onClick={() => { if (copyText(v.value)) { setCopied(v.label); setTimeout(() => setCopied(null), 1500) } }}
                   className="shrink-0 text-[11px] text-gray-500 hover:text-gray-800 px-1.5 py-1"
                 >
                   {copied === v.label ? "copied" : "copy"}
diff --git a/web/src/components/ShareArtifactDialog.tsx b/web/src/components/ShareArtifactDialog.tsx
index 66bb34a2..c505f62f 100644
--- a/web/src/components/ShareArtifactDialog.tsx
+++ b/web/src/components/ShareArtifactDialog.tsx
@@ -2,6 +2,7 @@ import { useState, useEffect } from "react"
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog"
 import { getServeConfig, checkAliasAvailable, getAvailablePort, checkPortAvailable, getCurrentSharePort, type LoopMeta, type ServeConfig } from "../api"
 import { Globe, Copy, Check, AlertCircle, Shuffle, RefreshCw } from "lucide-react"
+import { copyText } from "@/lib/clipboard"
 
 type ShareMode = "static" | "port" | "direct" | "ephemeral"
 type TabKey = "standard" | "direct" | "ephemeral"
@@ -205,9 +206,9 @@ export function ShareArtifactDialog({ loop, open, onClose, onSaved }: { loop: Lo
     }
   }
 
-  const copyUrl = async () => {
-    try { await navigator.clipboard.writeText(shareUrl); setCopied(true); setTimeout(() => setCopied(false), 1500) }
-    catch { window.prompt("Copy this URL:", shareUrl) }
+  const copyUrl = () => {
+    if (copyText(shareUrl)) { setCopied(true); setTimeout(() => setCopied(false), 1500) }
+    else window.prompt("Copy this URL:", shareUrl)
   }
 
   const canSave =
diff --git a/web/src/components/assistant-ui/markdown-text.tsx b/web/src/components/assistant-ui/markdown-text.tsx
index c0852ed0..c2c175d0 100644
--- a/web/src/components/assistant-ui/markdown-text.tsx
+++ b/web/src/components/assistant-ui/markdown-text.tsx
@@ -14,6 +14,7 @@ import { CheckIcon, CopyIcon } from "lucide-react";
 
 import { TooltipIconButton } from "@/components/assistant-ui/tooltip-icon-button";
 import { cn } from "@/lib/utils";
+import { copyText } from "@/lib/clipboard";
 
 const MarkdownTextImpl = () => {
   return (
@@ -57,10 +58,10 @@ const useCopyToClipboard = ({
   const copyToClipboard = (value: string) => {
     if (!value) return;
 
-    navigator.clipboard.writeText(value).then(() => {
+    if (copyText(value)) {
       setIsCopied(true);
       setTimeout(() => setIsCopied(false), copiedDuration);
-    });
+    }
   };
 
   return { isCopied, copyToClipboard };
diff --git a/web/src/components/chat/CopyButton.tsx b/web/src/components/chat/CopyButton.tsx
index 11575b14..df951a5a 100644
--- a/web/src/components/chat/CopyButton.tsx
+++ b/web/src/components/chat/CopyButton.tsx
@@ -3,6 +3,7 @@ import { CheckIcon, CopyIcon } from "lucide-react";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
+import { copyText } from "@/lib/clipboard";
 
 interface CopyButtonProps {
   content: string;
@@ -15,10 +16,10 @@ export default function CopyButton({ content, className, iconClassName }: CopyBu
 
   const handleCopy = () => {
     if (!content || copied) return;
-    navigator.clipboard.writeText(content).then(() => {
+    if (copyText(content)) {
       setCopied(true);
       setTimeout(() => setCopied(false), 2000);
-    });
+    }
   };
 
   return (
diff --git a/web/src/components/chat/MarkdownBlock.tsx b/web/src/components/chat/MarkdownBlock.tsx
index 41ecd435..065e0302 100644
--- a/web/src/components/chat/MarkdownBlock.tsx
+++ b/web/src/components/chat/MarkdownBlock.tsx
@@ -20,6 +20,7 @@ import remarkGfm from "remark-gfm";
 import remarkMath from "remark-math";
 import remarkCjkFriendly from "remark-cjk-friendly";
 import { remarkAlert } from "@/lib/remarkAlert";
+import { copyText } from "@/lib/clipboard";
 import rehypeKatex from "rehype-katex";
 import rehypeRaw from "rehype-raw";
 import type { PluggableList } from "unified";
@@ -194,10 +195,10 @@ function useClipboard({ copiedDuration = 2000 } = {}) {
 
   const copyToClipboard = (value: string) => {
     if (!value) return;
-    navigator.clipboard.writeText(value).then(() => {
+    if (copyText(value)) {
       setIsCopied(true);
       setTimeout(() => setIsCopied(false), copiedDuration);
-    });
+    }
   };
 
   return { isCopied, copyToClipboard };
diff --git a/web/src/components/chat/SvgRenderer.tsx b/web/src/components/chat/SvgRenderer.tsx
index 94ece8ff..60e95a94 100644
--- a/web/src/components/chat/SvgRenderer.tsx
+++ b/web/src/components/chat/SvgRenderer.tsx
@@ -4,6 +4,7 @@ import { ExternalLinkIcon, LinkIcon } from "lucide-react";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { sanitizeSvg } from "@/lib/sanitizeSvg";
+import { copyText } from "@/lib/clipboard";
 
 type SvgRendererProps = React.SVGProps<SVGSVGElement> & { node?: unknown };
 
@@ -132,7 +133,7 @@ export const SvgRenderer = ({ node, children, ...rest }: SvgRendererProps) => {
             <button
               type="button"
               onClick={() => {
-                void navigator.clipboard?.writeText(menu.url);
+                copyText(menu.url);
                 setMenu(null);
               }}
               className="flex w-full items-center gap-2 px-3 py-1.5 text-left text-gray-700 hover:bg-gray-100"
diff --git a/web/src/components/chat/TableWithToolbar.tsx b/web/src/components/chat/TableWithToolbar.tsx
index 927a62b0..57eff9cb 100644
--- a/web/src/components/chat/TableWithToolbar.tsx
+++ b/web/src/components/chat/TableWithToolbar.tsx
@@ -3,6 +3,7 @@
 import { CheckIcon, CopyIcon, DownloadIcon } from "lucide-react";
 import { useRef, useState } from "react";
 import { cn } from "@/lib/utils";
+import { copyRich } from "@/lib/clipboard";
 
 type TableProps = React.ComponentProps<"table"> & { node?: unknown };
 
@@ -49,21 +50,9 @@ export const TableWithToolbar = ({ node, className, ...props }: TableProps) => {
     const grid = readGrid(table);
     const markdown = gridToMarkdown(grid);
     const html = table.outerHTML;
-    try {
-      if (typeof ClipboardItem !== "undefined" && navigator.clipboard?.write) {
-        await navigator.clipboard.write([
-          new ClipboardItem({
-            "text/plain": new Blob([markdown], { type: "text/plain" }),
-            "text/html": new Blob([html], { type: "text/html" }),
-          }),
-        ]);
-      } else {
-        await navigator.clipboard.writeText(markdown);
-      }
+    if (await copyRich({ text: markdown, html })) {
       setCopied(true);
       setTimeout(() => setCopied(false), 2000);
-    } catch {
-      // Clipboard access can be denied; fail quietly.
     }
   };
 
diff --git a/web/src/components/dialog/PersonalRepoPanel.tsx b/web/src/components/dialog/PersonalRepoPanel.tsx
index e045904f..eb13f6e9 100644
--- a/web/src/components/dialog/PersonalRepoPanel.tsx
+++ b/web/src/components/dialog/PersonalRepoPanel.tsx
@@ -11,35 +11,7 @@ import {
   type PersonalStatus,
 } from "@/api"
 import { ArrowUp, ArrowDown, AlertTriangle, Check, X } from "lucide-react"
-
-/**
- * Robust clipboard copy. navigator.clipboard is undefined in non-secure
- * contexts (e.g. dev:host accessed over http://<ip>:port), which silently
- * broke the "copy" buttons. Fall back to a hidden textarea + execCommand,
- * which works there too.
- */
-async function copyText(text: string): Promise<boolean> {
-  try {
-    if (navigator.clipboard && window.isSecureContext) {
-      await navigator.clipboard.writeText(text)
-      return true
-    }
-  } catch {}
-  try {
-    const ta = document.createElement("textarea")
-    ta.value = text
-    ta.style.position = "fixed"
-    ta.style.left = "-9999px"
-    document.body.appendChild(ta)
-    ta.focus()
-    ta.select()
-    const ok = document.execCommand("copy")
-    document.body.removeChild(ta)
-    return ok
-  } catch {
-    return false
-  }
-}
+import { copyText } from "@/lib/clipboard"
 
 /**
  * Personal-repo deploy-key flow, rendered as a settings panel.
@@ -1098,13 +1070,12 @@ function ExportKeyFlow({ onDone }: { onDone: () => void }) {
     }
   }
 
-  const copy = async () => {
+  const copy = () => {
     if (!cryptKey) return
-    try {
-      await navigator.clipboard.writeText(cryptKey)
+    if (copyText(cryptKey)) {
       setCopied(true)
       setTimeout(() => setCopied(false), 1500)
-    } catch {}
+    }
   }
 
   if (cryptKey) {
diff --git a/web/src/components/settings/A2ASection.tsx b/web/src/components/settings/A2ASection.tsx
index d1b1861c..61f5d6ec 100644
--- a/web/src/components/settings/A2ASection.tsx
+++ b/web/src/components/settings/A2ASection.tsx
@@ -5,6 +5,7 @@
  */
 import { useEffect, useState } from "react"
 import { getA2A, saveA2A, regenA2AKey, type A2ASettings } from "../../api"
+import { copyText } from "@/lib/clipboard"
 
 function CopyRow({ label, value }: { label: string; value: string }) {
   const [copied, setCopied] = useState(false)
@@ -13,7 +14,7 @@ function CopyRow({ label, value }: { label: string; value: string }) {
       <span className="text-[11px] text-gray-500 w-20 shrink-0">{label}</span>
       <code className="flex-1 min-w-0 truncate bg-white border border-gray-200 rounded px-2 py-1 text-[10px] font-mono">{value}</code>
       <button
-        onClick={() => { navigator.clipboard.writeText(value); setCopied(true); setTimeout(() => setCopied(false), 1500) }}
+        onClick={() => { if (copyText(value)) { setCopied(true); setTimeout(() => setCopied(false), 1500) } }}
         className="text-[11px] text-gray-500 hover:text-gray-800 shrink-0"
       >
         {copied ? "copied" : "copy"}
diff --git a/web/src/lib/clipboard.ts b/web/src/lib/clipboard.ts
new file mode 100644
index 00000000..52215bb8
--- /dev/null
+++ b/web/src/lib/clipboard.ts
@@ -0,0 +1,48 @@
+import copy from "copy-to-clipboard"
+
+/**
+ * Single clipboard entry point for the web app.
+ *
+ * Previously copy was open-coded everywhere: ~10 sites called
+ * `navigator.clipboard.writeText` with no fallback (silently broken over
+ * http://<ip>, a non-secure context where `navigator.clipboard` is
+ * undefined), plus two components carried their own duplicated
+ * textarea+execCommand fallback. This centralizes both.
+ *
+ * `copy-to-clipboard` works in non-secure contexts: it copies via a hidden
+ * element + synchronous `execCommand("copy")`, so it does not depend on the
+ * async Clipboard API or a secure origin.
+ */
+
+/** Copy plain text. Synchronous; returns whether the copy succeeded. */
+export function copyText(text: string): boolean {
+  if (!text) return false
+  try {
+    return copy(text)
+  } catch {
+    return false
+  }
+}
+
+/**
+ * Copy rich content: registers both `text/html` and `text/plain` so pasting
+ * into a rich target keeps formatting while plain targets get the text.
+ * Falls back to plain-text {@link copyText} when `ClipboardItem` / the async
+ * Clipboard API is unavailable (older browsers, non-secure contexts).
+ */
+export async function copyRich({ text, html }: { text: string; html: string }): Promise<boolean> {
+  try {
+    if (typeof ClipboardItem !== "undefined" && navigator.clipboard?.write) {
+      await navigator.clipboard.write([
+        new ClipboardItem({
+          "text/plain": new Blob([text], { type: "text/plain" }),
+          "text/html": new Blob([html], { type: "text/html" }),
+        }),
+      ])
+      return true
+    }
+  } catch {
+    // Clipboard write can be denied / unsupported — fall back to plain text.
+  }
+  return copyText(text)
+}
diff --git a/web/src/pages/LoopPage.tsx b/web/src/pages/LoopPage.tsx
index 0ddfd295..9a612cd7 100644
--- a/web/src/pages/LoopPage.tsx
+++ b/web/src/pages/LoopPage.tsx
@@ -14,6 +14,7 @@ import { useLoopRuntime, LoopRuntimeProvider } from "../useLoopRuntime"
 import { distillLoop, listProfiles, type LoopMeta, markLoopViewed, getServeConfig, type ServeConfig } from "../api"
 import { SharePage } from "./SharePage"
 import { useIsMobile } from "../lib/useIsMobile"
+import { copyText } from "@/lib/clipboard"
 import { useLoopStatus } from "../useLoopStatus"
 import { LoopListContent } from "../components/LoopListContent"
 import { FileTree } from "../FileTree"
@@ -709,12 +710,11 @@ function ShareToggle({ meta }: { meta: LoopMeta }) {
     }
   }
 
-  const onCopy = async () => {
-    try {
-      await navigator.clipboard.writeText(shareUrl)
+  const onCopy = () => {
+    if (copyText(shareUrl)) {
       setCopied(true)
       setTimeout(() => setCopied(false), 1500)
-    } catch {}
+    }
   }
 
   if (!isOwner) {
diff --git a/web/src/pages/SettingsPage.tsx b/web/src/pages/SettingsPage.tsx
index b1c9c94e..96b4670c 100644
--- a/web/src/pages/SettingsPage.tsx
+++ b/web/src/pages/SettingsPage.tsx
@@ -38,6 +38,7 @@ import { PresetsPanel } from "../components/settings/PresetsPanel"
 import { getAdminPresets, normalizePresetModel, type ProviderPreset } from "../api"
 import { TokenUsagePage } from "./TokenUsagePage"
 import { useWorkspace } from "@/ctx"
+import { copyText } from "@/lib/clipboard"
 import { ArrowLeft, Plus, Trash2, RefreshCw, Check, AlertCircle, Lock, FileCode2, Search, User, Cpu, Terminal, Layers, BarChart3, Users, Globe, Share2, KeyRound, Copy, Wrench, Bookmark } from "lucide-react"
 import { Button } from "@/components/ui/button"
 import { Switch } from "@/components/ui/switch"
@@ -915,10 +916,10 @@ function ApiTokensSection() {
 
   const handleCopy = () => {
     if (!newToken) return
-    navigator.clipboard.writeText(newToken).then(() => {
+    if (copyText(newToken)) {
       setCopied(true)
       setTimeout(() => setCopied(false), 2000)
-    })
+    }
   }
 
   return (