@mingxy/opencode-mascot 0.1.2 → 0.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mingxy/opencode-mascot",
-  "version": "0.1.2",
+  "version": "0.2.1",
   "description": "OpenCode TUI mascot plugin framework - customizable ASCII mascots for your terminal",
   "author": "mingxy",
   "license": "MIT",
@@ -15,20 +15,29 @@
     "tui.tsx",
     "src/"
   ],
-  "oc-plugin": ["tui"],
+  "oc-plugin": [
+    "tui"
+  ],
   "scripts": {
     "typecheck": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@opentui/solid": ">=0.0.1",
-    "@opencode-ai/plugin": ">=0.1.0"
+    "@opencode-ai/plugin": ">=0.1.0",
+    "@opentui/solid": ">=0.0.1"
   },
   "devDependencies": {
+    "@types/node": "^25.9.3",
     "typescript": "^5.7.0"
   },
-  "keywords": ["opencode", "tui", "mascot", "plugin", "ascii-art"],
+  "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,105 @@
+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/home-mascot.tsx

@@ -0,0 +1,103 @@
+/** @jsxImportSource @opentui/solid */
+
+import { createSignal } from "solid-js";
+import type { JSX } from "@opentui/solid";
+import type { MascotPack } from "../core/types";
+import { createAnimatedRenderer } from "../core/ascii-renderer";
+import { onCelebrate } from "../core/celebration-bus";
+
+interface HomeMascotProps {
+  mascots: Record<string, MascotPack>;
+  api: {
+    renderer: {
+      clearSelection(): void;
+    };
+  };
+}
+
+export function HomeMascot(props: HomeMascotProps): JSX.Element {
+  const names = Object.keys(props.mascots);
+  const initialName = names[Math.floor(Math.random() * names.length)];
+
+  const [currentName, setCurrentName] = createSignal(initialName);
+  const [posX, setPosX] = createSignal(0);
+  const [posY, setPosY] = createSignal(0);
+  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);
+    }
+  };
+
+  onCelebrate((newVersion) => {
+    renderers[currentName()].celebrateUpdate(newVersion);
+  });
+
+  return (
+    <box
+      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/components/sidebar-mascot.tsx

@@ -1,51 +1,166 @@
 /** @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";
+import { onCelebrate } from "../core/celebration-bus";
 
 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();
+  });
+
+  onCelebrate((newVersion) => {
+    renderers[currentName()].celebrateUpdate(newVersion);
   });
 
   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>
   );
 }