@linxin666/dsh-pet 0.1.6 → 0.1.8

package/README.md

@@ -47,8 +47,8 @@ dsh-pet/
 |   |-- persist.ts      # 持久化（$DSH_HOME/pet.json，原子写入）
 |   |-- routes.ts       # /api/pet/* JSON API + /pet/whale/* 素材静态路由
 |   `-- client/         # 浏览器半区
-|       |-- index.ts    # slots 注册 + 轮询（800ms）+ 交互接线（fetch）
-|       |-- PetDockEntry.tsx  # conversation.input.selector.context 挂载点
+|       |-- index.ts    # 全局挂载（createRoot → body）+ 轮询（800ms）+ 交互接线（fetch）
+|       |-- PetDockEntry.tsx  # 全局浮层入口（document.body，无会话/新会话/会话中全程显示）
 |       |-- WhalePet.tsx      # 浮层组件（portal + rAF 帧动画 + 拖动）
 |       |-- spritesheet.ts    # 图集几何 + 每状态动画轨道（帧/时长）
 |       `-- pet.module.css
@@ -61,13 +61,13 @@ dsh-pet/
 ```
 activity/status session 事件（原 working-activity 插件发布） --> PetService（host）
                                                               | /api/pet/* JSON
-conversation.input.selector.context 槽位 <-- 轮询 800ms -- pet-client（浏览器）
+global React root（createRoot → document.body） <-- 轮询 800ms -- pet-client（浏览器）
                                                               |
                                                    WhalePet 浮层（portal + rAF）
 ```
 
 - **状态源**：监听 `activity/status` 会话事件（phase: idle/waiting/thinking/tool/done + 状态短语），由 host 半区消费；该事件曾由 working-activity 插件发布，插件已从本仓库移除，未安装时宠物只随会话生命周期变化。
-- **挂载点**：`conversation.input.selector.context`（list 槽位，输入选择行，无会话/新会话/会话中全程挂载——旧挂载点 `conversation.composer.dock` 只在活跃会话渲染，导致新会话界面看不到宠物），组件内部 `createPortal` 渲染全局浮层。
+- **挂载点**：`document.body`（全局 React root，无会话/新会话/会话中全程显示——旧挂载点 `conversation.composer.dock` 只在活跃会话渲染，导致新会话界面看不到宠物），组件内部 `createPortal` 渲染全局浮层。
 - **渲染**：CSS sprite（background-position）逐帧动画，帧时长来自 `spritesheet.ts` 的轨道定义。
 - **通信**：浏览器 ↔ host 走同源 `/api/pet/*` JSON 端点（state/interact/set-visible/set-config），图集从 `/pet/whale/spritesheet.webp` 加载——RPC 域与 `/plugins/` 静态服务都是平台注册的，插件自足地提供自己的 API 与素材（与 dsh-remote-web-ui 的 `/api/pair` 同一模式）。
 

package/lib/client.js

