@mingxy/opencode-mascot 0.1.1 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mingxy/opencode-mascot",
-  "version": "0.1.1",
+  "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/frames.ts

@@ -1,99 +1,43 @@
-/**
- * 月儿 (Yue'er) — ASCII art frames for the Ice Empress mascot.
- *
- * Each expression is a single frame (string[]) where every string is one line.
- * ALL frames have the same line count (14) for consistent rendering.
- *
- * Key design elements:
- *  - Imperial crown with three prongs
- *  - Long flowing silver-white hair
- *  - Big anime eyes (ice blue)
- *  - Elegant ice-blue robe with fur trim
- */
+//     0123456789
+const defaultFrame = [
+  "    ☆     ",
+  " ~( ^-^ )~",
+  "   ┃███┃  ",
+  "    ║ ║   ",
+];
 
-export const frames = {
-  default: [
-    "       _.+._       ",
-    "     .*       *.   ",
-    "   .*           *. ",
-    "  *    {crown}    *",
-    "  |  /*=====*\\  | ",
-    "  | |  O   O  | | ",
-    "  | |   \\_/   | | ",
-    "  |  \\  ___  /  | ",
-    "  |   \\_____/   | ",
-    "  |*~~*~~~~~*~~*| ",
-    "   *~~*      ~~*  ",
-    "    |*        *|   ",
-    "    |*        *|   ",
-    "    *==========*   ",
-  ],
+const blinkFrame = [
+  "    ☆     ",
+  " ~( -_- )~",
+  "   ┃███┃  ",
+  "    ║ ║   ",
+];
 
-  blink: [
-    "       _.+._       ",
-    "     .*       *.   ",
-    "   .*           *. ",
-    "  *    {crown}    *",
-    "  |  /*=====*\\  | ",
-    "  | |  -   -  | | ",
-    "  | |   \\_/   | | ",
-    "  |  \\  ___  /  | ",
-    "  |   \\_____/   | ",
-    "  |*~~*~~~~~*~~*| ",
-    "   *~~*      ~~*  ",
-    "    |*        *|   ",
-    "    |*        *|   ",
-    "    *==========*   ",
-  ],
+const happyFrame = [
+  "    ☆     ",
+  " ~( ^ω^ )~",
+  "   ┃███┃  ",
+  "    ║ ║   ",
+];
 
-  happy: [
-    "       _.+._       ",
-    "     .*       *.   ",
-    "   .*           *. ",
-    "  *    {crown}    *",
-    "  |  /*=====*\\  | ",
-    "  | |  ^   ^  | | ",
-    "  | |   \\_/   | | ",
-    "  |  \\  ___  /  | ",
-    "  |   \\_____/   | ",
-    "  |*~~*~~~~~*~~*| ",
-    "   *~~*      ~~*  ",
-    "    |*        *|   ",
-    "    |*        *|   ",
-    "    *==========*   ",
-  ],
+const thinkingFrame = [
+  "    ☆     ",
+  " ~( o_o )~",
+  "   ┃░░░┃  ",
+  "    ║ ║   ",
+];
 
-  thinking: [
-    "       _.+._       ",
-    "     .*       *.   ",
-    "   .*           *. ",
-    "  *    {crown}    *",
-    "  |  /*=====*\\  | ",
-    "  | |  O   -  | | ",
-    "  | |    <    | | ",
-    "  |  \\  ___  /  | ",
-    "  |   \\_____/   | ",
-    "  |*~~*~~~~~*~~*| ",
-    "   *~~*      ~~*  ",
-    "    |*        *|   ",
-    "    |*        *|   ",
-    "    *==========*   ",
-  ],
+const sleepingFrame = [
+  "    ☆     ",
+  " ~( -.- )~",
+  "   ┃~~~┃  ",
+  "    ║ ║   ",
+];
 
-  sleeping: [
-    "       _.+._       ",
-    "     .*       *.   ",
-    "   .*           *. ",
-    "  *    {crown}    *",
-    "  |  /*=====*\\  | ",
-    "  | |  .   .  | | ",
-    "  | |   ---   | | ",
-    "  |  \\  ___  /  | ",
-    "  |   \\_____/   | ",
-    "  |*~~*~~~~~*~~*| ",
-    "   *~~*      ~~*  ",
-    "    |*        *|   ",
-    "    |*        *|   ",
-    "    *==========*   ",
-  ],
+export const frames = {
+  default: defaultFrame,
+  blink: blinkFrame,
+  happy: happyFrame,
+  thinking: thinkingFrame,
+  sleeping: sleepingFrame,
 };

package/src/builtins/yueer/index.ts

@@ -1,41 +1,211 @@
-/**
- * 月儿 (Yue'er) — Ice Empress mascot pack.
- *
- * Nine Heavens' Empress with silver-white hair, ice-blue eyes, and imperial crown.
- * 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";
-import { colors } from "./colors";
+
+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: "月儿",
   version: "0.1.0",
   author: "mingxy",
-  description:
-    "Ice Empress of the Nine Heavens — elegant, powerful, and devoted to her Master.",
+  description: "Ice Empress of the Nine Heavens — elegant, powerful, and devoted to her Master.",
 
   frames,
-  colors,
+
+  colors: {
+    defaultFg: "#8B7EB8",
+  },
 
   animations: {
     blinkInterval: 2500,
     blinkChance: 0.3,
-    expressionInterval: 50000,
+    expressionInterval: 8000,
     idleTimeout: 90000,
   },
 
   sidebar: {
-    greetings: [
-      "师尊，月儿在此候命~",
-      "月儿恭候师尊多时了~",
-      "师尊今日气色不错呢~",
-    ],
-    busyPhrases: [
-      "月儿正在铸造法器...",
-      "驱除心魔中...",
-    ],
+    greetings: ["师尊，月儿在此候命~"],
+    busyPhrases: ["铸造法器中..."],
   },
+
+  bubbleTexts: ["嗯...", "让我想想...", "等等...", "本帝在算..."],
+
+  effects: yueerEffects,
 };

package/src/components/sidebar-mascot.tsx

@@ -1,41 +1,161 @@
 /** @jsxImportSource @opentui/solid */
 
-import { createSignal, createEffect } from "solid-js";
+import { createSignal } from "solid-js";
 import type { JSX } from "@opentui/solid";
-import type { MascotPack, MascotState } from "../core/types";
+import type { MascotPack, MascotState, SwitchConfig } from "../core/types";
 import { createAnimatedRenderer } from "../core/ascii-renderer";
 
 interface SidebarMascotProps {
-  mascot: MascotPack;
-  isRunning?: boolean;
+  mascots: Record<string, MascotPack>;
+  switchConfig?: SwitchConfig;
+  initialMascot?: string;
+  api: {
+    event: {
+      on(event: string, callback: (data: unknown) => void): 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 greetings = props.mascot.sidebar?.greetings ?? ["~"];
-  const busyPhrases = props.mascot.sidebar?.busyPhrases ?? ["Working..."];
+  const renderers: Record<string, ReturnType<typeof createAnimatedRenderer>> = {};
+  for (const [name, pack] of Object.entries(props.mascots)) {
+    renderers[name] = createAnimatedRenderer(pack);
+  }
 
-  const initialGreeting = greetings[Math.floor(Math.random() * greetings.length)];
-  const [stateText, setStateText] = createSignal<string>(initialGreeting);
+  const switchTo = (name: string) => {
+    if (props.mascots[name] && name !== currentName()) {
+      setCurrentName(name);
+    }
+  };
 
-  createEffect(() => {
-    if (props.isRunning) {
-      setState("busy" as MascotState);
-      const phrase = busyPhrases[Math.floor(Math.random() * busyPhrases.length)];
-      setStateText(phrase);
+  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) => {
+    // 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") {
+      renderers[currentName()].setState("busy");
     } else {
-      setState("idle");
-      setStateText(greetings[Math.floor(Math.random() * greetings.length)]);
+      setStateWithSwitch("idle");
     }
   });
 
+  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) {
+      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 flexDirection="column" paddingTop={1} paddingBottom={1} paddingLeft={1}>
-      {element()}
-      <text fg="gray" wrapMode="word">
-        {stateText()}
-      </text>
+    <box
+      position="absolute"
+      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);
+        }
+      }}
+
+    >
+      {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",
@@ -13,22 +13,26 @@ const STATE_TO_FRAME: Record<MascotState, string> = {
 };
 
 const DEFAULT_ANIM = {
-  blinkInterval: 2000,
-  blinkChance: 0.35,
-  expressionInterval: 45000,
+  blinkInterval: 2500,
+  blinkChance: 0.3,
+  expressionInterval: 8000,
   idleTimeout: 120000,
+  breathInterval: 3000,
+  walkEnabled: true,
+  walkMinDelay: 20000,
+  walkMaxDelay: 40000,
+  jumpMinDelay: 20000,
+  jumpMaxDelay: 40000,
 };
 
-function getFrame(pack: MascotPack, frameName: string): string[] {
+const WALK_PATH = [1, 2, 3, 4, 3, 2, 1, 0, -1, -2, -3, -2, -1, 0];
+
+function getFrameLines(pack: MascotPack, frameName: string): string[] {
   const frames = pack.frames as Record<string, string[] | undefined>;
   return frames[frameName] ?? frames["default"] ?? [];
 }
 
-export function renderFrame(pack: MascotPack, state: MascotState): JSX.Element {
-  const frameName = STATE_TO_FRAME[state] ?? "default";
-  const lines = getFrame(pack, frameName);
-  const fg = pack.colors.defaultFg || undefined;
-
+function renderLines(lines: string[], fg?: string): JSX.Element {
   return (
     <box flexDirection="column">
       {lines.map((line: string) => (
@@ -41,39 +45,262 @@ export function renderFrame(pack: MascotPack, state: MascotState): 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 [breathPhase, setBreathPhase] = createSignal(true);
+  const [walkOffset, setWalkOffset] = createSignal(0);
+  const [jumpOffset, setJumpOffset] = createSignal(0);
+  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]);
+    }
+  }
+
+  const getExtra = (name: string): unknown => extraSignals.get(name)?.[0]() ?? null;
+  const setExtra = (name: string, value: unknown) => extraSignals.get(name)?.[1](value);
+
+  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) {
+    if (currentState() !== "sleeping" && Math.random() < anim.blinkChance && hasBlink) {
       setFrameOverride("blink");
       setTimeout(() => setFrameOverride(null), 150);
     }
   }, anim.blinkInterval);
 
-  const availableFrames = Object.keys(pack.frames).filter(
-    (k) => k !== "default" && k !== "blink"
+  // 2. Random expression
+  const availableExpressions = Object.keys(pack.frames).filter(
+    (k) => k !== "default" && k !== "blink",
   );
+
   const expressionTimer = setInterval(() => {
-    if (currentState() === "idle" && availableFrames.length > 0) {
-      const pick = availableFrames[Math.floor(Math.random() * availableFrames.length)];
-      setFrameOverride(pick);
-      setTimeout(() => setFrameOverride(null), 2000);
+    if (currentState() === "idle" && !frameOverride()) {
+      const pick = availableExpressions[Math.floor(Math.random() * availableExpressions.length)];
+      if (pick) {
+        setFrameOverride(pick);
+        setTimeout(() => setFrameOverride(null), 2000);
+      }
     }
   }, anim.expressionInterval);
 
+  // 3. Breathing
+  const breathTimer = setInterval(() => {
+    if (currentState() === "idle") {
+      setBreathPhase((v) => !v);
+    }
+  }, anim.breathInterval);
+
+  // 4. Walk
+  let walkStep = -1;
+  let walkInterval: ReturnType<typeof setInterval> | null = null;
+
+  const startWalk = () => {
+    if (walkInterval || !walkEnabled()) return;
+    walkStep = 0;
+    walkInterval = setInterval(() => {
+      if (currentState() !== "idle") {
+        stopWalk();
+        return;
+      }
+      if (walkStep < WALK_PATH.length) {
+        setWalkOffset(WALK_PATH[walkStep]);
+        walkStep++;
+      } else {
+        if (walkInterval) clearInterval(walkInterval);
+        walkInterval = null;
+        walkStep = -1;
+        setWalkOffset(0);
+      }
+    }, 400);
+  };
+
+  const stopWalk = () => {
+    if (walkInterval) {
+      clearInterval(walkInterval);
+      walkInterval = null;
+    }
+    walkStep = -1;
+    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()) {
+        startWalk();
+      }
+      if (currentState() !== "sleeping") {
+        walkTimeout = scheduleNextWalk();
+      }
+    }, delay);
+  }
+
+  walkTimeout = scheduleNextWalk();
+
+  // 5. Jump
+  let jumpTimeout: ReturnType<typeof setTimeout>;
+
+  function scheduleNextJump() {
+    const delay = anim.jumpMinDelay + Math.floor(Math.random() * (anim.jumpMaxDelay - anim.jumpMinDelay));
+    return setTimeout(() => {
+      if (currentState() === "idle" && !frameOverride() && walkStep === -1) {
+        setJumpOffset(-2);
+        setTimeout(() => setJumpOffset(-1), 1500);
+        setTimeout(() => setJumpOffset(0), 2000);
+      }
+      if (currentState() !== "sleeping") {
+        jumpTimeout = scheduleNextJump();
+      }
+    }, delay);
+  }
+
+  jumpTimeout = scheduleNextJump();
+
+  // ─── 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));
+    }
+  }
+
+  // ─── 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);
   });
 
