@linxin666/dsh-pet 0.1.19 → 0.2.0

package/lib/client.js

@@ -62,21 +62,55 @@ window.__ModuleLoader__.load({
 			return n;
 		}
 		//#endregion
-		//#region src/client/spritesheet.ts
-		/** Row index of one animation track (the fixed 9-row contract). */
-		function rowOfTrack(animation) {
+		//#region src/state.ts
+		/**
+		* Map one activity phase onto the animation contract.
+		* - thinking → `running` and tool → `running-right` (focused work).
+		* - review → `review` while answer text is streaming.
+		* - waiting → `waiting` (expectant pose, needs user input).
+		* - done → `jumping` (celebration), then back to `idle` after the window.
+		* - failed → `failed` briefly, then back to `idle`.
+		* - idle → `idle` (calm breathing loop).
+		*/
+		function animationForPhase(phase) {
+			switch (phase) {
+				case "thinking": return "running";
+				case "tool": return "running-right";
+				case "review": return "review";
+				case "waiting": return "waiting";
+				case "done": return "jumping";
+				case "failed": return "failed";
+				case "idle": return "idle";
+			}
+		}
+		/** The spritesheet row index for one animation track. */
+		function rowOf(animation) {
 			return {
-				idle: 0,
+				"idle": 0,
 				"running-right": 1,
 				"running-left": 2,
-				waving: 3,
-				jumping: 4,
-				failed: 5,
-				waiting: 6,
-				running: 7,
-				review: 8
+				"waving": 3,
+				"jumping": 4,
+				"failed": 5,
+				"waiting": 6,
+				"running": 7,
+				"review": 8
 			}[animation];
 		}
+		//#endregion
+		//#region src/client/spritesheet.ts
+		/**
+		* Spritesheet geometry helpers — parameterized by the pet definition the
+		* host serves over '/api/pet/pets', so the browser half renders any registry
+		* entry without per-pet code. The per-track tables (frames, durations, loop,
+		* fallback) also come from the registry; these helpers only place frames,
+		* guard track lengths, and map the fixed 9-row animation contract.
+		* @module @linxin666/dsh-pet/client/spritesheet
+		*/
+		/** Row index of one animation track (the fixed 9-row contract). */
+		function rowOfTrack(animation) {
+			return rowOf(animation);
+		}
 		/**
 		* Background-position (px) of one frame cell within the scaled atlas.
 		* The background image is scaled by `scale` (element size ÷ cell size), and
@@ -106,8 +140,32 @@ window.__ModuleLoader__.load({
 			};
 		}
 		//#endregion
+		//#region src/client/sequences.ts
+		/** Resolve the active track and frame after elapsed milliseconds of a looping sequence. */
+		function sequenceFrameAt(sequence, tracks, elapsedMs) {
+			const itemDurations = sequence.map((animation) => tracks[animation].durations.reduce((sum, value) => sum + value, 0));
+			const sequenceDuration = itemDurations.reduce((sum, value) => sum + value, 0);
+			let offset = Math.max(0, elapsedMs) % sequenceDuration;
+			let itemIndex = 0;
+			while (itemIndex < sequence.length - 1 && offset >= itemDurations[itemIndex]) {
+				offset -= itemDurations[itemIndex];
+				itemIndex += 1;
+			}
+			const animation = sequence[itemIndex];
+			const track = tracks[animation];
+			let frameIndex = 0;
+			while (frameIndex < track.frames.length - 1 && offset >= track.durations[frameIndex]) {
+				offset -= track.durations[frameIndex];
+				frameIndex += 1;
+			}
+			return {
+				animation,
+				frameIndex
+			};
+		}
+		//#endregion
 		//#region \0dsh-css:packages/dsh-pet/src/client/pet.module.css.mjs
-		const css$2 = ".kz2Bea_float{pointer-events:auto;-webkit-user-select:none;user-select:none;flex-direction:column;align-items:center;display:flex;position:fixed}.kz2Bea_sprite{image-rendering:auto;touch-action:none;position:relative}.kz2Bea_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 kz2Bea_pet-bubble-pop;position:absolute;bottom:100%;box-shadow:0 2px 8px #00000040}.kz2Bea_bubblePet{background:#f472b6eb}.kz2Bea_bubbleFeed{background:#38bdf8eb}.kz2Bea_bubbleStatus{text-overflow:ellipsis;background:#0f172ae6;border:1px solid #7dd3fc80;max-width:min(280px,100vw - 24px);animation:none;overflow:hidden}.kz2Bea_bubbleStack{pointer-events:none;flex-direction:column;align-items:center;gap:4px;display:flex;position:absolute;bottom:100%}.kz2Bea_bubbleStack .kz2Bea_bubble{margin-bottom:0;position:relative;bottom:auto}@keyframes kz2Bea_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)}}.kz2Bea_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}.kz2Bea_panel:after{content:\"\";height:14px;position:absolute;top:100%;left:0;right:0}.kz2Bea_rankRow{white-space:nowrap;justify-content:space-between;gap:10px;display:flex}.kz2Bea_nameCell{font-weight:600}.kz2Bea_renameRow{align-items:center;gap:6px;display:flex}.kz2Bea_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}.kz2Bea_nameInput:focus{border-color:#38bdf8;box-shadow:0 0 0 2px #38bdf873}.kz2Bea_actions{gap:6px;display:flex}.kz2Bea_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}.kz2Bea_action:hover{filter:brightness(1.08)}.kz2Bea_action:active{filter:brightness(.94)}.kz2Bea_action:focus-visible{outline:none;box-shadow:0 0 0 2px #38bdf8d9}.kz2Bea_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}.kz2Bea_summon:hover{color:#bae6fd;background:#0f172ae6;border-color:#7dd3fcf2}.kz2Bea_summon:active{color:#7dd3fc;border-color:#7dd3fccc}.kz2Bea_summon:focus-visible{outline:none;box-shadow:0 0 0 2px #38bdf8d9}@media (prefers-reduced-motion:reduce){.kz2Bea_bubble{opacity:1;animation:none}.kz2Bea_action,.kz2Bea_summon{transition:none}}";
+		const css$2 = ".kz2Bea_float{pointer-events:auto;-webkit-user-select:none;user-select:none;flex-direction:column;align-items:center;display:flex;position:fixed}.kz2Bea_sprite{image-rendering:auto;touch-action:none;position:relative}.kz2Bea_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 kz2Bea_pet-bubble-pop;position:absolute;bottom:100%;box-shadow:0 2px 8px #00000040}.kz2Bea_bubblePet{background:#f472b6eb}.kz2Bea_bubbleFeed{background:#38bdf8eb}.kz2Bea_bubbleStatus{text-overflow:ellipsis;backdrop-filter:blur(8px);letter-spacing:.02em;background:linear-gradient(160deg,#1e293be0,#0f172aeb);border:1px solid #7dd3fc8c;max-width:min(280px,100vw - 24px);animation:.24s ease-out kz2Bea_pet-bubble-in;overflow:hidden;box-shadow:0 4px 14px #02061766,0 0 0 1px #7dd3fc1f,0 0 18px #38bdf82e}.kz2Bea_bubbleWhisper{letter-spacing:.03em;white-space:nowrap;text-overflow:ellipsis;color:#f5d0fe;backdrop-filter:blur(8px);pointer-events:none;background:linear-gradient(150deg,#581c8785,#9d174d70);border:1px dashed #f0abfc8c;border-radius:999px;max-width:min(260px,100vw - 24px);padding:4px 12px;font-size:11.5px;font-style:italic;line-height:1.45;animation:.32s cubic-bezier(.22,1,.36,1) kz2Bea_pet-whisper-in;position:relative;overflow:hidden;box-shadow:0 3px 12px #2e106566,0 0 14px #d946ef29}.kz2Bea_bubbleWhisper:before{content:\"「\";opacity:.75;margin-right:2px}.kz2Bea_bubbleWhisper:after{content:\"」\";opacity:.75;margin-left:2px}.kz2Bea_bubbleStack{pointer-events:auto;flex-direction:column;align-items:center;gap:4px;display:flex;position:absolute;bottom:100%}.kz2Bea_bubbleStack .kz2Bea_bubble{pointer-events:auto;margin-bottom:0;position:relative;bottom:auto}.kz2Bea_bubbleClickable{cursor:pointer;font:inherit;text-align:center;appearance:none;transition:filter .12s,box-shadow .12s}.kz2Bea_bubbleClickable:hover{filter:brightness(1.12)}.kz2Bea_bubbleClickable:focus-visible{outline:none;box-shadow:0 0 0 2px #38bdf8d9}@keyframes kz2Bea_pet-bubble-in{0%{opacity:0;transform:translateY(6px)scale(.96)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes kz2Bea_pet-whisper-in{0%{opacity:0;transform:translateY(8px)scale(.9)}60%{transform:translateY(-1px)scale(1.02)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes kz2Bea_pet-panel-in{0%{opacity:0;transform:translateY(4px)scale(.97)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes kz2Bea_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)}}.kz2Bea_panel{color:#e2e8f0;backdrop-filter:blur(10px);transform-origin:50% 0;background:linear-gradient(165deg,#1e293bf0,#0f172af5);border:1px solid #94a3b866;border-radius:12px;flex-direction:column;gap:7px;min-width:148px;margin-top:8px;padding:10px 12px;font-size:12px;animation:.2s cubic-bezier(.22,1,.36,1) kz2Bea_pet-panel-in;display:flex;position:absolute;top:100%;box-shadow:0 8px 24px #02061773,0 0 0 1px #7dd3fc14,inset 0 1px #e2e8f014}.kz2Bea_panel:after{content:\"\";height:14px;position:absolute;bottom:100%;left:0;right:0}.kz2Bea_panelAbove{transform-origin:50% 100%;margin-top:0;margin-bottom:8px;top:auto;bottom:100%}.kz2Bea_panelAbove:after{top:100%;bottom:auto}.kz2Bea_rankRow{white-space:nowrap;justify-content:space-between;gap:10px;display:flex}.kz2Bea_nameCell{letter-spacing:.02em;background:linear-gradient(90deg,#7dd3fc,#38bdf8 60%,#818cf8);color:#0000;-webkit-background-clip:text;background-clip:text;font-weight:600}.kz2Bea_statRank{color:#c4b5fd;font-weight:600}.kz2Bea_statTreats{color:#7dd3fc;font-weight:600}.kz2Bea_statPoints{color:#fcd34d;font-weight:600}.kz2Bea_renameRow{align-items:center;gap:6px;display:flex}.kz2Bea_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}.kz2Bea_nameInput:focus{border-color:#38bdf8;box-shadow:0 0 0 2px #38bdf873}.kz2Bea_actions{gap:6px;display:flex}.kz2Bea_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,transform .12s;box-shadow:0 2px 6px #38bdf840}.kz2Bea_action:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 4px 10px #38bdf859}.kz2Bea_action:active{filter:brightness(.94);transform:translateY(0);box-shadow:0 1px 4px #38bdf840}.kz2Bea_action:focus-visible{outline:none;box-shadow:0 0 0 2px #38bdf8d9}.kz2Bea_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}.kz2Bea_summon:hover{color:#bae6fd;background:#0f172ae6;border-color:#7dd3fcf2}.kz2Bea_summon:active{color:#7dd3fc;border-color:#7dd3fccc}.kz2Bea_summon:focus-visible{outline:none;box-shadow:0 0 0 2px #38bdf8d9}@media (prefers-reduced-motion:reduce){.kz2Bea_bubble,.kz2Bea_bubbleStatus,.kz2Bea_bubbleWhisper,.kz2Bea_panel{opacity:1;animation:none}.kz2Bea_action,.kz2Bea_summon{transition:none}}";
 		const tagId$2 = "@linxin666/dsh-pet/pet.module.css";
 		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId$2) + "]") === null) {
 			const tag = document.createElement("style");
@@ -120,18 +178,27 @@ window.__ModuleLoader__.load({
 			"action": "kz2Bea_action",
 			"actions": "kz2Bea_actions",
 			"bubble": "kz2Bea_bubble",
+			"bubbleClickable": "kz2Bea_bubbleClickable",
 			"bubbleFeed": "kz2Bea_bubbleFeed",
 			"bubblePet": "kz2Bea_bubblePet",
 			"bubbleStack": "kz2Bea_bubbleStack",
 			"bubbleStatus": "kz2Bea_bubbleStatus",
+			"bubbleWhisper": "kz2Bea_bubbleWhisper",
 			"float": "kz2Bea_float",
 			"nameCell": "kz2Bea_nameCell",
 			"nameInput": "kz2Bea_nameInput",
 			"panel": "kz2Bea_panel",
+			"panelAbove": "kz2Bea_panelAbove",
+			"pet-bubble-in": "kz2Bea_pet-bubble-in",
 			"pet-bubble-pop": "kz2Bea_pet-bubble-pop",
+			"pet-panel-in": "kz2Bea_pet-panel-in",
+			"pet-whisper-in": "kz2Bea_pet-whisper-in",
 			"rankRow": "kz2Bea_rankRow",
 			"renameRow": "kz2Bea_renameRow",
 			"sprite": "kz2Bea_sprite",
+			"statPoints": "kz2Bea_statPoints",
+			"statRank": "kz2Bea_statRank",
+			"statTreats": "kz2Bea_statTreats",
 			"summon": "kz2Bea_summon"
 		};
 		//#endregion
@@ -160,10 +227,15 @@ window.__ModuleLoader__.load({
 			const { snapshot, definition, display, feedback } = props;
 			const spriteRef = (0, react.useRef)(null);
 			const floatRef = (0, react.useRef)(null);
+			const panelRef = (0, react.useRef)(null);
+			const bubbleRef = (0, react.useRef)(null);
 			const [imageReady, setImageReady] = (0, react.useState)(false);
 			const [hovered, setHovered] = (0, react.useState)(false);
 			const [renaming, setRenaming] = (0, react.useState)(false);
+			const [panelAbove, setPanelAbove] = (0, react.useState)(false);
+			const [panelLift, setPanelLift] = (0, react.useState)(0);
 			const [nameDraft, setNameDraft] = (0, react.useState)("");
+			const composingRef = (0, react.useRef)(false);
 			const [dragPos, setDragPos] = (0, react.useState)(null);
 			const dragRef = (0, react.useRef)(null);
 			const hideTimerRef = (0, react.useRef)(null);
@@ -176,6 +248,7 @@ window.__ModuleLoader__.load({
 			const columns = definition.columns;
 			const rows = definition.rows;
 			const tracks = definition.tracks;
+			const sequences = definition.sequences;
 			(0, react.useEffect)(() => {
 				let cancelled = false;
 				const img = new Image();
@@ -189,23 +262,36 @@ window.__ModuleLoader__.load({
 				};
 			}, [definition.atlasUrl]);
 			const spriteScale = display.size / cell.height;
+			const phase = snapshot?.phase ?? "idle";
 			const animation = snapshot?.animation ?? "idle";
 			const scaleRef = (0, react.useRef)(spriteScale);
 			scaleRef.current = spriteScale;
 			(0, react.useEffect)(() => {
 				const reduceMotion = typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches === true;
-				const row = rowOfTrack(animation);
-				const leadCol = trimTrack(tracks[animation], rows[row] ?? tracks[animation].frames.length).frames[0];
+				const sequence = animation === animationForPhase(phase) ? sequences?.[phase] : void 0;
+				const leadAnimation = sequence?.[0] ?? animation;
+				const row = rowOfTrack(leadAnimation);
+				const track = trimTrack(tracks[leadAnimation], rows[row] ?? tracks[leadAnimation].frames.length);
+				const leadCol = track.frames[0];
 				const lead = framePosition(cell, columns, row, leadCol, scaleRef.current);
 				if (spriteRef.current !== null) spriteRef.current.style.backgroundPosition = lead.x + "px " + lead.y + "px";
 				if (reduceMotion) return;
 				let raf = 0;
 				let last = performance.now();
+				let sequenceElapsed = 0;
 				const tick = (ts) => {
 					const delta = ts - last;
 					last = ts;
-					const row = rowOfTrack(animation);
-					const track = trimTrack(tracks[animation], rows[row] ?? tracks[animation].frames.length);
+					if (sequence !== void 0) {
+						sequenceElapsed += delta;
+						const current = sequenceFrameAt(sequence, tracks, sequenceElapsed);
+						const currentRow = rowOfTrack(current.animation);
+						const col = trimTrack(tracks[current.animation], rows[currentRow] ?? tracks[current.animation].frames.length).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;
+					}
 					const st = frameRef.current;
 					if (st.track !== animation) {
 						st.track = animation;
@@ -231,10 +317,12 @@ window.__ModuleLoader__.load({
 				return () => cancelAnimationFrame(raf);
 			}, [
 				animation,
+				phase,
 				cell,
 				columns,
 				rows,
-				tracks
+				tracks,
+				sequences
 			]);
 			const feedbackDoneRef = (0, react.useRef)(props.onFeedbackDone);
 			feedbackDoneRef.current = props.onFeedbackDone;
@@ -290,8 +378,38 @@ window.__ModuleLoader__.load({
 			const spriteWidth = Math.round(cell.width * spriteScale);
 			const spriteHeight = Math.round(cell.height * spriteScale);
 			const sessionBubbles = snapshot?.sessions ?? [];
-			const statusBubble = feedback === null && !hovered && sessionBubbles.length === 0 ? snapshot?.bubble : void 0;
+			const statusBubble = feedback === null && sessionBubbles.length === 0 ? snapshot?.bubble : void 0;
+			const whisper = feedback === null ? snapshot?.whisper : void 0;
+			const bubblePresent = feedback !== null || sessionBubbles.length > 0 || statusBubble !== void 0 || whisper !== void 0;
 			const displayName = snapshot?.name ?? definition.displayName;
+			(0, react.useLayoutEffect)(() => {
+				if (!hovered) {
+					setPanelAbove(false);
+					setPanelLift(0);
+					return;
+				}
+				const updatePanelPlacement = () => {
+					const sprite = spriteRef.current;
+					const panel = panelRef.current;
+					if (sprite === null || panel === null) return;
+					const above = window.innerHeight - sprite.getBoundingClientRect().bottom < panel.getBoundingClientRect().height + 8;
+					setPanelAbove(above);
+					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
+			]);
 			return (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				ref: floatRef,
 				className: pet_module_css_default.float,
@@ -307,6 +425,7 @@ window.__ModuleLoader__.load({
 				onPointerLeave: (e) => {
 					const next = e.relatedTarget;
 					if (next instanceof Node && floatRef.current?.contains(next)) return;
+					if (renaming) return;
 					clearHideTimer();
 					hideTimerRef.current = window.setTimeout(() => setHovered(false), 300);
 				},
@@ -318,7 +437,7 @@ window.__ModuleLoader__.load({
 							width: spriteWidth,
 							height: spriteHeight,
 							backgroundImage: imageReady ? "url(" + definition.atlasUrl + ")" : void 0,
-							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"
@@ -334,26 +453,40 @@ window.__ModuleLoader__.load({
 						"aria-label": definition.displayName
 					}),
 					feedback !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						ref: bubbleRef,
 						className: clsx(pet_module_css_default.bubble, feedback.kind === "feed" ? pet_module_css_default.bubbleFeed : pet_module_css_default.bubblePet),
 						children: feedback.text
 					}, feedback.at),
-					feedback === null && !hovered && sessionBubbles.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					feedback === null && (sessionBubbles.length > 0 || statusBubble !== void 0 || whisper !== void 0) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						ref: bubbleRef,
 						className: pet_module_css_default.bubbleStack,
-						role: "status",
-						"aria-live": "polite",
-						children: sessionBubbles.map((session) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: clsx(pet_module_css_default.bubble, pet_module_css_default.bubbleStatus),
-							children: session.bubble
-						}, session.sessionId))
-					}),
-					statusBubble !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: clsx(pet_module_css_default.bubble, pet_module_css_default.bubbleStatus),
-						role: "status",
-						"aria-live": "polite",
-						children: statusBubble
+						children: [
+							sessionBubbles.map((session) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: clsx(pet_module_css_default.bubble, pet_module_css_default.bubbleStatus, pet_module_css_default.bubbleClickable),
+								title: props.t("pet.openSessionHint"),
+								onClick: () => {
+									props.onOpenSession(session.sessionId);
+								},
+								children: session.bubble
+							}, session.sessionId)),
+							sessionBubbles.length === 0 && statusBubble !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: clsx(pet_module_css_default.bubble, pet_module_css_default.bubbleStatus),
+								role: "status",
+								"aria-live": "polite",
+								children: statusBubble
+							}),
+							whisper !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: pet_module_css_default.bubbleWhisper,
+								children: whisper
+							}, whisper)
+						]
 					}),
 					hovered && dragRef.current === null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: pet_module_css_default.panel,
+						ref: panelRef,
+						className: clsx(pet_module_css_default.panel, panelAbove && pet_module_css_default.panelAbove),
+						"data-placement": panelAbove ? "above" : "below",
+						style: panelAbove && panelLift > 0 ? { marginBottom: panelLift } : void 0,
 						onPointerEnter: () => {
 							clearHideTimer();
 						},
@@ -366,8 +499,14 @@ window.__ModuleLoader__.load({
 								placeholder: props.t("pet.namePlaceholder"),
 								autoFocus: true,
 								onChange: (e) => setNameDraft(e.target.value),
+								onCompositionStart: () => {
+									composingRef.current = true;
+								},
+								onCompositionEnd: () => {
+									composingRef.current = false;
+								},
 								onKeyDown: (e) => {
-									if (e.nativeEvent.isComposing) return;
+									if (composingRef.current || e.nativeEvent.isComposing || e.key === "Process") return;
 									if (e.key === "Enter") {
 										const trimmed = nameDraft.trim();
 										if (trimmed !== "") {
@@ -394,11 +533,20 @@ window.__ModuleLoader__.load({
 								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 									className: pet_module_css_default.nameCell,
 									children: displayName
-								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: props.t("pet.rank", { rank: snapshot?.affinity.rank ?? "?" }) })]
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: pet_module_css_default.statRank,
+									children: props.t("pet.rank", { rank: snapshot?.affinity.rank ?? "?" })
+								})]
 							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 								className: pet_module_css_default.rankRow,
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: props.t("pet.treats", { n: snapshot?.treats.stocked ?? 0 }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: props.t("pet.points", { points: snapshot?.affinity.points ?? 0 }) })]
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: pet_module_css_default.statTreats,
+									children: props.t("pet.treats", { n: snapshot?.treats.stocked ?? 0 })
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: pet_module_css_default.statPoints,
+									children: props.t("pet.points", { points: snapshot?.affinity.points ?? 0 })
+								})]
 							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 								className: pet_module_css_default.actions,
@@ -413,6 +561,7 @@ window.__ModuleLoader__.load({
 										type: "button",
 										className: pet_module_css_default.action,
 										onClick: () => {
+											clearHideTimer();
 											setNameDraft(displayName);
 											setRenaming(true);
 										},
@@ -481,6 +630,7 @@ window.__ModuleLoader__.load({
 					onHide: props.hide,
 					onDragEnd: props.dragEnd,
 					onRename: props.rename,
+					onOpenSession: props.openSession,
 					onFeedbackDone: props.feedbackDone,
 					t: props.t
 				})
@@ -645,7 +795,7 @@ window.__ModuleLoader__.load({
 							children: props.t("settings.readOnly")
 						}) : null,
 						props.children,
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						props.hideFooter === true ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 							className: settings_card_module_css_default.footer,
 							children: [
 								state.failed ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
@@ -1346,6 +1496,7 @@ window.__ModuleLoader__.load({
 			"pet.treats": "小鱼干 ×{n}",
 			"pet.state.loading": "宠物正在赶来…",
 			"pet.state.error": "宠物迷路了（连接失败）",
+			"pet.openSessionHint": "点击跳转到对应会话",
 			"settings.title": "宠物",
 			"settings.description": "选择宠物并调整它的显示布局。",
 			"settings.pet": "宠物",
@@ -1389,6 +1540,7 @@ window.__ModuleLoader__.load({
 			"pet.treats": "Treats ×{n}",
 			"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",
 			"settings.title": "Pet",
 			"settings.description": "Pick a pet and tune its display layout.",
 			"settings.pet": "Pet",
@@ -1467,13 +1619,14 @@ window.__ModuleLoader__.load({
 		const POLL_MS = 2e3;
 		/** Settings namespace the pet settings card edits (the Host plugin registers it). */
 		const PET_SETTINGS_NS = "pet";
-		/** Required services. */
+		/** Required services (sessions powers bubble-to-session navigation). */
 		const inject = [
 			"slots",
 			"locale",
 			"connection",
 			"settingsScope",
-			"remote"
+			"remote",
+			"sessions"
 		];
 		/**
 		* Client plugin body: register dictionaries, mount the global pet entry and
@@ -1515,14 +1668,19 @@ window.__ModuleLoader__.load({
 					const setState = petStore.actions.setState;
 					const setFeedback = petStore.actions.setFeedback;
 					let petsLoaded = false;
+					let stateSeq = 0;
 					const pollNow = () => {
 						if (!petsLoaded) petApi.pets().then((list) => {
 							petsLoaded = true;
 							setPets(list);
 						}, () => {});
+						const seq = stateSeq + 1;
+						stateSeq = seq;
 						petApi.state().then((snapshot) => {
+							if (seq !== stateSeq) return;
 							setSnapshot(snapshot);
 						}, () => {
+							if (seq !== stateSeq) return;
 							setState("error", "pet.state transport error");
 						});
 					};
@@ -1550,9 +1708,15 @@ window.__ModuleLoader__.load({
 							document.removeEventListener("visibilitychange", onVisibility);
 						};
 					}, "pet: poll");
+					const sessions = ctx.sessions;
+					const openSession = (sessionId) => {
+						if (sessions.list.getSnapshot().byId[sessionId] === void 0) return;
+						sessions.open(sessionId);
+					};
 					const injected = () => ({
 						store: petStore,
 						ensure: pollNow,
+						openSession,
 						pet: () => {
 							petApi.interact("pet").then((result) => {
 								setFeedback({