@hienlh/ppm 0.17.29 → 0.17.31

package/src/web/components/chat/turn-change-tray.tsx

@@ -0,0 +1,140 @@
+/**
+ * Desktop presentation of the change tray: an inline, non-modal two-pane panel
+ * directly below the message's action bar. Left pane lists the turn's files, right
+ * pane shows the selected file's edits.
+ *
+ * Both panes need `min-h-0` or the grid rows refuse to shrink and neither scrolls.
+ */
+import { useEffect, useId, useRef, useState } from "react";
+import { X } from "lucide-react";
+import { copyToClipboard } from "@/lib/clipboard";
+import { ownsGlobalShortcut } from "@/lib/owns-global-shortcut";
+import type { TurnFileChange } from "@/lib/aggregate-turn-file-changes";
+import { ChangeCounts, ChangeFileRow } from "./change-file-row";
+import { ChangeEditList } from "./change-edit-list";
+
+function splitPath(path: string): { base: string; dir: string } {
+  const i = Math.max(path.lastIndexOf("/"), path.lastIndexOf("\\"));
+  return i < 0 ? { base: path, dir: "" } : { base: path.slice(i + 1), dir: path.slice(0, i) };
+}
+
+/**
+ * Several messages in one chat can have a tray open at once, and `ownsGlobalShortcut`
+ * only narrows to the focused *tab*. The most recently opened tray claims the keys.
+ */
+let activeTrayId: string | null = null;
+
+/** `ownsGlobalShortcut` resolves the owning tab; it says nothing about text entry. */
+function isTextEntry(el: Element | null): boolean {
+  if (!(el instanceof HTMLElement)) return false;
+  return el.tagName === "INPUT" || el.tagName === "TEXTAREA" || el.isContentEditable;
+}
+
+export function TurnChangeTray({ changes, onJump, onClose }: {
+  changes: TurnFileChange[];
+  onJump: (editRef: string) => void;
+  onClose: () => void;
+}) {
+  // The desktop tray never shows a bare list — a file is always selected.
+  const [selected, setSelected] = useState(0);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const listRef = useRef<HTMLDivElement>(null);
+  const trayId = useId();
+
+  // Inline and non-modal: focus moves in, but is deliberately not trapped.
+  useEffect(() => {
+    activeTrayId = trayId;
+    listRef.current?.querySelector<HTMLElement>("button")?.focus();
+    return () => {
+      if (activeTrayId === trayId) activeTrayId = null;
+    };
+  }, [trayId]);
+
+  useEffect(() => {
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (activeTrayId !== trayId) return;
+      if (!ownsGlobalShortcut(containerRef.current)) return;
+      if (isTextEntry(document.activeElement)) return;
+
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onClose();
+      } else if (e.key === "j") {
+        e.preventDefault();
+        setSelected((i) => Math.min(i + 1, changes.length - 1));
+      } else if (e.key === "k") {
+        e.preventDefault();
+        setSelected((i) => Math.max(i - 1, 0));
+      } else if (e.key === "Enter") {
+        const editRef = changes[selected]?.edits[0]?.editRef;
+        if (editRef) {
+          e.preventDefault();
+          onJump(editRef);
+        }
+      }
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [trayId, changes, selected, onJump, onClose]);
+
+  const active = changes[Math.min(selected, changes.length - 1)];
+  if (!active) return null;
+  const { base, dir } = splitPath(active.filePath);
+
+  return (
+    <div ref={containerRef} className="mt-0.5 overflow-hidden rounded-[10px] border border-border-soft bg-bg">
+      <div className="grid h-[356px] grid-cols-[294px_1fr] grid-rows-[minmax(0,1fr)] bg-surface-elevated">
+        <div ref={listRef} className="min-h-0 overflow-y-auto border-r border-border-soft">
+          {changes.map((change, i) => (
+            <ChangeFileRow
+              key={change.filePath}
+              change={change}
+              dense
+              selected={i === selected}
+              onClick={() => setSelected(i)}
+            />
+          ))}
+          <p className="px-2.5 pt-2 pb-2.5 font-mono text-[10px] text-text-subtle">
+            j / k to move · enter to jump
+          </p>
+        </div>
+
+        <div className="min-h-0 overflow-y-auto">
+          <div className="sticky top-0 z-10 flex items-center gap-2 border-b border-border-soft bg-surface-elevated py-[5px] pl-2.5 pr-2">
+            <span className="shrink-0 font-mono text-xs font-medium text-text-primary">{base}</span>
+            {dir && (
+              <span
+                title={active.filePath}
+                className="min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap font-mono text-[10.5px] text-text-subtle [direction:rtl] text-left"
+              >
+                {dir}
+              </span>
+            )}
+            <ChangeCounts
+              added={active.linesAdded}
+              removed={active.linesRemoved}
+              className="shrink-0 font-mono text-[11px]"
+            />
+            <button
+              type="button"
+              onClick={() => void copyToClipboard(active.filePath)}
+              className="shrink-0 rounded-md px-1.5 py-1 font-mono text-[10px] text-text-subtle transition-colors hover:bg-surface hover:text-text-primary"
+            >
+              copy path
+            </button>
+            <button
+              type="button"
+              onClick={onClose}
+              aria-label="Close change tray"
+              className="inline-flex size-8 shrink-0 items-center justify-center rounded-lg text-text-subtle transition-colors hover:bg-surface hover:text-text-primary"
+            >
+              <X className="size-3.5" />
+            </button>
+          </div>
+
+          <ChangeEditList change={active} onJump={onJump} />
+        </div>
+      </div>
+    </div>
+  );
+}

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-alias-row.tsx

