@linxin666/dsh-pet 0.2.0 → 0.2.2

package/src/client/PetSprite.tsx

@@ -73,6 +73,13 @@ export function PetSprite(props: PetSpriteProps): ReactPortal {
   const bubbleRef = useRef<HTMLDivElement | null>(null)
   const [imageReady, setImageReady] = useState(false)
   const [hovered, setHovered] = useState(false)
+  // Multi-session bubble stack: collapsed by default (only the display
+  // session's bubble + a '+N' badge), expanded on stack hover (peek) or by
+  // tapping the badge (pinned, for touch). The display session's bubble
+  // anchors the bottom of the stack and never moves when extras open above
+  // it, so the pointer target cannot flicker.
+  const [stackPeek, setStackPeek] = useState(false)
+  const [stackPinned, setStackPinned] = 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
@@ -134,7 +141,7 @@ export function PetSprite(props: PetSpriteProps): ReactPortal {
     // 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]!
-    const lead = framePosition(cell, columns, row, leadCol, scaleRef.current)
+    const lead = framePosition(cell, row, leadCol, scaleRef.current)
     if (spriteRef.current !== null) {
       spriteRef.current.style.backgroundPosition = lead.x + 'px ' + lead.y + 'px'
     }
@@ -154,7 +161,7 @@ export function PetSprite(props: PetSpriteProps): ReactPortal {
           rows[currentRow] ?? tracks[current.animation].frames.length,
         )
         const col = currentTrack.frames[current.frameIndex]!
-        const pos = framePosition(cell, columns, currentRow, col, scaleRef.current)
+        const pos = framePosition(cell, currentRow, col, scaleRef.current)
         if (spriteRef.current !== null) {
           spriteRef.current.style.backgroundPosition = pos.x + 'px ' + pos.y + 'px'
         }
@@ -185,7 +192,7 @@ export function PetSprite(props: PetSpriteProps): ReactPortal {
         }
       }
       const col = track.frames[st.index]!
-      const pos = framePosition(cell, columns, row, col, scaleRef.current)
+      const pos = framePosition(cell, row, col, scaleRef.current)
       if (spriteRef.current !== null) {
         spriteRef.current.style.backgroundPosition = pos.x + 'px ' + pos.y + 'px'
       }
@@ -217,6 +224,11 @@ export function PetSprite(props: PetSpriteProps): ReactPortal {
     }
   }
 
