🤖 Deduplicate copy-to-clipboard logic with useCopyToClipboard hook

The copy feedback pattern (copied state + 2000ms timeout) was duplicated across
4 components with identical implementations.

Changes:
- Created src/hooks/useCopyToClipboard.ts hook for reusable copy functionality
- Added COPY_FEEDBACK_DURATION_MS constant to src/constants/ui.ts (2000ms)
- Updated components to use the hook:
  - AssistantMessage: -11 lines
  - UserMessage: -18 lines (also removed useState import)
  - ProposePlanToolCall: -12 lines
  - FileEditToolCall: -13 lines

Result: 54 lines of duplicated code replaced with single 33-line hook.
Single source of truth for copy feedback duration and implementation.

Author: ammar-agent

src/components/Messages/AssistantMessage.tsx

@@ -5,6 +5,7 @@ import { TypewriterMarkdown } from "./TypewriterMarkdown";
 import type { ButtonConfig } from "./MessageWindow";
 import { MessageWindow } from "./MessageWindow";
 import { useStartHere } from "@/hooks/useStartHere";
+import { useCopyToClipboard } from "@/hooks/useCopyToClipboard";
 import { COMPACTED_EMOJI } from "@/constants/ui";
 import { ModelDisplay } from "./ModelDisplay";
 import { CompactingMessageContent } from "./CompactingMessageContent";
