@mingxy/opencode-mascot 0.7.11 → 0.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mingxy/opencode-mascot",
-  "version": "0.7.11",
+  "version": "0.8.0",
   "description": "OpenCode TUI mascot plugin framework - customizable ASCII mascots for your terminal",
   "author": "mingxy",
   "license": "MIT",

package/src/builtins/props/box.ts

@@ -35,23 +35,21 @@ const frames: string[][] = [
     "╰──────────╯─┐",
     "            ╲ ",
   ],
-  // 帧3: 打开（露出月儿剪影）
   [
     "   ╭~~~~~~╮   ",
-    "  ╱  ☆    ╲   ",
+    "  ╱       ╲   ",
     " ╱~~────~~╲   ",
-    "│░(^-^)░░░│   ",
-    "│░┃█┃░░░░░│   ",
+    "│░ ☆ ^-^ ░│   ",
+    "│░ ┃█┃ ░░░│   ",
     "│░░░░░░░░░│   ",
     "╰──────────╯─┐",
     "            ╲ ",
   ],
-  // 帧4: 月儿冒头
   [
     "   ╭~~~~~~╮   ",
-    "  ╱  ☆    ╲   ",
+    "  ╱ ☆     ╲   ",
     " ╱(^-^)───╲   ",
-    "│░┃█┃░░░░░│   ",
+    "│░ ┃█┃ ░░░│   ",
     "│░░░░░░░░░│   ",
     "│░░░░░░░░░│   ",
     "╰──────────╯─┐",

package/src/builtins/props/laptop.ts

@@ -33,6 +33,18 @@ const states = [
   ">ᵇᵘᵍ!ᵇᵘᵍ!",
   ">ⁿᵖᵐⁱⁿˢᵗᵃˡˡ",
   ">ᵈᵒⁿᵉ✓",
+  ">ᶜᵒᵐᵖⁱˡⁱⁿᵍ",
+  ">ᵗᵉˢᵗⁱⁿᵍ...",
+  ">ʳᵉᶠᵃᶜᵗᵒʳ",
+  ">ᵈᵉᵖˡᵒʸⁱⁿᵍ",
+  ">ᵐᵉʳᵍᵉ...",
+  ">ˡⁱⁿᵗ...",
+  ">ᶠᵒʳᵐᵃᵗ...",
+  ">ʳᵉᵛⁱᵉʷ...",
+  ">ᵒᵖˢ...",
+  ">ʰᵐᵐ~...",
+  ">ʰᵉˡᵖ...",
+  ">⁻ᵒ⁻",
 ];
 
 const frames: string[][] = states.map((st) => [
@@ -49,5 +61,5 @@ export const laptopProp: PropPack = {
   frameInterval: 800,
   trigger: "busy",
   position: "side-right",
-  weight: 0.7,
+  weight: 0.65,
 };

package/src/builtins/props/pad.ts

@@ -15,17 +15,17 @@ const games: string[][] = [
   ["  ☆  ᵇᵉᵍⁱⁿ ", "(^-^) ◯→  ●", " ┃█┃  ˢ:0  ", "           "],
   ["  ☆       ", "(^-^) ◯◯→ ●", " ┃█┃  ˢ:1  ", "           "],
   ["  ☆       ", "(×_×) ◯◯💥 ", " ┃█┃  ᵍᵍ!  ", "           "],
-  ["  ☆       ", "(╥_╥) ᵒᵛᵉʳ ", " ┃█┃  ˢ:1  ", "           "],
+  ["  ☆       ", "(╥_╥)      ", " ┃█┃  ˢ:1  ", " ᵍᵃᵐᵉᵒᵛᵉʳ "],
   ["  ☆       ", "(¬_¬) ᵃᵍᵃⁱⁿ", " ┃█┃       ", "           "],
   ["  ☆  ᵍᵒ!  ", "(^-^) ◯→  ●", " ┃█┃  ˢ:0  ", "           "],
   ["  ☆  ᵇᵉᵍⁱⁿ ", "(^-^)  ▣   ", " ┃█┃       ", "           "],
   ["  ☆       ", "(^-^) ▣▣   ", " ┃█┃ ▣▣▣▣  ", "           "],
   ["  ☆       ", "(×_×)      ", " ┃█┃ ▣▣▣▣▣▣", "  ᶠᵘˡˡ!    "],
-  ["  ☆       ", "(╥_╥) ᵒᵛᵉʳ ", " ┃█┃       ", "           "],
+  ["  ☆       ", "(╥_╥)      ", " ┃█┃       ", " ᵍᵃᵐᵉᵒᵛᵉʳ "],
   ["  ☆  ᵇᵉᵍⁱⁿ ", "(^-^) [ 2 ]", " ┃█┃       ", "           "],
   ["  ☆       ", "(^-^) [ 4 ]", " ┃█┃  ᵒᵒⁿ  ", "           "],
   ["  ☆       ", "(⊙_⊙) [128]", " ┃█┃  ʷᵒʷ  ", "           "],
-  ["  ☆       ", "(╥_╥) ᵒᵛᵉʳ ", " ┃█┃       ", "           "],
+  ["  ☆       ", "(╥_╥)      ", " ┃█┃       ", " ᵍᵃᵐᵉᵒᵛᵉʳ "],
   ["  ☆       ", "(^-^) ⁿᵉˣᵗ!", " ┃█┃       ", "           "],
 ];
 
@@ -41,8 +41,8 @@ const frames: string[][] = games.map((rows) => [
 export const padProp: PropPack = {
   name: "pad",
   frames,
-  frameInterval: 700,
+  frameInterval: 1000,
   trigger: "busy",
   position: "front",
-  weight: 0.3,
+  weight: 0.35,
 };

package/src/components/home-mascot.tsx

@@ -16,20 +16,26 @@ interface HomeMascotProps {
   };
 }
 
+let homeSingletonRenderers: Record<string, ReturnType<typeof createAnimatedRenderer>> | null = null;
+let homeStartupTriggered = false;
+const [homeCurX, setHomeCurX] = createSignal(0);
+const [homeCurY, setHomeCurY] = createSignal(7);
+
 export function HomeMascot(props: HomeMascotProps): JSX.Element {
   const names = Object.keys(props.mascots);
   const initialName = props.mascots["yueer"] ? "yueer" : names[0];
 
   const cw = (typeof process !== "undefined" && process.stdout?.columns) || 80;
 
-  const initX = Math.floor((Math.random() - 0.5) * Math.max(0, cw - 20));
-  const initY = 0;
-
   const [currentName, setCurrentName] = createSignal(initialName);
   const [zBoost, setZBoost] = createSignal(false);
-  let boxRef: any = null;
-  let curX = initX;
-  let curY = initY;
+  const curX = homeCurX;
+  const setCurX = setHomeCurX;
+  const curY = homeCurY;
+  const setCurY = setHomeCurY;
+  if (!homeStartupTriggered) {
+    setCurX(Math.floor(cw / 2) - 5);
+  }
   let dragStartX = 0;
   let dragStartY = 0;
   let dragAnchorX = 0;
@@ -37,10 +43,13 @@ export function HomeMascot(props: HomeMascotProps): JSX.Element {
   let lastClickTime = 0;
   let isDragging = false;
 
-  const renderers: Record<string, ReturnType<typeof createAnimatedRenderer>> = {};
-  for (const [name, pack] of Object.entries(props.mascots)) {
-    renderers[name] = createAnimatedRenderer(pack);
+  if (!homeSingletonRenderers) {
+    homeSingletonRenderers = {};
+    for (const [name, pack] of Object.entries(props.mascots)) {
+      homeSingletonRenderers[name] = createAnimatedRenderer(pack);
+    }
   }
+  const renderers = homeSingletonRenderers;
 
   const switchToNext = () => {
     const cur = currentName();
@@ -48,13 +57,6 @@ export function HomeMascot(props: HomeMascotProps): JSX.Element {
     setCurrentName(names[(idx + 1) % names.length]);
   };
 
-  const applyPos = () => {
-    if (boxRef) {
-      boxRef.translateX = curX;
-      boxRef.translateY = curY;
-    }
-  };
-
   onCelebrate((newVersion) => {
     setZBoost(true);
     renderers[currentName()].celebrateUpdate(newVersion);
@@ -70,106 +72,124 @@ export function HomeMascot(props: HomeMascotProps): JSX.Element {
   onScatter(() => {
   });
 
-  renderers[currentName()].setCharacterHidden(true);
-  renderers[currentName()].setProp(getProp("box") ?? null);
-
-  const finalY = curY;
-  const finalX = curX;
-  const fallStartY = finalY - 15;
-  const fallDuration = 500;
-  const fallStartTime = Date.now();
-  curY = fallStartY;
-  applyPos();
-
-  const fallInterval = setInterval(() => {
-    const elapsed = Date.now() - fallStartTime;
-    const t = Math.min(elapsed / fallDuration, 1);
-    const eased = t * t;
-    curY = Math.round(fallStartY + (finalY - fallStartY) * eased);
-    applyPos();
-    if (t >= 1) {
-      clearInterval(fallInterval);
-      curY = finalY;
-      applyPos();
-
-      setTimeout(() => {
-        const shakeSeq = [1, -1, 1, -1, 0];
-        let shakeIdx = 0;
-        const shakeInterval = setInterval(() => {
-          if (shakeIdx >= shakeSeq.length) {
-            clearInterval(shakeInterval);
-            curX = finalX;
-            applyPos();
-            return;
-          }
-          curX = finalX + shakeSeq[shakeIdx];
-          applyPos();
-          shakeIdx++;
-        }, 60);
-      }, 2000);
-    }
-  }, 16);
-
-  setTimeout(() => {
-    renderers[currentName()].setProp(null);
-    renderers[currentName()].setCharacterHidden(false);
-  }, 6000);
+  if (!homeStartupTriggered) {
+    homeStartupTriggered = true;
+    renderers[currentName()].setCharacterHidden(true);
+    renderers[currentName()].setProp(getProp("box") ?? null);
+
+    const finalY = curY();
+    const finalX = curX();
+    const fallStartY = finalY - 15;
+    const fallDuration = 500;
+    const fallStartTime = Date.now();
+    setCurY(fallStartY);
+
+    const fallInterval = setInterval(() => {
+      const elapsed = Date.now() - fallStartTime;
+      const t = Math.min(elapsed / fallDuration, 1);
+      const eased = t * t;
+      setCurY(Math.round(fallStartY + (finalY - fallStartY) * eased));
+      if (t >= 1) {
+        clearInterval(fallInterval);
+        setCurY(finalY);
+
+        setTimeout(() => {
+          const shakeSeq = [1, -1, 1, -1, 0];
+          let shakeIdx = 0;
+          const shakeInterval = setInterval(() => {
+            if (shakeIdx >= shakeSeq.length) {
+              clearInterval(shakeInterval);
+              setCurX(finalX);
+              return;
+            }
+            setCurX(finalX + shakeSeq[shakeIdx]);
+            shakeIdx++;
+          }, 60);
+        }, 2000);
+      }
+    }, 16);
+
+    setTimeout(() => {
+      renderers[currentName()].setProp(null);
+      renderers[currentName()].setCharacterHidden(false);
+      const dropStart = curY();
+      const dropEnd = 10;
+      const dropDuration = 300;
+      const dropStartTime = Date.now();
+      const dropInterval = setInterval(() => {
+        const elapsed = Date.now() - dropStartTime;
+        const t = Math.min(elapsed / dropDuration, 1);
+        const eased = t * t;
+        setCurY(Math.round(dropStart + (dropEnd - dropStart) * eased));
+        if (t >= 1) {
+          clearInterval(dropInterval);
+          setCurY(dropEnd);
+        }
+      }, 16);
+    }, 6000);
+  }
 
   const stopDrag = () => {
     isDragging = false;
     renderers[currentName()].setDragging(false);
   };
 
+  const handleMouseDown = (e: any) => {
+    const now = Date.now();
+    if (now - lastClickTime < 300) {
+      switchToNext();
+      lastClickTime = 0;
+      return;
+    }
+    lastClickTime = now;
+    if (e.modifiers?.alt) {
+      dragStartX = e.x;
+      dragStartY = e.y;
+      dragAnchorX = curX();
+      dragAnchorY = curY();
+      isDragging = true;
+      renderers[currentName()].setDragging(true);
+      props.api.renderer.clearSelection();
+    }
+  };
+  const handleMouseDrag = (e: any) => {
+    if (e.modifiers?.alt && isDragging) {
+      setCurX(dragAnchorX + (e.x - dragStartX));
+      setCurY(dragAnchorY + (e.y - dragStartY));
+    }
+  };
+  const handleMouseUp = () => { stopDrag(); };
+
   return (
-    <box
-      zIndex={zBoost() ? 9999 : 100}
-      flexDirection="column"
-      ref={(node: any) => {
-        boxRef = node;
-        applyPos();
-      }}
-      onMouseDown={(e: any) => {
-        const now = Date.now();
-        if (now - lastClickTime < 300) {
-          switchToNext();
-          lastClickTime = 0;
-          return;
-        }
-        lastClickTime = now;
-
-        if (e.modifiers?.alt) {
-          dragStartX = e.x;
-          dragStartY = e.y;
-          dragAnchorX = curX;
-          dragAnchorY = curY;
-          isDragging = true;
-          renderers[currentName()].setDragging(true);
-          props.api.renderer.clearSelection();
-        }
-      }}
-      onMouseDrag={(e: any) => {
-        if (e.modifiers?.alt && isDragging) {
-          curX = dragAnchorX + (e.x - dragStartX);
-          curY = dragAnchorY + (e.y - dragStartY);
-          applyPos();
-        }
-      }}
-      onMouseUp={() => { stopDrag(); }}
-      onMouseDragEnd={() => { stopDrag(); }}
-    >
+    <>
       {renderers[currentName()]?.propElement() ? (
         <box
           position="absolute"
-          zIndex={50}
-          left={renderers[currentName()].getPropPosition() === "side-left" ? -16 : renderers[currentName()].getPropPosition() === "side-right" ? 12 : 0}
-          top={0}
+          left={renderers[currentName()].getPropPosition() === "front" ? curX() - 4 : curX()}
+          top={renderers[currentName()].getPropPosition() === "front" ? curY() - 5 : curY()}
+          zIndex={zBoost() ? 9998 : 50}
+          onMouseDown={handleMouseDown}
+          onMouseDrag={handleMouseDrag}
+          onMouseUp={handleMouseUp}
+          onMouseDragEnd={handleMouseUp}
         >
           {renderers[currentName()].propElement()}
         </box>
       ) : null}
-      <box zIndex={100}>
-        {renderers[currentName()]?.element() ?? null}
-      </box>
-    </box>
+      {renderers[currentName()]?.element() ? (
+        <box
+          position="absolute"
+          left={curX()}
+          top={curY()}
+          zIndex={zBoost() ? 9999 : 100}
+          onMouseDown={handleMouseDown}
+          onMouseDrag={handleMouseDrag}
+          onMouseUp={handleMouseUp}
+          onMouseDragEnd={handleMouseUp}
+        >
+          {renderers[currentName()].element()}
+        </box>
+      ) : null}
+    </>
   );
 }

package/src/components/sidebar-mascot.tsx

@@ -4,7 +4,7 @@ import { createSignal, onCleanup } from "solid-js";
 import type { JSX } from "@opentui/solid";
 import type { MascotPack, MascotState } from "../core/types";
 import { createAnimatedRenderer } from "../core/ascii-renderer";
-import { onCelebrate, onVersion, onScatter } from "../core/celebration-bus";
+import { onCelebrate, onVersion, onScatter, onPropShow } from "../core/celebration-bus";
 import { pickPropByTrigger } from "../core/prop-loader";
 import { log } from "../core/logger";
 
@@ -34,7 +34,80 @@ const PEEK = 2;
 const PEEK_INTERVAL = 1200;
 const EDGE_THRESHOLD = 3;
 
+let singletonRenderers: Record<string, ReturnType<typeof createAnimatedRenderer>> | null = null;
+let singletonListener = false;
+const [globalCurrentName, setGlobalCurrentName] = createSignal<string>("yueer");
+const [globalUserOverride, setGlobalUserOverride] = createSignal(false);
+const [globalPosX, setGlobalPosX] = createSignal(20);
+const [globalPosY, setGlobalPosY] = createSignal(2);
+const [globalPacingX, setGlobalPacingX] = createSignal(0);
+const [globalZBoost, setGlobalZBoost] = createSignal(false);
+let globalScattered = false;
+let globalLastUserY: number | null = null;
+let globalLastUserX: number | null = null;
+let globalFallTimer: ReturnType<typeof setInterval> | null = null;
+
+const fallToWorkY = () => {
+  const targetY = globalLastUserY ?? 25;
+  const targetX = globalLastUserX ?? 5;
+  const startY = globalPosY();
+  const startX = globalPosX();
+  const needMove = Math.abs(startY - targetY) >= 2 || Math.abs(startX - targetX) >= 2;
+  if (!needMove) return;
+  const startTime = Date.now();
+  const duration = 500;
+  if (globalFallTimer) clearInterval(globalFallTimer);
+  globalFallTimer = setInterval(() => {
+    const elapsed = Date.now() - startTime;
+    const t = Math.min(elapsed / duration, 1);
+    const eased = t * t;
+    setGlobalPosY(Math.round(startY + (targetY - startY) * eased));
+    setGlobalPosX(Math.round(startX + (targetX - startX) * eased));
+    if (t >= 1) {
+      if (globalFallTimer) { clearInterval(globalFallTimer); globalFallTimer = null; }
+    }
+  }, 16);
+};
+
+let busyPacingTimer: ReturnType<typeof setInterval> | null = null;
+
+const startBusyPacing = () => {
+  if (busyPacingTimer) clearInterval(busyPacingTimer);
+  let step = 0;
+  let direction = 1;
+  let phaseTimer = 0;
+  let walking = true;
+  busyPacingTimer = setInterval(() => {
+    const prop = singletonRenderers?.[globalCurrentName()]?.getProp();
+    if (prop && prop.position === "front") return;
+    phaseTimer += 100;
+    if (walking) {
+      if (phaseTimer >= 3000) {
+        walking = false;
+        phaseTimer = 0;
+        setGlobalPacingX(0);
+        return;
+      }
+      step += direction;
+      if (Math.abs(step) >= 3) direction *= -1;
+      setGlobalPacingX(step);
+    } else {
+      if (phaseTimer >= 2000) {
+        walking = true;
+        phaseTimer = 0;
+        step = 0;
+        direction = Math.random() < 0.5 ? -1 : 1;
+      }
+    }
+  }, 100);
+};
+
+const stopBusyPacing = () => {
+  if (busyPacingTimer) { clearInterval(busyPacingTimer); busyPacingTimer = null; }
+};
+
 export function SidebarMascot(props: SidebarMascotProps): JSX.Element {
+  log("DEBUG", "SidebarMascot mount");
   const names = Object.keys(props.mascots);
   const initialName =
     props.initialMascot && props.mascots[props.initialMascot]
@@ -43,12 +116,24 @@ export function SidebarMascot(props: SidebarMascotProps): JSX.Element {
       ? "yueer"
       : names[0];
 
-  const [currentName, setCurrentName] = createSignal(initialName);
-  const [userOverride, setUserOverride] = createSignal(false);
-  const [posX, setPosX] = createSignal(20);
-  const [posY, setPosY] = createSignal(2);
+  if (!singletonRenderers) {
+    singletonRenderers = {};
+    for (const [name, pack] of Object.entries(props.mascots)) {
+      singletonRenderers[name] = createAnimatedRenderer(pack);
+    }
+    setGlobalCurrentName(initialName);
+  }
+  const renderers = singletonRenderers;
+
+  const currentName = globalCurrentName;
+  const setCurrentName = setGlobalCurrentName;
+  const setUserOverride = setGlobalUserOverride;
+  const posX = globalPosX;
+  const setPosX = setGlobalPosX;
+  const posY = globalPosY;
+  const setPosY = setGlobalPosY;
+
   const [containerWidth, setContainerWidth] = createSignal(0);
-  const [zBoost, setZBoost] = createSignal(false);
   let dragStartX = 0;
   let dragStartY = 0;
   let dragAnchorX = 0;
@@ -59,11 +144,6 @@ export function SidebarMascot(props: SidebarMascotProps): JSX.Element {
   let peekTimer: ReturnType<typeof setInterval> | null = null;
   let returnTimer: ReturnType<typeof setInterval> | null = null;
 
-  const renderers: Record<string, ReturnType<typeof createAnimatedRenderer>> = {};
-  for (const [name, pack] of Object.entries(props.mascots)) {
-    renderers[name] = createAnimatedRenderer(pack);
-  }
-
   const stopPeek = () => {
     if (peekTimer) { clearInterval(peekTimer); peekTimer = null; }
   };
@@ -143,81 +223,90 @@ export function SidebarMascot(props: SidebarMascotProps): JSX.Element {
     }, 16);
   };
 
-  const setStateWithSwitch = (s: MascotState) => {
-    const cur = currentName();
-    renderers[cur].setState(s);
-    if (userOverride()) return;
-    const target = DEFAULT_STATE_MAP[s];
-    if (target && target !== cur && props.mascots[target]) {
-      setCurrentName(target);
-      renderers[target].setState(s);
-    }
-  };
+  if (!singletonListener) {
+    singletonListener = true;
 
-  props.api.event.on("session.status", (data: unknown) => {
-    const payload = data as { type?: string; properties?: { sessionID?: string; status?: { type?: string } } } | null;
-    const statusType = payload?.properties?.status?.type;
-    log("DEBUG", `session.status: statusType=${statusType}, full=${JSON.stringify(payload)?.slice(0, 200)}`);
-    if (statusType === "busy" || statusType === "retry") {
-      if (hideSide) returnToView();
-      renderers[currentName()].setState("busy");
-      const busyProp = pickPropByTrigger("busy");
-      renderers[currentName()].setProp(busyProp);
-      renderers[currentName()].setCharacterHidden(busyProp?.position === "front");
-    } else {
-      setStateWithSwitch("idle");
-      renderers[currentName()].setProp(null);
-      renderers[currentName()].setCharacterHidden(false);
-    }
-  });
-
-  props.api.event.on("session.idle", () => {
-    setStateWithSwitch("happy");
-    setTimeout(() => setStateWithSwitch("idle"), 3000);
-  });
-
-  props.api.event.on("mascot.switch", (data: unknown) => {
-    const target = data as { name?: string } | null;
-    if (target?.name) {
-      const name = target.name;
-      if (props.mascots[name] && name !== currentName()) {
-        setCurrentName(name);
-        setUserOverride(true);
+    props.api.event.on("session.status", (data: unknown) => {
+      const payload = data as { type?: string; properties?: { sessionID?: string; status?: { type?: string } } } | null;
+      const statusType = payload?.properties?.status?.type;
+      log("DEBUG", `session.status: statusType=${statusType}`);
+      if (statusType === "busy" || statusType === "retry") {
+        renderers[globalCurrentName()].setState("busy");
+        if (!renderers[globalCurrentName()].getProp()) {
+          const busyProp = pickPropByTrigger("busy");
+          renderers[globalCurrentName()].setProp(busyProp);
+          renderers[globalCurrentName()].setCharacterHidden(busyProp?.position === "front");
+          fallToWorkY();
+        }
+        startBusyPacing();
+      } else {
+        renderers[globalCurrentName()].setState("idle");
+        stopBusyPacing();
+        if (!globalUserOverride()) {
+          const target = DEFAULT_STATE_MAP["idle" as MascotState];
+          if (target && target !== globalCurrentName() && singletonRenderers && singletonRenderers[target]) {
+            setGlobalCurrentName(target);
+            singletonRenderers[target].setState("idle");
+          }
+        }
+        renderers[globalCurrentName()].setProp(null);
+        renderers[globalCurrentName()].setCharacterHidden(false);
       }
-    } else {
-      switchToNext();
-    }
-  });
-
-  props.api.event.on("mascot.toggleWalk", () => {
-    renderers[currentName()].toggleWalk();
-  });
-
-  onCelebrate((newVersion) => {
-    setZBoost(true);
-    renderers[currentName()].celebrateUpdate(newVersion);
-    setTimeout(() => setZBoost(false), 2000);
-  });
-
-  onVersion((version) => {
-    setZBoost(true);
-    renderers[currentName()].showVersion(version);
-    setTimeout(() => setZBoost(false), 3500);
-  });
-
-  let scattered = false;
-
-  onScatter(() => {
-    if (scattered) return;
-    scattered = true;
-    renderers[currentName()].scatterIn();
-  });
-
-  setTimeout(() => {
-    if (scattered) return;
-    scattered = true;
-    renderers[currentName()].scatterIn();
-  }, 2000);
+    });
+
+    props.api.event.on("session.idle", () => {
+      renderers[globalCurrentName()].setState("happy");
+      setTimeout(() => {
+        renderers[globalCurrentName()].setState("idle");
+      }, 3000);
+    });
+
+    props.api.event.on("mascot.switch", (data: unknown) => {
+      const target = data as { name?: string } | null;
+      if (target?.name) {
+        const name = target.name;
+        if (singletonRenderers && singletonRenderers[name] && name !== globalCurrentName()) {
+          setGlobalCurrentName(name);
+          setGlobalUserOverride(true);
+        }
+      } else {
+        const cur = globalCurrentName();
+        const allNames = Object.keys(singletonRenderers ?? {});
+        const idx = allNames.indexOf(cur);
+        setGlobalCurrentName(allNames[(idx + 1) % allNames.length]);
+        setGlobalUserOverride(true);
+      }
+    });
+
+    props.api.event.on("mascot.toggleWalk", () => {
+      renderers[globalCurrentName()].toggleWalk();
+    });
+
+    onCelebrate((newVersion) => {
+      setGlobalZBoost(true);
+      renderers[globalCurrentName()].celebrateUpdate(newVersion);
+      setTimeout(() => setGlobalZBoost(false), 2000);
+    });
+
+    onVersion((version) => {
+      setGlobalZBoost(true);
+      renderers[globalCurrentName()].showVersion(version);
+      setTimeout(() => setGlobalZBoost(false), 3500);
+    });
+
+    onScatter(() => {
+      if (globalScattered) return;
+      globalScattered = true;
+      renderers[globalCurrentName()].scatterIn();
+    });
+
+    onPropShow(() => {
+      fallToWorkY();
+    });
+
+    globalScattered = true;
+    renderers[globalCurrentName()].scatterIn();
+  }
 
   const propOffset = () => {
     const pos = renderers[currentName()]?.getPropPosition();
@@ -226,6 +315,39 @@ export function SidebarMascot(props: SidebarMascotProps): JSX.Element {
     return 0;
   };
 
+  const handleMouseDown = (e: any) => {
+    if (hideSide) { returnToView(); return; }
+    const now = Date.now();
+    if (now - lastClickTime < 300) {
+      switchToNext();
+      lastClickTime = 0;
+      return;
+    }
+    lastClickTime = now;
+    if (e.modifiers?.alt) {
+      dragStartX = e.x;
+      dragStartY = e.y;
+      dragAnchorX = posX();
+      dragAnchorY = posY();
+      isDragging = true;
+      renderers[currentName()].setDragging(true);
+      props.api.renderer.clearSelection();
+    }
+  };
+  const handleMouseDrag = (e: any) => {
+    if (e.modifiers?.alt && isDragging) {
+      setPosX(clampX(dragAnchorX + (e.x - dragStartX)));
+      setPosY(clampY(dragAnchorY + (e.y - dragStartY)));
+      globalLastUserY = posY();
+      globalLastUserX = posX();
+    }
+  };
+  const handleMouseUp = () => {
+    isDragging = false;
+    renderers[currentName()].setDragging(false);
+    checkEdge();
+  };
+
   return (
     <>
       {renderers[currentName()]?.propElement() ? (
@@ -233,17 +355,22 @@ export function SidebarMascot(props: SidebarMascotProps): JSX.Element {
           position="absolute"
           left={posX() + propOffset()}
           top={posY()}
-          zIndex={zBoost() ? 9998 : 50}
+          zIndex={globalZBoost() ? 9998 : 50}
+          onMouseDown={handleMouseDown}
+          onMouseDrag={handleMouseDrag}
+          onMouseUp={handleMouseUp}
+          onMouseDragEnd={handleMouseUp}
         >
           {renderers[currentName()].propElement()}
         </box>
       ) : null}
-      <box
-        position="absolute"
-        left={posX()}
-        top={posY()}
-        alignItems="center"
-        zIndex={zBoost() ? 9999 : 100}
+      {renderers[currentName()].getPropPosition() !== "front" ? (
+        <box
+          position="absolute"
+          left={posX() + globalPacingX()}
+          top={posY()}
+          alignItems="center"
+        zIndex={globalZBoost() ? 9999 : 100}
         flexDirection="column"
         ref={(node: any) => {
           if (node) {
@@ -255,46 +382,14 @@ export function SidebarMascot(props: SidebarMascotProps): JSX.Element {
             }
           }
         }}
-        onMouseDown={(e: any) => {
-          if (hideSide) { returnToView(); return; }
-
-          const now = Date.now();
-          if (now - lastClickTime < 300) {
-            switchToNext();
-            lastClickTime = 0;
-            return;
-          }
-          lastClickTime = now;
-
-          if (e.modifiers?.alt) {
-            dragStartX = e.x;
-            dragStartY = e.y;
-            dragAnchorX = posX();
-            dragAnchorY = posY();
-            isDragging = true;
-            renderers[currentName()].setDragging(true);
-            props.api.renderer.clearSelection();
-          }
-        }}
-        onMouseDrag={(e: any) => {
-          if (e.modifiers?.alt && isDragging) {
-            setPosX(clampX(dragAnchorX + (e.x - dragStartX)));
-            setPosY(clampY(dragAnchorY + (e.y - dragStartY)));
-          }
-        }}
-        onMouseUp={() => {
-          isDragging = false;
-          renderers[currentName()].setDragging(false);
-          checkEdge();
-        }}
-        onMouseDragEnd={() => {
-          isDragging = false;
-          renderers[currentName()].setDragging(false);
-          checkEdge();
-        }}
+        onMouseDown={handleMouseDown}
+        onMouseDrag={handleMouseDrag}
+        onMouseUp={handleMouseUp}
+        onMouseDragEnd={handleMouseUp}
       >
         {renderers[currentName()]?.element() ?? null}
       </box>
+      ) : null}
     </>
   );
 }

package/src/core/ascii-renderer.tsx

@@ -3,6 +3,8 @@
 import { createSignal, onCleanup } from "solid-js";
 import type { JSX } from "@opentui/solid";
 import type { MascotPack, MascotState, EffectTimerCtx, EffectRenderCtx, PropPack, PropPosition } from "./types";
+import { emitPropShow } from "./celebration-bus";
+import { log } from "./logger";
 
 const SUPERSCRIPT: Record<string, string> = {
   "0": "⁰", "1": "¹", "2": "²", "3": "³", "4": "⁴",
@@ -141,10 +143,17 @@ export function createAnimatedRenderer(pack: MascotPack): {
   };
 
   let idleSleepTimeout: ReturnType<typeof setTimeout> | null = null;
+  let idlePadTimeout: ReturnType<typeof setTimeout> | null = null;
+  let idleBoxTimeout: ReturnType<typeof setTimeout> | null = null;
+  let lastBoxEvent = 0;
 
   const resetIdleSleep = () => {
     if (idleSleepTimeout) clearTimeout(idleSleepTimeout);
+    if (idlePadTimeout) clearTimeout(idlePadTimeout);
+    if (idleBoxTimeout) clearTimeout(idleBoxTimeout);
     idleSleepTimeout = null;
+    idlePadTimeout = null;
+    idleBoxTimeout = null;
     if (currentState() !== "idle") return;
     idleSleepTimeout = setTimeout(() => {
       if (currentState() === "idle") {
@@ -152,6 +161,49 @@ export function createAnimatedRenderer(pack: MascotPack): {
         stopWalk();
       }
     }, anim.idleTimeout);
+
+    idlePadTimeout = setTimeout(async () => {
+      const { log } = await import("./logger");
+      log("DEBUG", `idlePadTimeout fired, state=${currentState()}, prop=${activeProp()?.name ?? "null"}`);
+      if (currentState() !== "idle") return;
+      if (activeProp()) return;
+      if (Math.random() >= 0.4) {
+        log("DEBUG", "idle Pad skipped (70% miss)");
+        return;
+      }
+      const { getProp } = await import("./prop-loader");
+      const pad = getProp("pad");
+      if (!pad) return;
+      log("DEBUG", "idle Pad triggered!");
+      setProp(pad);
+      setCharacterHiddenSignal(true);
+      emitPropShow();
+      const duration = 10000 + Math.random() * 10000;
+      idlePadTimeout = setTimeout(() => {
+        setProp(null);
+        setCharacterHiddenSignal(false);
+      }, duration);
+    }, 30000);
+
+    idleBoxTimeout = setTimeout(async () => {
+      if (currentState() !== "idle") return;
+      if (activeProp()) return;
+      const now = Date.now();
+      if (now - lastBoxEvent < 60000) return;
+      if (Math.random() >= 0.05) return;
+      lastBoxEvent = now;
+      const { getProp } = await import("./prop-loader");
+      const box = getProp("box");
+      if (!box) return;
+      setProp(box);
+      setCharacterHiddenSignal(true);
+      emitPropShow();
+      idleBoxTimeout = setTimeout(() => {
+        setProp(null);
+        setCharacterHiddenSignal(false);
+        bounce();
+      }, 3000);
+    }, 60000);
   };
 
   resetIdleSleep();
@@ -181,7 +233,7 @@ export function createAnimatedRenderer(pack: MascotPack): {
   // 1. Blink
   const hasBlink = (pack.frames as Record<string, string[] | undefined>)["blink"] !== undefined;
 
-  const blinkTimer = setInterval(() => {
+  setInterval(() => {
     if (currentState() !== "sleeping" && Math.random() < anim.blinkChance && hasBlink) {
       setFrameOverride("blink");
       setTimeout(() => setFrameOverride(null), 150);
@@ -193,7 +245,7 @@ export function createAnimatedRenderer(pack: MascotPack): {
     (k) => k !== "default" && k !== "blink",
   );
 
-  const expressionTimer = setInterval(() => {
+  setInterval(() => {
     if (currentState() === "idle" && !frameOverride()) {
       const pick = availableExpressions[Math.floor(Math.random() * availableExpressions.length)];
       if (pick) {
@@ -204,7 +256,7 @@ export function createAnimatedRenderer(pack: MascotPack): {
   }, anim.expressionInterval);
 
   // 3. Breathing
-  const breathTimer = setInterval(() => {
+  setInterval(() => {
     if (currentState() === "idle") {
       setBreathPhase((v) => !v);
     }
@@ -243,30 +295,28 @@ export function createAnimatedRenderer(pack: MascotPack): {
     setWalkOffset(0);
   };
 
-  let walkTimeout: ReturnType<typeof setTimeout>;
-
   function scheduleNextWalk() {
     if (!walkEnabled()) return setTimeout(() => {}, 60000);
     const delay = anim.walkMinDelay + Math.floor(Math.random() * (anim.walkMaxDelay - anim.walkMinDelay));
     return setTimeout(() => {
       if (currentState() === "idle" && !frameOverride() && walkStep === -1 && walkEnabled()) {
-        if (Math.random() < 0.1) {
+        const boom = Math.random() < 0.1;
+        log("DEBUG", `walk callback: boom=${boom}`);
+        if (boom) {
           explode();
         } else {
           startWalk();
         }
       }
       if (currentState() !== "sleeping") {
-        walkTimeout = scheduleNextWalk();
+        scheduleNextWalk();
       }
     }, delay);
   }
 
-  walkTimeout = scheduleNextWalk();
+  scheduleNextWalk();
 
   // 5. Jump
-  let jumpTimeout: ReturnType<typeof setTimeout>;
-
   function scheduleNextJump() {
     const delay = anim.jumpMinDelay + Math.floor(Math.random() * (anim.jumpMaxDelay - anim.jumpMinDelay));
     return setTimeout(() => {
@@ -281,12 +331,12 @@ export function createAnimatedRenderer(pack: MascotPack): {
         }, 2000);
       }
       if (currentState() !== "sleeping") {
-        jumpTimeout = scheduleNextJump();
+        scheduleNextJump();
       }
     }, delay);
   }
 
-  jumpTimeout = scheduleNextJump();
+  scheduleNextJump();
 
   // ─── Pack-defined effect timers ───
   const effectTimers: ReturnType<typeof setInterval>[] = [];
@@ -296,16 +346,10 @@ export function createAnimatedRenderer(pack: MascotPack): {
     }
   }
 
+  resetIdleSleep();
+
   // ─── Cleanup ───
   onCleanup(() => {
-    clearInterval(blinkTimer);
-    clearInterval(expressionTimer);
-    clearInterval(breathTimer);
-    clearTimeout(walkTimeout);
-    clearTimeout(jumpTimeout);
-    if (idleSleepTimeout) clearTimeout(idleSleepTimeout);
-    if (walkInterval) clearInterval(walkInterval);
-    for (const t of effectTimers) clearInterval(t);
     stopFlash();
     stopDragMsg();
     stopBounce();
@@ -315,7 +359,6 @@ export function createAnimatedRenderer(pack: MascotPack): {
     stopFall();
     stopBomb();
     if (zzzTimer) { clearInterval(zzzTimer); zzzTimer = null; }
-    stopPropTimer();
   });
 
   // ─── Render ───
@@ -333,6 +376,9 @@ export function createAnimatedRenderer(pack: MascotPack): {
     scatter();
     bomb();
     versionMsg();
+    characterHidden();
+    activeProp();
+    propPosition();
 
     for (const [, [get]] of extraSignals) {
       get();
@@ -345,7 +391,8 @@ export function createAnimatedRenderer(pack: MascotPack): {
     const width = rawLines[0]?.length ?? 10;
     const blank = " ".repeat(width);
 
-    let lines: string[] = characterHidden()
+    const hideForProp = propPosition() === "front";
+    let lines: string[] = (characterHidden() || hideForProp)
       ? rawLines.map(() => blank)
       : rawLines.map((line, i) => {
       if (!breathPhase()) {
@@ -422,8 +469,8 @@ export function createAnimatedRenderer(pack: MascotPack): {
     if (s !== "idle") {
       stopWalk();
     } else if (walkEnabled()) {
-      walkTimeout = scheduleNextWalk();
-      jumpTimeout = scheduleNextJump();
+      scheduleNextWalk();
+      scheduleNextJump();
     }
 
     if (s === "thinking" || s === "busy") {
@@ -455,7 +502,7 @@ export function createAnimatedRenderer(pack: MascotPack): {
     if (!next) {
       stopWalk();
     } else if (currentState() === "idle") {
-      walkTimeout = scheduleNextWalk();
+      scheduleNextWalk();
     }
   };
 
@@ -596,15 +643,22 @@ export function createAnimatedRenderer(pack: MascotPack): {
           clearInterval(fuseTimer);
           setBomb(null);
           setFrameOverride(null);
-          setFlashColor("#FFFFFF");
+          const explosionColors = ["#FF0000", "#FF6600", "#FFCC00"];
+          let expColorIdx = 0;
+          setFlashColor(explosionColors[0]);
+          const expColorTimer = setInterval(() => {
+            expColorIdx++;
+            setFlashColor(explosionColors[expColorIdx % explosionColors.length]);
+          }, 100);
           const lineCount = getFrameLines(pack, "default").length;
           const offsets = Array.from({ length: lineCount }, () => ({
             dx: Math.floor((Math.random() - 0.5) * 30),
             dy: Math.floor((Math.random() - 0.5) * 15),
           }));
           setScatter(offsets);
-          setCelebrate({ text: "ᵇᵒᵒᵐ~", count: 0 });
+          setCelebrate({ text: "ᵇᵒᵒᵐ~💥", count: 0 });
           explodeTimer = setTimeout(() => {
+            clearInterval(expColorTimer);
             setFlashColor(null);
             setCelebrate(null);
             scatterIn();
@@ -624,8 +678,14 @@ export function createAnimatedRenderer(pack: MascotPack): {
       setPropPosition(pos);
       stopPropTimer();
       if (Array.isArray(prop.frames[0]) && prop.frameInterval) {
+        const totalFrames = (prop.frames as string[][]).length;
+        const randomize = prop.name === "laptop";
         propTimer = setInterval(() => {
-          setPropFrameIdx((idx) => (idx + 1) % (prop.frames as string[][]).length);
+          if (randomize) {
+            setPropFrameIdx(Math.floor(Math.random() * totalFrames));
+          } else {
+            setPropFrameIdx((idx) => (idx + 1) % totalFrames);
+          }
         }, prop.frameInterval);
       }
     } else {

package/src/core/celebration-bus.ts

@@ -3,6 +3,7 @@ const bus = new EventTarget();
 const CELEBRATE_EVENT = "mascot:celebrate";
 const VERSION_EVENT = "mascot:version";
 const SCATTER_EVENT = "mascot:scatter";
+const PROP_SHOW_EVENT = "mascot:propshow";
 
 export function emitCelebrate(newVersion: string): void {
   bus.dispatchEvent(new CustomEvent(CELEBRATE_EVENT, { detail: { newVersion } }));
@@ -39,3 +40,13 @@ export function onScatter(handler: () => void): () => void {
   bus.addEventListener(SCATTER_EVENT, listener);
   return () => bus.removeEventListener(SCATTER_EVENT, listener);
 }
+
+export function emitPropShow(): void {
+  bus.dispatchEvent(new CustomEvent(PROP_SHOW_EVENT));
+}
+
+export function onPropShow(handler: () => void): () => void {
+  const listener = () => { handler(); };
+  bus.addEventListener(PROP_SHOW_EVENT, listener);
+  return () => bus.removeEventListener(PROP_SHOW_EVENT, listener);
+}