feat(cli): add Clickable component and refactor CopyButton

- Add Clickable wrapper component for interactive areas with non-selectable text
- Export makeTextUnselectable utility for edge cases
- Refactor Button to use shared makeTextUnselectable from Clickable
- Refactor CopyButton to encapsulate all copy logic (merged useCopyButton hook)
- Make CopyIcon private/internal to CopyButton
- Simplify message-footer.tsx and message-block.tsx copy button usage
- Document Button/Clickable usage patterns in cli/knowledge.md

Author: brandonkachen

cli/knowledge.md

@@ -174,6 +174,69 @@ For columns that share space equally within a container, use the **flex trio pat
 
 OpenTUI expects plain text content or the `content` prop - it does not handle JSX expressions within text elements.
 
+## Interactive Clickable Elements and Text Selection
+
+When building interactive UI in the CLI, text inside clickable areas should **not** be selectable. Otherwise users accidentally highlight text when clicking buttons, which creates a poor UX.
+
+### Components
+
+**`Button`** (`cli/src/components/button.tsx`) - Primary choice for clickable controls:
+- Automatically makes all nested `<text>`/`<span>` children non-selectable
+- Implements safe click detection via mouseDown/mouseUp tracking (prevents accidental clicks from hover events)
+- Use for standard button-like interactions
+
+**`Clickable`** (`cli/src/components/clickable.tsx`) - For custom interactive regions:
+- Also makes all nested text non-selectable
+- Gives you direct control over mouse events (`onMouseDown`, `onMouseUp`, `onMouseOver`, `onMouseOut`)
+- Use when you need more control than `Button` provides
+
+**`makeTextUnselectable()`** - Exported utility for edge cases:
+- Recursively processes React children to add `selectable={false}` to all `<text>` and `<span>` elements
+- Use when building custom interactive components that can't use `Button` or `Clickable`
+
+### Usage Examples
+
+```tsx
+// ✅ CORRECT: Use Button for clickable controls
+import { Button } from './button'
+
+<Button onClick={handleClick}>
+  <text>Click me</text>
+</Button>
+
+// ✅ CORRECT: Use Clickable for custom mouse handling
+import { Clickable } from './clickable'
+
+<Clickable
+  onMouseDown={handleMouseDown}
+  onMouseOver={() => setHovered(true)}
+  onMouseOut={() => setHovered(false)}
+>
+  <text>Hover or click me</text>
+</Clickable>
+
+// ❌ WRONG: Raw <box> with mouse handlers (text will be selectable!)
+<box onMouseDown={handleClick}>
+  <text>Click me</text>  {/* Text can be accidentally selected */}
+</box>
+```
+
+### When to Use Which
+
+| Scenario | Use |
+|----------|-----|
+| Standard button | `Button` |
+| Link-like clickable text | `Button` |
+| Custom hover/click behavior | `Clickable` |
+| Building a new interactive primitive | `makeTextUnselectable()` |
+
+### Why This Matters
+
+These patterns:
+1. **Prevent accidental text selection** during clicks
+2. **Provide consistent behavior** across all interactive elements
+3. **Give future contributors clear building blocks** - no need to remember to add `selectable={false}` manually
+
 ## Screen Mode and TODO List Positioning
 
 The CLI chat interface adapts its layout based on terminal dimensions:

…/__tests__/unit/copy-icon-button.test.ts …i/src/__tests__/unit/copy-button.test.tscli/src/__tests__/unit/copy-icon-button.test.ts renamed to cli/src/__tests__/unit/copy-button.test.ts cli/src/__tests__/unit/copy-icon-button.test.ts renamed to cli/src/__tests__/unit/copy-button.test.ts

