@linxin666/dsh-pet 0.1.6 → 0.1.8

package/lib/types/client/WhalePet.js

@@ -36,6 +36,7 @@ export function WhalePet(props) {
     const [nameDraft, setNameDraft] = useState('');
     const [dragPos, setDragPos] = useState(null);
     const dragRef = useRef(null);
+    const hideTimerRef = useRef(null);
     const frameRef = useRef({
         track: null,
         index: 0,
@@ -161,6 +162,12 @@ export function WhalePet(props) {
     // `draggedRef` records whether the pointer actually moved, so the browser's
     // trailing click (fired after pointerup) does not pet the whale.
     const draggedRef = useRef(false);
+    const clearHideTimer = () => {
+        if (hideTimerRef.current !== null) {
+            window.clearTimeout(hideTimerRef.current);
+            hideTimerRef.current = null;
+        }
+    };
     const onPointerDown = (e) => {
         e.preventDefault();
         e.target.setPointerCapture?.(e.pointerId);
@@ -191,15 +198,22 @@ export function WhalePet(props) {
     const pos = dragPos ?? { right: display.right, bottom: display.bottom };
     const spriteWidth = Math.round(FRAME_WIDTH * spriteScale);
     const spriteHeight = Math.round(FRAME_HEIGHT * spriteScale);
-    const float = (_jsxs("div", { ref: floatRef, className: styles.float, style: { right: pos.right, bottom: pos.bottom, zIndex: 2147483000 }, onPointerEnter: () => setHovered(true), onPointerLeave: (e) => {
+    const float = (_jsxs("div", { ref: floatRef, className: styles.float, style: { right: pos.right, bottom: pos.bottom, zIndex: 2147483000 }, onPointerEnter: () => {
+            clearHideTimer();
+            setHovered(true);
+        }, onPointerLeave: (e) => {
             // The panel and bubble render OUTSIDE the container's box (absolute,
             // above the sprite), so moving onto them fires pointerleave on the
             // container. Treat a target still inside the container's DOM (the
-            // overflowed panel) as "still hovering".
+            // overflowed panel) as "still hovering"; otherwise give the pointer a
+            // short grace period to reach the panel across the gap above it. 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;
-            setHovered(false);
+            clearHideTimer();
+            hideTimerRef.current = window.setTimeout(() => setHovered(false), 300);
         }, children: [_jsx("div", { ref: spriteRef, className: styles.sprite, style: {
                     width: spriteWidth,
                     height: spriteHeight,
@@ -214,7 +228,12 @@ export function WhalePet(props) {
                     if (draggedRef.current)
                         return;
                     props.onPet();
-                }, role: "button", "aria-label": "whale girl" }), feedback !== null && (_jsx("div", { className: `${styles.bubble} ${feedback.kind === 'feed' ? styles.bubbleFeed : styles.bubblePet}`, children: feedback.text }, feedback.at)), hovered && dragRef.current === null && (_jsx("div", { className: styles.panel, children: renaming ? (_jsxs("div", { className: styles.renameRow, children: [_jsx("input", { className: styles.nameInput, value: nameDraft, maxLength: 20, placeholder: props.t('pet.namePlaceholder'), autoFocus: true, onChange: (e) => setNameDraft(e.target.value), onKeyDown: (e) => {
+                }, role: "button", "aria-label": "whale girl" }), feedback !== null && (_jsx("div", { className: `${styles.bubble} ${feedback.kind === 'feed' ? styles.bubbleFeed : styles.bubblePet}`, children: feedback.text }, feedback.at)), hovered && dragRef.current === null && (_jsx("div", { className: styles.panel, onPointerEnter: () => {
+                    // Reaching the panel (or its bridge) must cancel any hide timer
+                    // the container's pointerleave may have armed while the pointer
+                    // crossed the sliver between the sprite and the panel.
+                    clearHideTimer();
+                }, children: renaming ? (_jsxs("div", { className: styles.renameRow, children: [_jsx("input", { className: styles.nameInput, value: nameDraft, maxLength: 20, placeholder: props.t('pet.namePlaceholder'), autoFocus: true, onChange: (e) => setNameDraft(e.target.value), onKeyDown: (e) => {
                                 if (e.key === 'Enter') {
                                     const trimmed = nameDraft.trim();
                                     if (trimmed !== '') {

package/lib/types/client/index.d.ts

@@ -1,12 +1,12 @@
 /**
- * dsh-pet browser half — registers the whale-girl into the conversation
- * input selector row (the same every-phase row the git branch chip uses) and
- * drives it from the host's same-origin `/api/pet/*` JSON endpoints: poll the
- * host snapshot (~800 ms), forward interactions, persist drag positions. The
- * row anchor mounts the floating pet via portal; when the pet is hidden the
- * anchor becomes the summon button. Anchoring in the selector row (rather
- * than the session-only composer dock band) keeps the pet floating on the
- * new-conversation screen too, where no session exists to scope a slot by.
+ * dsh-pet browser half — mounts the whale-girl as a global floating surface
+ * and drives it from the host's same-origin `/api/pet/*` JSON endpoints: poll
+ * the host snapshot (~800 ms), forward interactions, persist drag positions.
+ * The pet is host-global (no session dimension), so it mounts directly onto
+ * `document.body` via a single React root rather than a session-scoped slot —
+ * on the new-conversation screen no session exists, and a dock-mounted pet
+ * would vanish there (issue #48). When the pet is hidden the entry becomes a
+ * fixed-position summon button.
  * @module @linxin666/dsh-pet/client
  */
 import type { ClientContext } from '@deepseek-ai/dsh-client-runtime/client';
@@ -37,9 +37,9 @@ export interface SettingsPluginItemOwnerProps {
     children?: never;
 }
 /**
- * Client plugin body: register dictionaries, mount the dock entry and poll
- * loop while the plugin is enabled, and seat the settings card in the Web UI
- * plugin group.
+ * Client plugin body: register dictionaries, mount the global pet entry and
+ * poll loop while the plugin is enabled, and seat the settings card in the
+ * Web UI plugin group.
  * @param ctx - client root context.
  */
 export declare function apply(ctx: ClientContext): void;

package/lib/types/client/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/client/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wCAAwC,CAAA;AAsD3E,yBAAyB;AACzB,eAAO,MAAM,MAAM,UAA+D,CAAA;AAElF,qEAAqE;AACrE,YAAY,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAA;AACxE,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC7D,YAAY,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAA;AAEtF,OAAO,QAAQ,kCAAkC,CAAC;IAChD,UAAU,OAAO;QACf;;;;;WAKG;QACH,oBAAoB,EAAE;YAAE,IAAI,EAAE,MAAM,CAAC;YAAC,KAAK,EAAE,MAAM,CAAC;YAAC,KAAK,EAAE,4BAA4B,CAAA;SAAE,CAAA;KAC3F;CACF;AAED,sEAAsE;AACtE,MAAM,WAAW,4BAA4B;IAC3C,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,KAAK,CAAA;CACjB;AAED;;;;;GAKG;AACH,wBAAgB,KAAK,CAAC,GAAG,EAAE,aAAa,GAAG,IAAI,CAkK9C"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/client/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wCAAwC,CAAA;AAwD3E,yBAAyB;AACzB,eAAO,MAAM,MAAM,UAA+D,CAAA;AAElF,qEAAqE;AACrE,YAAY,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAA;AACxE,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC7D,YAAY,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAA;AAEtF,OAAO,QAAQ,kCAAkC,CAAC;IAChD,UAAU,OAAO;QACf;;;;;WAKG;QACH,oBAAoB,EAAE;YAAE,IAAI,EAAE,MAAM,CAAC;YAAC,KAAK,EAAE,MAAM,CAAC;YAAC,KAAK,EAAE,4BAA4B,CAAA;SAAE,CAAA;KAC3F;CACF;AAED,sEAAsE;AACtE,MAAM,WAAW,4BAA4B;IAC3C,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,KAAK,CAAA;CACjB;AAED;;;;;GAKG;AACH,wBAAgB,KAAK,CAAC,GAAG,EAAE,aAAa,GAAG,IAAI,CAmK9C"}

package/lib/types/client/index.js

@@ -1,18 +1,20 @@
 /**
- * dsh-pet browser half — registers the whale-girl into the conversation
- * input selector row (the same every-phase row the git branch chip uses) and
- * drives it from the host's same-origin `/api/pet/*` JSON endpoints: poll the
- * host snapshot (~800 ms), forward interactions, persist drag positions. The
- * row anchor mounts the floating pet via portal; when the pet is hidden the
- * anchor becomes the summon button. Anchoring in the selector row (rather
- * than the session-only composer dock band) keeps the pet floating on the
- * new-conversation screen too, where no session exists to scope a slot by.
+ * dsh-pet browser half — mounts the whale-girl as a global floating surface
+ * and drives it from the host's same-origin `/api/pet/*` JSON endpoints: poll
+ * the host snapshot (~800 ms), forward interactions, persist drag positions.
+ * The pet is host-global (no session dimension), so it mounts directly onto
+ * `document.body` via a single React root rather than a session-scoped slot —
+ * on the new-conversation screen no session exists, and a dock-mounted pet
+ * would vanish there (issue #48). When the pet is hidden the entry becomes a
+ * fixed-position summon button.
  * @module @linxin666/dsh-pet/client
  */
+import { createElement } from 'react';
+import { createRoot } from 'react-dom/client';
 import { createPetStore } from "./pet-store.js";
 import { PetDockEntry } from "./PetDockEntry.js";
 import { PetSettingsCard, PetSettingsCardController } from "./PetSettingsCard.js";
-import { NS, en, zh } from "./locales.js";
+import { NS, en, zh, t } from "./locales.js";
 /** Same-origin JSON fetch helper (GET without body, POST with JSON body). */
 async function petFetch(path, body) {
     const response = await fetch(path, body === undefined
@@ -42,9 +44,9 @@ const PET_SETTINGS_NS = 'pet';
 /** Required services. */
 export const inject = ['slots', 'locale', 'connection', 'settingsScope', 'remote'];
 /**
- * Client plugin body: register dictionaries, mount the dock entry and poll
- * loop while the plugin is enabled, and seat the settings card in the Web UI
- * plugin group.
+ * Client plugin body: register dictionaries, mount the global pet entry and
+ * poll loop while the plugin is enabled, and seat the settings card in the
+ * Web UI plugin group.
  * @param ctx - client root context.
  */
 export function apply(ctx) {
@@ -66,8 +68,8 @@ export function apply(ctx) {
         locale: NS,
         inject: () => petSettings.inject(),
     }, PetSettingsCard));
-    // The dock entry, its store, and the poll loop live while the plugin is
-    // enabled; toggling the setting off hides the pet and stops polling.
+    // The global pet entry, its store, and the poll loop live while the plugin
+    // is enabled; toggling the setting off hides the pet and stops polling.
     let disposeUi;
     const syncUi = () => {
         if (enabled() && disposeUi === undefined) {
@@ -179,19 +181,21 @@ export function apply(ctx) {
                     setFeedback(null);
                 },
             });
-            // The input selector row mounts in EVERY conversation phase (cold
-            // start, blank-session hero, active seat) — the composer dock band
-            // only renders for an active session, which is why the pet used to
-            // vanish on the new-conversation screen.
-            const disposeDock = ctx.slots.inject('conversation.input.selector.context', () => ctx.slots.register({
-                name: 'conversation.input.selector.context',
-                id: 'pet',
-                order: 110,
-                inject: injected,
-                locale: NS,
-            }, PetDockEntry));
+            // The pet is host-global (its state/display/interactions have no session
+            // dimension), and the official rc.6 shell declares no root-scoped slot
+            // for a global floating surface — the dock is session-scoped, so a pet
+            // mounted there would vanish on the new-conversation screen (issue #48).
+            // The entry therefore mounts straight onto document.body via a single
+            // React root for the page lifetime: WhalePet portals itself to body when
+            // visible, and the hidden-state summon button is fixed-positioned.
+            const container = document.createElement('div');
+            container.dataset.dshPetRoot = '';
+            document.body.appendChild(container);
+            const petRoot = createRoot(container);
+            petRoot.render(createElement(PetDockEntry, { ...injected(), t }));
             disposeUi = () => {
-                disposeDock();
+                petRoot.unmount();
+                container.remove();
                 disposePoll();
                 disposeUi = undefined;
             };

package/lib/types/client/locales.d.ts

@@ -92,6 +92,22 @@ export declare const en: {
 export type PetKey = keyof typeof zh;
 /** The settings-card slice of the pet dictionary. */
 export type SettingsCardKey = PetKey;
+/**
+ * Active dictionary, picked by the document language at call time. The pet
+ * mounts as a global floating surface (not a session-scoped slot), so it has
+ * no framework locale seat and resolves its copy the same tiny way the
+ * task-board's DOM-injected surface does.
+ */
+export declare function dictionary(): Record<PetKey, string>;
+/**
+ * Translate a key with optional `{name}` template params. Mirrors the slot
+ * `Translate` contract `(key, params?) => string` so it can be handed to the
+ * same components that used to receive the framework-injected `t` seat. The
+ * key is typed loosely (`string`) so the function is assignable to the slot's
+ * `TranslateNS<'pet'>` (whose key domain also spans the shared common
+ * vocabulary); a missing key degrades to the key itself rather than throwing.
+ */
+export declare function t(key: string, params?: Record<string, unknown>): string;
 declare module '@deepseek-ai/dsh-client-ui-slots' {
     interface LocaleNamespaceMap {
         /** dsh-pet UI copy. */

package/lib/types/client/locales.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"locales.d.ts","sourceRoot":"","sources":["../../../src/client/locales.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,mDAAmD;AACnD,eAAO,MAAM,EAAE,QAAQ,CAAA;AAEvB,oBAAoB;AACpB,eAAO,MAAM,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyCL,CAAA;AAEV,oBAAoB;AACpB,eAAO,MAAM,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyCL,CAAA;AAEV,oCAAoC;AACpC,MAAM,MAAM,MAAM,GAAG,MAAM,OAAO,EAAE,CAAA;AAEpC,qDAAqD;AACrD,MAAM,MAAM,eAAe,GAAG,MAAM,CAAA;AAEpC,OAAO,QAAQ,kCAAkC,CAAC;IAChD,UAAU,kBAAkB;QAC1B,uBAAuB;QACvB,GAAG,EAAE,MAAM,CAAA;KACZ;CACF"}
+{"version":3,"file":"locales.d.ts","sourceRoot":"","sources":["../../../src/client/locales.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,mDAAmD;AACnD,eAAO,MAAM,EAAE,QAAQ,CAAA;AAEvB,oBAAoB;AACpB,eAAO,MAAM,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyCL,CAAA;AAEV,oBAAoB;AACpB,eAAO,MAAM,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyCL,CAAA;AAEV,oCAAoC;AACpC,MAAM,MAAM,MAAM,GAAG,MAAM,OAAO,EAAE,CAAA;AAEpC,qDAAqD;AACrD,MAAM,MAAM,eAAe,GAAG,MAAM,CAAA;AAEpC;;;;;GAKG;AACH,wBAAgB,UAAU,IAAI,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAGnD;AAED;;;;;;;GAOG;AACH,wBAAgB,CAAC,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAQvE;AAED,OAAO,QAAQ,kCAAkC,CAAC;IAChD,UAAU,kBAAkB;QAC1B,uBAAuB;QACvB,GAAG,EAAE,MAAM,CAAA;KACZ;CACF"}

package/lib/types/client/locales.js

@@ -90,3 +90,30 @@ export const en = {
     'settings.saveFailed': 'The deployment did not accept these values; they were left for you to correct.',
     'settings.invalidNumber': 'Enter a number, or leave blank to use the default.',
 };
+/**
+ * Active dictionary, picked by the document language at call time. The pet
+ * mounts as a global floating surface (not a session-scoped slot), so it has
+ * no framework locale seat and resolves its copy the same tiny way the
+ * task-board's DOM-injected surface does.
+ */
+export function dictionary() {
+    const lang = typeof document !== 'undefined' ? document.documentElement.lang : 'zh';
+    return lang.toLowerCase().startsWith('en') ? en : zh;
+}
+/**
+ * Translate a key with optional `{name}` template params. Mirrors the slot
+ * `Translate` contract `(key, params?) => string` so it can be handed to the
+ * same components that used to receive the framework-injected `t` seat. The
+ * key is typed loosely (`string`) so the function is assignable to the slot's
+ * `TranslateNS<'pet'>` (whose key domain also spans the shared common
+ * vocabulary); a missing key degrades to the key itself rather than throwing.
+ */
+export function t(key, params) {
+    let text = dictionary()[key] ?? key;
+    if (params !== undefined) {
+        for (const [name, value] of Object.entries(params)) {
+            text = text.replaceAll(`{${name}}`, String(value));
+        }
+    }
+    return text;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@linxin666/dsh-pet",
   "description": "鲸鱼娘宠物插件 for the dsh web GUI: a soft healing whale-girl companion that reacts to model activity (idle/waiting/thinking/tool/done), with petting/feeding interactions and an affinity score",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "type": "module",
   "engines": {
     "node": "^22.19.0 || >=24.0.0"

package/src/client/PetDockEntry.tsx

@@ -1,15 +1,16 @@
 /**
- * Dock anchor inside `conversation.input.selector.context`: the input
- * selector row mounts in EVERY conversation phase (no-session cold start,
- * the blank-session hero, and the active seat), so the floating pet stays on
- * screen on the new-conversation screen too. While visible it mounts the
- * floating WhalePet (portal); while hidden it renders the summon button.
+ * Global floating pet entry. The pet is host-global (its state, display and
+ * interactions live on `/api/pet/*` endpoints with no session dimension), so
+ * it must not ride a session-scoped slot — on the new-conversation screen no
+ * session exists to scope a slot by, and the pet would vanish (issue #48).
+ * The client half therefore mounts this entry straight onto `document.body`
+ * (see index.ts): while visible it renders the floating WhalePet (a portal),
+ * while hidden it renders a fixed-position summon button.
  * @module @linxin666/dsh-pet/client/PetDockEntry
  */
 
 import { useEffect, useSyncExternalStore, type ReactElement } from 'react'
-import type { PropsLocale, PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots'
-import type {} from '@deepseek-ai/dsh-client-ui-conversation/client'
+import type { PropsLocale } from '@deepseek-ai/dsh-client-ui-slots'
 import type { PetDisplayConfig } from '../persist.ts'
 import type { PetStoreInstance } from './pet-store.ts'
 import { WhalePet } from './WhalePet.tsx'
@@ -38,10 +39,9 @@ export interface PetInjected {
   feedbackDone: () => void
 }
 
-/** Composed props of the dock entry (runtime + locale + injected). */
+/** Composed props of the global pet entry (locale + injected; no slot runtime share). */
 export type PetDockEntryProps =
-  PropsRuntime<'conversation.input.selector.context'>
-  & PetInjected
+  PetInjected
   & PropsLocale<typeof NS>
 
 const DEFAULT_DISPLAY: PetDisplayConfig = { visible: true, size: 160, right: 24, bottom: 20 }
@@ -82,10 +82,17 @@ export function PetDockEntry(props: PetDockEntryProps): ReactElement {
       </span>
     )
   }
+  const display = snapshot?.display ?? DEFAULT_DISPLAY
   return (
     <button
       type="button"
       className={styles.summon}
+      style={{
+        position: 'fixed',
+        right: display.right,
+        bottom: display.bottom,
+        zIndex: 2147483000,
+      }}
       onClick={props.summon}
       data-testid="pet-summon"
     >

package/src/client/WhalePet.tsx

@@ -71,6 +71,7 @@ export function WhalePet(props: WhalePetProps): ReactPortal {
   const [nameDraft, setNameDraft] = useState('')
   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)
   const frameRef = useRef<{ track: PetAnimation | null; index: number; elapsed: number }>({
     track: null,
     index: 0,
@@ -193,6 +194,13 @@ export function WhalePet(props: WhalePetProps): ReactPortal {
   // `draggedRef` records whether the pointer actually moved, so the browser's
   // trailing click (fired after pointerup) does not pet the whale.
   const draggedRef = useRef(false)
+  const clearHideTimer = (): void => {
+    if (hideTimerRef.current !== null) {
+      window.clearTimeout(hideTimerRef.current)
+      hideTimerRef.current = null
+    }
+  }
+
   const onPointerDown = (e: ReactPointerEvent<HTMLDivElement>): void => {
     e.preventDefault()
     ;(e.target as HTMLElement).setPointerCapture?.(e.pointerId)
@@ -226,15 +234,22 @@ export function WhalePet(props: WhalePetProps): ReactPortal {
       ref={floatRef}
       className={styles.float}
       style={{ right: pos.right, bottom: pos.bottom, zIndex: 2147483000 }}
-      onPointerEnter={() => setHovered(true)}
+      onPointerEnter={() => {
+        clearHideTimer()
+        setHovered(true)
+      }}
       onPointerLeave={(e) => {
         // The panel and bubble render OUTSIDE the container's box (absolute,
         // above the sprite), so moving onto them fires pointerleave on the
         // container. Treat a target still inside the container's DOM (the
-        // overflowed panel) as "still hovering".
+        // overflowed panel) as "still hovering"; otherwise give the pointer a
+        // short grace period to reach the panel across the gap above it. 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
-        setHovered(false)
+        clearHideTimer()
+        hideTimerRef.current = window.setTimeout(() => setHovered(false), 300)
       }}
     >
       <div
@@ -267,7 +282,15 @@ export function WhalePet(props: WhalePetProps): ReactPortal {
         </div>
       )}
       {hovered && dragRef.current === null && (
-        <div className={styles.panel}>
+        <div
+          className={styles.panel}
+          onPointerEnter={() => {
+            // Reaching the panel (or its bridge) must cancel any hide timer
+            // the container's pointerleave may have armed while the pointer
+            // crossed the sliver between the sprite and the panel.
+            clearHideTimer()
+          }}
+        >
           {renaming ? (
             <div className={styles.renameRow}>
               <input

package/src/client/index.ts

@@ -1,12 +1,12 @@
 /**
- * dsh-pet browser half — registers the whale-girl into the conversation
- * input selector row (the same every-phase row the git branch chip uses) and
- * drives it from the host's same-origin `/api/pet/*` JSON endpoints: poll the
- * host snapshot (~800 ms), forward interactions, persist drag positions. The
- * row anchor mounts the floating pet via portal; when the pet is hidden the
- * anchor becomes the summon button. Anchoring in the selector row (rather
- * than the session-only composer dock band) keeps the pet floating on the
- * new-conversation screen too, where no session exists to scope a slot by.
+ * dsh-pet browser half — mounts the whale-girl as a global floating surface
+ * and drives it from the host's same-origin `/api/pet/*` JSON endpoints: poll
+ * the host snapshot (~800 ms), forward interactions, persist drag positions.
+ * The pet is host-global (no session dimension), so it mounts directly onto
+ * `document.body` via a single React root rather than a session-scoped slot —
+ * on the new-conversation screen no session exists, and a dock-mounted pet
+ * would vanish there (issue #48). When the pet is hidden the entry becomes a
+ * fixed-position summon button.
  * @module @linxin666/dsh-pet/client
  */
 
@@ -20,10 +20,12 @@ import type {} from '@deepseek-ai/dsh-client-ui-conversation/client'
 import type { PetDisplayConfig } from '../persist.ts'
 import type { PetInteractResult, PetStateView } from '../service.ts'
 import type { PetInteraction } from '../affinity.ts'
+import { createElement } from 'react'
+import { createRoot } from 'react-dom/client'
 import { createPetStore, type PetStoreInstance } from './pet-store.ts'
 import { PetDockEntry, type PetInjected } from './PetDockEntry.tsx'
 import { PetSettingsCard, PetSettingsCardController, type PetSettings } from './PetSettingsCard.tsx'
-import { NS, en, zh } from './locales.ts'
+import { NS, en, zh, t } from './locales.ts'
 
 /** The host pet API as the browser sees it (same-origin JSON endpoints). */
 interface PetHttpApi {
@@ -91,9 +93,9 @@ export interface SettingsPluginItemOwnerProps {
 }
 
 /**
- * Client plugin body: register dictionaries, mount the dock entry and poll
- * loop while the plugin is enabled, and seat the settings card in the Web UI
- * plugin group.
+ * Client plugin body: register dictionaries, mount the global pet entry and
+ * poll loop while the plugin is enabled, and seat the settings card in the
+ * Web UI plugin group.
  * @param ctx - client root context.
  */
 export function apply(ctx: ClientContext): void {
@@ -118,8 +120,8 @@ export function apply(ctx: ClientContext): void {
     inject: () => petSettings.inject(),
   }, PetSettingsCard))
 
-  // The dock entry, its store, and the poll loop live while the plugin is
-  // enabled; toggling the setting off hides the pet and stops polling.
+  // The global pet entry, its store, and the poll loop live while the plugin
+  // is enabled; toggling the setting off hides the pet and stops polling.
   let disposeUi: (() => void) | undefined
   const syncUi = (): void => {
     if (enabled() && disposeUi === undefined) {
@@ -233,21 +235,22 @@ export function apply(ctx: ClientContext): void {
         },
       })
 
-      // The input selector row mounts in EVERY conversation phase (cold
-      // start, blank-session hero, active seat) — the composer dock band
-      // only renders for an active session, which is why the pet used to
-      // vanish on the new-conversation screen.
-      const disposeDock = ctx.slots.inject('conversation.input.selector.context', () =>
-        ctx.slots.register({
-          name: 'conversation.input.selector.context',
-          id: 'pet',
-          order: 110,
-          inject: injected,
-          locale: NS,
-        }, PetDockEntry))
+      // The pet is host-global (its state/display/interactions have no session
+      // dimension), and the official rc.6 shell declares no root-scoped slot
+      // for a global floating surface — the dock is session-scoped, so a pet
+      // mounted there would vanish on the new-conversation screen (issue #48).
+      // The entry therefore mounts straight onto document.body via a single
+      // React root for the page lifetime: WhalePet portals itself to body when
+      // visible, and the hidden-state summon button is fixed-positioned.
+      const container = document.createElement('div')
+      container.dataset.dshPetRoot = ''
+      document.body.appendChild(container)
+      const petRoot = createRoot(container)
+      petRoot.render(createElement(PetDockEntry, { ...injected(), t }))
 
       disposeUi = () => {
-        disposeDock()
+        petRoot.unmount()
+        container.remove()
         disposePoll()
         disposeUi = undefined
       }

package/src/client/locales.ts

@@ -100,6 +100,35 @@ export type PetKey = keyof typeof zh
 /** The settings-card slice of the pet dictionary. */
 export type SettingsCardKey = PetKey
 
+/**
+ * Active dictionary, picked by the document language at call time. The pet
+ * mounts as a global floating surface (not a session-scoped slot), so it has
+ * no framework locale seat and resolves its copy the same tiny way the
+ * task-board's DOM-injected surface does.
+ */
+export function dictionary(): Record<PetKey, string> {
+  const lang = typeof document !== 'undefined' ? document.documentElement.lang : 'zh'
+  return lang.toLowerCase().startsWith('en') ? en : zh
+}
+
+/**
+ * Translate a key with optional `{name}` template params. Mirrors the slot
+ * `Translate` contract `(key, params?) => string` so it can be handed to the
+ * same components that used to receive the framework-injected `t` seat. The
+ * key is typed loosely (`string`) so the function is assignable to the slot's
+ * `TranslateNS<'pet'>` (whose key domain also spans the shared common
+ * vocabulary); a missing key degrades to the key itself rather than throwing.
+ */
+export function t(key: string, params?: Record<string, unknown>): string {
+  let text: string = (dictionary() as Record<string, string>)[key] ?? key
+  if (params !== undefined) {
+    for (const [name, value] of Object.entries(params)) {
+      text = text.replaceAll(`{${name}}`, String(value))
+    }
+  }
+  return text
+}
+
 declare module '@deepseek-ai/dsh-client-ui-slots' {
   interface LocaleNamespaceMap {
     /** dsh-pet UI copy. */

package/src/client/pet.module.css

@@ -60,7 +60,7 @@
 
 .panel {
   position: absolute;
-  bottom: calc(100% + 4px);
+  bottom: 100%;
   background: rgba(15, 23, 42, 0.92);
   border: 1px solid rgba(148, 163, 184, 0.35);
   border-radius: 10px;
@@ -75,6 +75,20 @@
   min-width: 132px;
 }
 
+/* 面板底边与图标顶边之间的 hover 桥接（issue #49）：
+   面板绝对定位在图标上方（bottom: 100%），若两者之间存在哪怕几个
+   像素的间隙，指针滑过间隙时会触发容器的 pointerleave，面板在指针
+   抵达按钮前就收起。这段透明伪元素把命中区向下延伸、覆盖图标顶部，
+   使指针在图标与按钮之间始终停留在 hover 区域内。 */
+.panel::after {
+  content: '';
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  height: 14px;
+}
+
 .rankRow {
   display: flex;
   justify-content: space-between;

package/lib/types/client/slots-augment.d.ts

@@ -1,19 +0,0 @@
-declare module '@deepseek-ai/dsh-client-ui-slots' {
-    interface SlotMap {
-        /**
-         * The input selector context-chip hole: feature chips rendered right
-         * after the workspace selector. Session-maybe: entries stay mounted
-         * without a session and hide themselves when their data source is absent.
-         */
-        'conversation.input.selector.context': {
-            kind: 'list';
-            scope: 'session-maybe';
-            owner: InputSelectorContextOwnerProps;
-        };
-    }
-    /** Owner share of the input selector context-chip hole (empty by contract). */
-    interface InputSelectorContextOwnerProps {
-    }
-}
-export {};
-//# sourceMappingURL=slots-augment.d.ts.map

package/lib/types/client/slots-augment.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"slots-augment.d.ts","sourceRoot":"","sources":["../../../src/client/slots-augment.ts"],"names":[],"mappings":"AAUA,OAAO,QAAQ,kCAAkC,CAAC;IAChD,UAAU,OAAO;QACf;;;;WAIG;QACH,qCAAqC,EAAE;YACrC,IAAI,EAAE,MAAM,CAAA;YACZ,KAAK,EAAE,eAAe,CAAA;YACtB,KAAK,EAAE,8BAA8B,CAAA;SACtC,CAAA;KACF;IAED,+EAA+E;IAC/E,UAAU,8BAA8B;KAAG;CAC5C"}

package/lib/types/client/slots-augment.js

@@ -1 +0,0 @@
-export {};

package/src/client/slots-augment.ts

@@ -1,27 +0,0 @@
-/**
- * Local slot-table augmentation for slots the official NPM SDK
- * (ui-conversation rc.6) does not publish yet, but the running dsh worktree
- * boots with (`conversation.input.selector.*`). Type-only supplement — the
- * runtime surface comes from the dsh profile. Module form (with an import)
- * so TS merges into the package declarations instead of shadowing them.
- * Remove once the SDK ships these slots.
- */
-import type {} from '@deepseek-ai/dsh-client-ui-slots'
-
-declare module '@deepseek-ai/dsh-client-ui-slots' {
-  interface SlotMap {
-    /**
-     * The input selector context-chip hole: feature chips rendered right
-     * after the workspace selector. Session-maybe: entries stay mounted
-     * without a session and hide themselves when their data source is absent.
-     */
-    'conversation.input.selector.context': {
-      kind: 'list'
-      scope: 'session-maybe'
-      owner: InputSelectorContextOwnerProps
-    }
-  }
-
-  /** Owner share of the input selector context-chip hole (empty by contract). */
-  interface InputSelectorContextOwnerProps {}
-}