@hienlh/ppm 0.17.28 → 0.17.30

package/src/web/components/chat/account-dialogs.tsx

@@ -5,6 +5,7 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Loader2, Download, Copy, Lock } from "lucide-react";
 import { getAuthToken } from "../../lib/api-client";
+import { copyToClipboard } from "@/lib/clipboard";
 import {
   addAccount,
   getOAuthUrl,
@@ -207,10 +208,9 @@ export function ExportAccountsDialog({ open, onOpenChange, accounts, preselectId
       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)) {
           onMessage?.("Backup copied to clipboard!");
-        } catch {
+        } else {
           downloadBlob(text);
           onMessage?.("Backup downloaded.");
         }

package/src/web/components/chat/chat-history-bar.tsx

@@ -17,6 +17,7 @@ import { CodexUsagePanel } from "./codex-usage-panel";
 import { TeamActivityPanel } from "./team-activity-panel";
 import { ProviderBadge } from "./provider-selector";
 import { formatRelativeDate } from "@/lib/format-date";
+import { copyToClipboard } from "@/lib/clipboard";
 import { useDebouncedValue } from "@/hooks/use-debounced-value";
 import type { SessionInfo, SessionListResponse, ProjectTag } from "../../../types/chat";
 import type { UsageInfo } from "../../../types/chat";
@@ -113,10 +114,11 @@ function DebugCopyButton({ sessionId, projectName }: { sessionId: string; projec
 
   const copy = () => {
     if (!info) return;
-    navigator.clipboard.writeText(info).then(() => {
+    copyToClipboard(info).then((ok) => {
+      if (!ok) return;
       setCopied(true);
       setTimeout(() => setCopied(false), 1500);
-    }).catch(() => { /* silent */ });
+    });
   };
 
   const body = (

package/src/web/components/chat/message-action-bar.tsx

@@ -2,6 +2,7 @@ import { useState, type ReactNode } from "react";
 import { Copy, Check } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { formatRelativeDate } from "@/lib/format-date";
+import { copyToClipboard } from "@/lib/clipboard";
 
 /** Full timestamp for the relative-time tooltip. */
 function fullDate(iso: string): string {
@@ -50,7 +51,7 @@ function CopyButton({ content }: { content: string }) {
       label={copied ? "Copied" : "Copy"}
       title="Copy message to clipboard"
       onClick={() => {
-        navigator.clipboard?.writeText(content).catch(() => {});
+        void copyToClipboard(content);
         setCopied(true);
         setTimeout(() => setCopied(false), 1500);
       }}

package/src/web/components/database/connection-import-export.tsx

@@ -1,5 +1,6 @@
 import { useRef, useState } from "react";
 import { MoreVertical, Download, Upload, Clipboard, ClipboardPaste } from "lucide-react";
+import { copyToClipboard } from "@/lib/clipboard";
 
 interface Props {
   onExport: () => Promise<{ version: number; exported_at: string; connections: unknown[] }>;
@@ -32,8 +33,10 @@ export function ConnectionImportExport({ onExport, onImport }: Props) {
     close();
     try {
       const data = await onExport();
-      await navigator.clipboard.writeText(JSON.stringify(data, null, 2));
-      alert(`Copied ${data.connections.length} connection(s) to clipboard`);
+      const ok = await copyToClipboard(JSON.stringify(data, null, 2));
+      alert(ok
+        ? `Copied ${data.connections.length} connection(s) to clipboard`
+        : "Copy failed — clipboard unavailable");
     } catch (e) {
       alert(`Export failed: ${(e as Error).message}`);
     }

package/src/web/components/database/export-button.tsx

@@ -2,6 +2,7 @@ import { useState, useRef, useEffect, useCallback } from "react";
 import { createPortal } from "react-dom";
 import { Download } from "lucide-react";
 import { serializeCsv } from "@/lib/csv-parser";
+import { copyToClipboard } from "@/lib/clipboard";
 
 interface ExportButtonProps {
   columns: string[];
@@ -53,10 +54,10 @@ export function ExportButton({ columns, rows, filename = "export", exportAllUrl
     setOpen(false);
   };
 
-  const copyToClipboard = async () => {
+  const handleCopy = async () => {
     const header = columns.join("\t");
     const body = rows.map((r) => columns.map((c) => String(r[c] ?? "")).join("\t")).join("\n");
-    await navigator.clipboard.writeText(header + "\n" + body);
+    await copyToClipboard(header + "\n" + body);
     setOpen(false);
   };
 
@@ -90,7 +91,7 @@ export function ExportButton({ columns, rows, filename = "export", exportAllUrl
         <div ref={dropdownRef}
           style={{ position: "fixed", left: Math.min(rect.left, window.innerWidth - 170), top: rect.bottom + 4, zIndex: 10000 }}
           className="bg-popover border border-border rounded-md shadow-md py-1 min-w-[160px] text-xs">
-          <button onClick={copyToClipboard} className="w-full text-left px-3 py-1.5 hover:bg-muted transition-colors text-foreground">
+          <button onClick={handleCopy} className="w-full text-left px-3 py-1.5 hover:bg-muted transition-colors text-foreground">
             Copy to Clipboard (TSV)
           </button>
           <button onClick={exportPageCsv} className="w-full text-left px-3 py-1.5 hover:bg-muted transition-colors text-foreground">

package/src/web/components/explorer/file-tree.tsx

@@ -13,6 +13,7 @@ import {
   Loader2,
 } from "lucide-react";
 import { SidebarHeader } from "@/components/ui/sidebar-header";
+import { copyToClipboard } from "@/lib/clipboard";
 import { useShallow } from "zustand/react/shallow";
 import { useFileStore, type FileNode } from "@/stores/file-store";
 import { useProjectStore } from "@/stores/project-store";
@@ -244,12 +245,12 @@ export function FileTree({ onFileOpen }: FileTreeProps = {}) {
       return;
     }
     if (action === "copy-path") {
-      navigator.clipboard.writeText(node.path).catch(() => {});
+      void copyToClipboard(node.path);
       return;
     }
     if (action === "copy-full-path") {
       const root = activeProject?.path;
-      navigator.clipboard.writeText(root ? `${root}/${node.path}` : node.path).catch(() => {});
+      void copyToClipboard(root ? `${root}/${node.path}` : node.path);
       return;
     }
     if (action === "select-for-compare") {

package/src/web/components/layout/cloud-share-popover.tsx

@@ -2,6 +2,7 @@ import { useState, useCallback, useEffect } from "react";
 import { Cloud, Share2, Loader2, Copy, Check, X, LogOut, Link, Unlink, ExternalLink } from "lucide-react";
 import { QRCodeSVG } from "qrcode.react";
 import { api } from "@/lib/api-client";
+import { copyToClipboard } from "@/lib/clipboard";
 
 interface CloudStatus {
   logged_in: boolean;
@@ -54,7 +55,7 @@ export function CloudSharePopover({ onClose, variant = "popover" }: Props) {
   }, []);
 
   const handleCopy = useCallback((url: string) => {
-    navigator.clipboard.writeText(url);
+    void copyToClipboard(url);
     setCopied(url);
     setTimeout(() => setCopied(null), 2000);
   }, []);

package/src/web/components/layout/mobile-nav.tsx

@@ -14,6 +14,7 @@ import { resolveProjectColor } from "@/lib/project-palette";
 import { ProjectAvatar } from "@/components/layout/project-avatar";
 import type { Tab } from "@/stores/tab-store";
 import { cn, basename } from "@/lib/utils";
+import { copyToClipboard } from "@/lib/clipboard";
 import { toast } from "sonner";
 import { openCommandPalette } from "@/hooks/use-global-keybindings";
 import { useNotificationStore } from "@/stores/notification-store";
@@ -188,12 +189,12 @@ export function MobileNav({ onMenuPress, onProjectsPress }: MobileNavProps) {
     const projectName = tab.metadata?.projectName as string | undefined;
     switch (action) {
       case "copy-path":
-        if (filePath) navigator.clipboard.writeText(filePath).catch(() => {});
+        if (filePath) void copyToClipboard(filePath);
         break;
       case "copy-full-path": {
         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/layout/project-bottom-sheet.tsx

@@ -10,6 +10,7 @@ import { ProjectAvatar } from "@/components/layout/project-avatar";
 import { buildUrl } from "@/hooks/use-url-sync";
 import { formatRelativeDate } from "@/lib/format-date";
 import { cn } from "@/lib/utils";
+import { copyToClipboard } from "@/lib/clipboard";
 import { BottomSheet } from "@/components/ui/mobile-bottom-sheet";
 
 interface ProjectBottomSheetProps {
@@ -181,7 +182,7 @@ export function ProjectBottomSheet({ isOpen, onClose }: ProjectBottomSheetProps)
       label: "Copy Path",
       icon: Copy,
       onClick: () => {
-        if (actionProject) navigator.clipboard.writeText(actionProject.path).catch(() => { /* ignore */ });
+        if (actionProject) void copyToClipboard(actionProject.path);
         setActionTarget(null);
       },
     },

package/src/web/components/layout/project-switcher.tsx

@@ -6,6 +6,7 @@ import { useProjectStore, resolveOrder, loadRecentTimes, type ProjectInfo } from
 import { SORT_OPTIONS, applySort } from "@/components/layout/project-sort";
 import { buildUrl } from "@/hooks/use-url-sync";
 import { formatRelativeDate } from "@/lib/format-date";
+import { copyToClipboard } from "@/lib/clipboard";
 import { resolveProjectColor, PROJECT_PALETTE } from "@/lib/project-palette";
 import { ProjectAvatar } from "@/components/layout/project-avatar";
 import { useNotificationStore, selectProjectUrgentType, notificationColor } from "@/stores/notification-store";
@@ -358,7 +359,7 @@ export const ProjectSwitcher = memo(function ProjectSwitcher() {
                           <Trash2 className="size-3.5 mr-2" /> Remove Image
                         </ContextMenuItem>
                       )}
-                      <ContextMenuItem onClick={() => navigator.clipboard.writeText(p.path)}>
+                      <ContextMenuItem onClick={() => void copyToClipboard(p.path)}>
                         <Copy className="size-3.5 mr-2" /> Copy Path
                       </ContextMenuItem>
                       <ContextMenuSeparator />

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,