feat: add copy button with inline feedback and cursor filtering

- Add CopyIconButton with inline "copied" feedback (green checkmark for 2s)
- Filter cursor character from clipboard selections
- Export CURSOR_CHAR constant for reuse
- Suppress global clipboard messages in favor of inline feedback

Author: brandonkachen

cli/src/components/copy-icon-button.tsx

@@ -1,43 +1,109 @@
 import { TextAttributes } from '@opentui/core'
-import React from 'react'
+import React, { useMemo, useState } from 'react'
 
 import { useHoverToggle } from './agent-mode-toggle'
 import { Button } from './button'
 import { useTheme } from '../hooks/use-theme'
+import { useTimeout } from '../hooks/use-timeout'
 import { copyTextToClipboard } from '../utils/clipboard'
+import type { ContentBlock } from '../types/chat'
 
 interface CopyIconButtonProps {
-  textToCopy: string
+  blocks?: ContentBlock[]
+  content?: string
+}
+
+const BULLET_CHAR = '•'
+
+const extractTextFromBlocks = (blocks?: ContentBlock[]): string => {
+  if (!blocks || blocks.length === 0) return ''
+  
+  const textParts: string[] = []
+  const agentToolGroup: string[] = []
+  
+  for (const block of blocks) {
+    if (block.type === 'text') {
+      // Flush any accumulated agent/tool names
+      if (agentToolGroup.length > 0) {
+        // Remove trailing whitespace from last text block
+        if (textParts.length > 0) {
+          const lastIndex = textParts.length - 1
+          textParts[lastIndex] = textParts[lastIndex].trimEnd()
+        }
+        // Add agent/tool names with bullets
+        textParts.push(agentToolGroup.join('\n'))
+        // Add blank line after agent/tool group
+        textParts.push('')
+        agentToolGroup.length = 0
+      }
+      textParts.push(block.content)
+    } else if (block.type === 'agent') {
+      // Only include agent name, not nested content
+      agentToolGroup.push(`${BULLET_CHAR} ${block.agentName}`)
+    } else if (block.type === 'tool') {
+      // Only include tool name, not nested content
+      agentToolGroup.push(`${BULLET_CHAR} ${block.toolName}`)
+    }
+    // Skip other block types (html, agent-list, etc.)
+  }
+  
+  // Flush any remaining agent/tool names at the end
+  if (agentToolGroup.length > 0) {
+    if (textParts.length > 0) {
+      const lastIndex = textParts.length - 1
+      textParts[lastIndex] = textParts[lastIndex].trimEnd()
+    }
+    textParts.push(agentToolGroup.join('\n'))
+    textParts.push('')
+  }
+  
+  return textParts.join('\n').trim()
 }
 
 export const CopyIconButton: React.FC<CopyIconButtonProps> = ({
-  textToCopy,
+  blocks,
+  content,
 }) => {
   const theme = useTheme()
   const hover = useHoverToggle()
+  const { setTimeout } = useTimeout()
+  const [isCopied, setIsCopied] = useState(false)
+
+  // Compute text to copy from blocks or content
+  const textToCopy = useMemo(() => {
+    return blocks && blocks.length > 0
+      ? extractTextFromBlocks(blocks) || content || ''
+      : content || ''
+  }, [blocks, content])
 
   const handleClick = async () => {
     try {
       await copyTextToClipboard(textToCopy, {
-        successMessage: 'Message copied to clipboard',
-        durationMs: 2000,
+        suppressGlobalMessage: true,
       })
+      setIsCopied(true)
+      setTimeout('reset-copied', () => setIsCopied(false), 2000)
     } catch (error) {
       // Error is already logged and displayed by copyTextToClipboard
     }
   }
 
   const handleMouseOver = () => {
-    hover.clearCloseTimer()
-    hover.scheduleOpen()
+    if (!isCopied) {
+      hover.clearCloseTimer()
+      hover.scheduleOpen()
+    }
   }
 
   const handleMouseOut = () => {
-    hover.scheduleClose()
+    if (!isCopied) {
+      hover.scheduleClose()
+    }
   }
 
   const textCollapsed = '⎘'
   const textExpanded = '[⎘ copy]'
+  const textCopied = '[✔ copied]'
 
   return (
     <Button
@@ -54,10 +120,12 @@ export const CopyIconButton: React.FC<CopyIconButtonProps> = ({
       <text
         style={{
           wrapMode: 'none',
-          fg: hover.isOpen ? theme.foreground : theme.muted,
+          fg: isCopied ? 'green' : hover.isOpen ? theme.foreground : theme.muted,
         }}
       >
-        {hover.isOpen ? (
+        {isCopied ? (
+          textCopied
+        ) : hover.isOpen ? (
           textExpanded
         ) : (
           <span attributes={TextAttributes.DIM}>{textCollapsed}</span>

cli/src/components/message-block.tsx

@@ -207,18 +207,14 @@ export const MessageBlock: React.FC<MessageBlockProps> = ({
       return null
     }
 
-    // Extract full text content from blocks or use content prop
-    const fullTextContent = blocks && blocks.length > 0 
-      ? extractTextFromBlocks(blocks) || content
-      : content
-
     const footerItems: { key: string; node: React.ReactNode }[] = []
 
     // Add copy button first if there's content to copy
-    if (fullTextContent && fullTextContent.trim().length > 0) {
+    const hasContent = (blocks && blocks.length > 0) || (content && content.trim().length > 0)
+    if (hasContent) {
       footerItems.push({
         key: 'copy',
-        node: <CopyIconButton textToCopy={fullTextContent} />,
+        node: <CopyIconButton blocks={blocks} content={content} />,
       })
     }
 
@@ -405,21 +401,7 @@ const sanitizePreview = (value: string): string =>
   value.replace(/[#*_`~\[\]()]/g, '').trim()
 
 // Extract all text content from blocks recursively
-const extractTextFromBlocks = (blocks?: ContentBlock[]): string => {
-  if (!blocks || blocks.length === 0) return ''
-  
-  const textParts: string[] = []
-  
-  for (const block of blocks) {
-    if (block.type === 'text') {
-      textParts.push(block.content)
-    } else if (block.type === 'agent' && block.blocks) {
-      textParts.push(extractTextFromBlocks(block.blocks))
-    }
-  }
-  
-  return textParts.join('\n').trim()
-}
+
 
 const isReasoningTextBlock = (
   b: ContentBlock | null | undefined,

cli/src/components/multiline-input.tsx

@@ -74,7 +74,7 @@ function findNextWordBoundary(text: string, cursor: number): number {
   return pos
 }
 
-const CURSOR_CHAR = '▍'
+export const CURSOR_CHAR = '▍'
 const CONTROL_CHAR_REGEX = /[\u0000-\u0008\u000b-\u000c\u000e-\u001f\u007f]/
 const TAB_WIDTH = 4
 

cli/src/hooks/use-clipboard.ts

@@ -5,6 +5,7 @@ import {
   copyTextToClipboard,
   subscribeClipboardMessages,
 } from '../utils/clipboard'
+import { CURSOR_CHAR } from '../components/multiline-input'
 
 function formatDefaultClipboardMessage(text: string): string | null {
   const preview = text.replace(/\s+/g, ' ').trim()
@@ -37,7 +38,10 @@ export const useClipboard = () => {
           ? selectionObj
           : null
 
-      if (!rawText || rawText.trim().length === 0) {
+      // Filter out cursor character from selected text
+      const cleanedText = rawText?.replace(new RegExp(CURSOR_CHAR, 'g'), '') ?? null
+
+      if (!cleanedText || cleanedText.trim().length === 0) {
         pendingSelectionRef.current = null
         if (pendingCopyTimeoutRef.current) {
           clearTimeout(pendingCopyTimeoutRef.current)
@@ -46,11 +50,11 @@ export const useClipboard = () => {
         return
       }
 
-      if (rawText === pendingSelectionRef.current) {
+      if (cleanedText === pendingSelectionRef.current) {
         return
       }
 
-      pendingSelectionRef.current = rawText
+      pendingSelectionRef.current = cleanedText
 
       if (pendingCopyTimeoutRef.current) {
         clearTimeout(pendingCopyTimeoutRef.current)