fix(web): reveal user message metadata on hover

src/web-ui/src/flow_chat/components/modern/UserMessageItem.scss

@@ -68,9 +68,18 @@
   font-variant-numeric: tabular-nums;
   line-height: var(--openbitfun-type-flow-meta-line-height);
   white-space: nowrap;
-  opacity: 1;
+  opacity: 0;
+  visibility: hidden;
   pointer-events: none;
-  margin-inline-end: auto;
+  transition:
+    opacity var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard),
+    visibility var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard);
+}
+
+.user-message-item-shell:hover .user-message-item__timestamp,
+.user-message-item-shell:focus-within .user-message-item__timestamp {
+  opacity: 1;
+  visibility: visible;
 }
 
 .user-message-item__meta {
@@ -115,9 +124,15 @@
 
 .user-message-item__actions {
   @include transcriptLayout.metadata-actions;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard);
+}
+
+.user-message-item-shell:hover .user-message-item__actions,
+.user-message-item-shell:focus-within .user-message-item__actions {
   opacity: 1;
   pointer-events: auto;
-  /* Controls remain available without requiring hover or keyboard focus. */
 }
 
 .user-message-item__blocks {

src/web-ui/src/flow_chat/components/modern/UserMessageItem.test.tsx

@@ -297,6 +297,7 @@ describe('UserMessageItem steering tag', () => {
     expect(editLayout?.contains(imageGallery ?? null)).toBe(false);
     expect(editLayout?.firstElementChild).toBe(editComposer);
     expect(container.querySelectorAll('.user-message-item__images')).toHaveLength(1);
+    expect(container.querySelector('[data-testid="chat-user-message-timestamp"]')).toBeNull();
   });
 
   it('places sent image attachments above the right-aligned text bubble', () => {

src/web-ui/src/flow_chat/components/modern/UserMessageItem.tsx

@@ -675,7 +675,7 @@ export const UserMessageItem = React.memo<UserMessageItemProps>(
         </div>
 
         <div className="user-message-item__meta" data-openbitfun-product-component="user-message-item" data-openbitfun-product-part="meta">
-          {sentTime && sentAtLabel && sentTimestamp !== null && (
+          {!isEditing && sentTime && sentAtLabel && sentTimestamp !== null && (
             <time
               className="user-message-item__timestamp"
               data-openbitfun-product-component="user-message-item"

src/web-ui/src/flow_chat/components/modern/UserMessageItemActions.test.ts

@@ -48,17 +48,20 @@ describe('UserMessageItem metadata visibility', () => {
     expect(stylesheet).not.toContain('min-height: 5.5rem;');
   });
 
-  it('shows the copy, edit, and rollback actions as one always-available cluster', () => {
+  it('reveals the copy, edit, and rollback actions as one hover or focus cluster', () => {
     const stylesheet = readFileSync(
       fileURLToPath(new URL('./UserMessageItem.scss', import.meta.url)),
       'utf8',
     ).replace(/\r\n?/g, '\n');
     const actions = extractBlock(stylesheet, '\n.user-message-item__actions {');
     const shell = extractBlock(stylesheet, '.user-message-item-shell {');
 
-    expect(actions).toContain('opacity: 1;');
-    expect(actions).toContain('pointer-events: auto;');
+    expect(actions).toContain('opacity: 0;');
+    expect(actions).toContain('pointer-events: none;');
+    expect(actions).not.toContain('visibility: hidden;');
     expect(shell).not.toContain('.user-message-item__actions');
+    expect(stylesheet).toContain('.user-message-item-shell:hover .user-message-item__actions,');
+    expect(stylesheet).toContain('.user-message-item-shell:focus-within .user-message-item__actions {\n  opacity: 1;\n  pointer-events: auto;');
 
     expect(stylesheet).toContain([
       '.user-message-item__copy-btn,',
@@ -68,7 +71,7 @@ describe('UserMessageItem metadata visibility', () => {
     expect(stylesheet).not.toContain('.user-message-item__edit-btn {\n  opacity: 1;');
   });
 
-  it('keeps visible metadata in normal flow on the transcript reading column', () => {
+  it('reveals the timestamp beside the actions without shifting the action cluster', () => {
     const stylesheet = readFileSync(
       fileURLToPath(new URL('./UserMessageItem.scss', import.meta.url)),
       'utf8',
@@ -81,9 +84,12 @@ describe('UserMessageItem metadata visibility', () => {
     );
     const metaLayout = extractBlock(sharedLayout, '@mixin metadata-row {');
 
-    expect(timestamp).toContain('opacity: 1;');
+    expect(timestamp).toContain('opacity: 0;');
+    expect(timestamp).toContain('visibility: hidden;');
     expect(timestamp).toContain('pointer-events: none;');
-    expect(timestamp).toContain('margin-inline-end: auto;');
+    expect(timestamp).not.toContain('margin-inline-end: auto;');
+    expect(stylesheet).toContain('.user-message-item-shell:hover .user-message-item__timestamp,');
+    expect(stylesheet).toContain('.user-message-item-shell:focus-within .user-message-item__timestamp {\n  opacity: 1;\n  visibility: visible;');
     const meta = extractBlock(stylesheet, '\n.user-message-item__meta {');
     expect(metaLayout).toContain('display: flex;');
     expect(meta + metaLayout).not.toMatch(/position:\s*(absolute|fixed);/);