From d5820df03bf69eeca3a3d61ef1ceb7bef0dc93a5 Mon Sep 17 00:00:00 2001
From: ZiyaZhang <199893125+ZiyaZhang@users.noreply.github.com>
Date: Tue, 11 Aug 2026 08:53:39 -0700
Subject: [PATCH] fix(web): stabilize hero whale hover

---
 apps/web/tests/startup-auto-selection.e2e.ts     |  7 +++++++
 .../src/client/skeleton/EmptyHero.tsx            |  4 +++-
 .../src/client/skeleton/HeroShell.module.css     | 16 +++++++++++-----
 3 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/apps/web/tests/startup-auto-selection.e2e.ts b/apps/web/tests/startup-auto-selection.e2e.ts
index bbb064c119..178b3f875c 100644
--- a/apps/web/tests/startup-auto-selection.e2e.ts
+++ b/apps/web/tests/startup-auto-selection.e2e.ts
@@ -68,6 +68,13 @@ describe('web e2e: startup auto-selection', () => {
   it('keeps the resident Hero and composer nodes when the first Workspace session appears', async () => {
     onTestFailed(() => saveFailureShot(page, 'web-e2e-first-workspace-stable-tree'))
     await page.locator(`${ROOT_PHASE}[data-phase="hero"]`).waitFor({ timeout: 15_000 })
+    const headline = page.getByText('Into the Unknown', { exact: true })
+    const fish = headline.locator('xpath=preceding-sibling::span[1]/*[name()="svg"]')
+    const fishHitbox = fish.locator('..')
+    expect(await fish.evaluate(node => getComputedStyle(node).color))
+      .toBe(await headline.evaluate(node => getComputedStyle(node).color))
+    await fishHitbox.hover()
+    expect(await fish.evaluate(node => getComputedStyle(node).animationName)).not.toBe('none')
     await page.evaluate(() => {
       const refs = {
         root: document.querySelector('div[data-phase="hero"]'),
diff --git a/packages/client/ui-conversation/src/client/skeleton/EmptyHero.tsx b/packages/client/ui-conversation/src/client/skeleton/EmptyHero.tsx
index 62ebdd93b4..4865ceecfa 100644
--- a/packages/client/ui-conversation/src/client/skeleton/EmptyHero.tsx
+++ b/packages/client/ui-conversation/src/client/skeleton/EmptyHero.tsx
@@ -118,7 +118,9 @@ export function HeroShell({ t, children }: HeroShellProps) {
       <div className={css.stack}>
         <div className={css.headline}>
           {/* figma 34:10412: fish 34×25 leading the headline, gap 10. */}
-          <FishLogo size={34} className={css.fish} />
+          <span className={css.fishHitbox}>
+            <FishLogo size={34} className={css.fish} />
+          </span>
           <span className={css.headlineText}>{t('hero.headline')}</span>
           <span className={css.previewBadge}>{t('hero.preview')}</span>
         </div>
diff --git a/packages/client/ui-conversation/src/client/skeleton/HeroShell.module.css b/packages/client/ui-conversation/src/client/skeleton/HeroShell.module.css
index 0b95619f92..91dfb4a8a3 100644
--- a/packages/client/ui-conversation/src/client/skeleton/HeroShell.module.css
+++ b/packages/client/ui-conversation/src/client/skeleton/HeroShell.module.css
@@ -61,12 +61,18 @@
   white-space: nowrap;
 }
 
-/* Keep the hero mark in the same primary ink as its headline. */
-.fish {
+/* Keep hover detection on a stationary box while the mark moves within it. */
+.fishHitbox {
   grid-row: 1;
   grid-column: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Keep the hero mark in the same primary ink as its headline. */
+.fish {
   color: var(--dsw-alias-label-primary);
-  transform-box: fill-box;
   transform-origin: 50% 60%;
 }
 
@@ -85,8 +91,8 @@
 }
 
 @media (hover: hover) and (prefers-reduced-motion: no-preference) {
-  .fish:hover {
-    animation: hero-fish-swim 560ms cubic-bezier(0.2, 0.8, 0.2, 1);
+  .fishHitbox:hover .fish {
+    animation: hero-fish-swim var(--ds-transition-duration-slow) var(--ds-ease-in-out);
   }
 }