@mingxy/opencode-mascot 0.1.2 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mingxy/opencode-mascot",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "OpenCode TUI mascot plugin framework - customizable ASCII mascots for your terminal",
   "author": "mingxy",
   "license": "MIT",
@@ -29,6 +29,6 @@
   "keywords": ["opencode", "tui", "mascot", "plugin", "ascii-art"],
   "repository": {
     "type": "git",
-    "url": "https://github.com/mingxy/opencode-mascot"
+    "url": "https://github.com/mengfanbo123/opencode-mascot"
   }
 }

package/src/builtins/baozi/frames.ts

@@ -0,0 +1,43 @@
+//     0123456789
+const defaultFrame = [
+  "  ~∘◦~   ",
+  " ╭❀❀╮   ",
+  "( ◕ᴗ◕ )  ",
+  " ╰───╯   ",
+];
+
+const blinkFrame = [
+  "  ~∘◦~   ",
+  " ╭❀❀╮   ",
+  "( -_- )  ",
+  " ╰───╯   ",
+];
+
+const happyFrame = [
+  "  ~∘◦~   ",
+  " ╭❀❀╮   ",
+  "( ◕ω◕ )  ",
+  " ╰───╯   ",
+];
+
+const thinkingFrame = [
+  "  ~∘◦~   ",
+  " ╭❀❀╮   ",
+  "( ◕_◕ )  ",
+  " ╰───╯   ",
+];
+
+const sleepingFrame = [
+  "  ~∘◦~   ",
+  " ╭❀❀╮   ",
+  "( -.- )  ",
+  " ╰───╯   ",
+];
+
+export const frames = {
+  default: defaultFrame,
+  blink: blinkFrame,
+  happy: happyFrame,
+  thinking: thinkingFrame,
+  sleeping: sleepingFrame,
+};

package/src/builtins/baozi/index.ts

@@ -0,0 +1,101 @@
+import type { MascotPack } from "../../core/types";
+import { frames } from "./frames";
+
+const STEAM_PATTERNS = [
+  "  ~∘◦~   ",
+  "  ~◦∘~   ",
+  "   ∘◦~   ",
+  "   ◦∘~   ",
+];
+
+const BUBBLE_TEXTS = ["ᵃⁿᵍ~", "ˣᶦᵃⁿ!", "ᵏᵘᵃⁱ", "ᶠᵃⁱ"];
+
+const baoziEffects: MascotPack["effects"] = {
+  signals: [
+    { name: "steamPhase", initial: 0 },
+    { name: "bubbleIdx", initial: 0 },
+  ],
+
+  timers: [
+    {
+      interval: 1200,
+      update(ctx) {
+        ctx.set("steamPhase", ((ctx.get("steamPhase") as number) + 1) % STEAM_PATTERNS.length);
+      },
+    },
+    {
+      interval: 2500,
+      update(ctx) {
+        if (ctx.state === "busy" || ctx.state === "thinking") {
+          ctx.set("bubbleIdx", ((ctx.get("bubbleIdx") as number) + 1) % BUBBLE_TEXTS.length);
+        }
+      },
+    },
+  ],
+
+  render(lines, ctx) {
+    const steamPhase = ctx.get("steamPhase") as number;
+
+    if (ctx.dragging) {
+      const faceIdx = lines.findIndex(l => /\(.*\)/.test(l));
+      if (faceIdx >= 0) {
+        lines[faceIdx] = lines[faceIdx].replace(/\(.*?\)/, "( °□° )");
+      }
+      return lines;
+    }
+
+    if (lines.length > 0) {
+      lines[0] = STEAM_PATTERNS[steamPhase];
+    }
+
+    if (ctx.state === "sleeping") {
+      const zzzPhase = ((ctx.get("steamPhase") as number) % 3) + 1;
+      for (let i = 0; i < lines.length; i++) {
+        if (lines[i].includes("-.-")) {
+          const padded = lines[i].padEnd(10);
+          lines[i] = padded + " " + "Z" + "z".repeat(zzzPhase - 1);
+          break;
+        }
+      }
+    }
+
+    if (ctx.state === "busy" || ctx.state === "thinking") {
+      const idx = ctx.get("bubbleIdx") as number;
+      if (lines.length > 0) {
+        lines[0] = STEAM_PATTERNS[steamPhase] + BUBBLE_TEXTS[idx];
+      }
+    }
+
+    return lines;
+  },
+};
+
+export const baoziPack: MascotPack = {
+  name: "@mingxy/mascot-baozi",
+  displayName: "包子",
+  version: "0.1.0",
+  author: "mingxy",
+  description: "A warm steamed bun mascot — soft, round, and always fresh.",
+
+  frames,
+
+  colors: {
+    defaultFg: "#D4885A",
+  },
+
+  animations: {
+    blinkInterval: 3000,
+    blinkChance: 0.25,
+    expressionInterval: 10000,
+    idleTimeout: 120000,
+  },
+
+  sidebar: {
+    greetings: ["热乎乎的包子出炉啦~"],
+    busyPhrases: ["蒸包子中..."],
+  },
+
+  bubbleTexts: ["蒸着...", "发酵中...", "冒热气...", "快熟了..."],
+
+  effects: baoziEffects,
+};

