diff --git a/packages/ui/src/components/session-turn.css b/packages/ui/src/components/session-turn.css
index 581935b3e..abed69897 100644
--- a/packages/ui/src/components/session-turn.css
+++ b/packages/ui/src/components/session-turn.css
@@ -30,6 +30,35 @@
overflow-anchor: none;
}
+ [data-slot="session-turn-user-badges"] {
+ display: flex;
+ flex-shrink: 0;
+ align-items: center;
+ gap: 6px;
+ opacity: 0;
+ transition: opacity 0.15s ease;
+ pointer-events: none;
+
+ &[data-visible="true"] {
+ opacity: 1;
+ pointer-events: auto;
+ }
+ }
+
+ [data-slot="session-turn-badge"] {
+ display: inline-flex;
+ align-items: center;
+ padding: 2px 6px;
+ border-radius: 4px;
+ font-family: var(--font-family-mono);
+ font-size: var(--font-size-x-small);
+ font-weight: var(--font-weight-medium);
+ line-height: var(--line-height-normal);
+ white-space: nowrap;
+ color: var(--text-base);
+ background: var(--surface-raised-base);
+ }
+
[data-slot="session-turn-sticky-title"] {
width: 100%;
position: sticky;
@@ -52,7 +81,8 @@
[data-slot="session-turn-message-header"] {
display: flex;
align-items: center;
- gap: 8px;
+ justify-content: space-between;
+ gap: 12px;
align-self: stretch;
height: 32px;
}
diff --git a/packages/ui/src/components/session-turn.tsx b/packages/ui/src/components/session-turn.tsx
index 075da218b..cca811631 100644
--- a/packages/ui/src/components/session-turn.tsx
+++ b/packages/ui/src/components/session-turn.tsx
@@ -5,6 +5,7 @@ import {
type PermissionRequest,
TextPart,
ToolPart,
+ UserMessage,
} from "@opencode-ai/sdk/v2/client"
import { useData } from "../context"
import { useDiffComponent } from "../context/diff"
@@ -373,6 +374,7 @@ export function SessionTurn(
diffLimit: diffInit,
status: rawStatus(),
duration: duration(),
+ userMessageHovered: false,
})
createEffect(
@@ -473,6 +475,8 @@ export function SessionTurn(
data-slot="session-turn-message-container"
class={props.classes?.container}
style={{ "--sticky-header-height": `${store.stickyHeaderHeight}px` }}
+ onMouseEnter={() => setStore("userMessageHovered", true)}
+ onMouseLeave={() => setStore("userMessageHovered", false)}
>