Add copy actions for threads and messages

src/App.tsx

@@ -53,6 +53,7 @@ import { useWorktreePrompt } from "./hooks/useWorktreePrompt";
 import { useUiScaleShortcuts } from "./hooks/useUiScaleShortcuts";
 import { useWorkspaceSelection } from "./hooks/useWorkspaceSelection";
 import { useNewAgentShortcut } from "./hooks/useNewAgentShortcut";
+import { useCopyThread } from "./hooks/useCopyThread";
 import type { AccessMode, DiffLineReference, QueuedMessage, WorkspaceInfo } from "./types";
 
 function useWindowLabel() {
@@ -257,6 +258,12 @@ function MainApp() {
     customPrompts: prompts,
     onMessageActivity: refreshGitStatus
   });
+
+  const { handleCopyThread } = useCopyThread({
+    activeItems,
+    onDebug: addDebugEntry,
+  });
+
   const {
     activeImages,
     attachImages,
@@ -687,6 +694,7 @@ function MainApp() {
     branches,
     onCheckoutBranch: handleCheckoutBranch,
     onCreateBranch: handleCreateBranch,
+    onCopyThread: handleCopyThread,
     centerMode,
     onExitDiff: () => {
       setCenterMode("chat");

src/components/MainHeader.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from "react";
-import { Copy } from "lucide-react";
+import { Check, Copy } from "lucide-react";
 import { revealItemInDir } from "@tauri-apps/plugin-opener";
 import type { BranchInfo, WorkspaceInfo } from "../types";
 
@@ -14,6 +14,8 @@ type MainHeaderProps = {
   branches: BranchInfo[];
   onCheckoutBranch: (name: string) => Promise<void> | void;
   onCreateBranch: (name: string) => Promise<void> | void;
+  canCopyThread?: boolean;
+  onCopyThread?: () => void | Promise<void>;
 };
 
 export function MainHeader({
@@ -27,12 +29,16 @@ export function MainHeader({
   branches,
   onCheckoutBranch,
   onCreateBranch,
+  canCopyThread = false,
+  onCopyThread,
 }: MainHeaderProps) {
   const [menuOpen, setMenuOpen] = useState(false);
   const [infoOpen, setInfoOpen] = useState(false);
   const [isCreating, setIsCreating] = useState(false);
   const [newBranch, setNewBranch] = useState("");
   const [error, setError] = useState<string | null>(null);
+  const [copyFeedback, setCopyFeedback] = useState(false);
+  const copyTimeoutRef = useRef<number | null>(null);
   const menuRef = useRef<HTMLDivElement | null>(null);
   const infoRef = useRef<HTMLDivElement | null>(null);
 
@@ -66,6 +72,32 @@ export function MainHeader({
     };
   }, [infoOpen, menuOpen]);
 
+  useEffect(() => {
+    return () => {
+      if (copyTimeoutRef.current) {
+        window.clearTimeout(copyTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  const handleCopyClick = async () => {
+    if (!onCopyThread) {
+      return;
+    }
+    try {
+      await onCopyThread();
+      setCopyFeedback(true);
+      if (copyTimeoutRef.current) {
+        window.clearTimeout(copyTimeoutRef.current);
+      }
+      copyTimeoutRef.current = window.setTimeout(() => {
+        setCopyFeedback(false);
+      }, 1200);
+    } catch {
+      // Errors are handled upstream in the copy handler.
+    }
+  };
+
   return (
     <header className="main-header" data-tauri-drag-region>
       <div className="workspace-header">
@@ -243,6 +275,22 @@ export function MainHeader({
           )}
         </div>
       </div>
+      <div className="main-header-actions">
+        <button
+          type="button"
+          className={`ghost main-header-action${copyFeedback ? " is-copied" : ""}`}
+          onClick={handleCopyClick}
+          disabled={!canCopyThread || !onCopyThread}
+          data-tauri-drag-region="false"
+          aria-label="Copy thread"
+          title="Copy thread"
+        >
+          <span className="main-header-icon" aria-hidden>
+            <Copy className="main-header-icon-copy" size={14} />
+            <Check className="main-header-icon-check" size={14} />
+          </span>
+        </button>
+      </div>
     </header>
   );
 }

src/components/Messages.tsx

@@ -1,4 +1,5 @@
 import { memo, useEffect, useRef, useState } from "react";
+import { Check, Copy } from "lucide-react";
 import type { ConversationItem } from "../types";
 import { Markdown } from "./Markdown";
 import { DiffBlock } from "./DiffBlock";
@@ -207,6 +208,8 @@ export const Messages = memo(function Messages({
 }: MessagesProps) {
   const bottomRef = useRef<HTMLDivElement | null>(null);
   const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set());
+  const [copiedMessageId, setCopiedMessageId] = useState<string | null>(null);
+  const copyTimeoutRef = useRef<number | null>(null);
   const [elapsedMs, setElapsedMs] = useState(0);
   const scrollKey = scrollKeyForItems(items);
   const toggleExpanded = (id: string) => {
@@ -223,6 +226,29 @@ export const Messages = memo(function Messages({
 
   const visibleItems = items;
 
+  useEffect(() => {
+    return () => {
+      if (copyTimeoutRef.current) {
+        window.clearTimeout(copyTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  const handleCopyMessage = async (item: Extract<ConversationItem, { kind: "message" }>) => {
+    try {
+      await navigator.clipboard.writeText(item.text);
+      setCopiedMessageId(item.id);
+      if (copyTimeoutRef.current) {
+        window.clearTimeout(copyTimeoutRef.current);
+      }
+      copyTimeoutRef.current = window.setTimeout(() => {
+        setCopiedMessageId(null);
+      }, 1200);
+    } catch {
+      // No-op: clipboard errors can occur in restricted contexts.
+    }
+  };
+
   useEffect(() => {
     if (!bottomRef.current) {
       return undefined;
@@ -276,10 +302,23 @@ export const Messages = memo(function Messages({
     >
       {visibleItems.map((item) => {
         if (item.kind === "message") {
+          const isCopied = copiedMessageId === item.id;
           return (
             <div key={item.id} className={`message ${item.role}`}>
-              <div className="bubble">
+              <div className="bubble message-bubble">
                 <Markdown value={item.text} className="markdown" />
+                <button
+                  type="button"
+                  className={`ghost message-copy-button${isCopied ? " is-copied" : ""}`}
+                  onClick={() => handleCopyMessage(item)}
+                  aria-label="Copy message"
+                  title="Copy message"
+                >
+                  <span className="message-copy-icon" aria-hidden>
+                    <Copy className="message-copy-icon-copy" size={14} />
+                    <Check className="message-copy-icon-check" size={14} />
+                  </span>
+                </button>
               </div>
             </div>
           );

src/hooks/useCopyThread.ts

@@ -0,0 +1,33 @@
+import { useCallback } from "react";
+import { buildThreadTranscript } from "../utils/threadText";
+import type { ConversationItem, DebugEntry } from "../types";
+
+type CopyThreadOptions = {
+  activeItems: ConversationItem[];
+  onDebug: (entry: DebugEntry) => void;
+};
+
+export function useCopyThread({ activeItems, onDebug }: CopyThreadOptions) {
+  const handleCopyThread = useCallback(async () => {
+    if (!activeItems.length) {
+      return;
+    }
+    const transcript = buildThreadTranscript(activeItems);
+    if (!transcript) {
+      return;
+    }
+    try {
+      await navigator.clipboard.writeText(transcript);
+    } catch (error) {
+      onDebug({
+        id: `${Date.now()}-client-copy-thread-error`,
+        timestamp: Date.now(),
+        source: "error",
+        label: "thread/copy error",
+        payload: error instanceof Error ? error.message : String(error),
+      });
+    }
+  }, [activeItems, onDebug]);
+
+  return { handleCopyThread };
+}

src/hooks/useLayoutNodes.tsx

@@ -98,6 +98,7 @@ type LayoutNodesOptions = {
   branches: BranchInfo[];
   onCheckoutBranch: (name: string) => Promise<void>;
   onCreateBranch: (name: string) => Promise<void>;
+  onCopyThread: () => void | Promise<void>;
   centerMode: "chat" | "diff";
   onExitDiff: () => void;
   activeTab: "projects" | "codex" | "git" | "log";
@@ -315,6 +316,8 @@ export function useLayoutNodes(options: LayoutNodesOptions): LayoutNodesResult {
       branches={options.branches}
       onCheckoutBranch={options.onCheckoutBranch}
       onCreateBranch={options.onCreateBranch}
+      canCopyThread={options.activeItems.length > 0}
+      onCopyThread={options.onCopyThread}
     />
   ) : null;
 

src/styles/main.css

@@ -16,6 +16,7 @@
 }
 
 .main-header {
+  width: 100%;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -30,6 +31,61 @@
   min-width: 0;
 }
 
+.main-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  -webkit-app-region: no-drag;
+}
+
+.main-header-action {
+  padding: 6px;
+  border-radius: 8px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.main-header-icon {
+  position: relative;
+  width: 14px;
+  height: 14px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.main-header-icon svg {
+  position: absolute;
+  inset: 0;
+  transition: opacity 160ms ease, transform 160ms ease, filter 160ms ease;
+}
+
+.main-header-icon-copy {
+  opacity: 1;
+  transform: scale(1);
+  filter: blur(0);
+}
+
+.main-header-icon-check {
+  opacity: 0;
+  transform: scale(0.82);
+  filter: blur(2px);
+  transition-delay: 60ms;
+}
+
+.main-header-action.is-copied .main-header-icon-copy {
+  opacity: 0;
+  transform: scale(0.82);
+  filter: blur(2px);
+}
+
+.main-header-action.is-copied .main-header-icon-check {
+  opacity: 1;
+  transform: scale(1);
+  filter: blur(0);
+}
+
 .main-topbar {
   display: flex;
   justify-content: space-between;

src/styles/messages.css

@@ -127,6 +127,71 @@
   word-break: break-word;
 }
 
+.message-bubble {
+  position: relative;
+}
+
+.message-copy-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  right: 6px;
+  bottom: -12px;
+  padding: 4px;
+  border-radius: 999px;
+  background: var(--surface-card-strong);
+  border: 1px solid var(--border-strong);
+  opacity: 0;
+  transform: translateY(4px);
+  transition: opacity 160ms ease, transform 160ms ease;
+}
+
+.message:hover .message-copy-button {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.message-copy-icon {
+  position: relative;
+  width: 14px;
+  height: 14px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.message-copy-icon svg {
+  position: absolute;
+  inset: 0;
+  transition: opacity 160ms ease, transform 160ms ease, filter 160ms ease;
+}
+
+.message-copy-icon-copy {
+  opacity: 1;
+  transform: scale(1);
+  filter: blur(0);
+}
+
+.message-copy-icon-check {
+  opacity: 0;
+  transform: scale(0.82);
+  filter: blur(2px);
+  transition-delay: 60ms;
+}
+
+.message-copy-button.is-copied .message-copy-icon-copy {
+  opacity: 0;
+  transform: scale(0.82);
+  filter: blur(2px);
+}
+
+.message-copy-button.is-copied .message-copy-icon-check {
+  opacity: 1;
+  transform: scale(1);
+  filter: blur(0);
+}
+
 .message.user .bubble {
   background: var(--surface-bubble-user);
 }