From 20fc1d4a6e8f1b1759d0b580c183195f800741bc Mon Sep 17 00:00:00 2001
From: Konstantin Kolesnyak <constkolesnyak@gmail.com>
Date: Thu, 25 Jun 2026 21:21:58 +0200
Subject: [PATCH] Fix navigator.clipboard crash over plain HTTP (non-secure
 context)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

navigator.clipboard is only exposed in secure contexts (HTTPS or
http://localhost). When the UI is accessed over plain HTTP via a LAN
hostname/IP, or behind a proxy without a trusted cert, the entire
clipboard object is undefined and any call throws
'TypeError: Cannot read properties of undefined (reading writeText)'.

Two affected call sites:
- web/src/components/Chat/CodeBlock.tsx — the per-code-block Copy button
- web/src/pages/ChatPage.tsx — Cmd+Shift+C 'copy last response' shortcut

Both silently failed without surfacing any UI feedback.

Add a shared copyToClipboard helper that prefers navigator.clipboard
when available and falls back to a hidden off-screen <textarea> +
document.execCommand('copy'). execCommand is deprecated but still
implemented in every browser we care about.

Mirrors the same non-secure-context fallback pattern already used in
utils/uuid.ts (introduced by #149).
---
 web/src/components/Chat/CodeBlock.tsx |  6 ++--
 web/src/pages/ChatPage.tsx            |  3 +-
 web/src/utils/clipboard.ts            | 46 +++++++++++++++++++++++++++
 3 files changed, 52 insertions(+), 3 deletions(-)
 create mode 100644 web/src/utils/clipboard.ts

diff --git a/web/src/components/Chat/CodeBlock.tsx b/web/src/components/Chat/CodeBlock.tsx
index 8caa357..32f5b50 100644
--- a/web/src/components/Chat/CodeBlock.tsx
+++ b/web/src/components/Chat/CodeBlock.tsx
@@ -1,14 +1,16 @@
 import { useState, useRef, type ReactNode } from 'react';
 import { Copy, Check } from 'lucide-react';
+import { copyToClipboard } from '../../utils/clipboard';
 
 export function CodeBlock({ className, children }: { className?: string; children: ReactNode }) {
   const [copied, setCopied] = useState(false);
   const codeRef = useRef<HTMLElement>(null);
   const language = className?.replace(/^.*?language-/, '').replace(/\s.*$/, '') || '';
 
-  const handleCopy = () => {
+  const handleCopy = async () => {
     const text = codeRef.current?.textContent || '';
-    navigator.clipboard.writeText(text);
+    const ok = await copyToClipboard(text);
+    if (!ok) return;
     setCopied(true);
     setTimeout(() => setCopied(false), 2000);
   };
diff --git a/web/src/pages/ChatPage.tsx b/web/src/pages/ChatPage.tsx
index d24f5c7..38df59f 100644
--- a/web/src/pages/ChatPage.tsx
+++ b/web/src/pages/ChatPage.tsx
@@ -12,6 +12,7 @@ import { Loader2, PanelLeftOpen, PanelLeftClose, Files, ExternalLink } from 'luc
 import { api } from '../api/client';
 import { useKeyboardShortcuts } from '../hooks/useKeyboardShortcuts';
 import type { ShortcutDef } from '../utils/keyboard';
+import { copyToClipboard } from '../utils/clipboard';
 import type { ChatMessage, TextBlockData } from '../types/chat';
 
 const STATUS_LABELS: Record<string, string> = {
@@ -78,7 +79,7 @@ export function ChatPage() {
       section: 'chat',
       action: () => {
         const text = getLastAssistantText(useChatStore.getState().messages);
-        if (text) void navigator.clipboard.writeText(text);
+        if (text) void copyToClipboard(text);
       },
     },
     {
diff --git a/web/src/utils/clipboard.ts b/web/src/utils/clipboard.ts
new file mode 100644
index 0000000..a01713b
--- /dev/null
+++ b/web/src/utils/clipboard.ts
@@ -0,0 +1,46 @@
+/**
+ * Copy text to clipboard with a fallback for non-secure contexts.
+ *
+ * `navigator.clipboard` is only exposed in *secure contexts* — HTTPS or
+ * `http://localhost`. When the app is accessed over plain HTTP via a LAN
+ * hostname or IP, or behind a proxy without a trusted cert, the entire
+ * `clipboard` object is `undefined` and any call throws synchronously.
+ *
+ * Falls back to the deprecated `document.execCommand('copy')` via a hidden
+ * off-screen `<textarea>` — still works in every browser we care about.
+ *
+ * Mirrors the same non-secure-context fallback pattern already used in
+ * `utils/uuid.ts` for `crypto.randomUUID`.
+ *
+ * @returns true on success, false on failure.
+ */
+export async function copyToClipboard(text: string): Promise<boolean> {
+  if (typeof navigator !== 'undefined' && navigator.clipboard?.writeText) {
+    try {
+      await navigator.clipboard.writeText(text);
+      return true;
+    } catch {
+      // Fall through to legacy path.
+    }
+  }
+
+  if (typeof document === 'undefined') return false;
+
+  // Legacy fallback: off-screen textarea + execCommand('copy').
+  const ta = document.createElement('textarea');
+  ta.value = text;
+  ta.setAttribute('readonly', '');
+  ta.style.position = 'fixed';
+  ta.style.top = '-1000px';
+  ta.style.left = '-1000px';
+  ta.style.opacity = '0';
+  document.body.appendChild(ta);
+  try {
+    ta.select();
+    return document.execCommand('copy');
+  } catch {
+    return false;
+  } finally {
+    document.body.removeChild(ta);
+  }
+}