Skip to content

Add copy button and selectable text to agent code blocks - #3963

Merged
youknowriad merged 2 commits into
trunkfrom
claude/funny-boyd-99d6e2
Jun 26, 2026
Merged

Add copy button and selectable text to agent code blocks#3963
youknowriad merged 2 commits into
trunkfrom
claude/funny-boyd-99d6e2

Conversation

@youknowriad

@youknowriad youknowriad commented Jun 25, 2026

Copy link
Copy Markdown
Contributor

Related issues

  • Related to: none — surfaced while testing the Studio Code agent; no tracking issue.

How AI was used in this PR

Authored end-to-end with Claude Code. It diagnosed two separate root causes (the Electron renderer denies navigator.clipboard, so the agentic-UI copy silently failed; and code blocks needed an explicit user-select since the desks canvas/app shell opt out of selection) and implemented the fix across both markdown renderers plus the connector. Reviewers should sanity-check the new StudioConnector.copyText method and confirm the visual result in light + dark (see note below).

Proposed Changes

When the Studio Code agent renders a code snippet, you previously couldn't reliably select or copy it. This makes code blocks first-class to copy from, in both surfaces that render agent output — the agentic UI conversation and the Studio Code tab:

  • Code blocks are now explicitly selectable (text selection no longer suppressed by the surrounding canvas/app-shell).
  • Each fenced code block gets an always-visible Copy button (top-right) that flips to “Copied” for a moment after use.
  • Copying is routed through the host clipboard via a new StudioConnector.copyText (desktop → main-process clipboard; web → navigator.clipboard). This is why the agentic-UI button now actually copies and updates — the renderer's own navigator.clipboard is denied in the Electron desktop.

Testing Instructions

  1. Open a Studio Code agent session and ask for a code snippet (e.g. “give me a small CSS snippet”).
  2. In the Studio Code tab and in the agentic UI conversation:
    • Select text inside the code block with the mouse — it should highlight.
    • Click the Copy button — it should switch to Copied, and pasting elsewhere should yield the code.
  3. Verify both light and dark appearance of the button.

Pre-merge Checklist

  • Have you checked for TypeScript, React or other console errors? (typecheck, ESLint, and unit tests pass; visual/dark-mode pass still needs a human.)
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@youknowriad
youknowriad force-pushed the claude/funny-boyd-99d6e2 branch from 22fd383 to b077c37 Compare June 25, 2026 18:05
@wpmobilebot

wpmobilebot commented Jun 25, 2026

Copy link
Copy Markdown
Collaborator

📊 Performance Test Results

Comparing 34f4138 vs trunk

app-size

Metric trunk 34f4138 Diff Change
App Size (Mac) 1315.48 MB 1315.49 MB +0.01 MB ⚪ 0.0%

site-editor

Metric trunk 34f4138 Diff Change
load 743 ms 1115 ms +372 ms 🔴 50.1%

site-startup

Metric trunk 34f4138 Diff Change
siteCreation 6497 ms 6543 ms +46 ms ⚪ 0.0%
siteStartup 6578 ms 6576 ms 2 ms ⚪ 0.0%

Results are median values from multiple test runs.

Legend: 🟢 Improvement (faster) | 🔴 Regression (slower) | ⚪ No change (<50ms diff)

@shaunandrews

Copy link
Copy Markdown
Contributor

Love it. Made some tweaks to it. removed the label. Made it a more neutral button. I also added a background so that if text ran underneath it, it didn't obscure.

image

So perhaps we should add some sort of spacing to the top, or reposition the button so it doesn't obscure content. Or maybe we only show it when hovering.

@youknowriad

Copy link
Copy Markdown
Contributor Author

It's funny you're always on dark mode, I'm always on light, so I don't see the issues that you see.

@shaunandrews

Copy link
Copy Markdown
Contributor

I switch constantly throughout the day!

@youknowriad
youknowriad merged commit a9d452b into trunk Jun 26, 2026
11 checks passed
@youknowriad
youknowriad deleted the claude/funny-boyd-99d6e2 branch June 26, 2026 10:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

3 participants