Preview

Why?

Coding can feel lonely sometimes.

Chibi Code Companion adds a small reactive character to your VS Code sidebar that responds to your activity and keeps your workspace feeling a little more alive.

✨ Features

• 🏠 Lives in the Activity Bar — always visible while you code, never in the way
• 💬 Speech bubbles with custom per-character dialogue
• 👁️ Random blinking animation for a natural, living feel
• 🎭 Multiple characters — each with their own personality and art
• ⚡ Reacts to real VS Code events in real time
• 🔄 Switch characters instantly from the sidebar or Command Palette
• 🖼️ Supports PNG, GIF, SVG, JPG, WEBP image formats

🎬 How It Reacts

🚀 Getting Started

Prerequisites

• Node.js (LTS version recommended)
• VS Code 1.74.0 or higher

Run in Development

npm install
npm run compile

Press F5 to launch the Extension Development Host.
Look for the 🐱 icon in the left Activity Bar and click it.

Install Permanently (VSIX)

npm install -g @vscode/vsce
npm run compile
vsce package

Then in VS Code: Extensions sidebar → ... menu → Install from VSIX → select the .vsix file.

Publish to Marketplace

vsce login yourpublisherid
vsce publish

🎨 Adding Characters

Each character is a self-contained folder inside media/. No code changes needed — the extension auto-detects all character folders on startup.

media/
├── diana/
│   ├── idle.png          ← normal face (required)
│   ├── blinking.png      ← used for random blink animation
│   ├── sleeping.png      ← shown after 60s of inactivity
│   ├── eating.png        ← shown on file save (falls back to idle)
│   └── personality.json  ← display name + dialogue lines
├── fern/
│   ├── idle.png
│   ├── blinking.png
│   ├── sleeping.png
│   └── personality.json
├── Error.png
├── icon.png
└── icon.svg

Tip: GIFs work too! Use an animated idle.gif and your character will loop an animation while you code. You can also use a sprite sheet for frame-by-frame animation (advanced setup).

Performance Note: Large GIFs can heavily impact VS Code performance and memory usage.
Recommended:

• 128×128 or 256×256 sprites
• optimized/compressed GIFs
• under 2MB file size when possible
• avoid extremely high frame counts or 4K GIFs

💬 personality.json

Each character folder can have a personality.json that defines their name and what they say in each state.

{
  "name": "Diana",
  "idle": [
    "...",
    "watching you code",
    "fix it already",
    "hmph."
  ],
  "eating": [
    "finally a break!",
    "ramen > your bugs",
    "d-don't watch me eat!"
  ],
  "sleeping": [
    "wake me when it compiles...",
    "zzz... i'm not sleeping",
    "don't draw on my face"
  ],
  "happy": [
    "o-ok you're not completely useless",
    "i guess that was... acceptable",
    "don't read too much into this!"
  ]
}

All fields are optional — missing ones fall back to built-in default dialogue.
Add as many lines per array as you want — one is picked at random each time.

🖼️ Image Reference

Supported formats: PNG · GIF · SVG · JPG · JPEG · WEBP

If a state image is missing, it automatically falls back to idle.png.

🔀 Switching Characters

Option 1 — Sidebar buttons
Click any character name button at the top of the companion panel.

Option 2 — Command Palette
Ctrl+Shift+P → type Chibi Code Companion: Switch Character

Switching always resets the companion to idle state.

⚙️ Settings

Open VS Code Settings (Ctrl+,) and search for chibiCompanion, or edit settings.json directly:

{
  "chibiCompanion.activeCharacter": "diana",
  "chibiCompanion.blink.enabled": true,
  "chibiCompanion.blink.minDelay": 2000,
  "chibiCompanion.blink.maxDelay": 6000
}

📁 Project Structure

chibi-code-companion/
├── src/
│   └── extension.ts        ← main extension logic (TypeScript)
├── out/
│   └── extension.js        ← compiled output (auto-generated, do not edit)
├── media/
│   ├── icon.svg            ← activity bar icon
│   ├── icon.png            ← marketplace icon (128x128)
│   ├── diana/              ← character folder
│   └── fern/               ← character folder
├── .vscode/
│   └── launch.json         ← F5 debug configuration
├── package.json            ← extension manifest
├── tsconfig.json           ← TypeScript configuration
└── README.md

🧠 How It Works

VS Code fires an event (save, type, click...)
            │
            ▼
    extension.ts detects it
    calls setState('eating')
            │
            ▼
    postMessage() sends state
    to the Webview
            │
            ▼
    Webview JS receives state
    swaps image src → eating.png
    adds CSS class → state-eating
    shows random dialogue bubble
            │
            ▼
    CSS reacts to .state-eating
    shows ramen bowl overlay
    plays steam animation

State Machine

        ┌─────────────────────────────┐
        │                             │
   ┌────▼────┐    save file    ┌──────┴──────┐
   │  idle   │───────────────► │   eating    │
   └────┬────┘                 └──────┬──────┘
        │                             │ after 4s
        │ 60s idle                    ▼
        │                        back to idle
        ▼
   ┌──────────┐    click pet   ┌─────────────┐
   │ sleeping │                │    happy    │
   └──────────┘                └─────────────┘
        ▲                             │ after 3s
        │         any activity        ▼
        └────────────────────────back to idle

   ┌──────────┐  ← random 2-6s timer, silent, no dialogue
   │ blinking │
   └──────────┘  → returns to idle automatically

📝 License

MIT — do whatever you want with it. If you make a cool character, share it! 🐱