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)} > @@ -492,6 +496,15 @@ export function SessionTurn( +
+ + {(msg() as UserMessage).agent} + + + {(msg() as UserMessage).model?.modelID} + + {(msg() as UserMessage).variant || "default"} +
{/* User Message */}