From 6f090f88bf49998e8ea104268f470c0f09fdf58a Mon Sep 17 00:00:00 2001
From: OpeOginni <brightoginni123@gmail.com>
Date: Thu, 23 Apr 2026 11:59:40 +0200
Subject: [PATCH 1/2] fix(share): message nav hovercard and active state

---
 packages/ui/src/components/message-nav.css | 31 ++++++++-
 packages/ui/src/components/message-nav.tsx | 75 ++++++++++++++++------
 2 files changed, 82 insertions(+), 24 deletions(-)

diff --git a/packages/ui/src/components/message-nav.css b/packages/ui/src/components/message-nav.css
index 130b1f0f7c0f..d7e2fd63bf8c 100644
--- a/packages/ui/src/components/message-nav.css
+++ b/packages/ui/src/components/message-nav.css
@@ -1,3 +1,10 @@
+[data-component="message-nav-hovercard"] {
+  position: relative;
+  display: flex;
+  align-self: flex-start;
+  z-index: 1000;
+}
+
 [data-component="message-nav"] {
   flex-shrink: 0;
   display: flex;
@@ -33,12 +40,14 @@
   justify-content: flex-start;
   height: 12px;
   width: 24px;
+  cursor: pointer;
   border: none;
   background: none;
   padding: 0;
 
   &[data-active] [data-slot="message-nav-tick-line"] {
     background-color: var(--icon-strong-base);
+    height: 2px;
     width: 100%;
   }
 }
@@ -63,7 +72,7 @@
   align-self: stretch;
   width: 100%;
   column-gap: 12px;
-  cursor: default;
+  cursor: pointer;
   border: none;
   background: none;
   padding: 4px 12px;
@@ -81,9 +90,15 @@
 
   &[data-active] {
     color: var(--text-strong);
+    font-weight: 500;
   }
 }
 
+[data-slot="message-nav-item"]:has([data-slot="message-nav-title-preview"][data-active])
+  [data-slot="message-nav-message-button"] {
+  background-color: var(--surface-base-active);
+}
+
 [data-slot="message-nav-item"]:hover [data-slot="message-nav-message-button"] {
   background-color: var(--surface-base);
 }
@@ -96,6 +111,9 @@
 }
 
 .message-nav-tooltip {
+  position: absolute;
+  top: 0;
+  left: calc(100% + 8px);
   z-index: 1000;
 }
 
@@ -104,11 +122,18 @@
   padding: 4px 4px 6px 4px;
   justify-content: center;
   align-items: start;
+  min-width: 248px;
+  border: 1px solid var(--border-weak-base);
   border-radius: var(--radius-md);
-  background: var(--surface-raised-stronger-non-alpha);
-  max-height: calc(100vh - 6rem);
+  background-color: var(--surface-raised-stronger-non-alpha);
+  max-height: min(480px, calc(100vh - 6rem));
   overflow-y: auto;
   overflow-x: hidden;
+  overscroll-behavior: contain;
+
+  [data-component="message-nav"][data-size="normal"] {
+    width: 100%;
+  }
 
   /* border/shadow-xs/base */
   box-shadow:
diff --git a/packages/ui/src/components/message-nav.tsx b/packages/ui/src/components/message-nav.tsx
index 5e297463109d..73034fac0102 100644
--- a/packages/ui/src/components/message-nav.tsx
+++ b/packages/ui/src/components/message-nav.tsx
@@ -1,7 +1,6 @@
 import { UserMessage } from "@opencode-ai/sdk/v2"
-import { ComponentProps, For, Match, Show, splitProps, Switch } from "solid-js"
+import { ComponentProps, For, Match, Show, createSignal, onCleanup, splitProps, Switch } from "solid-js"
 import { DiffChanges } from "./diff-changes"
