Copy-to-clipboard crashes on insecure (HTTP) contexts

[sudocarlos]

What

Clicking any copy-to-clipboard action (code block, copyable attribute value, or the IP address menu on the Machines page) throws an uncaught TypeError: Cannot read properties of undefined (reading 'writeText') in the browser console and silently fails to copy anything.

Why

navigator.clipboard is only defined in secure contexts (HTTPS or localhost). Headplane is frequently self-hosted and accessed over plain HTTP (LAN, reverse proxy without TLS to the browser, etc.), so navigator.clipboard is undefined there, and calling .writeText(...) on it throws instead of failing gracefully or falling back to a legacy copy method.

[linear-code]

HP-568

[pullfrog]

Analysis

Confirmed. Three components call navigator.clipboard.writeText(...) directly:

• app/components/code-block.tsx:23
• app/components/attribute.tsx:54
• app/routes/machines/components/machine-row.tsx:88

On non-localhost HTTP origins the Clipboard API is not exposed, so navigator.clipboard is undefined and the unguarded call throws TypeError: Cannot read properties of undefined (reading 'writeText').

Proposed fix

1. Add a small app/utils/copy.ts helper that:
   • Uses navigator.clipboard.writeText(text) when available.
   • Falls back to the legacy document.execCommand('copy') method via a transient, out-of-viewport <textarea> so copying still works on plain HTTP.
   • Returns a boolean indicating success so callers can give accurate feedback.
2. Replace the three direct navigator.clipboard.writeText(...) calls with the helper.
3. Update the toast messages so a success toast is only shown when the helper returns true; on failure, show a brief "Copy failed" or "Clipboard unavailable" toast instead of silently doing nothing.
4. Keep the existing copy icons and interactions unchanged.

Implementation checklist

• Create app/utils/copy.ts with copyToClipboard(text: string): Promise<boolean>.
• Update app/components/code-block.tsx to use the helper and conditionally toast.
• Update app/components/attribute.tsx to use the helper and conditionally toast.
• Update app/routes/machines/components/machine-row.tsx to use the helper and conditionally toast.
• Run pnpm run typecheck and pnpm run lint.
• Verify on both HTTPS/localhost and plain HTTP contexts if possible.

If this plan looks good, I can implement it on a pullfrog/597-copy-insecure-context branch.

Task list (5/5 completed)

• Fetch and analyze issue Copy-to-clipboard crashes on insecure (HTTP) contexts #597 details
• Locate copy-to-clipboard implementation in the codebase
• Assess crash cause and feasible fixes
• Draft structured implementation plan
• Post plan via pullfrog_report_progress

  ^{｜ Implement plan ➔ ｜ View workflow run ｜ via Pullfrog ｜ Using Kimi K2 (free via Pullfrog for OSS) (DeepSeek Pro not used — the program covers this model; add its provider key to run your pick) ｜ 𝕏}