# Managed by IssueSpec. Hand edits are welcome; keep the schema valid.
id: 21
title: Add copy-paste functionality for completion widgets and code blocks
state: open
author:
  name: k33g
  email: ph.charriere@gmail.com
createdAt: 2026-09-18T00:00:00.000Z
updatedAt: 2026-09-18T00:00:00.000Z
labels:
  - feature
  - enhancement
  - ui
  - usability
body: |
  Add the ability to copy-paste each generated completion widget and code portions/blocks individually.

  ## Problem Statement

  Users need to quickly copy agent responses, code snippets, and individual completion widgets without selecting text manually. This is a common UX pattern in modern AI chat interfaces.

  ## Requirements

  ### Completion Widgets
  - Each completion widget (thought, tool call result, plan, etc.) should have a copy button
  - Copy button appears on hover or always visible (design decision)
  - Clicking copies the entire widget content to clipboard
  - Visual feedback when copied (checkmark, tooltip, color change)
  - Preserve formatting when copying (plain text or markdown)

  ### Code Blocks
  - Every code block should have a dedicated copy button
  - Button positioned in top-right corner of code block (standard pattern)
  - Copy raw code without syntax highlighting markup
  - Support for inline code spans (optional - may be too small for button)
  - Language label displayed alongside copy button

  ### Multi-line Text Blocks
  - Bash command outputs
  - File content previews
  - Error messages
  - Log outputs
  - Any multi-line formatted text

  ## User Experience

  ### Visual Design
  - **Copy button icon**: clipboard icon or "Copy" text
  - **Position**: Top-right corner of widget/block (consistent placement)
  - **Visibility**: 
    - Always visible (simpler)
    - OR show on hover (cleaner UI)
  - **Feedback states**:
    - Default: clipboard icon
    - Hover: subtle highlight
    - Click: changes to checkmark icon
    - After 2s: reverts to clipboard icon
  - **Tooltip**: "Copy" (before), "Copied!" (after)

  ### Interaction Flow
  ```
  User hovers over code block
  → Copy button appears/highlights
  → User clicks copy button
  → Content copied to clipboard
  → Button shows checkmark + "Copied!" tooltip
  → After 2 seconds, button reverts to default
  ```

  ## Implementation Considerations

  ### Frontend (React)
  - Use Clipboard API (`navigator.clipboard.writeText()`)
  - Fallback for older browsers (`document.execCommand('copy')`)
  - Component: `<CopyButton content={text} />`
  - State management for "copied" feedback
  - Debounce multiple rapid clicks

  ### Code Block Integration
  - Monaco editor code blocks: extract raw text
  - Markdown code blocks: access pre-rendered content
  - Syntax highlighted blocks: strip HTML/CSS, keep plain text

  ### Content Processing
  - **Code blocks**: Copy raw code, preserve indentation
  - **Thought widgets**: Copy plain text or markdown?
  - **Tool calls**: Copy JSON formatted or pretty-printed?
  - **Structured output**: Preserve structure (JSON, YAML, etc.)
  - **Tables**: Copy as markdown table or TSV/CSV?

  ### Security & Privacy
  - Only copy visible content (no hidden data)
  - Sanitize content before copying (no script injection)
  - Respect clipboard permissions (prompt if needed)
  - No automatic clipboard access (user-initiated only)

  ## Widget Types to Support

  | Widget Type | Copy Format | Priority |
  |------------|-------------|----------|
  | Code blocks | Raw code | High |
  | Thought bubbles | Plain text | High |
  | Tool call output | Formatted text | High |
  | File previews | Full content | Medium |
  | Error messages | Plain text | Medium |
  | Bash commands | Command only | Medium |
  | Bash output | Output text | Medium |
  | Plans | Markdown | Low |
  | JSON responses | Formatted JSON | Low |
  | Tables | Markdown table | Low |

  ## Example UI Mock

  ```
  ┌─────────────────────────────────────────────┐
  │ Thought: Analyzing the codebase...   [📋]   │
  │                                             │
  │ I'll search for the authentication logic... │
  └─────────────────────────────────────────────┘

  ┌─────────────────────────────────────────────┐
  │ JavaScript                            [📋]   │
  ├─────────────────────────────────────────────┤
  │ function authenticate(user, pass) {         │
  │   return bcrypt.compare(pass, user.hash);   │
  │ }                                           │
  └─────────────────────────────────────────────┘

  ┌─────────────────────────────────────────────┐
  │ Bash Output                           [✓]   │
  ├─────────────────────────────────────────────┤
  │ Tests passed: 42                            │
  │ Coverage: 87%                               │
  └─────────────────────────────────────────────┘
  ```

  ## Accessibility

  - Button has proper ARIA label: `aria-label="Copy code"`
  - Keyboard accessible: Tab to button, Enter/Space to activate
  - Screen reader announces "Copied to clipboard"
  - Focus visible indicator on keyboard navigation
  - Sufficient color contrast for button (WCAG AA)

  ## Testing Considerations

  - Test clipboard API support detection
  - Test fallback mechanism
  - Test with different content types (code, JSON, markdown)
  - Test with large content (>1MB)
  - Test rapid successive clicks
  - Test keyboard navigation
  - Cross-browser testing (Chrome, Firefox, Safari, Edge)
  - Mobile touch interaction testing

  ## Related Features

  - Could add "Copy all" button for entire conversation
  - Export conversation as markdown with all code blocks
  - Share snippet functionality (copy + generate shareable link)
  - Syntax highlighting preservation option

  ## Open Questions

  - Should copy button be always visible or show on hover?
  - Should we support "copy as markdown" vs "copy as plain text" toggle?
  - Should inline code (`inline`) have copy buttons or only blocks?
  - Maximum content size for clipboard operations?
  - Should we track copy events for analytics/UX improvements?
  - Mobile long-press behavior (native context menu vs custom)?

  ## Similar Implementations

  - GitHub code blocks (hover, top-right corner)
  - ChatGPT code blocks (always visible, next to language label)
  - VS Code (inline copy button on hover)
  - Stack Overflow (copy button on code blocks)
  - Claude.ai web interface (copy button on responses)

  ## Priority

  High - Essential usability feature for developer workflows

  ## Related Issues

  - Could integrate with Monaco editor's native copy functionality
  - Related to file tree operations (copy file path, copy file content)