tweak(ui): show user message meta on hover

Adds a hover-only metadata line under user messages showing agent, provider, model, and timestamp for quicker context.

2 files changed, 32 insertions, 0 deletions

diff --git a/packages/ui/src/components/message-part.css b/packages/ui/src/components/message-part.css
index ebd0e7d58..cd15117a0 100644
--- a/packages/ui/src/components/message-part.css
+++ b/packages/ui/src/components/message-part.css
@@ -119,6 +119,7 @@
     display: flex;
     align-items: center;
     justify-content: flex-end;
+    gap: 10px;
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.15s ease;
@@ -130,6 +131,11 @@
     }
   }
 
+  [data-slot="user-message-meta"] {
+    user-select: none;
+    text-align: right;
+  }
+
   [data-slot="user-message-copy-wrapper"][data-interrupted] {
     gap: 12px;
   }
diff --git a/packages/ui/src/components/message-part.tsx b/packages/ui/src/components/message-part.tsx
index 6c2b2eaec..4425fcbcf 100644
--- a/packages/ui/src/components/message-part.tsx
+++ b/packages/ui/src/components/message-part.tsx
@@ -534,6 +534,27 @@ export function UserMessageDisplay(props: { message: UserMessage; parts: PartTyp
 
   const agents = createMemo(() => (props.parts?.filter((p) => p.type === "agent") as AgentPart[]) ?? [])
 
+  const stamp = createMemo(() => {
+    const created = props.message.time?.created
+    if (typeof created !== "number") return ""
+    const date = new Date(created)
+    const hours = date.getHours()
+    const hour12 = hours % 12 || 12
+    const minute = String(date.getMinutes()).padStart(2, "0")
+    return `${hour12}:${minute} ${hours < 12 ? "AM" : "PM"}`
+  })
+
+  const meta = createMemo(() => {
+    const agent = props.message.agent
+    const items = [
+      agent ? agent[0]?.toUpperCase() + agent.slice(1) : "",
+      props.message.model?.providerID,
+      props.message.model?.modelID,
+      stamp(),
+    ]
+    return items.filter((x) => !!x).join(" \u00B7 ")
+  })
+
   const openImagePreview = (url: string, alt?: string) => {
     dialog.show(() => <ImagePreview src={url} alt={alt} />)
   }
@@ -591,6 +612,11 @@ export function UserMessageDisplay(props: { message: UserMessage; parts: PartTyp
                 {i18n.t("ui.message.interrupted")}
               </span>
             </Show>
+            <Show when={meta()}>
+              <span data-slot="user-message-meta" class="text-12-regular text-text-weak cursor-default">
+                {meta()}
+              </span>
+            </Show>
             <Tooltip
               value={copied() ? i18n.t("ui.message.copied") : i18n.t("ui.message.copy")}
               placement="top"