package/src/builtins/yueer/index.ts

@@ -1,13 +1,185 @@
-/**
- * 月儿 (Yue'er) — Ice Empress mascot pack.
- *
- * Nine Heavens' Empress with ice-blue eyes and silver-white hair.
- * She awaits her Master's command with grace and quiet devotion.
- */
-
-import type { MascotPack } from "../../core/types";
+import type { MascotPack, EffectRenderCtx } from "../../core/types";
 import { frames } from "./frames";
 
+const BUBBLE_TEXTS = [
+  "ᵉᵐᵐ~...~~", "ᵉᵗᶜⁿᵍ...", "ˢⁱᵃⁿᵍ...~", "ˡᵃⁱˡᵃ~..",
+  "ʰᵐᵐ~..✧", "ᵃⁿⁿ~...", "ᵇᵘˢʸˡᵃ~", "ᵍᵉⁿᵍ~..",
+  "ˣⁱᵃⁿˣⁱᵃⁿ..", "ᵈᵉⁿᵍ~..", "ʰᵃᵒ~...✧", "ᵍᵘˡᵘ~..",
+];
+const THINKING_FACES = ["o_o", "O_O", ">_o", "o_<", "⊙_⊙", "◔_◔"];
+
+const yueerEffects: MascotPack["effects"] = {
+  signals: [
+    { name: "ahogeAlt", initial: false },
+    { name: "braidAlt", initial: false },
+    { name: "waveSide", initial: false },
+    { name: "zzzPhase", initial: 0 },
+    { name: "stompActive", initial: false },
+    { name: "stompAlt", initial: false },
+    { name: "bubbleIdx", initial: 0 },
+    { name: "thinkingFaceIdx", initial: 0 },
+    { name: "thinkingCountdown", initial: 0 },
+    { name: "flapAlt", initial: false },
+  ],
+
+  timers: [
+    {
+      interval: 1500,
+      update(ctx) {
+        if (Math.random() < 0.25) {
+          ctx.set("ahogeAlt", true);
+          setTimeout(() => ctx.set("ahogeAlt", false), 200);
+        }
+      },
+    },
+    {
+      interval: 200,
+      update(ctx) {
+        if (
+          ctx.state === "thinking" &&
+          ctx.frameOverride === null
+        ) {
+          ctx.set("stompActive", true);
+          ctx.set("stompAlt", !(ctx.get("stompAlt") as boolean));
+        } else {
+          ctx.set("stompActive", false);
+        }
+      },
+    },
+    {
+      interval: 1500,
+      update(ctx) {
+        if (ctx.state === "sleeping") {
+          ctx.set("zzzPhase", ((ctx.get("zzzPhase") as number) + 1) % 4);
+        } else {
+          ctx.set("zzzPhase", 0);
+        }
+      },
+    },
+    {
+      interval: 300,
+      update(ctx) {
+        if (ctx.frameOverride === "happy" || ctx.state === "happy") {
+          ctx.set("waveSide", !(ctx.get("waveSide") as boolean));
+        }
+        ctx.set("flapAlt", !(ctx.get("flapAlt") as boolean));
+      },
+    },
+    {
+      interval: 2500,
+      update(ctx) {
+        if (ctx.state === "busy" || ctx.state === "thinking") {
+          ctx.set("bubbleIdx", ((ctx.get("bubbleIdx") as number) + 1) % BUBBLE_TEXTS.length);
+        }
+      },
+    },
+    {
+      interval: 1000,
+      update(ctx) {
+        if (ctx.state === "thinking" || ctx.state === "busy") {
+          let cd = ctx.get("thinkingCountdown") as number;
+          if (!cd || cd <= 0) cd = 5 + Math.floor(Math.random() * 11);
+          cd--;
+          if (cd <= 0) {
+            ctx.set("thinkingFaceIdx", ((ctx.get("thinkingFaceIdx") as number) + 1) % THINKING_FACES.length);
+          }
+          ctx.set("thinkingCountdown", cd);
+        } else {
+          ctx.set("thinkingFaceIdx", 0);
+          ctx.set("thinkingCountdown", 0);
+        }
+      },
+    },
+  ],
+
+  render(lines: string[], ctx: EffectRenderCtx): string[] {
+    const { state, frameName, breathPhase, jumpOffset, dragging, get } = ctx;
+    let result = [...lines];
+
+    const ahogeAlt = get("ahogeAlt") as boolean;
+    const waveSide = get("waveSide") as boolean;
+    const zzzPhase = get("zzzPhase") as number;
+    const stompActive = get("stompActive") as boolean;
+    const stompAlt = get("stompAlt") as boolean;
+    const flapAlt = get("flapAlt") as boolean;
+
+    if (dragging) {
+      const faceLine = result.findIndex((l) => /\(.*\)/.test(l));
+      if (faceLine >= 0) {
+        result[faceLine] = result[faceLine].replace(/\(.*?\)/, "( °□° )");
+      }
+      const armLine = result.findIndex(l => l.includes("┃███┃"));
+      if (armLine >= 0) {
+        const left = flapAlt ? "╱" : "╲";
+        const right = flapAlt ? "╲" : "╱";
+        result[armLine] = result[armLine].replace("┃███┃", `${left}███${right}`);
+      }
+      return result;
+    }
+
+    if (jumpOffset !== 0) {
+      const armLine = result.findIndex(l => l.includes("┃███┃"));
+      if (armLine >= 0) {
+        const left = flapAlt ? "╱" : "╲";
+        const right = flapAlt ? "╲" : "╱";
+        result[armLine] = result[armLine].replace("┃███┃", `${left}███${right}`);
+      }
+    }
+
+    if (!breathPhase) {
+      result = result.map((l) => (l.includes("~") ? l.replace(/~/g, "-") : l));
+    }
+
+    if (ahogeAlt) {
+      result = result.map((l) => (l.includes("☆") ? l.replace("☆", "★") : l));
+    }
+
+    if (frameName === "happy") {
+      const faceIdx = result.findIndex((l) => l.includes("^ω^"));
+      if (faceIdx >= 0) {
+        result[faceIdx] = waveSide ? "╲( ^ω^ )╱ " : " ~( ^ω^ )~";
+      }
+    }
+
+    if (stompActive) {
+      const legIdx = result.length - 1;
+      if (legIdx >= 0) {
+        result[legIdx] = stompAlt ? "  ╲ ╱  " : "  ╱ ╲  ";
+      }
+    }
+
+    if (state === "thinking" || state === "busy") {
+      const faceIdx = get("thinkingFaceIdx") as number;
+      const faceLine = result.findIndex((l) => /\(.*\)/.test(l));
+      if (faceLine >= 0) {
+        result[faceLine] = result[faceLine].replace(/\(.*?\)/, `( ${THINKING_FACES[faceIdx]} )`);
+      }
+    }
+
+    if (zzzPhase > 0 && state === "sleeping") {
+      const baseWidth = 10;
+      for (let i = 0; i < result.length; i++) {
+        if (result[i].includes("-.-")) {
+          const zzz = "Z" + "z".repeat(zzzPhase - 1);
+          const padded = result[i].padEnd(baseWidth);
+          result[i] = padded + " " + zzz;
+          break;
+        }
+      }
+    }
+
+    if ((state === "busy" || state === "thinking")) {
+      const idx = get("bubbleIdx") as number;
+      const ahogeLine = result.findIndex(l => l.includes("☆") || l.includes("★"));
+      if (ahogeLine >= 0) {
+        result[ahogeLine] = result[ahogeLine].trimEnd() + " " + BUBBLE_TEXTS[idx];
+      }
+    }
+
+    return result;
+  },
+};
+
 export const yueerPack: MascotPack = {
   name: "@mingxy/mascot-yueer",
   displayName: "月儿",
@@ -18,13 +190,13 @@ export const yueerPack: MascotPack = {
   frames,
 
   colors: {
-    defaultFg: "#B8C4D8",
+    defaultFg: "#8B7EB8",
   },
 
   animations: {
     blinkInterval: 2500,
     blinkChance: 0.3,
-    expressionInterval: 50000,
+    expressionInterval: 8000,
     idleTimeout: 90000,
   },
 
@@ -32,4 +204,8 @@ export const yueerPack: MascotPack = {
     greetings: ["师尊，月儿在此候命~"],
     busyPhrases: ["铸造法器中..."],
   },
+
+  bubbleTexts: ["嗯...", "让我想想...", "等等...", "本帝在算..."],
+
+  effects: yueerEffects,
 };

package/src/components/sidebar-mascot.tsx

@@ -1,51 +1,161 @@
 /** @jsxImportSource @opentui/solid */
 
+import { createSignal } from "solid-js";
 import type { JSX } from "@opentui/solid";
-import type { MascotPack } from "../core/types";
+import type { MascotPack, MascotState, SwitchConfig } from "../core/types";
 import { createAnimatedRenderer } from "../core/ascii-renderer";
 
 interface SidebarMascotProps {
-  mascot: MascotPack;
+  mascots: Record<string, MascotPack>;
+  switchConfig?: SwitchConfig;
+  initialMascot?: string;
   api: {
     event: {
       on(event: string, callback: (data: unknown) => void): void;
     };
-    slots: {
-      register(registration: { slots: Record<string, () => JSX.Element> }): void;
+    renderer: {
+      clearSelection(): void;
     };
   };
 }
 
+const DEFAULT_STATE_MAP: Partial<Record<MascotState, string>> = {
+  idle: "yueer",
+  happy: "yueer",
+  thinking: "yueer",
+  busy: "baozi",
+  sleeping: "baozi",
+};
+
 export function SidebarMascot(props: SidebarMascotProps): JSX.Element {
-  const { element, setState } = createAnimatedRenderer(props.mascot);
+  const names = Object.keys(props.mascots);
+  const initialName =
+    props.initialMascot && props.mascots[props.initialMascot]
+      ? props.initialMascot
+      : names[Math.floor(Math.random() * names.length)];
+
+  const [currentName, setCurrentName] = createSignal(initialName);
+  const [posX, setPosX] = createSignal(20);
+  const [posY, setPosY] = createSignal(2);
+  let dragStartX = 0;
+  let dragStartY = 0;
+  let dragAnchorX = 0;
+  let dragAnchorY = 0;
+  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);
+  }
+
+  const switchTo = (name: string) => {
+    if (props.mascots[name] && name !== currentName()) {
+      setCurrentName(name);
+    }
+  };
+
+  const setStateWithSwitch = (s: MascotState) => {
+    const cur = currentName();
+    renderers[cur].setState(s);
+
+    const stateMap = props.switchConfig?.onState ?? DEFAULT_STATE_MAP;
+    const target = stateMap[s];
+    if (target && target !== cur && props.mascots[target]) {
+      setCurrentName(target);
+      renderers[target].setState(s);
+    }
+  };
 
   props.api.event.on("session.status", (data: unknown) => {
-    const event = data as { status?: { type?: string } } | null;
-    const statusType = event?.status?.type;
+    // Plugin receives: { id, type, properties: { sessionID, status: { type } } }
+    const payload = data as { type?: string; properties?: { sessionID?: string; status?: { type?: string } } } | null;
+    const statusType = payload?.properties?.status?.type;
 
     if (statusType === "busy" || statusType === "retry") {
-      setState("busy");
+      renderers[currentName()].setState("busy");
     } else {
-      setState("idle");
+      setStateWithSwitch("idle");
     }
   });
 
   props.api.event.on("session.idle", () => {
-    setState("happy");
-    setTimeout(() => setState("idle"), 3000);
+    setStateWithSwitch("happy");
+    setTimeout(() => setStateWithSwitch("idle"), 3000);
+  });
+
+  props.api.event.on("mascot.switch", (data: unknown) => {
+    const target = data as { name?: string } | null;
+    if (target?.name) {
+      switchTo(target.name);
+    } else {
+      const others = names.filter((n) => n !== currentName());
+      if (others.length > 0) {
+        switchTo(others[Math.floor(Math.random() * others.length)]);
+      }
+    }
+  });
+
+  props.api.event.on("mascot.toggleWalk", () => {
+    renderers[currentName()].toggleWalk();
   });
 
   return (
     <box
       position="absolute"
-      left={0}
-      right={0}
-      top={2}
+      left={posX()}
+      top={posY()}
       alignItems="center"
       zIndex={100}
       flexDirection="column"
+      onMouseDown={(e: any) => {
+        const now = Date.now();
+        if (now - lastClickTime < 300) {
+          const cur = currentName();
+          const idx = names.indexOf(cur);
+          const next = names[(idx + 1) % names.length];
+          switchTo(next);
+          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);
+          e.preventDefault();
+          e.stopPropagation();
+          props.api.renderer.clearSelection();
+        }
+      }}
+      onMouseDrag={(e: any) => {
+        if (e.modifiers?.alt && isDragging) {
+          setPosX(dragAnchorX + (e.x - dragStartX));
+          setPosY(dragAnchorY + (e.y - dragStartY));
+          e.preventDefault();
+          e.stopPropagation();
+          props.api.renderer.clearSelection();
+        }
+      }}
+      onMouseUp={() => {
+        if (isDragging) {
+          isDragging = false;
+          renderers[currentName()].setDragging(false);
+        }
+      }}
+      onMouseDragEnd={() => {
+        if (isDragging) {
+          isDragging = false;
+          renderers[currentName()].setDragging(false);
+        }
+      }}
+
     >
-      {element()}
+      {renderers[currentName()]?.element() ?? null}
     </box>
   );
 }