@@ -0,0 +1,163 @@
+import { useState, useEffect, useCallback } from "react";
+import { Loader2, Pencil, ExternalLink, Check, X } from "lucide-react";
+import { api } from "@/lib/api-client";
+
+/** Cloud's slug rules — mirrored here so a bad name fails before a round-trip. */
+const SLUG_REGEX = /^[a-z0-9][a-z0-9-]{1,31}$/;
+const SLUG_HINT = "2–32 characters: lowercase letters, numbers, hyphens.";
+
+interface Props {
+  /** Base URL of the cloud instance, e.g. https://cloud.ppm.sh */
+  cloudUrl: string;
+  /** Machine name — seeds the input with a sensible default slug. */
+  deviceName: string | null;
+}
+
+/** Strip the scheme so the permanent link reads like an address, not a URL. */
+function displayHost(cloudUrl: string): string {
+  return cloudUrl.replace(/^https?:\/\//, "").replace(/\/$/, "");
+}
+
+function suggestSlug(deviceName: string | null): string {
+  if (!deviceName) return "";
+  const slug = deviceName.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "").slice(0, 32);
+  return SLUG_REGEX.test(slug) ? slug : "";
+}
+
+/**
+ * Permanent link for this machine. The tunnel URL rotates on every restart;
+ * the alias is the stable address that always resolves to the current one.
+ */
+export function CloudAliasRow({ cloudUrl, deviceName }: Props) {
+  const [slug, setSlug] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [unreadable, setUnreadable] = useState(false);
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState("");
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    (async () => {
+      try {
+        const res = await api.get<{ slug: string | null }>("/api/cloud/alias");
+        setSlug(res.slug);
+      } catch {
+        // A failed read must not look like "no link yet": saving uses the device
+        // secret, so it would succeed and silently replace a link already in use.
+        setUnreadable(true);
+      }
+      setLoading(false);
+    })();
+  }, []);
+
+  const startEdit = useCallback(() => {
+    setDraft(slug ?? suggestSlug(deviceName));
+    setError(null);
+    setEditing(true);
+  }, [slug, deviceName]);
+
+  const handleSave = useCallback(async () => {
+    const next = draft.trim().toLowerCase();
+    if (!SLUG_REGEX.test(next)) {
+      setError(SLUG_HINT);
+      return;
+    }
+    setSaving(true);
+    setError(null);
+    try {
+      const res = await api.patch<{ slug: string }>("/api/cloud/alias", { slug: next });
+      setSlug(res.slug);
+      setEditing(false);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Could not save that name");
+    } finally {
+      setSaving(false);
+    }
+  }, [draft]);
+
+  if (loading) return null;
+
+  if (unreadable) {
+    return (
+      <p className="text-[11px] text-muted-foreground leading-relaxed">
+        Couldn't check this machine's permanent link. Open the cloud dashboard, or sign in again.
+      </p>
+    );
+  }
+
+  if (editing) {
+    return (
+      <div className="space-y-1.5">
+        <span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wide">Permanent link</span>
+        <div className="flex items-center gap-1">
+          <span className="text-xs font-mono text-muted-foreground shrink-0">{displayHost(cloudUrl)}/</span>
+          <input
+            autoFocus
+            value={draft}
+            onChange={(e) => setDraft(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") handleSave();
+              if (e.key === "Escape") setEditing(false);
+            }}
+            placeholder="my-mac"
+            // 16px font on mobile — anything smaller makes iOS zoom on focus.
+            className="flex-1 min-w-0 text-base md:text-xs font-mono text-foreground bg-muted px-2 min-h-11 md:min-h-0 md:py-1.5 rounded border border-border outline-none focus:border-primary"
+          />
+          <button
+            onClick={handleSave}
+            disabled={saving}
+            title="Save"
+            className="flex items-center justify-center size-11 md:size-8 rounded border border-border text-primary bg-muted hover:bg-accent transition-colors shrink-0 disabled:opacity-50"
+          >
+            {saving ? <Loader2 className="size-3.5 animate-spin" /> : <Check className="size-3.5" />}
+          </button>
+          <button
+            onClick={() => setEditing(false)}
+            title="Cancel"
+            className="flex items-center justify-center size-11 md:size-8 rounded border border-border text-muted-foreground bg-muted hover:bg-accent transition-colors shrink-0"
+          >
+            <X className="size-3.5" />
+          </button>
+        </div>
+        <p className="text-[10px] text-muted-foreground">{error ?? SLUG_HINT}</p>
+      </div>
+    );
+  }
+
+  if (!slug) {
+    return (
+      <button
+        onClick={startEdit}
+        className="w-full flex items-center justify-center gap-1.5 px-3 min-h-11 md:min-h-0 md:py-2 text-xs font-medium rounded-md border border-border hover:bg-muted transition-colors"
+      >
+        <Pencil className="size-3.5" />
+        Set a permanent link
+      </button>
+    );
+  }
+
+  return (
+    <div className="space-y-1">
+      <span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wide">Permanent link</span>
+      <div className="flex items-center gap-1">
+        <a
+          href={`${cloudUrl}/${slug}`}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="flex-1 min-w-0 flex items-center gap-1 text-xs font-mono text-primary hover:underline truncate"
+        >
+          <span className="truncate">{displayHost(cloudUrl)}/{slug}</span>
+          <ExternalLink className="size-3 shrink-0" />
+        </a>
+        <button
+          onClick={startEdit}
+          title="Change permanent link"
+          className="flex items-center justify-center size-11 md:size-8 rounded border border-border text-muted-foreground bg-muted hover:bg-accent hover:text-foreground transition-colors shrink-0"
+        >
+          <Pencil className="size-3.5" />
+        </button>
+      </div>
+    </div>
+  );
+}

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

