fix: clipboard copy works over remote HTTP -- secure-context fallback via copy-to-clipboard (0108 friction #7) (#238)

navigator.clipboard exists only in secure contexts, so every copy
action (Copy for AI, Copy as context, cloud link, validation/test
copies) silently did nothing on a Mill server reached over plain http
from another device. One shared door (shared/clipboardWrite.ts) tries
the async API, falls back to the execCommand path via the vetted
copy-to-clipboard package, and throws when both fail so existing
onError feedback fires. All 8 write sites converted; unit tests pin
the fallback and both-doors-fail paths; verified live against a
server bound to the Tailscale interface (isSecureContext false,
fallback fired, copy succeeded).

Claude-Session: https://claude.ai/code/session_01FW5GkkAG8du7tNdYLk2zSd

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>

Author: alicoding

frontend/package-lock.json

@@ -20,6 +20,7 @@
     "@primer/react": "^38.35.0",
     "@wailsio/runtime": "3.0.0-beta.5",
     "@xyflow/react": "^12.11.2",
+    "copy-to-clipboard": "^4.0.2",
     "cronstrue": "^3.24.0",
     "elkjs": "^0.12.0",
     "genson-js": "^0.0.8",

frontend/package.json

@@ -4,6 +4,7 @@ import { Banner, Button, Checkbox, FormControl, Stack, Text } from '@primer/reac
 import { ArrowLeftIcon, CopyIcon } from '@primer/octicons-react'
 import { AtlasService, ExecutionService, RunKind } from '../shared/bindings'
 import type { ClipbridgeReplyPreview } from '../shared/bindings'
+import { writeClipboardText } from '../shared/clipboardWrite'
 import styles from './QuickPanelClipboardApply.module.css'
 
 // The clipboard bridge's review surface (goal 0099) -- the fourth
@@ -39,7 +40,7 @@ export function QuickPanelReplyReview({ preview, onCancel, onApplied }: Props) {
 
   const copyCorrection = (problems: string[], declined: string[]) => {
     AtlasService.CorrectionEnvelope(problems, declined)
-      .then((envelope) => navigator.clipboard.writeText(envelope))
+      .then((envelope) => writeClipboardText(envelope))
       .then(() => setCopied(true))
       .catch((err) => setConfirmError(String(err)))
   }

frontend/src/app/QuickPanelReplyReview.tsx

@@ -1,5 +1,6 @@
 import type { Card } from '../../bindings/github.com/alicoding/mill/internal/domain/atlas/models'
 import { AtlasService } from '../shared/bindings'
+import { writeClipboardText } from '../shared/clipboardWrite'
 
 // The card-level share actions (goal 0063, ADR-0038): copy-as-context
 // (with an explicit with/without-attachments toggle), copy-cloud-link,
@@ -14,7 +15,7 @@ export function atlasCardShareActions(card: Card, onError: (message: string) =>
   const copyAsContext = async (withAttachments: boolean): Promise<void> => {
     try {
       const block = await AtlasService.CardContextBlock(card.ID, withAttachments)
-      await navigator.clipboard.writeText(block)
+      await writeClipboardText(block)
     } catch (err) {
       onError(String(err))
     }
@@ -23,15 +24,15 @@ export function atlasCardShareActions(card: Card, onError: (message: string) =>
   const copyForAI = async (): Promise<void> => {
     try {
       const envelope = await AtlasService.CardContextEnvelope(card.ID)
-      await navigator.clipboard.writeText(envelope)
+      await writeClipboardText(envelope)
     } catch (err) {
       onError(String(err))
     }
   }
 
   const copyCloudLink = async (): Promise<void> => {
     try {
-      await navigator.clipboard.writeText(card.Source)
+      await writeClipboardText(card.Source)
     } catch (err) {
       onError(String(err))
     }

frontend/src/atlas/atlasCardShare.ts

@@ -1,4 +1,5 @@
 import { AtlasService } from '../shared/bindings'
+import { writeClipboardText } from '../shared/clipboardWrite'
 
 // The space-level share actions (goal 0063, ADR-0038), the space
 // counterpart to atlasCardShare.ts's own card-level twin -- both
@@ -9,7 +10,7 @@ export function atlasSpaceShareActions(spaceID: string, onError: (message: strin
   const bundleContext = async (withAttachments: boolean): Promise<void> => {
     try {
       const text = await AtlasService.SpaceBundleContext(spaceID, withAttachments)
-      await navigator.clipboard.writeText(text)
+      await writeClipboardText(text)
     } catch (err) {
       onError(String(err))
     }
@@ -18,7 +19,7 @@ export function atlasSpaceShareActions(spaceID: string, onError: (message: strin
   const copyLinks = async (): Promise<void> => {
     try {
       const text = await AtlasService.SpaceLinksList(spaceID)
-      await navigator.clipboard.writeText(text)
+      await writeClipboardText(text)
     } catch (err) {
       onError(String(err))
     }

frontend/src/atlas/atlasSpaceShareActions.ts

@@ -5,6 +5,7 @@ import { AlertFillIcon, CheckIcon, CopyIcon, XCircleFillIcon } from '@primer/oct
 import type { Issue } from '../../bindings/github.com/alicoding/mill/internal/domain/composition/models'
 import { formatIssuesForCopy } from './validationCopy'
 import styles from './CompositionCanvas.module.css'
+import { writeClipboardText } from '../shared/clipboardWrite'
 
 // The editor's own authoring-validation surface (docs/adr/0028): a
 // toolbar badge naming how many errors/warnings the current draft
@@ -34,7 +35,7 @@ export function ValidationSurface({ issues, workflowLabel, workflowId, onSelectI
   // without hand-transcribing panel rows. Same navigator.clipboard
   // precedent as RequestTestPanel's Copy-error button.
   const copyIssues = () => {
-    void navigator.clipboard.writeText(formatIssuesForCopy(t, workflowLabel, workflowId, issues)).then(() => {
+    void writeClipboardText(formatIssuesForCopy(t, workflowLabel, workflowId, issues)).then(() => {
       setCopied(true)
       setTimeout(() => setCopied(false), 1500)
     })

frontend/src/composition/ValidationPanel.tsx

@@ -4,6 +4,7 @@ import { Button, FormControl, IconButton, Label, Select, SegmentedControl, Stack
 import { StatusStamp } from '../shared/StatusStamp'
 import { CopyIcon, PlayIcon, SyncIcon } from '@primer/octicons-react'
 import { ConfigureService } from '../shared/bindings'
+import { writeClipboardText } from '../shared/clipboardWrite'
 import type { AuthConfig, AuthType, JOSEConfig } from '../../bindings/github.com/alicoding/mill/internal/domain/httprequest/models'
 import type { TestHTTPRequestResult } from '../shared/bindings'
 import type { ManualOperation } from './openapiSynth'
@@ -249,7 +250,7 @@ export function RequestTestPanel({
                   aria-label={t('requestTestPanel.copyAriaLabel')}
                   size="small"
                   variant="invisible"
-                  onClick={() => { void navigator.clipboard.writeText(entry.Error || entry.Body) }}
+                  onClick={() => { void writeClipboardText(entry.Error || entry.Body) }}
                   data-testid="copy-log-entry"
                 />
               </Stack>

frontend/src/configure/RequestTestPanel.tsx

@@ -0,0 +1,45 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+const copyMock = vi.hoisted(() => vi.fn())
+vi.mock('copy-to-clipboard', () => ({ default: copyMock }))
+
+import { writeClipboardText } from './clipboardWrite'
+
+// Regression: over plain http on another device (the remote server
+// instance) navigator.clipboard does not exist, and the old direct
+// writeText calls silently dropped every copy action.
+describe('writeClipboardText', () => {
+  afterEach(() => {
+    vi.unstubAllGlobals()
+    copyMock.mockReset()
+  })
+
+  it('uses navigator.clipboard when available', async () => {
+    const writeText = vi.fn().mockResolvedValue(undefined)
+    vi.stubGlobal('navigator', { clipboard: { writeText } })
+    await writeClipboardText('hello')
+    expect(writeText).toHaveBeenCalledWith('hello')
+    expect(copyMock).not.toHaveBeenCalled()
+  })
+
+  it('falls back to the execCommand path when navigator.clipboard is absent', async () => {
+    vi.stubGlobal('navigator', {})
+    copyMock.mockReturnValue(true)
+    await writeClipboardText('hello')
+    expect(copyMock).toHaveBeenCalledWith('hello')
+  })
+
+  it('falls back when the clipboard API rejects (permission denied)', async () => {
+    const writeText = vi.fn().mockRejectedValue(new Error('denied'))
+    vi.stubGlobal('navigator', { clipboard: { writeText } })
+    copyMock.mockReturnValue(true)
+    await writeClipboardText('hello')
+    expect(copyMock).toHaveBeenCalledWith('hello')
+  })
+
+  it('throws when both doors fail, so callers surface real feedback', async () => {
+    vi.stubGlobal('navigator', {})
+    copyMock.mockReturnValue(false)
+    await expect(writeClipboardText('hello')).rejects.toThrow(/Copy failed/)
+  })
+})

frontend/src/shared/clipboardWrite.test.ts

@@ -0,0 +1,23 @@
+import copy from 'copy-to-clipboard'
+
+// The one clipboard-write door for every copy action. navigator.clipboard
+// exists only in secure contexts (https or localhost) -- a Mill server
+// reached over plain http on another device (the Tailscale instance) has
+// no navigator.clipboard at all, and the old direct writeText calls
+// silently did nothing there. Fallback is the execCommand path via the
+// vetted copy-to-clipboard package rather than a hand-rolled textarea
+// dance. Throws when both doors fail so a caller's existing error
+// feedback fires instead of reporting a copy that never happened.
+export async function writeClipboardText(text: string): Promise<void> {
+  if (typeof navigator !== 'undefined' && navigator.clipboard?.writeText) {
+    try {
+      await navigator.clipboard.writeText(text)
+      return
+    } catch {
+      // Permission denied or transiently unavailable -- fall through.
+    }
+  }
+  if (!copy(text)) {
+    throw new Error('Copy failed: the browser blocked clipboard access')
+  }
+}