package/src/core/ascii-renderer.tsx

@@ -2,7 +2,7 @@
 
 import { createSignal, onCleanup } from "solid-js";
 import type { JSX } from "@opentui/solid";
-import type { MascotPack, MascotState } from "./types";
+import type { MascotPack, MascotState, EffectTimerCtx, EffectRenderCtx } from "./types";
 
 const STATE_TO_FRAME: Record<MascotState, string> = {
   idle: "default",
@@ -18,11 +18,11 @@ const DEFAULT_ANIM = {
   expressionInterval: 8000,
   idleTimeout: 120000,
   breathInterval: 3000,
-  ahogeInterval: 1500,
-  ahogeChance: 0.25,
+  walkEnabled: true,
+  walkMinDelay: 20000,
+  walkMaxDelay: 40000,
   jumpMinDelay: 20000,
   jumpMaxDelay: 40000,
-  stompThreshold: 30000,
 };
 
 const WALK_PATH = [1, 2, 3, 4, 3, 2, 1, 0, -1, -2, -3, -2, -1, 0];
@@ -45,35 +45,70 @@ function renderLines(lines: string[], fg?: string): JSX.Element {
 export function createAnimatedRenderer(pack: MascotPack): {
   element: () => JSX.Element;
   setState: (s: MascotState) => void;
+  toggleWalk: () => void;
+  setDragging: (v: boolean) => void;
 } {
   const anim = { ...DEFAULT_ANIM, ...pack.animations };
   const fg = pack.colors?.defaultFg || undefined;
+  const effects = pack.effects;
 
   const [currentState, setCurrentState] = createSignal<MascotState>("idle");
   const [frameOverride, setFrameOverride] = createSignal<string | null>(null);
-  const [legsVisible, setLegsVisible] = createSignal(true);
+  const [breathPhase, setBreathPhase] = createSignal(true);
   const [walkOffset, setWalkOffset] = createSignal(0);
-  const [ahogeAlt, setAhogeAlt] = createSignal(false);
-  const [braidAlt, setBraidAlt] = createSignal(false);
-  const [waveSide, setWaveSide] = createSignal(false);
-  const [zzzPhase, setZzzPhase] = createSignal(0);
   const [jumpOffset, setJumpOffset] = createSignal(0);
-  const [stompActive, setStompActive] = createSignal(false);
-  const [stompAlt, setStompAlt] = createSignal(false);
+  const [walkEnabled, setWalkEnabled] = createSignal(anim.walkEnabled ?? true);
+  const [dragging, setDraggingSignal] = createSignal(false);
+
+  let idleSleepTimeout: ReturnType<typeof setTimeout> | null = null;
+
+  const resetIdleSleep = () => {
+    if (idleSleepTimeout) clearTimeout(idleSleepTimeout);
+    idleSleepTimeout = null;
+    if (currentState() !== "idle") return;
+    idleSleepTimeout = setTimeout(() => {
+      if (currentState() === "idle") {
+        setCurrentState("sleeping");
+        stopWalk();
+      }
+    }, anim.idleTimeout);
+  };
+
+  resetIdleSleep();
+
+  // ─── Extra signals from pack effects ───
+  const extraSignals = new Map<string, [() => unknown, (v: unknown) => void]>();
+  if (effects?.signals) {
+    for (const sig of effects.signals) {
+      const [get, set] = createSignal(sig.initial);
+      extraSignals.set(sig.name, [get, set]);
+    }
+  }
 
-  let thinkingStartTime = 0;
+  const getExtra = (name: string): unknown => extraSignals.get(name)?.[0]() ?? null;
+  const setExtra = (name: string, value: unknown) => extraSignals.get(name)?.[1](value);
 
-  // ============ 1. Blink ============
+  const timerCtx: EffectTimerCtx = {
+    get: getExtra,
+    set: setExtra,
+    get state() { return currentState(); },
+    get frameOverride() { return frameOverride(); },
+    setFrameOverride: (name) => setFrameOverride(name),
+  };
+
+  // ─── Built-in timers ───
+
+  // 1. Blink
   const hasBlink = (pack.frames as Record<string, string[] | undefined>)["blink"] !== undefined;
 
   const blinkTimer = setInterval(() => {
-    if (Math.random() < anim.blinkChance && hasBlink) {
+    if (currentState() !== "sleeping" && Math.random() < anim.blinkChance && hasBlink) {
       setFrameOverride("blink");
       setTimeout(() => setFrameOverride(null), 150);
     }
   }, anim.blinkInterval);
 
-  // ============ 2. Random expression ============
+  // 2. Random expression
   const availableExpressions = Object.keys(pack.frames).filter(
     (k) => k !== "default" && k !== "blink",
   );
@@ -83,37 +118,30 @@ export function createAnimatedRenderer(pack: MascotPack): {
       const pick = availableExpressions[Math.floor(Math.random() * availableExpressions.length)];
       if (pick) {
         setFrameOverride(pick);
-        if (pick === "happy") startWave();
-        setTimeout(() => {
-          setFrameOverride(null);
-          stopWave();
-        }, 2000);
+        setTimeout(() => setFrameOverride(null), 2000);
       }
     }
   }, anim.expressionInterval);
 
-  // ============ 3. Breathing (legs tuck + braids flutter) ============
+  // 3. Breathing
   const breathTimer = setInterval(() => {
-    setLegsVisible((v) => !v);
-    setBraidAlt((v) => !v);
-  }, anim.breathInterval);
-
-  // ============ 4. Ahoge wobble (呆毛晃) ============
-  const ahogeTimer = setInterval(() => {
-    if (Math.random() < anim.ahogeChance) {
-      setAhogeAlt(true);
-      setTimeout(() => setAhogeAlt(false), 200);
+    if (currentState() === "idle") {
+      setBreathPhase((v) => !v);
     }
-  }, anim.ahogeInterval);
+  }, anim.breathInterval);
 
-  // ============ 5. Walk ============
+  // 4. Walk
   let walkStep = -1;
   let walkInterval: ReturnType<typeof setInterval> | null = null;
 
   const startWalk = () => {
-    if (walkInterval) return;
+    if (walkInterval || !walkEnabled()) return;
     walkStep = 0;
     walkInterval = setInterval(() => {
+      if (currentState() !== "idle") {
+        stopWalk();
+        return;
+      }
       if (walkStep < WALK_PATH.length) {
         setWalkOffset(WALK_PATH[walkStep]);
         walkStep++;
@@ -138,18 +166,21 @@ export function createAnimatedRenderer(pack: MascotPack): {
   let walkTimeout: ReturnType<typeof setTimeout>;
 
   function scheduleNextWalk() {
-    const delay = 5000 + Math.floor(Math.random() * 5000);
+    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) {
+      if (currentState() === "idle" && !frameOverride() && walkStep === -1 && walkEnabled()) {
         startWalk();
       }
-      walkTimeout = scheduleNextWalk();
+      if (currentState() !== "sleeping") {
+        walkTimeout = scheduleNextWalk();
+      }
     }, delay);
   }
 
   walkTimeout = scheduleNextWalk();
 
-  // ============ 6. Jump ============
+  // 5. Jump
   let jumpTimeout: ReturnType<typeof setTimeout>;
 
   function scheduleNextJump() {
@@ -157,77 +188,49 @@ export function createAnimatedRenderer(pack: MascotPack): {
     return setTimeout(() => {
       if (currentState() === "idle" && !frameOverride() && walkStep === -1) {
         setJumpOffset(-2);
-        setTimeout(() => setJumpOffset(0), 500);
+        setTimeout(() => setJumpOffset(-1), 1500);
+        setTimeout(() => setJumpOffset(0), 2000);
+      }
+      if (currentState() !== "sleeping") {
+        jumpTimeout = scheduleNextJump();
       }
-      jumpTimeout = scheduleNextJump();
     }, delay);
   }
 
   jumpTimeout = scheduleNextJump();
 
-  // ============ 7. Wave (挥手 — happy state) ============
-  let waveTimer: ReturnType<typeof setInterval> | null = null;
-
-  const startWave = () => {
-    if (waveTimer) return;
-    waveTimer = setInterval(() => setWaveSide((v) => !v), 300);
-  };
-
-  const stopWave = () => {
-    if (waveTimer) {
-      clearInterval(waveTimer);
-      waveTimer = null;
+  // ─── Pack-defined effect timers ───
+  const effectTimers: ReturnType<typeof setInterval>[] = [];
+  if (effects?.timers) {
+    for (const t of effects.timers) {
+      effectTimers.push(setInterval(() => t.update(timerCtx), t.interval));
     }
-    setWaveSide(false);
-  };
-
-  // ============ 8. Zzz bubbles (sleeping state) ============
-  const zzzTimer = setInterval(() => {
-    if (currentState() === "sleeping") {
-      setZzzPhase((p) => (p + 1) % 4);
-    } else {
-      setZzzPhase(0);
-    }
-  }, 1500);
-
-  // ============ 9. Stomp (跺脚 — thinking > threshold) ============
-  const stompTimer = setInterval(() => {
-    if (
-      currentState() === "thinking" &&
-      thinkingStartTime > 0 &&
-      Date.now() - thinkingStartTime > anim.stompThreshold
-    ) {
-      setStompActive(true);
-      setStompAlt((a) => !a);
-    } else {
-      setStompActive(false);
-    }
-  }, 200);
+  }
 
-  // ============ Cleanup ============
+  // ─── Cleanup ───
   onCleanup(() => {
     clearInterval(blinkTimer);
     clearInterval(expressionTimer);
     clearInterval(breathTimer);
-    clearInterval(ahogeTimer);
-    clearInterval(zzzTimer);
-    clearInterval(stompTimer);
     clearTimeout(walkTimeout);
     clearTimeout(jumpTimeout);
+    if (idleSleepTimeout) clearTimeout(idleSleepTimeout);
     if (walkInterval) clearInterval(walkInterval);
-    stopWave();
+    for (const t of effectTimers) clearInterval(t);
   });
 
-  // ============ Render ============
+  // ─── Render ───
   const element = () => {
-    legsVisible();
-    ahogeAlt();
-    braidAlt();
-    waveSide();
-    zzzPhase();
+    breathPhase();
+    walkOffset();
     jumpOffset();
-    stompActive();
-    stompAlt();
+    frameOverride();
+    currentState();
+    dragging();
+
+    for (const [, [get]] of extraSignals) {
+      get();
+    }
 
     const frameName = frameOverride() ?? STATE_TO_FRAME[currentState()] ?? "default";
     const rawLines = getFrameLines(pack, frameName);
@@ -236,51 +239,24 @@ export function createAnimatedRenderer(pack: MascotPack): {
     const width = rawLines[0]?.length ?? 10;
     const blank = " ".repeat(width);
 
-    let lines = rawLines.map((line, i) => {
-      if (!legsVisible()) {
+    let lines: string[] = rawLines.map((line, i) => {
+      if (!breathPhase()) {
         if (i === 0) return blank;
         return rawLines[i - 1];
       }
       return line;
     });
 
-    // 2. Ahoge wobble: ☆ ↔ ★
-    if (ahogeAlt()) {
-      lines = lines.map((l) => (l.includes("☆") ? l.replace("☆", "★") : l));
-    }
-
-    // 3. Braid flutter: ~ ↔ -
-    if (braidAlt()) {
-      lines = lines.map((l) => (l.includes("~") ? l.replace(/~/g, "-") : l));
-    }
-
-    // 4. Wave: braids become hands ╲ / ╱ on face row
-    if (frameName === "happy") {
-      const faceIdx = lines.findIndex((l) => l.includes("^ω^"));
-      if (faceIdx >= 0) {
-        lines[faceIdx] = waveSide()
-          ? "╲( ^ω^ )╱ "
-          : " ~( ^ω^ )~";
-      }
-    }
-
-    // 5. Stomp: legs alternate ╲ ╱ ↔ ╱ ╲
-    if (stompActive()) {
-      const legIdx = lines.length - 1;
-      if (legIdx >= 0) {
-        lines[legIdx] = stompAlt() ? "  ╲ ╱  " : "  ╱ ╲  ";
-      }
-    }
-
-    // 6. Zzz: floating Z bubbles beside face
-    const zzz = zzzPhase();
-    if (zzz > 0 && currentState() === "sleeping") {
-      for (let i = 0; i < lines.length; i++) {
-        if (lines[i].includes("-.-")) {
-          lines[i] = lines[i] + " " + "Z".repeat(zzz);
-          break;
-        }
-      }
+    if (effects?.render) {
+        const renderCtx: EffectRenderCtx = {
+          state: currentState(),
+          frameName,
+          breathPhase: breathPhase(),
+          jumpOffset: jumpOffset(),
+          dragging: dragging(),
+          get: getExtra,
+        };
+      lines = effects.render(lines, renderCtx);
     }
 
     const top = jumpOffset();
@@ -293,28 +269,38 @@ export function createAnimatedRenderer(pack: MascotPack): {
     );
   };
 
-  // ============ State control ============
+  // ─── State control ───
   const setState = (s: MascotState) => {
-    const prev = currentState();
     setCurrentState(s);
+    setBreathPhase(true);
+    resetIdleSleep();
 
     if (s !== "idle") {
       stopWalk();
+    } else if (walkEnabled()) {
+      walkTimeout = scheduleNextWalk();
+      jumpTimeout = scheduleNextJump();
     }
+  };
 
-    if (s === "thinking" && prev !== "thinking") {
-      thinkingStartTime = Date.now();
-    } else if (s !== "thinking") {
-      thinkingStartTime = 0;
-      setStompActive(false);
+  const toggleWalk = () => {
+    const next = !walkEnabled();
+    setWalkEnabled(next);
+    if (!next) {
+      stopWalk();
+    } else if (currentState() === "idle") {
+      walkTimeout = scheduleNextWalk();
     }
+  };
 
-    if (s === "happy") {
-      startWave();
+  const setDragging = (v: boolean) => {
+    setDraggingSignal(v);
+    if (v) {
+      setJumpOffset(-1);
     } else {
-      stopWave();
+      setJumpOffset(0);
     }
   };
 
-  return { element, setState };
+  return { element, setState, toggleWalk, setDragging };
 }

package/src/core/mascot-loader.ts

@@ -1,18 +1,35 @@
 import type { MascotPack } from "./types"
 import { yueerPack } from "../builtins/yueer"
+import { baoziPack } from "../builtins/baozi"
 
 const BUILTINS: Record<string, MascotPack> = {
   yueer: yueerPack,
+  baozi: baoziPack,
+}
+
+const ALL_NAMES = Object.keys(BUILTINS)
+
+function randomPick<T>(arr: T[]): T {
+  return arr[Math.floor(Math.random() * arr.length)]
+}
+
+export function loadAllMascots(): Record<string, MascotPack> {
+  return { ...BUILTINS }
+}
+
+export function getMascotNames(): string[] {
+  return [...ALL_NAMES]
+}
+
+export function getRandomMascot(): MascotPack {
+  return randomPick(Object.values(BUILTINS))
 }
 
 export async function loadMascot(options?: Record<string, unknown>): Promise<MascotPack> {
-  const mascotName = (options?.mascot as string) || "yueer"
-  
-  if (BUILTINS[mascotName]) {
-    return BUILTINS[mascotName]
-  }
-  
-  // Future: npm package loading, local file loading
-  // Fallback to yueer
-  return yueerPack
+  const mascotName = (options?.mascot as string) || "random"
+
+  if (mascotName === "random") return getRandomMascot()
+  if (BUILTINS[mascotName]) return BUILTINS[mascotName]
+
+  return getRandomMascot()
 }

package/src/core/types.ts

@@ -17,18 +17,12 @@ export interface AnimationConfig {
   blinkChance?: number;
   expressionInterval?: number;
   idleTimeout?: number;
-  /** Breathing cycle in ms (default: 3000) */
   breathInterval?: number;
-  /** Ahoge wobble check interval in ms (default: 1500) */
-  ahogeInterval?: number;
-  /** Probability of ahoge wobble per check (default: 0.25) */
-  ahogeChance?: number;
-  /** Minimum delay between jumps in ms (default: 20000) */
+  walkEnabled?: boolean;
+  walkMinDelay?: number;
+  walkMaxDelay?: number;
   jumpMinDelay?: number;
-  /** Maximum delay between jumps in ms (default: 40000) */
   jumpMaxDelay?: number;
-  /** Stomp trigger: ms in thinking state before stomping (default: 30000) */
-  stompThreshold?: number;
 }
 
 /**
@@ -39,26 +33,72 @@ export interface SidebarConfig {
   busyPhrases?: string[];
 }
 
+// ─── Effect system types ───
+
+/**
+ * A single extra signal managed by the effect system.
+ * The renderer creates a Solid signal for each and exposes get/set to timers and render.
+ */
+export interface SignalDef {
+  name: string;
+  initial: unknown;
+}
+
 /**
- * Context passed to render hooks.
+ * Timer context passed to EffectTimer.update().
  */
-export interface RenderContext {
+export interface EffectTimerCtx {
+  /** Read an extra signal by name */
+  get: (name: string) => unknown;
+  /** Write an extra signal by name */
+  set: (name: string, value: unknown) => void;
+  /** Current mascot state */
   state: MascotState;
-  frameIndex: number;
-  timestamp: number;
-  sessionData?: {
-    tokenUsage?: number;
-    tokenLimit?: number;
-    model?: string;
-  };
+  /** Current frame override (null = use state mapping) */
+  frameOverride: string | null;
+  /** Override the displayed frame */
+  setFrameOverride: (name: string | null) => void;
+}
+
+/**
+ * A recurring timer that updates extra signals.
+ */
+export interface EffectTimer {
+  /** Interval in ms */
+  interval: number;
+  /** Called on each tick */
+  update: (ctx: EffectTimerCtx) => void;
 }
 
 /**
- * Lifecycle hooks for customizing mascot behavior.
+ * Context passed to EffectRenderFn.
  */
-export interface MascotHooks {
-  beforeRender?: (context: RenderContext, frame: string[]) => string[];
-  onStateChange?: (prevState: MascotState, newState: MascotState) => void;
+export interface EffectRenderCtx {
+  state: MascotState;
+  frameName: string;
+  breathPhase: boolean;
+  jumpOffset: number;
+  dragging: boolean;
+  get: (name: string) => unknown;
+}
+
+/**
+ * Pack-defined render effect. Called after built-in rendering (breathing),
+ * before final output. Return modified lines.
+ */
+export type EffectRenderFn = (lines: string[], ctx: EffectRenderCtx) => string[];
+
+/**
+ * Effect bundle: extra signals, timers, and render function.
+ * Packs use this to define mascot-specific animations.
+ */
+export interface MascotEffects {
+  /** Extra signals (name → initial value) */
+  signals?: SignalDef[];
+  /** Recurring timers that drive signal changes */
+  timers?: EffectTimer[];
+  /** Render hook — modify lines based on signals */
+  render: EffectRenderFn;
 }
 
 /**
@@ -91,7 +131,16 @@ export interface MascotPack {
 
   animations?: AnimationConfig;
   sidebar?: SidebarConfig;
-  hooks?: MascotHooks;
+
+  /** Mascot-specific animation effects (timers + render) */
+  effects?: MascotEffects;
+
+  /** Thinking bubble phrases, shown when mascot is in busy/thinking state */
+  bubbleTexts?: string[];
+}
+
+export interface SwitchConfig {
+  onState?: Partial<Record<MascotState, string>>;
 }
 
 /**
@@ -101,4 +150,5 @@ export interface MascotConfig {
   mascot: string;
   animations: boolean;
   idleSleep: boolean;
+  switchConfig?: SwitchConfig;
 }

package/tui.tsx

@@ -1,17 +1,18 @@
 /** @jsxImportSource @opentui/solid */
 import type { TuiPlugin, TuiPluginModule } from "@opencode-ai/plugin/tui"
-import { loadMascot } from "./src/core/mascot-loader"
+import { loadAllMascots, getRandomMascot } from "./src/core/mascot-loader"
 import { SidebarMascot } from "./src/components/sidebar-mascot"
 import { createAnimatedRenderer } from "./src/core/ascii-renderer"
 
-const tui: TuiPlugin = async (api, options) => {
-  const mascot = await loadMascot(options)
-  const homeRenderer = createAnimatedRenderer(mascot)
+const tui: TuiPlugin = async (api, _options) => {
+  const mascots = loadAllMascots()
+  const homeMascot = getRandomMascot()
+  const homeRenderer = createAnimatedRenderer(homeMascot)
 
   api.slots.register({
     slots: {
       sidebar_content() {
-        return <SidebarMascot mascot={mascot} api={api} />
+        return <SidebarMascot mascots={mascots} api={api} />
       },
       home_bottom() {
         return (