@@ -2,6 +2,8 @@ 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";
+import { CloudAliasRow } from "./cloud-alias-row";
 
 interface CloudStatus {
   logged_in: boolean;
@@ -54,7 +56,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);
   }, []);
@@ -249,13 +251,21 @@ export function CloudSharePopover({ onClose, variant = "popover" }: Props) {
                 )}
               </div>
             ) : (
-              <button
-                onClick={handleCloudLogin}
-                className="w-full flex items-center justify-center gap-1.5 px-3 py-2 text-xs font-medium rounded-md border border-border hover:bg-muted transition-colors"
-              >
-                <Cloud className="size-3.5" />
-                Sign in to PPM Cloud
-              </button>
+              <>
+                {shareUrl && (
+                  <p className="text-[11px] text-muted-foreground leading-relaxed">
+                    This link changes every time PPM restarts. Sign in to get a permanent one
+                    that always points here — private to your account.
+                  </p>
+                )}
+                <button
+                  onClick={handleCloudLogin}
+                  className="w-full flex items-center justify-center gap-1.5 px-3 py-2 text-xs font-medium rounded-md border border-border hover:bg-muted transition-colors"
+                >
+                  <Cloud className="size-3.5" />
+                  {shareUrl ? "Get a permanent link" : "Sign in to PPM Cloud"}
+                </button>
+              </>
             )}
           </div>
 
