From ddf1fa01f3ce851ea5ae28e0c871fd2371375ede Mon Sep 17 00:00:00 2001
From: Imane Idrissi <idrissiimanai@yahoo.com>
Date: Mon, 18 May 2026 13:11:42 +0100
Subject: [PATCH 1/5] fix: prevent copy code and copy message buttons from
 overlapping

Move the message-level copy button from an absolute top-right overlay
into the document flow below the content, so it never collides with
the per-code-block copy button. Both buttons are now always visible
for better discoverability.

Fixes #2155
---
 apps/code/src/renderer/components/CodeBlock.tsx    |  5 +----
 .../components/session-update/AgentMessage.tsx     | 14 ++++++++------
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/apps/code/src/renderer/components/CodeBlock.tsx b/apps/code/src/renderer/components/CodeBlock.tsx
index e0722c1cc..edadf77a6 100644
--- a/apps/code/src/renderer/components/CodeBlock.tsx
+++ b/apps/code/src/renderer/components/CodeBlock.tsx
@@ -53,10 +53,7 @@ export function CodeBlock({ children, size = "1" }: CodeBlockProps) {
         variant="ghost"
         color="gray"
         onClick={handleCopy}
-        style={{
-          transition: "opacity 0.15s",
-        }}
-        className="group-hover:!opacity-100 [&]:hover:!opacity-100 absolute top-1 right-1 cursor-pointer opacity-0"
+        className="absolute top-1 right-1 cursor-pointer"
         aria-label="Copy code"
       >
         {copied ? <Check size={14} /> : <Copy size={14} />}
diff --git a/apps/code/src/renderer/features/sessions/components/session-update/AgentMessage.tsx b/apps/code/src/renderer/features/sessions/components/session-update/AgentMessage.tsx
index bfc34014f..c98d08380 100644
--- a/apps/code/src/renderer/features/sessions/components/session-update/AgentMessage.tsx
+++ b/apps/code/src/renderer/features/sessions/components/session-update/AgentMessage.tsx
@@ -149,12 +149,14 @@ export const AgentMessage = memo(function AgentMessage({
   }, [content]);
 
   return (
-    <Box className="group/msg relative py-1 pl-3 text-[13px] [&>*:last-child]:mb-0">
-      <MarkdownRenderer
-        content={content}
-        componentsOverride={agentComponents}
-      />
-      <Box className="absolute top-1 right-1 opacity-0 transition-opacity group-hover/msg:opacity-100">
+    <Box className="py-1 pl-3 text-[13px]">
+      <div className="[&>*:last-child]:mb-0">
+        <MarkdownRenderer
+          content={content}
+          componentsOverride={agentComponents}
+        />
+      </div>
+      <Box className="flex justify-end pt-1">
         <Tooltip content={copied ? "Copied!" : "Copy message"}>
           <IconButton
             size="1"

From f211564aeda8269842ddc65ecaae7387eea13e9c Mon Sep 17 00:00:00 2001
From: Imane Idrissi <idrissiimanai@yahoo.com>
Date: Mon, 18 May 2026 13:45:12 +0100
Subject: [PATCH 2/5] fix: add missing aria-label to message copy button

---
 .../features/sessions/components/session-update/AgentMessage.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/code/src/renderer/features/sessions/components/session-update/AgentMessage.tsx b/apps/code/src/renderer/features/sessions/components/session-update/AgentMessage.tsx
index c98d08380..20fb529eb 100644
--- a/apps/code/src/renderer/features/sessions/components/session-update/AgentMessage.tsx
+++ b/apps/code/src/renderer/features/sessions/components/session-update/AgentMessage.tsx
@@ -163,6 +163,7 @@ export const AgentMessage = memo(function AgentMessage({
             variant="ghost"
             color={copied ? "green" : "gray"}
             onClick={handleCopy}
+            aria-label="Copy message"
           >
             {copied ? <Check size={12} /> : <Copy size={12} />}
           </IconButton>

From 2fdd86c3b5878b462dcba8e0e9d4b362fe349bb7 Mon Sep 17 00:00:00 2001
From: Peter Kirkham <peter@posthog.com>
Date: Tue, 19 May 2026 12:12:07 +0100
Subject: [PATCH 3/5] fix(messages): hover-fade message-level copy button

Generated-By: PostHog Code
Task-Id: 13c4aa51-4374-4926-b128-105424577c26
---
 .../sessions/components/session-update/AgentMessage.tsx       | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/code/src/renderer/features/sessions/components/session-update/AgentMessage.tsx b/apps/code/src/renderer/features/sessions/components/session-update/AgentMessage.tsx
index 20fb529eb..335dd5f6a 100644
--- a/apps/code/src/renderer/features/sessions/components/session-update/AgentMessage.tsx
+++ b/apps/code/src/renderer/features/sessions/components/session-update/AgentMessage.tsx
@@ -149,14 +149,14 @@ export const AgentMessage = memo(function AgentMessage({
   }, [content]);
 
   return (
-    <Box className="py-1 pl-3 text-[13px]">
+    <Box className="group/msg py-1 pl-3 text-[13px]">
       <div className="[&>*:last-child]:mb-0">
         <MarkdownRenderer
           content={content}
           componentsOverride={agentComponents}
         />
       </div>
-      <Box className="flex justify-end pt-1">
+      <Box className="flex justify-end pt-1 opacity-0 transition-opacity group-hover/msg:opacity-100">
         <Tooltip content={copied ? "Copied!" : "Copy message"}>
           <IconButton
             size="1"

From a4ad1969347e0c69b98839090b252a368ff29968 Mon Sep 17 00:00:00 2001
From: Peter Kirkham <peter@posthog.com>
Date: Tue, 19 May 2026 12:23:01 +0100
Subject: [PATCH 4/5] fix(messages): float copy action above message instead of
 in-flow

Generated-By: PostHog Code
Task-Id: 13c4aa51-4374-4926-b128-105424577c26
---
 .../components/session-update/AgentMessage.tsx     | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/apps/code/src/renderer/features/sessions/components/session-update/AgentMessage.tsx b/apps/code/src/renderer/features/sessions/components/session-update/AgentMessage.tsx
index 335dd5f6a..2fb210f4c 100644
--- a/apps/code/src/renderer/features/sessions/components/session-update/AgentMessage.tsx
+++ b/apps/code/src/renderer/features/sessions/components/session-update/AgentMessage.tsx
@@ -149,14 +149,12 @@ export const AgentMessage = memo(function AgentMessage({
   }, [content]);
 
   return (
-    <Box className="group/msg py-1 pl-3 text-[13px]">
-      <div className="[&>*:last-child]:mb-0">
-        <MarkdownRenderer
-          content={content}
-          componentsOverride={agentComponents}
-        />
-      </div>
-      <Box className="flex justify-end pt-1 opacity-0 transition-opacity group-hover/msg:opacity-100">
+    <Box className="group/msg relative py-1 pl-3 text-[13px] [&>*:last-child]:mb-0">
+      <MarkdownRenderer
+        content={content}
+        componentsOverride={agentComponents}
+      />
+      <Box className="-top-3 absolute right-1 z-10 rounded-(--radius-2) border border-(--gray-5) bg-(--gray-1) opacity-0 shadow-sm transition-opacity group-hover/msg:opacity-100">
         <Tooltip content={copied ? "Copied!" : "Copy message"}>
           <IconButton
             size="1"

From 10c6cf68ffde8d77ddd6f7b5a4144462383d31fa Mon Sep 17 00:00:00 2001
From: Peter Kirkham <peter@posthog.com>
Date: Tue, 19 May 2026 12:38:40 +0100
Subject: [PATCH 5/5] fix(messages): float copy action in right gutter outside
 message body

Generated-By: PostHog Code
Task-Id: 13c4aa51-4374-4926-b128-105424577c26
---
 .../sessions/components/session-update/AgentMessage.tsx       | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/code/src/renderer/features/sessions/components/session-update/AgentMessage.tsx b/apps/code/src/renderer/features/sessions/components/session-update/AgentMessage.tsx
index 2fb210f4c..d04d34808 100644
--- a/apps/code/src/renderer/features/sessions/components/session-update/AgentMessage.tsx
+++ b/apps/code/src/renderer/features/sessions/components/session-update/AgentMessage.tsx
@@ -154,7 +154,7 @@ export const AgentMessage = memo(function AgentMessage({
         content={content}
         componentsOverride={agentComponents}
       />
-      <Box className="-top-3 absolute right-1 z-10 rounded-(--radius-2) border border-(--gray-5) bg-(--gray-1) opacity-0 shadow-sm transition-opacity group-hover/msg:opacity-100">
+      <Box className="absolute top-1 left-full ml-2 opacity-0 transition-opacity group-hover/msg:opacity-100">
         <Tooltip content={copied ? "Copied!" : "Copy message"}>
           <IconButton
             size="1"
@@ -163,7 +163,7 @@ export const AgentMessage = memo(function AgentMessage({
             onClick={handleCopy}
             aria-label="Copy message"
           >
-            {copied ? <Check size={12} /> : <Copy size={12} />}
+            {copied ? <Check size={14} /> : <Copy size={14} />}
           </IconButton>
         </Tooltip>
       </Box>