feat(reactotron-core-ui): add copy button for nested objects in API response (#1597)

## Please verify the following:

- [x] `yarn build-and-test:local` passes  
- [ ] I have added tests for any new features, if relevant  
- [ ] `README.md` (or relevant documentation) has been updated with your
changes

---

# Describe your PR

Adds a **Copy button for nested objects** in the `TreeView` component
inside the **Response Body** tab.

This allows users to quickly copy the JSON representation of any nested
object in an API response without manually selecting or expanding large
sections of the tree.

---

# Motivation

Previously, Reactotron only allowed copying **top-level values**.  
When API responses contained deeply nested objects, users had to
manually expand the tree and select the text to copy.

This change enables **one-click copying of any nested object**,
improving the developer experience when inspecting API responses.

---

# Implementation

- **TreeView/index.tsx**
  - Accepts an optional `copyToClipboard` prop
  - Renders a `ButtonCopy` next to object-type nodes (e.g. `{3}`)
  - Copies `JSON.stringify(data, null, 2)` when clicked
- Uses `event.stopPropagation()` so clicking the button does not toggle
the node

- **ContentView/index.tsx**
  - Passes `copyToClipboard` down to `TreeView`

- **ApiResponseCommand/index.tsx**
- Provides the existing `copyToClipboard` handler to `ContentView` for
the **Response Body** tab

---

# Test Plan and Preview

1. Open Reactotron and trigger an API request with nested objects  
2. Navigate to the **Response Body** tab  
3. Verify a **Copy** button appears next to nested objects  
4. Click the button and confirm the **prettified JSON** is copied to the
clipboard
5. Ensure clicking **Copy** does **not expand/collapse** the tree node  

<img width="1112" height="1868" alt="image"
src="https://github.com/user-attachments/assets/6839b931-cd94-486b-a82f-29297d79029b"
/>

Co-authored-by: Deepak Mukka <deepak.mukka@gullak.money>

Author: Deepakmukka1

lib/reactotron-core-ui/src/components/ContentView/index.tsx

@@ -21,9 +21,10 @@ interface Props {
   // value: object | string | number | boolean | null | undefined
   value: any
   treeLevel?: number
+  copyToClipboard?: (text: string) => void
 }
 
-export default function ContentView({ value, treeLevel }: Props) {
+export default function ContentView({ value, treeLevel, copyToClipboard }: Props) {
   if (value === null) return <NullContainer>null</NullContainer>
   if (value === undefined) return <UndefinedContainer>undefined</UndefinedContainer>
 
@@ -54,7 +55,7 @@ export default function ContentView({ value, treeLevel }: Props) {
     return isShallow(checkValue) ? (
       makeTable(checkValue)
     ) : (
-      <TreeView value={checkValue} level={treeLevel} />
+      <TreeView value={checkValue} level={treeLevel} copyToClipboard={copyToClipboard} />
     )
   }
 

lib/reactotron-core-ui/src/components/TreeView/index.tsx

@@ -29,6 +29,22 @@ const theme = {
 
 const MutedContainer = styled.span`
   color: ${(props) => props.theme.highlight};
+  display: inline-flex;
+`
+
+const ButtonCopy = styled.button`
+  margin-left: 6px;
+  padding: 0 6px;
+  font-size: 10px;
+  border: none;
+  border-radius: 3px;
+  cursor: pointer;
+  color: ${(props) => props.theme.background};
+  background-color: ${(props) => props.theme.highlight};
+
+  &:hover {
+    opacity: 0.85;
+  }
 `
 
 const getTreeTheme = (baseTheme: ReactotronTheme) => ({
@@ -41,9 +57,10 @@ interface Props {
   // value: object
   value: any
   level?: number
+  copyToClipboard?: (text: string) => void
 }
 
-export default function TreeView({ value, level = 1 }: Props) {
+export default function TreeView({ value, level = 1, copyToClipboard }: Props) {
   const colorScheme = useColorScheme()
 
   return (
@@ -54,7 +71,18 @@ export default function TreeView({ value, level = 1 }: Props) {
       theme={getTreeTheme(themes[colorScheme])}
       getItemString={(type, data, itemType, itemString) => {
         if (type === "Object") {
-          return <MutedContainer>{itemType}</MutedContainer>
+          const handleCopy = copyToClipboard
+            ? (event: React.MouseEvent) => {
+                event.stopPropagation()
+                copyToClipboard(JSON.stringify(data, null, 2))
+              }
+            : undefined
+          return (
+            <MutedContainer>
+              {itemType}
+              {handleCopy && <ButtonCopy onClick={handleCopy}>Copy</ButtonCopy>}
+            </MutedContainer>
+          )
         }
 
         return (

lib/reactotron-core-ui/src/timelineCommands/ApiResponseCommand/index.tsx

@@ -167,7 +167,9 @@ const ApiResponseCommand: FunctionComponent<Props> = ({
         {!!request.params && tabBuilder(Tab.RequestParams, "Request Params")}
         {tabBuilder(Tab.RequestHeaders, "Request Headers")}
       </TabsContainer>
-      {onTab === Tab.ResponseBody && <ContentView value={response.body} />}
+      {onTab === Tab.ResponseBody && (
+        <ContentView value={response.body} copyToClipboard={copyToClipboard} />
+      )}
       {onTab === Tab.ResponseHeaders && <ContentView value={response.headers} />}
       {onTab === Tab.RequestBody && <ContentView value={request.data} treeLevel={1} />}
       {onTab === Tab.RequestParams && <ContentView value={request.params} />}