@@ -263,20 +273,23 @@ export function CloudSharePopover({ onClose, variant = "popover" }: Props) {
           {cloud?.logged_in && (
             <div className="space-y-1.5">
               {cloud.linked ? (
-                <div className="flex items-center justify-between text-xs">
-                  <div className="flex items-center gap-1.5 min-w-0">
-                    <Link className="size-3 text-primary shrink-0" />
-                    <span className="text-foreground truncate">{cloud.device_name}</span>
+                <>
+                  <div className="flex items-center justify-between text-xs">
+                    <div className="flex items-center gap-1.5 min-w-0">
+                      <Link className="size-3 text-primary shrink-0" />
+                      <span className="text-foreground truncate">{cloud.device_name}</span>
+                    </div>
+                    <button
+                      onClick={handleUnlink}
+                      disabled={unlinking}
+                      className="text-text-subtle hover:text-destructive p-1 rounded hover:bg-muted transition-colors shrink-0"
+                      title="Unlink device"
+                    >
+                      {unlinking ? <Loader2 className="size-3 animate-spin" /> : <Unlink className="size-3" />}
+                    </button>
                   </div>
-                  <button
-                    onClick={handleUnlink}
-                    disabled={unlinking}
-                    className="text-text-subtle hover:text-destructive p-1 rounded hover:bg-muted transition-colors shrink-0"
-                    title="Unlink device"
-                  >
-                    {unlinking ? <Loader2 className="size-3 animate-spin" /> : <Unlink className="size-3" />}
-                  </button>
-                </div>
+                  <CloudAliasRow cloudUrl={cloud.cloud_url} deviceName={cloud.device_name} />
+                </>
               ) : (
                 <button
                   onClick={handleLink}

package/src/web/components/layout/command-palette.tsx

@@ -17,6 +17,7 @@ import {
   RefreshCw,
   Plus,
   Columns2,
+  Cloud,
 } from "lucide-react";
 import { useTabStore, type TabType } from "@/stores/tab-store";
 import { useProjectStore } from "@/stores/project-store";
@@ -193,6 +194,7 @@ export function CommandPalette({ open, onClose, initialQuery = "" }: { open: boo
       { id: "new-db-query", label: "New DB Query", icon: Database, action: () => { useTabStore.getState().openNewFile({ language: "sql", title: "SQL Query" }); onClose(); }, keywords: "sql database query scratchpad new", group: "action" },
       { id: "terminal", label: "New Terminal", icon: Terminal, action: openNewTab("terminal", "Terminal"), keywords: "bash shell console", group: "action", shortcut: formatShortcut(getBinding("open-terminal")) },
       { id: "tunnels", label: "Cloudflare Tunnels", icon: Globe, action: () => { if (sidebarCollapsed) toggleSidebar(); setSidebarActiveTab("tunnels"); onClose(); }, keywords: "web preview localhost port forward tunnel cloudflare url", group: "action" },
+      { id: "cloud-share", label: "PPM Cloud & Share", icon: Cloud, action: () => { window.dispatchEvent(new CustomEvent("open-cloud-share")); onClose(); }, keywords: "cloud permanent link alias share phone remote device qr sign in login", group: "action" },
       { id: "postgres", label: "PostgreSQL", icon: Database, action: openNewTab("postgres", "PostgreSQL"), keywords: "database pg sql query", group: "action" },
       { id: "voice-input", label: "Voice Input", icon: Mic, action: () => { window.dispatchEvent(new CustomEvent("toggle-voice-input")); onClose(); }, keywords: "speech microphone dictate voice", group: "action", shortcut: formatShortcut(getBinding("voice-input")) },
       { id: "git-status", label: "Git Status", icon: GitCommitHorizontal, action: () => { setSidebarActiveTab("git"); onClose(); }, keywords: "changes diff staged", group: "action", shortcut: formatShortcut(getBinding("open-git-status")) },

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

@@ -21,6 +21,7 @@ import { openBugReportPopup } from "@/lib/report-bug";
 import { UpgradeButton } from "@/components/layout/upgrade-button";
 import { CloudSharePopover } from "@/components/layout/cloud-share-popover";
 import { BottomSheet } from "@/components/ui/mobile-bottom-sheet";
+import { isMobileDevice } from "@/hooks/use-is-mobile";
 import { cn } from "@/lib/utils";
 
 // Tab ids the mobile drawer can render content for. `search` is desktop-only for now;
@@ -62,6 +63,15 @@ export function MobileDrawer({ isOpen, onClose, initialTab }: MobileDrawerProps)
     if (tabs.length > 0 && !tabs.some((t) => t.id === activeTab)) setActiveTab(tabs[0]!.id);
   }, [tabs, activeTab]);
 
+  // Command palette request — the desktop rail is hidden on mobile, so the
+  // sheet here is what opens. The sheet portals to body, so it shows even while
+  // the drawer itself is closed.
+  useEffect(() => {
+    const open = () => { if (isMobileDevice()) setCloudOpen(true); };
+    window.addEventListener("open-cloud-share", open);
+    return () => window.removeEventListener("open-cloud-share", open);
+  }, []);
+
   const handleReportBug = useCallback(() => openBugReportPopup(version), [version]);
 
   const noProject = (

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/nav-section-rail.tsx

@@ -13,6 +13,7 @@ import { useNotificationStore, selectProjectUnread } from "@/stores/notification
 import { NotificationBellPopover } from "./notification-bell-popover";
 import { CloudSharePopover } from "./cloud-share-popover";
 import { openBugReportPopup } from "@/lib/report-bug";
+import { isMobileDevice } from "@/hooks/use-is-mobile";
 import { cn } from "@/lib/utils";
 
 function Badge({ count }: { count: number }) {
@@ -135,6 +136,14 @@ export const NavSectionRail = memo(function NavSectionRail({ className }: { clas
     setPopoverPos({ left: rect.right + 6, bottom: window.innerHeight - rect.bottom });
   }, [cloudOpen]);
 
+  // Command palette can't reach the popover's local state, so it asks via event.
+  // The rail is `hidden md:flex`, so on mobile the drawer's bottom sheet answers.
+  useEffect(() => {
+    const open = () => { if (!isMobileDevice()) setCloudOpen(true); };
+    window.addEventListener("open-cloud-share", open);
+    return () => window.removeEventListener("open-cloud-share", open);
+  }, []);
+
   const handleReportBug = () => openBugReportPopup(version);
 
   // Rail tab click: collapsed → open on any tab; open → clicking the active tab closes it.

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);