@hienlh/ppm 0.17.29 → 0.17.30

package/src/web/components/layout/tab-bar.tsx

@@ -43,6 +43,7 @@ import { DraggableTab } from "./draggable-tab";
 import { cn } from "@/lib/utils";
 import type { Tab } from "@/stores/tab-store";
 import { downloadFile } from "@/lib/file-download";
+import { copyToClipboard } from "@/lib/clipboard";
 import { FileActions } from "@/components/explorer/file-actions";
 import {
   ContextMenu as BarContextMenu,
@@ -278,7 +279,7 @@ export const TabBar = memo(function TabBar({ panelId }: TabBarProps) {
       }
       case "copy-path": {
         const filePath = tab.metadata?.filePath as string | undefined;
-        if (filePath) navigator.clipboard.writeText(filePath).catch(() => {});
+        if (filePath) void copyToClipboard(filePath);
         break;
       }
       case "copy-full-path": {
@@ -286,7 +287,7 @@ export const TabBar = memo(function TabBar({ panelId }: TabBarProps) {
         const projectName = tab.metadata?.projectName as string | undefined;
         if (filePath) {
           const project = projectName ? useProjectStore.getState().projects.find((p) => p.name === projectName) : null;
-          navigator.clipboard.writeText(project ? `${project.path}/${filePath}` : filePath).catch(() => {});
+          void copyToClipboard(project ? `${project.path}/${filePath}` : filePath);
         }
         break;
       }

package/src/web/components/settings/accounts-settings-section.tsx

@@ -8,6 +8,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog";
 import { Eye, Loader2, Copy, X, Download, Upload, Lock, FlaskConical } from "lucide-react";
 import { getAuthToken } from "../../lib/api-client";
+import { copyToClipboard } from "@/lib/clipboard";
 import {
   getAccounts,
   getActiveAccount,
@@ -347,10 +348,9 @@ export function AccountsSettingsSection() {
       if (!res.ok) { const j = await res.json() as any; throw new Error(j.error ?? `Export failed: ${res.status}`); }
       const text = await res.text();
       if (toClipboard) {
-        try {
-          await navigator.clipboard.writeText(text);
+        if (await copyToClipboard(text)) {
           showMessage({ type: "success", text: "Backup copied to clipboard!" });
-        } catch {
+        } else {
           const blob = new Blob([text], { type: "application/json" });
           const a = document.createElement("a");
           a.href = URL.createObjectURL(blob);

package/src/web/components/settings/proxy-settings-section.tsx

@@ -5,6 +5,7 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Switch } from "@/components/ui/switch";
 import { getProxySettings, updateProxySettings, type ProxySettings } from "@/lib/api-settings";
+import { copyToClipboard } from "@/lib/clipboard";
 import { ProxyTestButton } from "./proxy-test-section";
 
 export function ProxySettingsSection() {
@@ -37,8 +38,8 @@ export function ProxySettingsSection() {
     }
   };
 
-  const copyToClipboard = (text: string, label: string) => {
-    navigator.clipboard.writeText(text);
+  const handleCopy = (text: string, label: string) => {
+    void copyToClipboard(text);
     setCopied(label);
     setTimeout(() => setCopied(null), 2000);
   };
@@ -96,7 +97,7 @@ export function ProxySettingsSection() {
               variant="outline"
               size="sm"
               className="h-7 px-2 cursor-pointer shrink-0"
-              onClick={() => copyToClipboard(settings.authKey!, "key")}
+              onClick={() => handleCopy(settings.authKey!, "key")}
             >
               {copied === "key" ? "Copied!" : <Copy className="size-3" />}
             </Button>
@@ -145,7 +146,7 @@ export function ProxySettingsSection() {
                 variant="ghost"
                 size="sm"
                 className="h-6 px-1.5 cursor-pointer shrink-0"
-                onClick={() => copyToClipboard(hasTunnel ? settings.proxyEndpoint! : localEndpoint, "anthropic")}
+                onClick={() => handleCopy(hasTunnel ? settings.proxyEndpoint! : localEndpoint, "anthropic")}
               >
                 {copied === "anthropic" ? "Copied!" : <Copy className="size-3" />}
               </Button>
@@ -163,7 +164,7 @@ export function ProxySettingsSection() {
                 variant="ghost"
                 size="sm"
                 className="h-6 px-1.5 cursor-pointer shrink-0"
-                onClick={() => copyToClipboard(
+                onClick={() => handleCopy(
                   hasTunnel ? settings.openAiEndpoint! : settings.localOpenAiEndpoint, "openai",
                 )}
               >
@@ -190,7 +191,7 @@ ANTHROPIC_API_KEY=${settings.authKey}`}
                 variant="ghost"
                 size="sm"
                 className="absolute top-1 right-1 h-5 px-1 cursor-pointer"
-                onClick={() => copyToClipboard(
+                onClick={() => handleCopy(
                   `ANTHROPIC_BASE_URL=${hasTunnel ? settings.tunnelUrl + "/proxy" : localBaseUrl + "/proxy"}\nANTHROPIC_API_KEY=${settings.authKey}`,
                   "anthropic-env",
                 )}
@@ -211,7 +212,7 @@ OPENAI_API_KEY=${settings.authKey}`}
                 variant="ghost"
                 size="sm"
                 className="absolute top-1 right-1 h-5 px-1 cursor-pointer"
-                onClick={() => copyToClipboard(
+                onClick={() => handleCopy(
                   `OPENAI_BASE_URL=${hasTunnel ? settings.tunnelUrl + "/proxy/v1" : localBaseUrl + "/proxy/v1"}\nOPENAI_API_KEY=${settings.authKey}`,
                   "openai-env",
                 )}

package/src/web/components/shared/bug-report-popup.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect, useCallback } from "react";
 import { Copy, ExternalLink, X, Check } from "lucide-react";
-import { openGithubIssue, copyToClipboard } from "@/lib/report-bug";
+import { openGithubIssue } from "@/lib/report-bug";
+import { copyToClipboard } from "@/lib/clipboard";
 
 export function BugReportPopup() {
   const [text, setText] = useState<string | null>(null);

package/src/web/components/shared/markdown-code-block.tsx

@@ -2,6 +2,7 @@ import { useState, useEffect, useRef, type ReactNode } from "react";
 import { useMdContext, FILE_EXT_RE, GLOB_CHARS_RE } from "./markdown-context";
 import { useTabStore } from "@/stores/tab-store";
 import { highlightToHtml, highlightSync, getActiveShikiTheme } from "@/theme/adapters/shiki-adapter";
+import { copyToClipboard } from "@/lib/clipboard";
 
 /**
  * Shiki-highlighted HTML for a code block. Returns null while streaming or
@@ -88,13 +89,13 @@ export function MdPre({ children, node, ...rest }: any) {
         : <pre {...rest}>{children}</pre>}
       {codeActions && (
         <div className="code-actions absolute top-1 right-1 flex gap-1">
-          <ActionBtn title="Copy" icon={<CopyIcon />} activeIcon={<CheckIcon />} onClick={() => navigator.clipboard.writeText(text)} />
+          <ActionBtn title="Copy" icon={<CopyIcon />} activeIcon={<CheckIcon />} onClick={() => void copyToClipboard(text)} />
           {isBash && projectName && (
             <ActionBtn
               title="Run in terminal"
               icon={<PlayIcon />}
               onClick={() => {
-                navigator.clipboard.writeText(text.replace(/^\$\s*/gm, ""));
+                void copyToClipboard(text.replace(/^\$\s*/gm, ""));
                 openTab({ type: "terminal", title: "Terminal", metadata: { projectName }, projectId: projectName, closable: true });
               }}
             />

package/src/web/components/terminal/terminal-tab.tsx

@@ -1,6 +1,7 @@
 import { useRef, useEffect, useState, useCallback, memo } from "react";
 import { useTerminal } from "@/hooks/use-terminal";
 import { cn } from "@/lib/utils";
+import { copyToClipboard } from "@/lib/clipboard";
 import { Copy, ClipboardPaste, RotateCcw, MessageSquare } from "lucide-react";
 import "@xterm/xterm/css/xterm.css";
 import { toast } from "sonner";
@@ -88,7 +89,7 @@ export const TerminalTab = memo(function TerminalTab({ metadata, tabId }: Termin
   const handleCopy = useCallback(async () => {
     const selection = getSelection();
     if (selection) {
-      await navigator.clipboard.writeText(selection);
+      await copyToClipboard(selection);
     }
   }, [getSelection]);
 

package/src/web/components/tunnels/tunnel-manager-tab.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect, useCallback } from "react";
 import { Check, Copy, ExternalLink, Globe, Loader2, Lock, RefreshCw, Square } from "lucide-react";
 import { tunnelsApi, type TunnelEntry } from "@/lib/api-tunnels";
+import { copyToClipboard } from "@/lib/clipboard";
 import { toast } from "sonner";
 
 /** Badge label + style per tunnel source. */
@@ -73,11 +74,12 @@ export function TunnelManagerTab() {
   };
 
   const copyUrl = (pid: number, url: string) => {
-    navigator.clipboard.writeText(url).then(() => {
+    copyToClipboard(url).then((ok) => {
+      if (!ok) { toast.error("Failed to copy URL"); return; }
       setCopiedPid(pid);
       toast.success("URL copied");
       setTimeout(() => setCopiedPid(null), 2000);
-    }).catch(() => toast.error("Failed to copy URL"));
+    });
   };
 
   const handleSubmit = (e: React.FormEvent) => {

package/src/web/lib/clipboard.ts

@@ -0,0 +1,52 @@
+/**
+ * Clipboard write with an insecure-context fallback.
+ *
+ * `navigator.clipboard` only exists in a secure context (HTTPS or localhost).
+ * PPM is regularly reached over plain HTTP — LAN IP, Tailscale MagicDNS name —
+ * where the API is absent and every copy button silently no-ops. The legacy
+ * `execCommand` path keeps copy working on those origins.
+ */
+
+/** Copy text to the clipboard. Returns false only if both paths fail. */
+export async function copyToClipboard(text: string): Promise<boolean> {
+  if (navigator.clipboard?.writeText) {
+    try {
+      await navigator.clipboard.writeText(text);
+      return true;
+    } catch {
+      // Denied permission or lost user activation — fall through to execCommand.
+    }
+  }
+  return legacyCopy(text);
+}
+
+function legacyCopy(text: string): boolean {
+  const textarea = document.createElement("textarea");
+  textarea.value = text;
+  textarea.setAttribute("readonly", "");
+  // Must stay rendered and non-zero sized: iOS Safari refuses to select a
+  // hidden or display:none element, which breaks the copy.
+  textarea.style.cssText =
+    "position:fixed;top:0;left:0;width:1px;height:1px;padding:0;border:none;opacity:0;";
+  document.body.appendChild(textarea);
+
+  const selection = document.getSelection();
+  const previousRange =
+    selection && selection.rangeCount > 0 ? selection.getRangeAt(0) : null;
+
+  try {
+    textarea.focus();
+    textarea.select();
+    // setSelectionRange is what actually selects on iOS; select() alone is ignored.
+    textarea.setSelectionRange(0, text.length);
+    return document.execCommand("copy");
+  } catch {
+    return false;
+  } finally {
+    textarea.remove();
+    if (selection && previousRange) {
+      selection.removeAllRanges();
+      selection.addRange(previousRange);
+    }
+  }
+}

package/src/web/lib/report-bug.ts

@@ -60,16 +60,6 @@ export function openGithubIssue(body: string) {
   window.open(url, "_blank");
 }
 
-/** Copy text to clipboard */
-export async function copyToClipboard(text: string): Promise<boolean> {
-  try {
-    await navigator.clipboard.writeText(text);
-    return true;
-  } catch {
-    return false;
-  }
-}
-
 /** Open bug report popup globally via custom event */
 export function openBugReportPopup(
   version: string | null,