feat(cli): add Clickable component and fix button text selection

- 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
- Remove unused textToCopy prop from CopyButton
- Add selectable={false} to copy button text elements in message-block.tsx
- 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:

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>
+})

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

@@ -6,7 +6,6 @@ import { useTimeout } from '../hooks/use-timeout'
 import { copyTextToClipboard } from '../utils/clipboard'
 
 interface CopyButtonProps {
-  textToCopy: string
   isCopied?: boolean
   isHovered?: boolean
   /** Whether to include a leading space before the icon */

cli/src/components/message-block.tsx

@@ -3,6 +3,7 @@ import React, { memo, useCallback, useState, type ReactNode } from 'react'
 
 import { AgentBranchItem } from './agent-branch-item'
 import { Button } from './button'
+import { Clickable } from './clickable'
 import { CopyButton, useCopyButton } from './copy-icon-button'
 import { ImageCard } from './image-card'
 import { ImplementorGroup } from './implementor-row'
@@ -853,7 +854,8 @@ const UserTextWithInlineCopy = memo(
     const copyButton = useCopyButton(content)
 
     return (
-      <text
+      <Clickable
+        as="text"
         key={`message-content-${messageId}`}
         style={{ wrapMode: 'word', fg: textColor }}
         onMouseDown={copyButton.handleCopy}
@@ -868,8 +870,8 @@ const UserTextWithInlineCopy = memo(
             palette={palette}
           />
         </span>
-        <CopyButton textToCopy={content} isCopied={copyButton.isCopied} isHovered={copyButton.isHovered} />
-      </text>
+        <CopyButton isCopied={copyButton.isCopied} isHovered={copyButton.isHovered} />
+      </Clickable>
     )
   },
 )
@@ -902,7 +904,8 @@ const UserBlockTextWithInlineCopy = memo(
     const copyButton = useCopyButton(contentToCopy)
 
     return (
-      <text
+      <Clickable
+        as="text"
         style={{
           wrapMode: 'word',
           fg: textColor,
@@ -921,8 +924,8 @@ const UserBlockTextWithInlineCopy = memo(
             palette={palette}
           />
         </span>
-        <CopyButton textToCopy={contentToCopy} isCopied={copyButton.isCopied} isHovered={copyButton.isHovered} />
-      </text>
+        <CopyButton isCopied={copyButton.isCopied} isHovered={copyButton.isHovered} />
+      </Clickable>
     )
   },
 )

cli/src/components/message-footer.tsx

@@ -2,6 +2,7 @@ import { pluralize } from '@codebuff/common/util/string'
 import { TextAttributes } from '@opentui/core'
 import React, { useCallback, useMemo } from 'react'
 
+import { Clickable } from './clickable'
 import { CopyButton, useCopyButton } from './copy-icon-button'
 import { ElapsedTimer } from './elapsed-timer'
 import { FeedbackIconButton } from './feedback-icon-button'
@@ -130,19 +131,19 @@ export const MessageFooter: React.FC<MessageFooterProps> = ({
     footerItems.push({
       key: 'copy',
       node: (
-        <text
+        <Clickable
+          as="text"
           style={{ wrapMode: 'none' }}
           onMouseDown={copyButton.handleCopy}
           onMouseOver={copyButton.handleMouseOver}
           onMouseOut={copyButton.handleMouseOut}
         >
           <CopyButton
-            textToCopy={textToCopy}
             isCopied={copyButton.isCopied}
             isHovered={copyButton.isHovered}
             leadingSpace={false}
           />
-        </text>
+        </Clickable>
       ),
     })
   }