@@ -4,8 +4,9 @@ window.__ModuleLoader__.load({
 		var module = { exports: {} };
 		var exports = module.exports;
 		Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-		let _deepseek_ai_dsh_client_runtime_client = require("@deepseek-ai/dsh-client-runtime/client");
 		let react = require("react");
+		let react_dom_client = require("react-dom/client");
+		let _deepseek_ai_dsh_client_runtime_client = require("@deepseek-ai/dsh-client-runtime/client");
 		let react_dom = require("react-dom");
 		let react_jsx_runtime = require("react/jsx-runtime");
 		//#region src/client/pet-store.ts
@@ -304,7 +305,7 @@ window.__ModuleLoader__.load({
 		}
 		//#endregion
 		//#region \0dsh-css:/home/runner/work/dsh-web-ui/dsh-web-ui/packages/dsh-pet/src/client/pet.module.css.mjs
-		const css$1 = ".l0P8iq_float{pointer-events:auto;-webkit-user-select:none;user-select:none;flex-direction:column;align-items:center;display:flex;position:fixed}.l0P8iq_sprite{image-rendering:auto;touch-action:none;position:relative}.l0P8iq_bubble{white-space:nowrap;color:#fff;pointer-events:none;border-radius:999px;margin-bottom:6px;padding:4px 10px;font-size:12px;line-height:1.4;animation:2.6s ease-out forwards l0P8iq_pet-bubble-pop;position:absolute;bottom:100%;box-shadow:0 2px 8px #00000040}.l0P8iq_bubblePet{background:#f472b6eb}.l0P8iq_bubbleFeed{background:#38bdf8eb}@keyframes l0P8iq_pet-bubble-pop{0%{opacity:0;transform:translateY(6px)scale(.85)}15%{opacity:1;transform:translateY(0)scale(1.05)}25%{transform:translateY(0)scale(1)}75%{opacity:1}to{opacity:0;transform:translateY(-8px)scale(.95)}}.l0P8iq_panel{color:#e2e8f0;backdrop-filter:blur(6px);background:#0f172aeb;border:1px solid #94a3b859;border-radius:10px;flex-direction:column;gap:6px;min-width:132px;padding:8px 10px;font-size:12px;display:flex;position:absolute;bottom:calc(100% + 4px);box-shadow:0 4px 16px #00000059}.l0P8iq_rankRow{white-space:nowrap;justify-content:space-between;gap:10px;display:flex}.l0P8iq_nameCell{font-weight:600}.l0P8iq_renameRow{align-items:center;gap:6px;display:flex}.l0P8iq_nameInput{color:#e2e8f0;background:#1e293be6;border:1px solid #7dd3fc80;border-radius:6px;outline:none;flex:1;min-width:0;padding:3px 6px;font-size:12px}.l0P8iq_nameInput:focus{border-color:#38bdf8;box-shadow:0 0 0 2px #38bdf873}.l0P8iq_actions{gap:6px;display:flex}.l0P8iq_action{cursor:pointer;color:#0f172a;background:linear-gradient(#7dd3fc,#38bdf8);border:none;border-radius:6px;flex:1;padding:4px 8px;font-size:12px;transition:filter .12s,box-shadow .12s}.l0P8iq_action:hover{filter:brightness(1.08)}.l0P8iq_action:active{filter:brightness(.94)}.l0P8iq_action:focus-visible{outline:none;box-shadow:0 0 0 2px #38bdf8d9}.l0P8iq_summon{color:#7dd3fc;cursor:pointer;background:#0f172abf;border:1px dashed #7dd3fc99;border-radius:999px;padding:2px 10px;font-size:11px;transition:border-color .12s,color .12s,background .12s,box-shadow .12s}.l0P8iq_summon:hover{color:#bae6fd;background:#0f172ae6;border-color:#7dd3fcf2}.l0P8iq_summon:active{color:#7dd3fc;border-color:#7dd3fccc}.l0P8iq_summon:focus-visible{outline:none;box-shadow:0 0 0 2px #38bdf8d9}@media (prefers-reduced-motion:reduce){.l0P8iq_bubble{opacity:1;animation:none}.l0P8iq_action,.l0P8iq_summon{transition:none}}";
+		const css$1 = ".l0P8iq_float{pointer-events:auto;-webkit-user-select:none;user-select:none;flex-direction:column;align-items:center;display:flex;position:fixed}.l0P8iq_sprite{image-rendering:auto;touch-action:none;position:relative}.l0P8iq_bubble{white-space:nowrap;color:#fff;pointer-events:none;border-radius:999px;margin-bottom:6px;padding:4px 10px;font-size:12px;line-height:1.4;animation:2.6s ease-out forwards l0P8iq_pet-bubble-pop;position:absolute;bottom:100%;box-shadow:0 2px 8px #00000040}.l0P8iq_bubblePet{background:#f472b6eb}.l0P8iq_bubbleFeed{background:#38bdf8eb}@keyframes l0P8iq_pet-bubble-pop{0%{opacity:0;transform:translateY(6px)scale(.85)}15%{opacity:1;transform:translateY(0)scale(1.05)}25%{transform:translateY(0)scale(1)}75%{opacity:1}to{opacity:0;transform:translateY(-8px)scale(.95)}}.l0P8iq_panel{color:#e2e8f0;backdrop-filter:blur(6px);background:#0f172aeb;border:1px solid #94a3b859;border-radius:10px;flex-direction:column;gap:6px;min-width:132px;padding:8px 10px;font-size:12px;display:flex;position:absolute;bottom:100%;box-shadow:0 4px 16px #00000059}.l0P8iq_panel:after{content:\"\";height:14px;position:absolute;top:100%;left:0;right:0}.l0P8iq_rankRow{white-space:nowrap;justify-content:space-between;gap:10px;display:flex}.l0P8iq_nameCell{font-weight:600}.l0P8iq_renameRow{align-items:center;gap:6px;display:flex}.l0P8iq_nameInput{color:#e2e8f0;background:#1e293be6;border:1px solid #7dd3fc80;border-radius:6px;outline:none;flex:1;min-width:0;padding:3px 6px;font-size:12px}.l0P8iq_nameInput:focus{border-color:#38bdf8;box-shadow:0 0 0 2px #38bdf873}.l0P8iq_actions{gap:6px;display:flex}.l0P8iq_action{cursor:pointer;color:#0f172a;background:linear-gradient(#7dd3fc,#38bdf8);border:none;border-radius:6px;flex:1;padding:4px 8px;font-size:12px;transition:filter .12s,box-shadow .12s}.l0P8iq_action:hover{filter:brightness(1.08)}.l0P8iq_action:active{filter:brightness(.94)}.l0P8iq_action:focus-visible{outline:none;box-shadow:0 0 0 2px #38bdf8d9}.l0P8iq_summon{color:#7dd3fc;cursor:pointer;background:#0f172abf;border:1px dashed #7dd3fc99;border-radius:999px;padding:2px 10px;font-size:11px;transition:border-color .12s,color .12s,background .12s,box-shadow .12s}.l0P8iq_summon:hover{color:#bae6fd;background:#0f172ae6;border-color:#7dd3fcf2}.l0P8iq_summon:active{color:#7dd3fc;border-color:#7dd3fccc}.l0P8iq_summon:focus-visible{outline:none;box-shadow:0 0 0 2px #38bdf8d9}@media (prefers-reduced-motion:reduce){.l0P8iq_bubble{opacity:1;animation:none}.l0P8iq_action,.l0P8iq_summon{transition:none}}";
 		const tagId$1 = "@linxin666/dsh-pet/pet.module.css";
 		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId$1) + "]") === null) {
 			const tag = document.createElement("style");
@@ -364,6 +365,7 @@ window.__ModuleLoader__.load({
 			const [nameDraft, setNameDraft] = (0, react.useState)("");
 			const [dragPos, setDragPos] = (0, react.useState)(null);
 			const dragRef = (0, react.useRef)(null);
+			const hideTimerRef = (0, react.useRef)(null);
 			const frameRef = (0, react.useRef)({
 				track: null,
 				index: 0,
@@ -440,6 +442,12 @@ window.__ModuleLoader__.load({
 				return () => window.clearTimeout(timer);
 			}, [feedback]);
 			const draggedRef = (0, react.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);
@@ -487,11 +495,15 @@ window.__ModuleLoader__.load({
 					bottom: pos.bottom,
 					zIndex: 2147483e3
 				},
-				onPointerEnter: () => setHovered(true),
+				onPointerEnter: () => {
+					clearHideTimer();
+					setHovered(true);
+				},
 				onPointerLeave: (e) => {
 					const next = e.relatedTarget;
 					if (next instanceof Node && floatRef.current?.contains(next)) return;
-					setHovered(false);
+					clearHideTimer();
+					hideTimerRef.current = window.setTimeout(() => setHovered(false), 300);
 				},
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -522,6 +534,9 @@ window.__ModuleLoader__.load({
 					}, feedback.at),
 					hovered && dragRef.current === null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						className: pet_module_css_default.panel,
+						onPointerEnter: () => {
+							clearHideTimer();
+						},
 						children: renaming ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 							className: pet_module_css_default.renameRow,
 							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
@@ -598,11 +613,13 @@ window.__ModuleLoader__.load({
 		//#endregion
 		//#region src/client/PetDockEntry.tsx
 		/**
-		* 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
 		*/
 		const DEFAULT_DISPLAY = {
@@ -643,9 +660,16 @@ window.__ModuleLoader__.load({
 					t: props.t
 				})
 			});
+			const display = snapshot?.display ?? DEFAULT_DISPLAY;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 				type: "button",
 				className: pet_module_css_default.summon,
+				style: {
+					position: "fixed",
+					right: display.right,
+					bottom: display.bottom,
+					zIndex: 2147483e3
+				},
 				onClick: props.summon,
 				"data-testid": "pet-summon",
 				children: props.t("pet.summon", { name: snapshot?.name ?? "鲸鱼娘" })
@@ -1343,6 +1367,28 @@ window.__ModuleLoader__.load({
 			"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.
+		*/
+		function dictionary() {
+			return (typeof document !== "undefined" ? document.documentElement.lang : "zh").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.
+		*/
+		function t(key, params) {
+			let text = dictionary()[key] ?? key;
+			if (params !== void 0) for (const [name, value] of Object.entries(params)) text = text.replaceAll(`{${name}}`, String(value));
+			return text;
+		}
 		//#endregion
 		//#region src/client/index.ts
 		/** Same-origin JSON fetch helper (GET without body, POST with JSON body). */
@@ -1376,9 +1422,9 @@ window.__ModuleLoader__.load({
 			"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.
 		*/
 		function apply(ctx) {
@@ -1485,15 +1531,17 @@ window.__ModuleLoader__.load({
 							setFeedback(null);
 						}
 					});
-					const disposeDock = ctx.slots.inject("conversation.input.selector.context", () => ctx.slots.register({
-						name: "conversation.input.selector.context",
-						id: "pet",
-						order: 110,
-						inject: injected,
-						locale: "pet"
-					}, PetDockEntry));
+					const container = document.createElement("div");
+					container.dataset.dshPetRoot = "";
+					document.body.appendChild(container);
+					const petRoot = (0, react_dom_client.createRoot)(container);
+					petRoot.render((0, react.createElement)(PetDockEntry, {
+						...injected(),
+						t
+					}));
 					disposeUi = () => {
-						disposeDock();
+						petRoot.unmount();
+						container.remove();
 						disposePoll();
 						disposeUi = void 0;
 					};