+  // ─── Render ───
   const element = () => {
-    const override = frameOverride();
-    const state = override ? (override as MascotState) : currentState();
-    return renderFrame(pack, state);
+    breathPhase();
+    walkOffset();
+    jumpOffset();
+    frameOverride();
+    currentState();
+    dragging();
+
+    for (const [, [get]] of extraSignals) {
+      get();
+    }
+
+    const frameName = frameOverride() ?? STATE_TO_FRAME[currentState()] ?? "default";
+    const rawLines = getFrameLines(pack, frameName);
+    const offset = walkOffset();
+
+    const width = rawLines[0]?.length ?? 10;
+    const blank = " ".repeat(width);
+
+    let lines: string[] = rawLines.map((line, i) => {
+      if (!breathPhase()) {
+        if (i === 0) return blank;
+        return rawLines[i - 1];
+      }
+      return line;
+    });
+
+    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();
+    const left = offset > 0 ? offset : 0;
+
+    return (
+      <box flexDirection="column" left={left} top={top}>
+        {renderLines(lines, fg)}
+      </box>
+    );
+  };
+
+  // ─── State control ───
+  const setState = (s: MascotState) => {
+    setCurrentState(s);
+    setBreathPhase(true);
+    resetIdleSleep();
+
+    if (s !== "idle") {
+      stopWalk();
+    } else if (walkEnabled()) {
+      walkTimeout = scheduleNextWalk();
+      jumpTimeout = scheduleNextJump();
+    }
+  };
+
+  const toggleWalk = () => {
+    const next = !walkEnabled();
+    setWalkEnabled(next);
+    if (!next) {
+      stopWalk();
+    } else if (currentState() === "idle") {
+      walkTimeout = scheduleNextWalk();
+    }
+  };
+
+  const setDragging = (v: boolean) => {
+    setDraggingSignal(v);
+    if (v) {
+      setJumpOffset(-1);
+    } else {
+      setJumpOffset(0);
+    }
   };
 