+  // Clear any pending auto-hide timer on unmount: a stray callback after
+  // teardown reads window through react-dom and failed CI runs with
+  // "window is not defined" (slow-runner timing, PetSprite.test.tsx).
+  useEffect(() => () => clearHideTimer(), [])
+
   const onPointerDown = (e: ReactPointerEvent<HTMLDivElement>): void => {
     e.preventDefault()
     ;(e.target as HTMLElement).setPointerCapture?.(e.pointerId)
@@ -245,21 +257,33 @@ export function PetSprite(props: PetSpriteProps): ReactPortal {
   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 normally sits below the sprite, so
-  // the bubbles stay visible and clickable while hovering — no region swap.
+  // Concurrent sessions share one bubble slot: only the display session
+  // speaks by default, and the rest hide behind a '+N' badge until the stack
+  // is hovered/pinned open. The legacy single 'bubble' is the fallback when
+  // the host serves no per-session list. The hover panel normally sits below
+  // the sprite, so the bubbles stay visible and clickable — no region swap.
   const sessionBubbles = snapshot?.sessions ?? []
+  const stackOpen = stackPeek || stackPinned
+  const collapsed = !stackOpen && sessionBubbles.length > 1
+  const visibleSessions = collapsed ? sessionBubbles.slice(0, 1) : sessionBubbles
   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.
+  // woken by the model's output. Instead of a second bubble of its own, a
+  // fresh whisper takes over the display session's bubble (the stack top, or
+  // the single status bubble) and re-tints it, so the pet never wears two
+  // voices at once. 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
 
+  // A settled session list can no longer stay pinned open.
+  useEffect(() => {
+    if (sessionBubbles.length <= 1) setStackPinned(false)
+  }, [sessionBubbles.length])
+
   useLayoutEffect(() => {
     if (!hovered) {
       setPanelAbove(false)
@@ -282,7 +306,7 @@ export function PetSprite(props: PetSpriteProps): ReactPortal {
     updatePanelPlacement()
     window.addEventListener('resize', updatePanelPlacement)
     return () => window.removeEventListener('resize', updatePanelPlacement)
-  }, [hovered, renaming, pos.right, pos.bottom, display.size, bubblePresent, sessionBubbles.length, feedback])
+  }, [hovered, renaming, pos.right, pos.bottom, display.size, bubblePresent, sessionBubbles.length, stackOpen, feedback])
 
   const float = (
     <div
@@ -343,27 +367,71 @@ export function PetSprite(props: PetSpriteProps): ReactPortal {
         </div>
       )}
       {feedback === null && (sessionBubbles.length > 0 || statusBubble !== undefined || whisper !== undefined) && (
-        <div ref={bubbleRef} className={styles.bubbleStack}>
-          {sessionBubbles.map(session => (
-            <button
-              key={session.sessionId}
-              type="button"
-              className={clsx(styles.bubble, styles.bubbleStatus, styles.bubbleClickable)}
-              title={props.t('pet.openSessionHint')}
-              onClick={() => { props.onOpenSession(session.sessionId) }}
+        <div
+          ref={bubbleRef}
+          className={styles.bubbleStack}
+          onPointerEnter={() => setStackPeek(true)}
+          onPointerLeave={() => setStackPeek(false)}
+        >
+          {visibleSessions.map((session, index) => {
+            // The whisper rides the display session's bubble — the stack's
+            // primary entry (DOM-first, rendered bottom-most by the reversed
+            // column so it stays glued to the sprite when extras open above).
+            // The key swap restarts the entrance animation so the mood change
+            // reads as the bubble re-speaking.
+            const speaksWhisper = index === 0 && whisper !== undefined
+            const bubble = (
+              <button
+                key={speaksWhisper ? 'whisper:' + whisper : session.sessionId}
+                type="button"
+                className={clsx(
+                  styles.bubble,
+                  styles.bubbleStatus,
+                  styles.bubbleClickable,
+                  speaksWhisper && styles.bubbleWhisper,
+                )}
+                title={props.t('pet.openSessionHint')}
+                onClick={() => { props.onOpenSession(session.sessionId) }}
+              >
+                {speaksWhisper ? whisper : session.bubble}
+              </button>
+            )
+            // The primary bubble carries the '+N' badge while other sessions
+            // hide behind it; the badge toggles the pinned (touch) expansion.
+            if (index !== 0 || sessionBubbles.length <= 1) return bubble
+            return (
+              <span key="primary" className={styles.bubbleAnchor}>
+                {bubble}
+                <button
+                  type="button"
+                  className={styles.bubbleMore}
+                  title={stackOpen
+                    ? props.t('pet.collapseSessions')
+                    : props.t('pet.moreSessions', { n: sessionBubbles.length - 1 })}
+                  aria-label={stackOpen
+                    ? props.t('pet.collapseSessions')
+                    : props.t('pet.moreSessions', { n: sessionBubbles.length - 1 })}
+                  aria-expanded={stackOpen}
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    setStackPinned(open => !open)
+                  }}
+                >
+                  {stackOpen ? '×' : '+' + String(sessionBubbles.length - 1)}
+                </button>
+              </span>
+            )
+          })}
+          {sessionBubbles.length === 0 && (statusBubble !== undefined || whisper !== undefined) && (
+            // The key swap (status copy <-> whisper) restarts the entrance
+            // animation on every mood change.
+            <div
+              key={whisper === undefined ? 'status' : 'whisper:' + whisper}
+              className={clsx(styles.bubble, styles.bubbleStatus, whisper !== undefined && styles.bubbleWhisper)}
+              role="status"
+              aria-live="polite"
             >
-              {session.bubble}
-            </button>
-          ))}
-          {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}
+              {whisper ?? statusBubble}
             </div>
           )}
         </div>

package/src/client/PluginSettingsCard.tsx

@@ -8,7 +8,7 @@
  * ui-plugin-config PluginCard in a self-contained slice.
  */
 
-import { useState, type ReactNode } from 'react'
+import { useCallback, useEffect, useLayoutEffect, useRef, useState, type KeyboardEvent, type ReactNode } from 'react'
 import type { CardShell } from './settings-form.ts'
 import css from './settings-card.module.css'
 
@@ -255,6 +255,210 @@ export function ValueField(props: FieldProps & {
   )
 }
 
+const NON_SKIN_BODY_MARKERS = new Set(['dshSkinCenter', 'dshSidebarCollapsed'])
+// 检测使用使用皮肤，用了皮肤退回原生select样式，防止样式冲突。默认外观下使用优化后的select样式。
+function isSkinActive(): boolean {
+  const datasetList = Object.keys(document.body.dataset)
+  const isActive = datasetList.some(key => key.startsWith('dsh') && !NON_SKIN_BODY_MARKERS.has(key))
+  return isActive
+}
+
+interface SelectOption {
+  value: string
+  label: string
+}
+
+const SELECT_CLOSE_MS = 100
+
+/**
+ * The shared dual-mode select control. While an appearance skin is active it
+ * renders the legacy native `<select>` untouched, so element-level skin
+ * selectors keep working; under the default appearance it renders a
+ * self-drawn `role="listbox"` popup whose open/close is transition-animated.
+ * Staged cards reach it through BooleanField/ChoiceField; immediate-apply
+ * editors (the side-card prefs) bind it directly through onEdit.
+ * 双模式下拉框：皮肤激活时用原生 select，默认外观用自绘动画弹层。
+ */
+export function SelectField(props: {
+  id: string
+  options: ReadonlyArray<SelectOption>
+  value: string
+  disabled: boolean
+  invalid: boolean
+  onEdit: (text: string) => void
+}) {
+  const { id, options, value } = props
+  const [open, setOpen] = useState(false)
+  const [closing, setClosing] = useState(false)
+  const [phase, setPhase] = useState<'initial' | 'open'>('initial')
+  const [activeIndex, setActiveIndex] = useState(0)
+  const closeTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
+  const wrapRef = useRef<HTMLDivElement | null>(null)
+  const popupRef = useRef<HTMLDivElement | null>(null)
+
+  const currentIndex = () => {
+    const index = options.findIndex(option => option.value === value)
+    return index >= 0 ? index : 0
+  }
+
+  const close = useCallback(() => {
+    if (closeTimer.current !== undefined) clearTimeout(closeTimer.current)
+    setClosing(true)
+    closeTimer.current = setTimeout(() => {
+      setClosing(false)
+      setOpen(false)
+    }, SELECT_CLOSE_MS)
+  }, [])
+
+  const openPopup = () => {
+    if (closeTimer.current !== undefined) clearTimeout(closeTimer.current)
+    setActiveIndex(currentIndex())
+    setPhase('initial')
+    setClosing(false)
+    setOpen(true)
+  }
+
+  const commit = (index: number) => {
+    const option = options[index]
+    if (option) props.onEdit(option.value)
+    close()
+  }
+
+  const onTriggerClick = () => {
+    if (props.disabled) return
+    if (open && !closing) close()
+    else openPopup()
+  }
+
+  const onKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {
+    if (props.disabled) return
+    const count = options.length
+    switch (event.key) {
+      case 'ArrowDown':
+      case 'ArrowUp':
+      case 'Enter':
+      case ' ':
+        event.preventDefault()
+        if (!open) {
+          openPopup()
+        } else if (!closing) {
+          if (event.key === 'ArrowDown') setActiveIndex(index => (index + 1) % count)
+          else if (event.key === 'ArrowUp') setActiveIndex(index => (index - 1 + count) % count)
+          else commit(activeIndex)
+        }
+        break
+      case 'Escape':
+        if (open) {
+          event.preventDefault()
+          event.stopPropagation()
+          close()
+        }
+        break
+      case 'Tab':
+        if (open) close()
+        break
+    }
+  }
+
+  useEffect(() => () => {
+    if (closeTimer.current !== undefined) clearTimeout(closeTimer.current)
+  }, [])
+  useLayoutEffect(() => {
+    if (open && !closing && phase === 'initial') {
+      void popupRef.current?.offsetHeight
+      setPhase('open')
+    }
+  }, [open, closing, phase])
+
+  useEffect(() => {
+    if (!open) return
+    const onPointerDown = (event: PointerEvent) => {
+      const target = event.target
+      if (target instanceof Node && !wrapRef.current?.contains(target)) close()
+    }
+    document.addEventListener('pointerdown', onPointerDown)
+    return () => document.removeEventListener('pointerdown', onPointerDown)
+  }, [open, close])
+
+  useEffect(() => {
+    if (props.disabled && open) close()
+  }, [props.disabled, open, close])
+
+  // 使用了皮肤则退回原生select样式防止样式冲突。
+  if (isSkinActive()) {
+    return (
+      <select
+        id={id}
+        className={css.select}
+        value={value}
+        disabled={props.disabled}
+        onChange={(event) => { props.onEdit(event.target.value) }}
+      >
+        {options.map(option => (
+          <option key={option.value} value={option.value}>{option.label}</option>
+        ))}
+      </select>
+    )
+  }
+
+  const label = options.find(option => option.value === value)?.label ?? ''
+  const popupClass = closing
+    ? `${css.selectPopup} ${css.selectPopupClose}`
+    : phase === 'open'
+      ? `${css.selectPopup} ${css.selectPopupOpen}`
+      : css.selectPopup
+  return (
+    <div className={css.selectWrap} ref={wrapRef}>
+      <button
+        type="button"
+        id={id}
+        className={`${css.select} ${css.selectButton}`}
+        disabled={props.disabled}
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        aria-activedescendant={open ? `${id}-o${activeIndex}` : undefined}
+        aria-invalid={props.invalid || undefined}
+        onClick={onTriggerClick}
+        onKeyDown={onKeyDown}
+      >
+        <span className={css.selectLabel}>{label}</span>
+        <svg
+          width="14"
+          height="14"
+          viewBox="0 0 14 14"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          className={open ? `${css.selectChevron} ${css.selectChevronOpen}` : css.selectChevron}
+          aria-hidden="true"
+        >
+          <path
+            d="M11.8486 5.5L11.4238 5.92383L8.69727 8.65137C8.44157 8.90706 8.21562 9.13382 8.01172 9.29785C7.79912 9.46883 7.55595 9.61756 7.25 9.66602C7.08435 9.69222 6.91565 9.69222 6.75 9.66602C6.44405 9.61756 6.20088 9.46883 5.98828 9.29785C5.78438 9.13382 5.55843 8.90706 5.30273 8.65137L2.57617 5.92383L2.15137 5.5L3 4.65137L3.42383 5.07617L6.15137 7.80273C6.42595 8.07732 6.59876 8.24849 6.74023 8.3623C6.87291 8.46904 6.92272 8.47813 6.9375 8.48047C6.97895 8.48703 7.02105 8.48703 7.0625 8.48047C7.07728 8.47813 7.12709 8.46904 7.25977 8.3623C7.40124 8.24849 7.57405 8.07732 7.84863 7.80273L10.5762 5.07617L11 4.65137L11.8486 5.5Z"
+            fill="currentColor"
+          />
+        </svg>
+      </button>
+      {open
+        ? (
+          <div className={popupClass} role="listbox" ref={popupRef}>
+            {options.map((option, index) => (
+              <div
+                key={option.value}
+                id={`${id}-o${index}`}
+                role="option"
+                aria-selected={option.value === value}
+                className={`${css.selectOption}${option.value === value ? ` ${css.selectOptionSelected}` : ''}${index === activeIndex && !closing ? ` ${css.selectOptionActive}` : ''}`}
+                onClick={() => { commit(index) }}
+              >
+                {option.label}
+              </div>
+            ))}
+          </div>
+        )
+        : null}
+    </div>
+  )
+}
+
 /** A staged boolean field: 继承 / 开 / 关. */
 export function BooleanField(props: FieldProps & {
   /** Copy for the inherit option. */
@@ -284,17 +488,18 @@ export function BooleanField(props: FieldProps & {
           )
           : null}
       </div>
-      <select
+      <SelectField
         id={props.id}
-        className={css.select}
+        options={[
+          { value: '', label: props.inheritLabel },
+          { value: 'true', label: props.onLabel },
+          { value: 'false', label: props.offLabel },
+        ]}
         value={props.text}
         disabled={props.disabled}
-        onChange={(event) => { props.onEdit(event.target.value) }}
-      >
-        <option value="">{props.inheritLabel}</option>
-        <option value="true">{props.onLabel}</option>
-        <option value="false">{props.offLabel}</option>
-      </select>
+        invalid={props.invalid}
+        onEdit={props.onEdit}
+      />
       <p className={css.hint}>{props.hint}</p>
     </div>
   )
@@ -327,18 +532,14 @@ export function ChoiceField(props: FieldProps & {
           )
           : null}
       </div>
-      <select
+      <SelectField
         id={props.id}
-        className={css.select}
+        options={[{ value: '', label: props.inheritLabel }, ...props.choices]}
         value={props.text}
         disabled={props.disabled}
-        onChange={(event) => { props.onEdit(event.target.value) }}
-      >
-        <option value="">{props.inheritLabel}</option>
-        {props.choices.map(choice => (
-          <option key={choice.value} value={choice.value}>{choice.label}</option>
-        ))}
-      </select>
+        invalid={props.invalid}
+        onEdit={props.onEdit}
+      />
       <p className={props.invalid ? css.invalid : css.hint}>
         {props.invalid ? props.invalidLabel : props.hint}
       </p>

package/src/client/index.test.tsx

@@ -0,0 +1,95 @@
+// @vitest-environment jsdom
+/**
+ * The global pet entry container opts into the L2 semantic attributes
+ * (issue #506): the apply body mounts [data-dsh-pet-root] with
+ * data-dsh-plugin="pet" so skins can target the pet subtree.
+ */
+import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest'
+// The npm SDK's client half is a closure-factory bundle for the GUI's
+// __ModuleLoader__ (not importable under vitest); provide defineStore /
+// createSnapshotStore (same fake-store pattern as the settings-card tests).
+vi.mock('@deepseek-ai/dsh-client-runtime/client', () => ({
+  defineStore: (spec: {
+    init: () => unknown
+    actions: Record<string, (draft: never, ...args: never[]) => void>
+  }) => ({
+    create: () => {
+      let value = spec.init()
+      const listeners = new Set<() => void>()
+      const actions: Record<string, (...args: unknown[]) => void> = {}
+      for (const [name, fn] of Object.entries(spec.actions)) {
+        actions[name] = (...args: unknown[]) => {
+          fn(value as never, ...(args as never[]))
+          for (const listener of listeners) listener()
+        }
+      }
+      return {
+        getSnapshot: () => value,
+        subscribe: (listener: () => void) => {
+          listeners.add(listener)
+          return () => { listeners.delete(listener) }
+        },
+        actions,
+      }
+    },
+  }),
+  createSnapshotStore: (init: unknown) => {
+    let value = init
+    const listeners = new Set<() => void>()
+    return {
+      getSnapshot: () => value,
+      set: (next: unknown) => { value = next; for (const listener of listeners) listener() },
+      update: (mutator: (draft: never) => void) => { mutator(value as never); for (const listener of listeners) listener() },
+      subscribe: (listener: () => void) => { listeners.add(listener); return () => { listeners.delete(listener) } },
+    }
+  },
+}))
+import type { ClientContext } from '@deepseek-ai/dsh-client-runtime/client'
+import { apply } from './index.ts'
+
+beforeAll(() => {
+  document.documentElement.lang = 'zh'
+})
+
+afterEach(() => {
+  document.body.replaceChildren()
+})
+
+/** A minimal client root context: ready settings scope, no-op slot system. */
+function fakeContext(): ClientContext {
+  const scope = {
+    getSnapshot: () => ({
+      status: 'ready',
+      writable: true,
+      value: undefined,
+      base: undefined,
+      user: {},
+      revision: 1,
+      mode: 'host',
+    }),
+    subscribe: () => () => {},
+  }
+  return {
+    effect: (fn: () => unknown) => {
+      const dispose = fn()
+      return typeof dispose === 'function' ? dispose : () => {}
+    },
+    locale: { register: () => () => {} },
+    get: () => undefined,
+    settingsScope: { bind: () => scope },
+    slots: {
+      inject: (_name: string, callback: () => () => void) => callback(),
+      register: () => () => {},
+    },
+    sessions: undefined,
+  } as unknown as ClientContext
+}
+
+describe('pet client apply L2 semantic attributes (#506)', () => {
+  it('mounts the pet root container with data-dsh-plugin="pet"', () => {
+    apply(fakeContext())
+    const root = document.body.querySelector('[data-dsh-pet-root]')
+    expect(root).not.toBeNull()
+    expect(root!.getAttribute('data-dsh-plugin')).toBe('pet')
+  })
+})

package/src/client/index.ts

@@ -292,6 +292,7 @@ export function apply(ctx: ClientContext): void {
       // when visible, and the hidden-state summon button is fixed-positioned.
       const container = document.createElement('div')
       container.dataset.dshPetRoot = ''
+      container.dataset.dshPlugin = 'pet'
       document.body.appendChild(container)
       const petRoot = createRoot(container)
       petRoot.render(createElement(PetDockEntry, { ...injected(), t }))

package/src/client/locales.ts

@@ -20,6 +20,8 @@ export const zh = {
   'pet.state.loading': '宠物正在赶来…',
   'pet.state.error': '宠物迷路了（连接失败）',
   'pet.openSessionHint': '点击跳转到对应会话',
+  'pet.moreSessions': '展开其余 {n} 个会话的气泡',
+  'pet.collapseSessions': '收起会话气泡',
   // 一级设置页（settings.section 席位）。
   'settings.title': '宠物',
   'settings.description': '选择宠物并调整它的显示布局。',
@@ -66,6 +68,8 @@ export const en = {
   'pet.state.loading': 'The pet is on its way…',
   'pet.state.error': 'The pet is lost (connection failed)',
   'pet.openSessionHint': 'Click to jump to this session',
+  'pet.moreSessions': 'Expand {n} more session bubbles',
+  'pet.collapseSessions': 'Collapse session bubbles',
   // First-level settings section (the `settings.section` seat).
   'settings.title': 'Pet',
   'settings.description': 'Pick a pet and tune its display layout.',

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

@@ -17,11 +17,23 @@ describe('pet hover panel css', () => {
     expect(bridge).toContain('height: 14px')
   })
 
-  it('styles the whisper bubble as a distinct non-interactive inner voice', () => {
+  it('keeps the whisper on the shared bubble glass for a unified palette', () => {
     const whisper = css.match(/\.bubbleWhisper\s*\{([^}]*)\}/)?.[1] ?? ''
-    expect(whisper).toContain('font-style: italic')
-    expect(whisper).toContain('pointer-events: none')
+    // Unified palette: the whisper inherits background/border/shadow/color
+    // from .bubble/.bubbleStatus, so a whispering bubble and a status bubble
+    // stacked side by side share the same DeepSeek-blue glass; only the mood
+    // (quotes, letter-spacing, entrance) is overridden.
+    expect(whisper).not.toContain('background')
+    expect(whisper).not.toContain('border')
+    expect(whisper).not.toContain('box-shadow')
+    expect(whisper).not.toContain('color')
+    expect(whisper).toContain('animation: pet-whisper-in')
+    expect(whisper).not.toContain('font-style: italic')
+    expect(whisper).not.toContain('pointer-events')
+    expect(whisper).not.toContain('position:')
     expect(css).toContain('@keyframes pet-whisper-in')
+    // The mood overrides must be declared after .bubbleStatus to win the cascade.
+    expect(css.indexOf('.bubbleWhisper {')).toBeGreaterThan(css.indexOf('.bubbleStatus {'))
   })
 
   it('gives the panel and status bubbles entrance animations', () => {