-import { Tooltip } from "./tooltip"
 import { useI18n } from "../context/i18n"
 
 export function MessageNav(
@@ -14,18 +13,48 @@ export function MessageNav(
   },
 ) {
   const i18n = useI18n()
-  const [local, others] = splitProps(props, ["messages", "current", "size", "onMessageSelect", "getLabel"])
+  const [local, others] = splitProps(props, ["messages", "current", "size", "onMessageSelect", "getLabel", "class"])
+  let closeTimer: number | undefined
 
-  const content = () => (
-    <ul role="list" data-component="message-nav" data-size={local.size} {...others}>
+  const clearCloseTimer = () => {
+    if (!closeTimer) return
+    clearTimeout(closeTimer)
+    closeTimer = undefined
+  }
+
+  const [hovercardOpen, setHovercardOpen] = createSignal(false)
+
+  onCleanup(clearCloseTimer)
+
+  const showHovercard = () => {
+    clearCloseTimer()
+    setHovercardOpen(true)
+  }
+
+  const hideHovercard = () => {
+    clearCloseTimer()
+    closeTimer = window.setTimeout(() => {
+      setHovercardOpen(false)
+      closeTimer = undefined
+    }, 120) as unknown as number
+  }
+
+  const selectMessage = (message: UserMessage) => {
+    clearCloseTimer()
+    setHovercardOpen(false)
+    local.onMessageSelect(message)
+  }
+
+  const content = (className?: string) => (
+    <ul role="list" data-component="message-nav" data-size={local.size} class={className} {...others}>
       <For each={local.messages}>
         {(message) => {
-          const handleClick = () => local.onMessageSelect(message)
+          const handleClick = () => selectMessage(message)
 
           const handleKeyPress = (event: KeyboardEvent) => {
             if (event.key !== "Enter" && event.key !== " ") return
             event.preventDefault()
-            local.onMessageSelect(message)
+            selectMessage(message)
           }
 
           return (
@@ -70,23 +99,27 @@ export function MessageNav(
   return (
     <Switch>
       <Match when={local.size === "compact"}>
-        <Tooltip
-          openDelay={0}
-          placement="right-start"
-          gutter={-40}
-          shift={-10}
-          overlap
-          contentClass="message-nav-tooltip"
-          value={
-            <div data-slot="message-nav-tooltip-content">
-              <MessageNav {...props} size="normal" class="" />
-            </div>
-          }
+        <div
+          data-component="message-nav-hovercard"
+          class={local.class}
+          onPointerEnter={showHovercard}
+          onPointerLeave={hideHovercard}
+          onFocusIn={showHovercard}
+          onFocusOut={(event) => {
+            const next = event.relatedTarget
+            if (next instanceof Node && event.currentTarget.contains(next)) return
+            hideHovercard()
+          }}
         >
           {content()}
-        </Tooltip>
+          <Show when={hovercardOpen()}>
+            <div class="message-nav-tooltip" data-slot="message-nav-tooltip-content">
+              <MessageNav {...props} size="normal" class="" onMessageSelect={selectMessage} />
+            </div>
+          </Show>
+        </div>
       </Match>
-      <Match when={local.size === "normal"}>{content()}</Match>
+      <Match when={local.size === "normal"}>{content(local.class)}</Match>
     </Switch>
   )
 }

From 77affbcdb1c0309de42bb5f80d8c192779908095 Mon Sep 17 00:00:00 2001
From: OpeOginni <brightoginni123@gmail.com>
Date: Thu, 23 Apr 2026 12:31:17 +0200
Subject: [PATCH 2/2] refactor(message-nav): simplify styles and adjust cursor
 behavior

---
 packages/ui/src/components/message-nav.css | 14 ++------------
 1 file changed, 2 insertions(+), 12 deletions(-)

diff --git a/packages/ui/src/components/message-nav.css b/packages/ui/src/components/message-nav.css
index d7e2fd63bf8c..1f63ae6804bb 100644
--- a/packages/ui/src/components/message-nav.css
+++ b/packages/ui/src/components/message-nav.css
@@ -1,7 +1,5 @@
 [data-component="message-nav-hovercard"] {
   position: relative;
-  display: flex;
-  align-self: flex-start;
   z-index: 1000;
 }
 
@@ -40,7 +38,6 @@
   justify-content: flex-start;
   height: 12px;
   width: 24px;
-  cursor: pointer;
   border: none;
   background: none;
   padding: 0;
@@ -72,7 +69,7 @@
   align-self: stretch;
   width: 100%;
   column-gap: 12px;
-  cursor: pointer;
+  cursor: default;
   border: none;
   background: none;
   padding: 4px 12px;
@@ -122,18 +119,11 @@
   padding: 4px 4px 6px 4px;
   justify-content: center;
   align-items: start;
-  min-width: 248px;
-  border: 1px solid var(--border-weak-base);
   border-radius: var(--radius-md);
-  background-color: var(--surface-raised-stronger-non-alpha);
+  background: var(--surface-raised-stronger-non-alpha);
   max-height: min(480px, calc(100vh - 6rem));
   overflow-y: auto;
   overflow-x: hidden;
-  overscroll-behavior: contain;
-
-  [data-component="message-nav"][data-size="normal"] {
-    width: 100%;
-  }
 
   /* border/shadow-xs/base */
   box-shadow: