Skip to content

fix(ui): add clipboard fallback for non-secure HTTP contexts#20983

Open
zsxink wants to merge 3 commits intoanomalyco:devfrom
zsxink:fix/copy-button-http-fallback
Open

fix(ui): add clipboard fallback for non-secure HTTP contexts#20983
zsxink wants to merge 3 commits intoanomalyco:devfrom
zsxink:fix/copy-button-http-fallback

Conversation

@zsxink
Copy link
Copy Markdown

@zsxink zsxink commented Apr 4, 2026

Issue for this PR

Closes #14803

Type of change

  • Bug fix
  • New feature
  • Refactor / code improvement
  • Documentation

What does this PR do?

navigator.clipboard is only available in secure contexts (HTTPS or localhost). When accessing the web UI over HTTP on a LAN, the clipboard API is undefined, causing copy buttons to throw TypeError: Cannot read properties of undefined (reading 'writeText').
This PR adds a shared copyToClipboard utility in packages/ui/src/components/clipboard.tsx that:

  1. Tries navigator.clipboard.writeText in secure contexts
  2. Falls back to document.execCommand("copy") for non-secure HTTP contexts
    Replaced all direct navigator.clipboard.writeText calls in message-part.tsx, text-field.tsx, tool-error-card.tsx, markdown.tsx, and session-header.tsx to use this utility.

How did you verify your code works?

Built the app with bun run --cwd packages/app build, started the server with bun run --cwd packages/opencode src/index.ts web --hostname 0.0.0.0, and verified copy buttons work over HTTP on a LAN. Also verified the modern clipboard API still works correctly on localhost/HTTPS.

Screenshots / recordings

N/A — behavioral fix, no visual changes.

Checklist

  • I have tested my changes locally
  • I have not included unrelated changes in this PR

zsxink added 3 commits April 4, 2026 13:18
…contexts

- Fix copy button not working when accessing opencode over HTTP
- Add try/catch error handling to prevent silent failures
- Fallback to document.execCommand when navigator.clipboard is unavailable
- Hide temporary textarea element to avoid UI glitches

Fixes anomalyco#14803
navigator.clipboard is undefined in non-secure HTTP contexts, causing
copy buttons to throw TypeError. Add a shared copyToClipboard utility
with document.execCommand fallback and replace all direct clipboard
calls across message-part, text-field, tool-error-card, markdown, and
session-header components.
@zsxink zsxink requested a review from adamdotdevin as a code owner April 4, 2026 08:27
@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Apr 4, 2026

The following comment was made by an LLM, it may be inaccurate:

Potential Duplicate Found:

Why it's related: Both PRs address the exact same issue — adding clipboard fallback functionality for non-secure HTTP contexts where navigator.clipboard is undefined. PR #17549 appears to be a previous attempt at fixing the same problem. You should check its status (merged, closed, or still open) to determine if PR #20983 is truly a duplicate or if it's a revised/improved version of that earlier work.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[FEATURE]: Copy Button doesn't work in HTTP - Use document.execCommand("copy") as fallback

1 participant