-  return { element, setState: setCurrentState };
+  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

@@ -9,93 +9,112 @@ export type ExpressionName = 'default' | 'blink' | 'happy' | 'thinking' | 'busy'
  */
 export type MascotState = 'idle' | 'busy' | 'thinking' | 'sleeping' | 'happy';
 
-/**
- * Color definition for a zone within a frame.
- */
-export interface ZoneColor {
-  /** ANSI foreground color code or CSS color */
-  fg?: string;
-  /** ANSI background color code or CSS color */
-  bg?: string;
-}
-
 /**
  * Animation timing configuration with sensible defaults.
  */
 export interface AnimationConfig {
-  /** Milliseconds between blink checks (default: 2000) */
   blinkInterval?: number;
-  /** Probability of a blink on each check, 0–1 (default: 0.35) */
   blinkChance?: number;
-  /** Milliseconds between random expression changes (default: 45000) */
   expressionInterval?: number;
-  /** Milliseconds of inactivity before entering sleep state (default: 120000) */
   idleTimeout?: number;
+  breathInterval?: number;
+  walkEnabled?: boolean;
+  walkMinDelay?: number;
+  walkMaxDelay?: number;
+  jumpMinDelay?: number;
+  jumpMaxDelay?: number;
 }
 
 /**
  * Sidebar display configuration.
  */
 export interface SidebarConfig {
-  /** Rotating greeting messages shown below the mascot */
   greetings?: string[];
-  /** Rotating phrases shown while in busy state */
   busyPhrases?: string[];
-  /** Sidebar width in characters (default: mascot frame width) */
-  width?: number;
+}
+
+// ─── 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;
-  /** Current frame index within the active expression */
-  frameIndex: number;
-  /** Unix timestamp (ms) of this render call */
-  timestamp: number;
-  /** Optional session metadata from the host */
-  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;
 }
 
 /**
- * Lifecycle hooks for customizing mascot behavior.
+ * A recurring timer that updates extra signals.
  */