@@ -27,7 +28,6 @@ export const AssistantMessage: React.FC<AssistantMessageProps> = ({
   clipboardWriteText = (data: string) => navigator.clipboard.writeText(data),
 }) => {
   const [showRaw, setShowRaw] = useState(false);
-  const [copied, setCopied] = useState(false);
 
   const content = message.content;
   const isStreaming = message.isStreaming;
@@ -42,15 +42,8 @@ export const AssistantMessage: React.FC<AssistantMessageProps> = ({
     modal,
   } = useStartHere(workspaceId, content, isCompacted);
 
-  const handleCopy = async () => {
-    try {
-      await clipboardWriteText(content);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch (err) {
-      console.error("Failed to copy:", err);
-    }
-  };
+  // Copy to clipboard with feedback
+  const { copied, copyToClipboard } = useCopyToClipboard(clipboardWriteText);
 
   // Keep only Copy button visible (most common action)
   // Kebab menu saves horizontal space by collapsing less-used actions into a single ⋮ button
@@ -59,7 +52,7 @@ export const AssistantMessage: React.FC<AssistantMessageProps> = ({
     : [
         {
           label: copied ? "✓ Copied" : "Copy",
-          onClick: () => void handleCopy(),
+          onClick: () => void copyToClipboard(content),
         },
       ];
 

src/components/Messages/UserMessage.tsx

@@ -1,9 +1,10 @@
-import React, { useState } from "react";
+import React from "react";
 import type { DisplayedMessage } from "@/types/message";
 import type { ButtonConfig } from "./MessageWindow";
 import { MessageWindow } from "./MessageWindow";
 import { TerminalOutput } from "./TerminalOutput";
 import { formatKeybind, KEYBINDS } from "@/utils/ui/keybinds";
+import { useCopyToClipboard } from "@/hooks/useCopyToClipboard";
 import type { KebabMenuItem } from "@/components/KebabMenu";
 
 interface UserMessageProps {
@@ -30,8 +31,6 @@ export const UserMessage: React.FC<UserMessageProps> = ({
   isCompacting,
   clipboardWriteText = defaultClipboardWriteText,
 }) => {
-  const [copied, setCopied] = useState(false);
-
   const content = message.content;
 
   console.assert(
@@ -48,20 +47,8 @@ export const UserMessage: React.FC<UserMessageProps> = ({
     ? content.slice("<local-command-stdout>".length, -"</local-command-stdout>".length).trim()
     : "";
 
-  const handleCopy = async () => {
-    console.assert(
-      typeof content === "string",
-      "UserMessage copy handler expects message content to be a string."
-    );
-
-    try {
-      await clipboardWriteText(content);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch (err) {
-      console.error("Failed to copy:", err);
-    }
-  };
+  // Copy to clipboard with feedback
+  const { copied, copyToClipboard } = useCopyToClipboard(clipboardWriteText);
 
   const handleEdit = () => {
     if (onEdit && !isLocalCommandOutput) {
@@ -86,7 +73,7 @@ export const UserMessage: React.FC<UserMessageProps> = ({
       : []),
     {
       label: copied ? "✓ Copied" : "Copy",
-      onClick: () => void handleCopy(),
+      onClick: () => void copyToClipboard(content),
     },
   ];
 

src/components/tools/FileEditToolCall.tsx

@@ -19,6 +19,7 @@ import {
   LoadingDots,
 } from "./shared/ToolPrimitives";
 import { useToolExpansion, getStatusDisplay, type ToolStatus } from "./shared/toolUtils";
+import { useCopyToClipboard } from "@/hooks/useCopyToClipboard";
 import { TooltipWrapper, Tooltip } from "../Tooltip";
 import { DiffContainer, DiffRenderer, SelectableDiffRenderer } from "../shared/DiffRenderer";
 import { KebabMenu, type KebabMenuItem } from "../KebabMenu";
@@ -104,29 +105,19 @@ export const FileEditToolCall: React.FC<FileEditToolCallProps> = ({
 
   const { expanded, toggleExpanded } = useToolExpansion(initialExpanded);
   const [showRaw, setShowRaw] = React.useState(false);
-  const [copied, setCopied] = React.useState(false);
 
   const filePath = "file_path" in args ? args.file_path : undefined;
 
-  const handleCopyPatch = async () => {
-    if (result && result.success && result.diff) {
-      try {
-        await navigator.clipboard.writeText(result.diff);
-        setCopied(true);
-        setTimeout(() => setCopied(false), 2000);
-      } catch (err) {
-        console.error("Failed to copy:", err);
-      }
-    }
-  };
+  // Copy to clipboard with feedback
+  const { copied, copyToClipboard } = useCopyToClipboard();
 
   // Build kebab menu items for successful edits with diffs
   const kebabMenuItems: KebabMenuItem[] =
     result && result.success && result.diff
       ? [
           {
             label: copied ? "✓ Copied" : "Copy Patch",
-            onClick: () => void handleCopyPatch(),
+            onClick: () => void copyToClipboard(result.diff),
           },
           {
             label: showRaw ? "Show Parsed" : "Show Patch",

src/components/tools/ProposePlanToolCall.tsx

@@ -12,6 +12,7 @@ import { useToolExpansion, getStatusDisplay, type ToolStatus } from "./shared/to
 import { MarkdownRenderer } from "../Messages/MarkdownRenderer";
 import { formatKeybind, KEYBINDS } from "@/utils/ui/keybinds";
 import { useStartHere } from "@/hooks/useStartHere";
+import { useCopyToClipboard } from "@/hooks/useCopyToClipboard";
 import { TooltipWrapper, Tooltip } from "../Tooltip";
 import { cn } from "@/lib/utils";
 
@@ -30,7 +31,6 @@ export const ProposePlanToolCall: React.FC<ProposePlanToolCallProps> = ({
 }) => {
   const { expanded, toggleExpanded } = useToolExpansion(true); // Expand by default
   const [showRaw, setShowRaw] = useState(false);
-  const [copied, setCopied] = useState(false);
 
   // Format: Title as H1 + plan content for "Start Here" functionality
   const startHereContent = `# ${args.title}\n\n${args.plan}`;
@@ -46,20 +46,13 @@ export const ProposePlanToolCall: React.FC<ProposePlanToolCallProps> = ({
     false // Plans are never already compacted
   );
 
+  // Copy to clipboard with feedback
+  const { copied, copyToClipboard } = useCopyToClipboard();
+
   const [isHovered, setIsHovered] = useState(false);
 
   const statusDisplay = getStatusDisplay(status);
 
-  const handleCopy = async () => {
-    try {
-      await navigator.clipboard.writeText(args.plan);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch (err) {
-      console.error("Failed to copy:", err);
-    }
-  };
-
   return (
     <ToolContainer expanded={expanded}>
       <ToolHeader onClick={toggleExpanded}>
@@ -134,7 +127,7 @@ export const ProposePlanToolCall: React.FC<ProposePlanToolCallProps> = ({
                   </TooltipWrapper>
                 )}
                 <button
-                  onClick={() => void handleCopy()}
+                  onClick={() => void copyToClipboard(args.plan)}
                   className="text-muted hover:text-plan-mode cursor-pointer rounded-sm bg-transparent px-2 py-1 font-mono text-[10px] transition-all duration-150 active:translate-y-px"
                   style={{
                     border: "1px solid rgba(136, 136, 136, 0.3)",

src/constants/ui.ts

@@ -9,3 +9,8 @@
  * - Start Here button (plans and assistant messages)
  */
 export const COMPACTED_EMOJI = "📦";
+
+/**
+ * Duration (ms) to show "copied" feedback after copying to clipboard
+ */
+export const COPY_FEEDBACK_DURATION_MS = 2000;

src/hooks/useCopyToClipboard.ts

@@ -0,0 +1,33 @@
+import { useState, useCallback } from "react";
+import { COPY_FEEDBACK_DURATION_MS } from "@/constants/ui";
+
+/**
+ * Hook for copy-to-clipboard functionality with temporary "copied" feedback state.
+ *
+ * @param clipboardWriteText - Optional custom clipboard write function (defaults to navigator.clipboard.writeText)
+ * @returns Object with:
+ *   - copied: boolean indicating if content was just copied (resets after COPY_FEEDBACK_DURATION_MS)
+ *   - copyToClipboard: async function to copy text and trigger feedback
+ */
+export function useCopyToClipboard(
+  clipboardWriteText: (text: string) => Promise<void> = (text: string) =>
+    navigator.clipboard.writeText(text)
+) {
+  const [copied, setCopied] = useState(false);
+
+  const copyToClipboard = useCallback(
+    async (text: string) => {
+      try {
+        await clipboardWriteText(text);
+        setCopied(true);
+        setTimeout(() => setCopied(false), COPY_FEEDBACK_DURATION_MS);
+      } catch (err) {
+        console.error("Failed to copy:", err);
+      }
+    },
+    [clipboardWriteText]
+  );
+
+  return { copied, copyToClipboard };
+}
+