@mingxy/opencode-mascot 0.1.0 → 0.1.2

package/package.json

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

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,24 +1,25 @@
 /**
  * 月儿 (Yue'er) — Ice Empress mascot pack.
  *
- * Nine Heavens' Empress with silver-white hair, ice-blue eyes, and imperial crown.
+ * 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 { frames } from "./frames";
-import { colors } from "./colors";
 
 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: "#B8C4D8",
+  },
 
   animations: {
     blinkInterval: 2500,
@@ -28,14 +29,7 @@ export const yueerPack: MascotPack = {
   },
 
   sidebar: {
-    greetings: [
-      "师尊，月儿在此候命~",
-      "月儿恭候师尊多时了~",
-      "师尊今日气色不错呢~",
-    ],
-    busyPhrases: [
-      "月儿正在铸造法器...",
-      "驱除心魔中...",
-    ],
+    greetings: ["师尊，月儿在此候命~"],
+    busyPhrases: ["铸造法器中..."],
   },
 };

package/src/components/sidebar-mascot.tsx

@@ -1,41 +1,51 @@
 /** @jsxImportSource @opentui/solid */
 
-import { createSignal, createEffect } from "solid-js";
 import type { JSX } from "@opentui/solid";
-import type { MascotPack, MascotState } from "../core/types";
+import type { MascotPack } from "../core/types";
 import { createAnimatedRenderer } from "../core/ascii-renderer";
 
 interface SidebarMascotProps {
   mascot: MascotPack;
-  isRunning?: boolean;
+  api: {
+    event: {
+      on(event: string, callback: (data: unknown) => void): void;
+    };
+    slots: {
+      register(registration: { slots: Record<string, () => JSX.Element> }): void;
+    };
+  };
 }
 
 export function SidebarMascot(props: SidebarMascotProps): JSX.Element {
   const { element, setState } = createAnimatedRenderer(props.mascot);
 
-  const greetings = props.mascot.sidebar?.greetings ?? ["~"];
-  const busyPhrases = props.mascot.sidebar?.busyPhrases ?? ["Working..."];
+  props.api.event.on("session.status", (data: unknown) => {
+    const event = data as { status?: { type?: string } } | null;
+    const statusType = event?.status?.type;
 
-  const initialGreeting = greetings[Math.floor(Math.random() * greetings.length)];
-  const [stateText, setStateText] = createSignal<string>(initialGreeting);
-
-  createEffect(() => {
-    if (props.isRunning) {
-      setState("busy" as MascotState);
-      const phrase = busyPhrases[Math.floor(Math.random() * busyPhrases.length)];
-      setStateText(phrase);
+    if (statusType === "busy" || statusType === "retry") {
+      setState("busy");
     } else {
       setState("idle");
-      setStateText(greetings[Math.floor(Math.random() * greetings.length)]);
     }
   });
 
+  props.api.event.on("session.idle", () => {
+    setState("happy");
+    setTimeout(() => setState("idle"), 3000);
+  });
+
   return (
-    <box flexDirection="column" paddingTop={1} paddingBottom={1} paddingLeft={1}>
+    <box
+      position="absolute"
+      left={0}
+      right={0}
+      top={2}
+      alignItems="center"
+      zIndex={100}
+      flexDirection="column"
+    >
       {element()}
-      <text fg="gray" wrapMode="word">
-        {stateText()}
-      </text>
     </box>
   );
 }

package/src/core/ascii-renderer.tsx

@@ -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,
+  ahogeInterval: 1500,
+  ahogeChance: 0.25,
+  jumpMinDelay: 20000,
+  jumpMaxDelay: 40000,
+  stompThreshold: 30000,
 };
 
-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) => (
@@ -43,37 +47,274 @@ export function createAnimatedRenderer(pack: MascotPack): {
   setState: (s: MascotState) => void;
 } {
   const anim = { ...DEFAULT_ANIM, ...pack.animations };
+  const fg = pack.colors?.defaultFg || undefined;
+
   const [currentState, setCurrentState] = createSignal<MascotState>("idle");
   const [frameOverride, setFrameOverride] = createSignal<string | null>(null);
+  const [legsVisible, setLegsVisible] = 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);
+
+  let thinkingStartTime = 0;
+
+  // ============ 1. Blink ============
+  const hasBlink = (pack.frames as Record<string, string[] | undefined>)["blink"] !== undefined;
 
   const blinkTimer = setInterval(() => {
-    if (Math.random() < anim.blinkChance) {
+    if (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);
+        if (pick === "happy") startWave();
+        setTimeout(() => {
+          setFrameOverride(null);
+          stopWave();
+        }, 2000);
+      }
     }
   }, anim.expressionInterval);
 
+  // ============ 3. Breathing (legs tuck + braids flutter) ============
+  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);
+    }
+  }, anim.ahogeInterval);
+
+  // ============ 5. Walk ============
+  let walkStep = -1;
+  let walkInterval: ReturnType<typeof setInterval> | null = null;
+
+  const startWalk = () => {
+    if (walkInterval) return;
+    walkStep = 0;
+    walkInterval = setInterval(() => {
+      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() {
+    const delay = 5000 + Math.floor(Math.random() * 5000);
+    return setTimeout(() => {
+      if (currentState() === "idle" && !frameOverride() && walkStep === -1) {
+        startWalk();
+      }
+      walkTimeout = scheduleNextWalk();
+    }, delay);
+  }
+
+  walkTimeout = scheduleNextWalk();
+
+  // ============ 6. 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(0), 500);
+      }
+      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;
+    }
+    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 ============
   onCleanup(() => {
     clearInterval(blinkTimer);
     clearInterval(expressionTimer);
+    clearInterval(breathTimer);
+    clearInterval(ahogeTimer);
+    clearInterval(zzzTimer);
+    clearInterval(stompTimer);
+    clearTimeout(walkTimeout);
+    clearTimeout(jumpTimeout);
+    if (walkInterval) clearInterval(walkInterval);
+    stopWave();
   });
 
+  // ============ Render ============
   const element = () => {
-    const override = frameOverride();
-    const state = override ? (override as MascotState) : currentState();
-    return renderFrame(pack, state);
+    legsVisible();
+    ahogeAlt();
+    braidAlt();
+    waveSide();
+    zzzPhase();
+    jumpOffset();
+    stompActive();
+    stompAlt();
+
+    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 = rawLines.map((line, i) => {
+      if (!legsVisible()) {
+        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;
+        }
+      }
+    }
+
+    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) => {
+    const prev = currentState();
+    setCurrentState(s);
+
+    if (s !== "idle") {
+      stopWalk();
+    }
+
+    if (s === "thinking" && prev !== "thinking") {
+      thinkingStartTime = Date.now();
+    } else if (s !== "thinking") {
+      thinkingStartTime = 0;
+      setStompActive(false);
+    }
+
+    if (s === "happy") {
+      startWave();
+    } else {
+      stopWave();
+    }
   };
 
-  return { element, setState: setCurrentState };
+  return { element, setState };
 }

package/src/core/types.ts

@@ -9,53 +9,43 @@ 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;
+  /** 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) */
+  jumpMinDelay?: number;
+  /** Maximum delay between jumps in ms (default: 40000) */
+  jumpMaxDelay?: number;
+  /** Stomp trigger: ms in thinking state before stomping (default: 30000) */
+  stompThreshold?: 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;
 }
 
 /**
  * Context passed to render hooks.
  */
 export interface RenderContext {
-  /** 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;
@@ -67,35 +57,24 @@ export interface RenderContext {
  * Lifecycle hooks for customizing mascot behavior.
  */
 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;
 }
 
 /**
  * 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,26 +84,13 @@ 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;
 }
 
@@ -132,10 +98,7 @@ export interface MascotPack {
  * 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;
 }

package/tui.tsx

@@ -2,14 +2,23 @@
 import type { TuiPlugin, TuiPluginModule } from "@opencode-ai/plugin/tui"
 import { loadMascot } 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)
+
   api.slots.register({
     slots: {
       sidebar_content() {
-        return <SidebarMascot mascot={mascot} />
+        return <SidebarMascot mascot={mascot} 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",
-};