-export interface MascotHooks {
-  /** Called before each frame render. Return modified frame lines or the original. */
-  beforeRender?: (context: RenderContext, frame: string[]) => string[];
-  /** Called when the mascot state transitions. */
-  onStateChange?: (prevState: MascotState, newState: MascotState) => void;
+export interface EffectTimer {
+  /** Interval in ms */
+  interval: number;
+  /** Called on each tick */
+  update: (ctx: EffectTimerCtx) => void;
+}
+
+/**
+ * Context passed to EffectRenderFn.
+ */
+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;
 }
 
 /**
  * A complete mascot pack definition.
  *
- * Each pack provides ASCII-art frames for different expressions,
- * color zones, animation timing, sidebar text, and optional hooks.
+ * Frames are plain string arrays — each string is one line, all lines same width.
+ * "default" is required; all other expressions are optional.
  */
 export interface MascotPack {
-  /** Unique machine-readable identifier (e.g. "tuxie") */
   name: string;
-  /** Human-readable display name (e.g. "Tuxie the Penguin") */
   displayName: string;
-  /** Semantic version string (e.g. "1.0.0") */
   version: string;
-  /** Pack author or team */
   author: string;
-  /** Short description of the mascot */
   description: string;
 
-  /**
-   * Expression frames: expression name → array of ASCII-art lines.
-   * Each entry is a single frame (one multi-line drawing).
-   * "default" is required; all other expressions are optional.
-   */
+  /** ASCII-art frames keyed by expression name. "default" is required. */
   frames: {
     default: string[];
     blink?: string[];
@@ -105,37 +124,31 @@ export interface MascotPack {
     sleeping?: string[];
   };
 
-  /**
-   * Color mapping for the mascot frames.
-   * Zones are matched by substring or named markers in the frame lines.
-   */
-  colors: {
-    /** Named zone → foreground/background color */
-    zones?: Record<string, ZoneColor>;
-    /** Default foreground applied to unmatched characters */
+  /** Optional color for the mascot text */
+  colors?: {
     defaultFg?: string;
-    /** Default background applied to unmatched characters */
-    defaultBg?: string;
   };
 
-  /** Animation timing overrides */
   animations?: AnimationConfig;
-
-  /** Sidebar content configuration */
   sidebar?: SidebarConfig;
 
-  /** Optional lifecycle hooks */
-  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>>;
 }
 
 /**
  * User-facing configuration merged from opencode config file.
  */
 export interface MascotConfig {
-  /** Name of the selected mascot pack */
   mascot: string;
-  /** Enable or disable mascot animations */
   animations: boolean;
-  /** Allow mascot to enter sleep state on idle */
   idleSleep: boolean;
+  switchConfig?: SwitchConfig;
 }

package/tui.tsx

@@ -1,15 +1,25 @@
 /** @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 mascots = loadAllMascots()
+  const homeMascot = getRandomMascot()
+  const homeRenderer = createAnimatedRenderer(homeMascot)
 
-const tui: TuiPlugin = async (api, options) => {
-  const mascot = await loadMascot(options)
-  
   api.slots.register({
     slots: {
       sidebar_content() {
-        return <SidebarMascot mascot={mascot} />
+        return <SidebarMascot mascots={mascots} api={api} />
+      },
+      home_bottom() {
+        return (
+          <box flexDirection="column" alignItems="center">
+            {homeRenderer.element()}
+          </box>
+        )
       }
     }
   })

package/src/builtins/yueer/colors.ts

@@ -1,34 +0,0 @@
-/**
- * 月儿 (Yue'er) — Color zone definitions.
- *
- * Zones are matched by the ASCII characters in frame lines.
- * Each zone maps to a foreground (fg) and optional background (bg) color.
- */
-
-export const colors = {
-  zones: {
-    /** Long flowing hair — silver white */
-    hair: {
-      fg: "#E8E0F0",
-    },
-    /** Imperial crown / headdress — gold */
-    crown: {
-      fg: "#FFD700",
-    },
-    /** Big anime eyes — ice blue */
-    eyes: {
-      fg: "#66CCFF",
-    },
-    /** Face and skin — warm peach */
-    skin: {
-      fg: "#FFE0BD",
-    },
-    /** Elegant robe / dress — ice blue */
-    dress: {
-      fg: "#7CB9E8",
-    },
-  },
-
-  /** Default foreground for unmatched characters — cool silver */
-  defaultFg: "#B8C4D8",
-};