@linxin666/dsh-pet 0.1.20 → 0.2.0

package/src/client/PetSprite.test.tsx

@@ -5,7 +5,7 @@
  * selection) as composition input, never as submit/cancel (issue #89).
  */
 import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest'
-import { cleanup, fireEvent, render, screen } from '@testing-library/react'
+import { act, cleanup, fireEvent, render, screen } from '@testing-library/react'
 import { PetSprite, type PetSpriteProps } from './PetSprite.tsx'
 import { t } from './locales.ts'
 import type { PetStateView } from '../service.ts'
@@ -27,6 +27,7 @@ function petDefinition(): PetDefinition {
     cell: { width: 192, height: 208 },
     columns: 8,
     rows: [6, 8, 8, 4, 5, 8, 6, 6, 6],
+    atlasRows: 9,
     tracks: {
       idle: track([0, 1, 2, 3, 4, 5], [400, 400, 400, 400, 400, 400]),
       'running-right': track([0, 1, 2, 3, 4, 5, 6, 7], [225, 225, 225, 225, 225, 225, 225, 225]),
@@ -86,6 +87,7 @@ beforeAll(() => {
 
 afterEach(() => {
   cleanup()
+  vi.restoreAllMocks()
 })
 
 /** Render the pet with mocked callbacks; returns the rename and open spys. */
@@ -176,6 +178,131 @@ describe('PetSprite rename input', () => {
     expect(onRename).not.toHaveBeenCalled()
     expect(screen.queryByPlaceholderText('输入新名字')).toBeNull()
   })
+
+  it('ignores Enter between compositionStart and compositionEnd even when isComposing is false (#303)', () => {
+    // WeChat IME (Windows) marks composition keydowns with isComposing ===
+    // false; only the explicit composition events can be trusted.
+    const { onRename } = renderPet()
+    const input = openRename()
+    fireEvent.change(input, { target: { value: '泡泡酱' } })
+    fireEvent.compositionStart(input)
+    fireEvent.keyDown(input, { key: 'Enter' })
+    expect(onRename).not.toHaveBeenCalled()
+    expect(screen.getByPlaceholderText('输入新名字')).toBe(input)
+    fireEvent.compositionEnd(input)
+    fireEvent.keyDown(input, { key: 'Enter' })
+    expect(onRename).toHaveBeenCalledWith('泡泡酱')
+  })
+
+  it("ignores 'Process' keydowns emitted by IMEs mid-composition (#303)", () => {
+    const { onRename } = renderPet()
+    const input = openRename()
+    fireEvent.change(input, { target: { value: '泡泡酱' } })
+    fireEvent.keyDown(input, { key: 'Process' })
+    expect(onRename).not.toHaveBeenCalled()
+    expect(screen.getByPlaceholderText('输入新名字')).toBe(input)
+  })
+
+  it('keeps the rename panel open when the pointer leaves mid-rename (#303)', () => {
+    // An IME candidate window is an OS-level window: moving the pointer onto
+    // it fires pointerleave on the float. The hide timer must not unmount
+    // the input mid-composition (that crashes some IMEs / the renderer).
+    vi.useFakeTimers()
+    try {
+      renderPet()
+      const input = openRename()
+      const float = input.parentElement?.parentElement?.parentElement
+      expect(float).not.toBeNull()
+      fireEvent.pointerOut(float!, { relatedTarget: null })
+      act(() => { vi.advanceTimersByTime(1000) })
+      expect(screen.getByPlaceholderText('输入新名字')).toBe(input)
+      // After the rename ends, hover behavior works again.
+      fireEvent.keyDown(input, { key: 'Escape' })
+      fireEvent.pointerOut(float!, { relatedTarget: null })
+      act(() => { vi.advanceTimersByTime(1000) })
+      expect(screen.queryByText('改名')).toBeNull()
+    } finally {
+      vi.useRealTimers()
+    }
+  })
+})
+
+describe('PetSprite hover panel placement', () => {
+  it('places the panel above when an old saved position leaves no room below', () => {
+    Object.defineProperty(window, 'innerHeight', { configurable: true, value: 900 })
+    vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockImplementation(function (this: HTMLElement) {
+      if (this.style.bottom !== '') {
+        return { top: 720, right: 1256, bottom: 880, left: 1108, width: 148, height: 160, x: 1108, y: 720, toJSON: () => ({}) }
+      }
+      return { top: 888, right: 1259, bottom: 974, left: 1105, width: 154, height: 86, x: 1105, y: 888, toJSON: () => ({}) }
+    })
+
+    renderPet({ display: { ...snapshot.display, bottom: 20 } })
+    fireEvent.pointerOver(screen.getByRole('button', { name: '鲸鱼娘' }))
+
+    const panel = screen.getByText('改名').closest('[data-placement]') as HTMLElement
+    expect(panel.getAttribute('data-placement')).toBe('above')
+    // No bubble above the sprite: the panel keeps its default 8px gap.
+    expect(panel.style.marginBottom).toBe('')
+  })
+
+  it('lifts the above-panel clear of the status bubble instead of overlapping it', () => {
+    // Regression: the fallback above-placement anchored the panel at the
+    // sprite's top edge — the exact region the status bubble occupies — so
+    // the panel covered the bubble. The panel must now ride above it.
+    Object.defineProperty(window, 'innerHeight', { configurable: true, value: 900 })
+    vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockImplementation(function (this: HTMLElement) {
+      if (this.className.includes('bubbleStack')) {
+        // The bubble area (stack wrapping the status bubble): 40px tall.
+        return { top: 650, right: 1200, bottom: 690, left: 1120, width: 80, height: 40, x: 1120, y: 650, toJSON: () => ({}) }
+      }
+      // Sprite (bottom 974 of a 900px viewport) and panel (86px tall).
+      return { top: 888, right: 1259, bottom: 974, left: 1105, width: 154, height: 86, x: 1105, y: 888, toJSON: () => ({}) }
+    })
+
+    renderPet({
+      snapshot: { ...snapshot, bubble: '正在思考' },
+      display: { ...snapshot.display, bottom: 20 },
+    })
+    fireEvent.pointerOver(screen.getByRole('button', { name: '鲸鱼娘' }))
+
+    const panel = screen.getByText('改名').closest('[data-placement]') as HTMLElement
+    expect(panel.getAttribute('data-placement')).toBe('above')
+    // 40px bubble height + 14px (8px base gap + 6px clearance).
+    expect(panel.style.marginBottom).toBe('54px')
+    // The bubble stays rendered while the lifted panel is open.
+    expect(screen.queryByText('正在思考')).not.toBeNull()
+  })
+
+  it('lifts the above-panel clear of the session bubble stack', () => {
+    Object.defineProperty(window, 'innerHeight', { configurable: true, value: 900 })
+    vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockImplementation(function (this: HTMLElement) {
+      // The bubble stack contains buttons, not role=status; spot it by the
+      // session bubble text content being present among its descendants.
+      if (this.textContent === '正在思考正在使用 grep') {
+        // Two stacked bubbles: 88px tall.
+        return { top: 600, right: 1200, bottom: 688, left: 1100, width: 100, height: 88, x: 1100, y: 600, toJSON: () => ({}) }
+      }
+      return { top: 888, right: 1259, bottom: 974, left: 1105, width: 154, height: 86, x: 1105, y: 888, toJSON: () => ({}) }
+    })
+
+    renderPet({
+      snapshot: {
+        ...snapshot,
+        sessions: [
+          { sessionId: 's-a', animation: 'running', phase: 'thinking', bubble: '正在思考' },
+          { sessionId: 's-b', animation: 'running-right', phase: 'tool', bubble: '正在使用 grep' },
+        ],
+      },
+      display: { ...snapshot.display, bottom: 20 },
+    })
+    fireEvent.pointerOver(screen.getByRole('button', { name: '鲸鱼娘' }))
+
+    const panel = screen.getByText('改名').closest('[data-placement]') as HTMLElement
+    expect(panel.getAttribute('data-placement')).toBe('above')
+    // 88px stack height + 14px clearance.
+    expect(panel.style.marginBottom).toBe('102px')
+  })
 })
 
 describe('PetSprite status bubble', () => {
@@ -217,6 +344,36 @@ describe('PetSprite status bubble', () => {
     expect(screen.queryByText('正在使用 grep')).not.toBeNull()
   })
 
+  it('renders the inner whisper beneath the status bubble', () => {
+    renderPet({ snapshot: { ...workingSnapshot, whisper: '哼哧哼哧，大脑转得飞快～' } })
+    // The whisper shows alongside (not instead of) the status copy.
+    expect(screen.queryByText('哼哧哼哧，大脑转得飞快～')).not.toBeNull()
+    expect(screen.queryByText('正在思考')).not.toBeNull()
+  })
+
+  it('renders the whisper alongside the session bubble stack', () => {
+    renderPet({
+      snapshot: {
+        ...workingSnapshot,
+        whisper: '我在这儿陪着你呢，别急别急',
+        sessions: [
+          { sessionId: 's-a', animation: 'running', phase: 'thinking', bubble: '正在思考' },
+        ],
+      },
+    })
+    expect(screen.queryByText('我在这儿陪着你呢，别急别急')).not.toBeNull()
+    expect(screen.queryByText('正在思考')).not.toBeNull()
+  })
+
+  it('lets transient interaction feedback take over the whisper too', () => {
+    renderPet({
+      snapshot: { ...workingSnapshot, whisper: '哼哧哼哧，大脑转得飞快～' },
+      feedback: { text: '摸摸成功', kind: 'pet', at: 1 },
+    })
+    expect(screen.queryByText('摸摸成功')).not.toBeNull()
+    expect(screen.queryByText('哼哧哼哧，大脑转得飞快～')).toBeNull()
+  })
+
   it('lets feedback replace the whole session bubble stack', () => {
     renderPet({
       snapshot: {
@@ -293,4 +450,36 @@ describe('PetSprite definition-driven render', () => {
     fireEvent.pointerOver(screen.getByRole('button', { name: '鲸鱼娘' }))
     expect(screen.queryByText('泡泡')).not.toBeNull()
   })
+
+  it('advances a configured scene sequence after the current track duration', () => {
+    vi.spyOn(window, 'matchMedia').mockReturnValue({
+      matches: false,
+      media: '(prefers-reduced-motion: reduce)',
+      onchange: null,
+      addEventListener: () => {},
+      removeEventListener: () => {},
+      addListener: () => {},
+      removeListener: () => {},
+      dispatchEvent: () => false,
+    })
+    vi.spyOn(performance, 'now').mockReturnValue(0)
+    let nextFrame: FrameRequestCallback | undefined
+    vi.spyOn(window, 'requestAnimationFrame').mockImplementation(callback => {
+      nextFrame = callback
+      return 1
+    })
+    vi.spyOn(window, 'cancelAnimationFrame').mockImplementation(() => {})
+    const definition = petDefinition()
+    definition.sequences = {
+      thinking: ['running', 'waiting', 'running', 'waiting', 'running'],
+    }
+    renderPet({
+      definition,
+      snapshot: { ...snapshot, animation: 'running', phase: 'thinking' },
+    })
+    const sprite = screen.getByRole('button', { name: '鲸鱼娘' })
+    expect(sprite.style.backgroundPosition).toBe('0px -1120px')
+    act(() => { nextFrame?.(1_500) })
+    expect(sprite.style.backgroundPosition).toBe('0px -960px')
+  })
 })

package/src/client/PetSprite.tsx

@@ -9,8 +9,8 @@
  * @module @linxin666/dsh-pet/client/PetSprite
  */
 
-import { useEffect, useRef, useState } from 'react'
-import type { PointerEvent as ReactPointerEvent, ReactPortal } from 'react'
+import { useEffect, useLayoutEffect, useRef, useState } from 'react'
+import type { CSSProperties, PointerEvent as ReactPointerEvent, ReactPortal } from 'react'
 import { createPortal } from 'react-dom'
 import clsx from 'clsx'
 import type { TranslateNS } from '@deepseek-ai/dsh-client-ui-slots'
@@ -19,7 +19,8 @@ import type { PetStateView } from '../service.ts'
 import type { PetDefinition } from '../registry.ts'
 import type { PetFeedback } from './pet-store.ts'
 import { framePosition, rowOfTrack, trimTrack } from './spritesheet.ts'
-import type { PetAnimation } from '../state.ts'
+import { sequenceFrameAt } from './sequences.ts'
+import { animationForPhase, type PetAnimation } from '../state.ts'
 import { NS } from './locales.ts'
 import styles from './pet.module.css'
 
@@ -66,10 +67,22 @@ export function PetSprite(props: PetSpriteProps): ReactPortal {
   const { snapshot, definition, display, feedback } = props
   const spriteRef = useRef<HTMLDivElement | null>(null)
   const floatRef = useRef<HTMLDivElement | null>(null)
+  const panelRef = useRef<HTMLDivElement | null>(null)
+  // Whichever bubble surface is currently rendered (feedback, the session
+  // stack, or the legacy status bubble) — only one exists at a time.
+  const bubbleRef = useRef<HTMLDivElement | null>(null)
   const [imageReady, setImageReady] = useState(false)
   const [hovered, setHovered] = useState(false)
   const [renaming, setRenaming] = useState(false)
+  const [panelAbove, setPanelAbove] = useState(false)
+  // Extra margin-bottom for the above-panel so it stacks clear of the
+  // bubbles instead of overlapping them (both anchor at the sprite's top).
+  const [panelLift, setPanelLift] = useState(0)
   const [nameDraft, setNameDraft] = useState('')
+  // Explicit IME composition tracking: some input methods (WeChat IME on
+  // Windows) report keydowns with isComposing === false mid-composition, so
+  // the native flag alone is not a safe submit/cancel guard (#303).
+  const composingRef = useRef(false)
   const [dragPos, setDragPos] = useState<{ right: number; bottom: number } | null>(null)
   const dragRef = useRef<{ startX: number; startY: number; right: number; bottom: number } | null>(null)
   const hideTimerRef = useRef<number | null>(null)
@@ -83,6 +96,7 @@ export function PetSprite(props: PetSpriteProps): ReactPortal {
   const columns = definition.columns
   const rows = definition.rows
   const tracks = definition.tracks
+  const sequences = definition.sequences
 
   // Load the atlas once; the definition carries the authoritative per-row
   // frame counts and per-track durations, so nothing else is fetched.
@@ -106,14 +120,17 @@ export function PetSprite(props: PetSpriteProps): ReactPortal {
   // its track's first frame instead of animating (presentation-only; the
   // animation state machine is untouched).
   const spriteScale = display.size / cell.height
+  const phase = snapshot?.phase ?? 'idle'
   const animation = snapshot?.animation ?? 'idle'
   const scaleRef = useRef(spriteScale)
   scaleRef.current = spriteScale
   useEffect(() => {
     const reduceMotion = typeof window !== 'undefined'
       && window.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches === true
-    const row = rowOfTrack(animation)
-    const track = trimTrack(tracks[animation], rows[row] ?? tracks[animation].frames.length)
+    const sequence = animation === animationForPhase(phase) ? sequences?.[phase] : undefined
+    const leadAnimation = sequence?.[0] ?? animation
+    const row = rowOfTrack(leadAnimation)
+    const track = trimTrack(tracks[leadAnimation], rows[row] ?? tracks[leadAnimation].frames.length)
     // Paint one static sprite frame up front either way, so the pet is never
     // blank while the loop heat-up runs.
     const leadCol = track.frames[0]!
@@ -124,9 +141,26 @@ export function PetSprite(props: PetSpriteProps): ReactPortal {
     if (reduceMotion) return
     let raf = 0
     let last = performance.now()
+    let sequenceElapsed = 0
     const tick = (ts: number): void => {
       const delta = ts - last
       last = ts
+      if (sequence !== undefined) {
+        sequenceElapsed += delta
+        const current = sequenceFrameAt(sequence, tracks, sequenceElapsed)
+        const currentRow = rowOfTrack(current.animation)
+        const currentTrack = trimTrack(
+          tracks[current.animation],
+          rows[currentRow] ?? tracks[current.animation].frames.length,
+        )
+        const col = currentTrack.frames[current.frameIndex]!
+        const pos = framePosition(cell, columns, currentRow, col, scaleRef.current)
+        if (spriteRef.current !== null) {
+          spriteRef.current.style.backgroundPosition = pos.x + 'px ' + pos.y + 'px'
+        }
+        raf = requestAnimationFrame(tick)
+        return
+      }
       // row/track come from the effect scope: they were computed once above
       // and this effect re-runs when animation/tracks/rows change, so the
       // per-frame recompute (trimTrack slices fresh arrays) is pure waste.
@@ -159,7 +193,7 @@ export function PetSprite(props: PetSpriteProps): ReactPortal {
     }
     raf = requestAnimationFrame(tick)
     return () => cancelAnimationFrame(raf)
-  }, [animation, cell, columns, rows, tracks])
+  }, [animation, phase, cell, columns, rows, tracks, sequences])
 
   // Auto-clear the feedback bubble after its CSS animation. The callback
   // rides a ref so re-renders never reset the timer: the 2s poll rebuilds
@@ -210,16 +244,46 @@ export function PetSprite(props: PetSpriteProps): ReactPortal {
   const pos = dragPos ?? { right: display.right, bottom: display.bottom }
   const spriteWidth = Math.round(cell.width * spriteScale)
   const spriteHeight = Math.round(cell.height * spriteScale)
+
   // Concurrent sessions each render their own bubble (stacked above the
   // sprite); the legacy single 'bubble' is the fallback when the host serves
-  // no per-session list. The hover panel now sits beside the sprite, so the
-  // bubbles stay visible and clickable while hovering — no region swap.
+  // no per-session list. The hover panel normally sits below the sprite, so
+  // the bubbles stay visible and clickable while hovering — no region swap.
   const sessionBubbles = snapshot?.sessions ?? []
   const statusBubble = feedback === null && sessionBubbles.length === 0
     ? snapshot?.bubble
     : undefined
+  // The display session's inner whisper (碎碎念) — short inner-voice copy
+  // woken by the model's output. Interaction feedback takes over the whole
+  // bubble area while it plays, so whispers yield to it like status copy.
+  const whisper = feedback === null ? snapshot?.whisper : undefined
+  const bubblePresent = feedback !== null || sessionBubbles.length > 0 || statusBubble !== undefined || whisper !== undefined
   const displayName = snapshot?.name ?? definition.displayName
 
+  useLayoutEffect(() => {
+    if (!hovered) {
+      setPanelAbove(false)
+      setPanelLift(0)
+      return
+    }
+    const updatePanelPlacement = (): void => {
+      const sprite = spriteRef.current
+      const panel = panelRef.current
+      if (sprite === null || panel === null) return
+      const availableBelow = window.innerHeight - sprite.getBoundingClientRect().bottom
+      const above = availableBelow < panel.getBoundingClientRect().height + 8
+      setPanelAbove(above)
+      // The fallback above-placement shares the sprite's top edge with the
+      // bubble(s); lift the panel by the bubble area's height so the two
+      // never overlap (8px base gap + 6px clearance above the top bubble).
+      const bubbleHeight = above ? bubbleRef.current?.getBoundingClientRect().height ?? 0 : 0
+      setPanelLift(bubbleHeight > 0 ? Math.ceil(bubbleHeight) + 14 : 0)
+    }
+    updatePanelPlacement()
+    window.addEventListener('resize', updatePanelPlacement)
+    return () => window.removeEventListener('resize', updatePanelPlacement)
+  }, [hovered, renaming, pos.right, pos.bottom, display.size, bubblePresent, sessionBubbles.length, feedback])
+
   const float = (
     <div
       ref={floatRef}
@@ -230,16 +294,21 @@ export function PetSprite(props: PetSpriteProps): ReactPortal {
         setHovered(true)
       }}
       onPointerLeave={(e) => {
-        // The panel renders OUTSIDE the container's box (absolute, beside
+        // The panel renders OUTSIDE the container's box (absolute, below
         // the sprite), so moving onto it fires pointerleave on the container.
         // Treat a target still inside the container's DOM (the overflowed
         // panel) as "still hovering"; otherwise give the pointer a short
-        // grace period to reach the panel across the gap beside the sprite.
+        // grace period to reach the panel across the gap below the sprite.
         // The bridge ('.panel::after') keeps the pointer inside the hit
         // area, and the grace period covers a slow mouse crossing the
         // remaining sliver.
         const next = e.relatedTarget
         if (next instanceof Node && floatRef.current?.contains(next)) return
+        // Never auto-hide while the rename box is open: moving the pointer
+        // onto an IME candidate window (an OS-level window outside the
+        // webview) fires pointerleave, and unmounting the input mid-IME-
+        // composition crashes some input methods / the renderer (#303).
+        if (renaming) return
         clearHideTimer()
         hideTimerRef.current = window.setTimeout(() => setHovered(false), 300)
       }}
@@ -251,7 +320,7 @@ export function PetSprite(props: PetSpriteProps): ReactPortal {
           width: spriteWidth,
           height: spriteHeight,
           backgroundImage: imageReady ? 'url(' + definition.atlasUrl + ')' : undefined,
-          backgroundSize: (cell.width * columns * spriteScale) + 'px ' + (cell.height * rows.length * spriteScale) + 'px',
+          backgroundSize: (cell.width * columns * spriteScale) + 'px ' + (cell.height * (definition.atlasRows ?? rows.length) * spriteScale) + 'px',
           backgroundRepeat: 'no-repeat',
           backgroundPosition: '0 0',
           cursor: dragRef.current === null ? 'grab' : 'grabbing',
@@ -269,12 +338,12 @@ export function PetSprite(props: PetSpriteProps): ReactPortal {
         aria-label={definition.displayName}
       />
       {feedback !== null && (
-        <div key={feedback.at} className={clsx(styles.bubble, feedback.kind === 'feed' ? styles.bubbleFeed : styles.bubblePet)}>
+        <div key={feedback.at} ref={bubbleRef} className={clsx(styles.bubble, feedback.kind === 'feed' ? styles.bubbleFeed : styles.bubblePet)}>
           {feedback.text}
         </div>
       )}
-      {feedback === null && sessionBubbles.length > 0 && (
-        <div className={styles.bubbleStack}>
+      {feedback === null && (sessionBubbles.length > 0 || statusBubble !== undefined || whisper !== undefined) && (
+        <div ref={bubbleRef} className={styles.bubbleStack}>
           {sessionBubbles.map(session => (
             <button
               key={session.sessionId}
@@ -286,16 +355,27 @@ export function PetSprite(props: PetSpriteProps): ReactPortal {
               {session.bubble}
             </button>
           ))}
-        </div>
-      )}
-      {statusBubble !== undefined && (
-        <div className={clsx(styles.bubble, styles.bubbleStatus)} role="status" aria-live="polite">
-          {statusBubble}
+          {sessionBubbles.length === 0 && statusBubble !== undefined && (
+            <div className={clsx(styles.bubble, styles.bubbleStatus)} role="status" aria-live="polite">
+              {statusBubble}
+            </div>
+          )}
+          {whisper !== undefined && (
+            // key restarts the entrance animation per fresh whisper.
+            <div key={whisper} className={styles.bubbleWhisper}>
+              {whisper}
+            </div>
+          )}
         </div>
       )}
       {hovered && dragRef.current === null && (
         <div
-          className={styles.panel}
+          ref={panelRef}
+          className={clsx(styles.panel, panelAbove && styles.panelAbove)}
+          data-placement={panelAbove ? 'above' : 'below'}
+          style={panelAbove && panelLift > 0
+            ? ({ marginBottom: panelLift } as CSSProperties)
+            : undefined}
           onPointerEnter={() => {
             // Reaching the panel (or its bridge) must cancel any hide timer
             // the container's pointerleave may have armed while the pointer
@@ -312,12 +392,16 @@ export function PetSprite(props: PetSpriteProps): ReactPortal {
                 placeholder={props.t('pet.namePlaceholder')}
                 autoFocus
                 onChange={(e) => setNameDraft(e.target.value)}
+                onCompositionStart={() => { composingRef.current = true }}
+                onCompositionEnd={() => { composingRef.current = false }}
                 onKeyDown={(e) => {
                   // While an IME composition is active (e.g. selecting a
                   // Chinese candidate), Enter/Escape keydowns belong to the
                   // input method: ignore them so candidate selection can
-                  // neither submit the draft nor close the rename box.
-                  if (e.nativeEvent.isComposing) return
+                  // neither submit the draft nor close the rename box. The
+                  // explicit ref and the 'Process' key cover IMEs that mark
+                  // composition keydowns with isComposing === false (#303).
+                  if (composingRef.current || e.nativeEvent.isComposing || e.key === 'Process') return
                   if (e.key === 'Enter') {
                     const trimmed = nameDraft.trim()
                     if (trimmed !== '') {
@@ -347,11 +431,11 @@ export function PetSprite(props: PetSpriteProps): ReactPortal {
             <>
               <div className={styles.rankRow}>
                 <span className={styles.nameCell}>{displayName}</span>
-                <span>{props.t('pet.rank', { rank: snapshot?.affinity.rank ?? '?' })}</span>
+                <span className={styles.statRank}>{props.t('pet.rank', { rank: snapshot?.affinity.rank ?? '?' })}</span>
               </div>
               <div className={styles.rankRow}>
-                <span>{props.t('pet.treats', { n: snapshot?.treats.stocked ?? 0 })}</span>
-                <span>{props.t('pet.points', { points: snapshot?.affinity.points ?? 0 })}</span>
+                <span className={styles.statTreats}>{props.t('pet.treats', { n: snapshot?.treats.stocked ?? 0 })}</span>
+                <span className={styles.statPoints}>{props.t('pet.points', { points: snapshot?.affinity.points ?? 0 })}</span>
               </div>
               <div className={styles.actions}>
                 <button type="button" className={styles.action} onClick={props.onFeed}>
@@ -361,6 +445,9 @@ export function PetSprite(props: PetSpriteProps): ReactPortal {
                   type="button"
                   className={styles.action}
                   onClick={() => {
+                    // Cancel any pending hide so the rename box cannot
+                    // unmount right as the user starts typing (#303).
+                    clearHideTimer()
                     setNameDraft(displayName)
                     setRenaming(true)
                   }}

package/src/client/PluginSettingsCard.tsx

@@ -56,6 +56,12 @@ export interface PluginSettingsCardProps<TKey extends string = string> {
    * already provides the selection.
    */
   alwaysOpen?: boolean
+  /**
+   * Hide the save/discard footer: cards whose body applies its own changes
+   * immediately (an embedded external settings section) have no staged
+   * edits, so the footer would sit there permanently disabled.
+   */
+  hideFooter?: boolean
   /** The plugin's controls. */
   children: ReactNode
 }
@@ -140,6 +146,9 @@ export function PluginSettingsCard<TKey extends string = string>(props: PluginSe
           <div className={css.body}>
             {!state.writable ? <p className={css.readOnly} role="status">{props.t('settings.readOnly')}</p> : null}
             {props.children}
+            {props.hideFooter === true
+              ? null
+              : (
             <div className={css.footer}>
               {state.failed
                 ? (
@@ -165,6 +174,7 @@ export function PluginSettingsCard<TKey extends string = string>(props: PluginSe
                 {props.t(!state.saving ? 'settings.save' : 'settings.saving')}
               </button>
             </div>
+              )}
           </div>
         )
         : null}

package/src/client/pet-css.test.ts

@@ -0,0 +1,42 @@
+import { readFileSync } from 'node:fs'
+import { describe, expect, it } from 'vitest'
+
+const css = readFileSync(new URL('./pet.module.css', import.meta.url), 'utf8')
+
+describe('pet hover panel css', () => {
+  it('anchors the panel below the pet', () => {
+    const panel = css.match(/\.panel\s*\{([^}]*)\}/)?.[1] ?? ''
+    expect(panel).toContain('top: 100%')
+    expect(panel).toContain('margin-top: 8px')
+    expect(panel).not.toContain('right: 100%')
+  })
+
+  it('extends the hover bridge upward across the panel gap', () => {
+    const bridge = css.match(/\.panel::after\s*\{([^}]*)\}/)?.[1] ?? ''
+    expect(bridge).toContain('bottom: 100%')
+    expect(bridge).toContain('height: 14px')
+  })
+
+  it('styles the whisper bubble as a distinct non-interactive inner voice', () => {
+    const whisper = css.match(/\.bubbleWhisper\s*\{([^}]*)\}/)?.[1] ?? ''
+    expect(whisper).toContain('font-style: italic')
+    expect(whisper).toContain('pointer-events: none')
+    expect(css).toContain('@keyframes pet-whisper-in')
+  })
+
+  it('gives the panel and status bubbles entrance animations', () => {
+    expect(css).toContain('@keyframes pet-panel-in')
+    expect(css).toContain('@keyframes pet-bubble-in')
+    const panel = css.match(/\.panel\s*\{([^}]*)\}/)?.[1] ?? ''
+    expect(panel).toContain('animation: pet-panel-in')
+  })
+
+  it('can place the panel above and bridge the lower gap', () => {
+    const panel = css.match(/\.panelAbove\s*\{([^}]*)\}/)?.[1] ?? ''
+    expect(panel).toContain('bottom: 100%')
+    expect(panel).toContain('margin-bottom: 8px')
+    const bridge = css.match(/\.panelAbove::after\s*\{([^}]*)\}/)?.[1] ?? ''
+    expect(bridge).toContain('top: 100%')
+    expect(bridge).toContain('bottom: auto')
+  })
+})