@@ -1,18 +1,20 @@
 import { describe, test, expect } from 'bun:test'
 
 /**
- * Tests for the CopyButton hover state behavior.
+ * Tests for the CopyButton internal hover state behavior.
  *
  * The key behavior being tested:
  * - Hover state should be set when mouse enters and cleared when mouse leaves
  * - When copied, hover state should be cleared and not re-open until mouse re-enters
+ *
+ * These tests verify the state logic that's now internal to the CopyButton component.
  */
 describe('CopyButton hover state behavior', () => {
   test('hover state logic: hover should not open while in copied state', () => {
     let isCopied = false
     let isHovered = false
 
-    // Simulate the handleMouseOver logic from useCopyButton
+    // Simulate the handleMouseOver logic from CopyButton
     const handleMouseOver = () => {
       if (!isCopied) {
         isHovered = true
@@ -38,7 +40,7 @@ describe('CopyButton hover state behavior', () => {
     let isCopied = false
     let isHovered = true
 
-    // Simulate the handleCopy logic from useCopyButton
+    // Simulate the handleCopy logic from CopyButton
     const handleCopy = () => {
       isCopied = true
       isHovered = false
@@ -55,7 +57,7 @@ describe('CopyButton hover state behavior', () => {
   test('hover state logic: mouse out always clears hover', () => {
     let isHovered = true
 
-    // Simulate the handleMouseOut logic from useCopyButton
+    // Simulate the handleMouseOut logic from CopyButton
     const handleMouseOut = () => {
       isHovered = false
     }

cli/src/components/button.tsx

@@ -1,4 +1,8 @@
-import React, { cloneElement, isValidElement, memo, useRef, type ReactElement, type ReactNode } from 'react'
+import { memo, useRef } from 'react'
+
+import { makeTextUnselectable } from './clickable'
+
+import type { ReactNode } from 'react'
 
 interface ButtonProps {
   onClick?: (e?: unknown) => void | Promise<unknown>
@@ -10,33 +14,21 @@ interface ButtonProps {
   [key: string]: unknown
 }
 
-function makeTextUnselectable(node: ReactNode): ReactNode {
-  if (node === null || node === undefined || typeof node === 'boolean') return node
-  if (typeof node === 'string' || typeof node === 'number') return node
-
-  if (Array.isArray(node)) {
-    return node.map((child, idx) => <React.Fragment key={idx}>{makeTextUnselectable(child)}</React.Fragment>)
-  }
-
-  if (!isValidElement(node)) return node
-
-  const el = node as ReactElement
-  const type = el.type
-
-  // Ensure text nodes are not selectable
-  if (typeof type === 'string' && type === 'text') {
-    const nextProps = { ...el.props, selectable: false }
-    const nextChildren = el.props?.children ? makeTextUnselectable(el.props.children) : el.props?.children
-    return cloneElement(el, nextProps, nextChildren)
-  }
-
-  // Recurse into other host elements and components' children
-  const nextChildren = el.props?.children ? makeTextUnselectable(el.props.children) : el.props?.children
-  return cloneElement(el, el.props, nextChildren)
-}
-
-export const Button = memo(({ onClick, onMouseOver, onMouseOut, style, children, ...rest }: ButtonProps) => {
+/**
+ * A button component with proper click detection and non-selectable text.
+ *
+ * Key behavior:
+ * - All nested `<text>`/`<span>` children are made `selectable={false}` via `makeTextUnselectable`
+ * - Uses mouseDown/mouseUp tracking so hover or stray mouse events don't trigger clicks
+ *
+ * When to use:
+ * - Use `Button` for standard button-like interactions (primary choice for clickable controls)
+ * - Use {@link Clickable} when you need direct control over mouse events but still want
+ *   non-selectable text for an interactive region.
+ */
+export const Button = memo(function Button({ onClick, onMouseOver, onMouseOut, style, children, ...rest }: ButtonProps) {
   const processedChildren = makeTextUnselectable(children)
+
   // Track whether mouse down occurred on this element to implement proper click detection
   // This prevents hover from triggering clicks in some terminals
   const mouseDownRef = useRef(false)

cli/src/components/clickable.tsx

@@ -0,0 +1,118 @@
+import React, { cloneElement, isValidElement, memo } from 'react'
+import type { ReactElement, ReactNode } from 'react'
+
+/**
+ * Makes all text content within a React node tree non-selectable.
+ *
+ * This is important for interactive elements (buttons, clickable boxes) because
+ * text inside them should not be selectable when the user clicks - it creates
+ * a poor UX where text gets highlighted during interactions.
+ *
+ * Handles both `<text>` and `<span>` OpenTUI elements by adding `selectable={false}`.
+ *
+ * @example
+ * ```tsx
+ * // Use this when building custom interactive components
+ * const processedChildren = makeTextUnselectable(children)
+ * return <box onMouseDown={handleClick}>{processedChildren}</box>
+ * ```
+ */
+export function makeTextUnselectable(node: ReactNode): ReactNode {
+  if (node === null || node === undefined || typeof node === 'boolean') return node
+  if (typeof node === 'string' || typeof node === 'number') return node
+
+  if (Array.isArray(node)) {
+    return node.map((child, idx) => <React.Fragment key={idx}>{makeTextUnselectable(child)}</React.Fragment>)
+  }
+
+  if (!isValidElement(node)) return node
+
+  const el = node as ReactElement
+  const type = el.type
+
+  // Ensure text and span nodes are not selectable
+  if (typeof type === 'string' && (type === 'text' || type === 'span')) {
+    const nextProps = { ...el.props, selectable: false }
+    const nextChildren = el.props?.children ? makeTextUnselectable(el.props.children) : el.props?.children
+    return cloneElement(el, nextProps, nextChildren)
+  }
+
+  // Recurse into other host elements and components' children
+  const nextChildren = el.props?.children ? makeTextUnselectable(el.props.children) : el.props?.children
+  return cloneElement(el, el.props, nextChildren)
+}
+
+interface ClickableProps {
+  /** Element type to render: 'box' (default) or 'text' */
+  as?: 'box' | 'text'
+  onMouseDown?: (e?: unknown) => void
+  onMouseUp?: (e?: unknown) => void
+  onMouseOver?: () => void
+  onMouseOut?: () => void
+  style?: Record<string, unknown>
+  children?: ReactNode
+  // pass-through for host element props
+  [key: string]: unknown
+}
+
+/**
+ * A wrapper component for any interactive/clickable area in the CLI.
+ *
+ * **Why use this instead of raw `<box>` or `<text>` with mouse handlers?**
+ *
+ * This component automatically makes all text content non-selectable, which is
+ * essential for good UX - users shouldn't accidentally select text when clicking
+ * interactive elements.
+ *
+ * **The `as` prop:**
+ * - `as="box"` (default) - Renders a `<box>` element for layout containers
+ * - `as="text"` - Renders a `<text>` element for inline clickable text
+ *
+ * **When to use `Clickable` vs `Button`:**
+ * - Use `Button` for actual button-like interactions (has click-on-mouseup logic)
+ * - Use `Clickable` for simpler interactive areas where you need direct mouse event control
+ *
+ * @example
+ * ```tsx
+ * // Default: renders <box>
+ * <Clickable onMouseDown={handleClick}>
+ *   <text>Click me</text>
+ * </Clickable>
+ *
+ * // For inline text: renders <text>
+ * <Clickable as="text" onMouseDown={handleCopy}>
+ *   <span>⎘ copy</span>
+ * </Clickable>
+ * ```
+ */
+export const Clickable = memo(function Clickable({
+  as = 'box',
+  onMouseDown,
+  onMouseUp,
+  onMouseOver,
+  onMouseOut,
+  style,
+  children,
+  ...rest
+}: ClickableProps) {
+  const sharedProps = {
+    ...rest,
+    style,
+    onMouseDown,
+    onMouseUp,
+    onMouseOver,
+    onMouseOut,
+  }
+
+  if (as === 'text') {
+    return (
+      <text {...sharedProps} selectable={false}>
+        {children}
+      </text>
+    )
+  }
+
+  // Default: box with processed children
+  const processedChildren = makeTextUnselectable(children)
+  return <box {...sharedProps}>{processedChildren}</box>
+})