🦖 CodeRex — Coding Dino Companion

A modern, interactive animated dinosaur pet that lives at the bottom of Visual Studio Code. Inspired by the Chrome offline dino, Tamagotchi and VS Pets — but procedurally drawn, framework-aware and built for production.

CodeRex walks, runs, sleeps, jumps, celebrates clean builds and gets worried when your code breaks. It levels up while you code, unlocks achievements and even swaps accessories depending on the language you are working in.

Cross-platform: Windows, Linux and macOS.

✨ Features

Area	What it does
Living animation	60 fps procedural T-Rex — idle, walk, run, jump, sleep, happy, error, coding, eat, dance.
Reacts to you	File saves, diagnostics (errors / fixes), git branch changes, typing speed and idle time.
Smart context	Detects the active language and project framework and adapts accessories & mood.
8 skins	Classic, Cyberpunk, Pixel, Neon, Hacker, Robot, Dragon, Mini-Godzilla.
4 render modes	Smooth, Pixel-art, Neon-glow, Retro-CRT scanlines.
Progression	XP, levels, achievements and a light Tamagotchi mood/feed loop — all persisted.
Interactive	Click for a quip, double-click for a backflip, triple-click for disco mode.
Lightweight	Vector rendering (no sprite assets), auto-pauses when hidden, throttled events.

Framework-aware accessories

Detected stack	Accessory
React / Next.js	Futuristic glasses
Python	Hacker hat
Docker	Mech plating
Rust	Antenna
(others)	Skin default

🏗️ Architecture

Important / honest note: VS Code does not expose an API to float a webview on top of the editor. The supported, professional approach — also used by the popular vscode-pets extension — is a WebviewView docked in the bottom panel, right above the status bar. That is exactly what CodeRex does.

┌────────────────────── Extension Host (Node / TypeScript) ──────────────────────┐
│  extension.ts          activate / deactivate, dependency wiring                │
│  core/StateManager     logical dino state + live workspace context (events)    │
│  core/ProgressionMgr   XP · levels · achievements · mood  (globalState)        │
│  core/DinoViewProvider WebviewView host + message bridge                       │
│  events/WorkspaceWatch saves · diagnostics · git · typing · idle → state/XP    │
│  commands/             8 contributed commands                                  │
│  utils/                config · framework detection · logger · types           │
└───────────────────────────────┬────────────────────────────────────────────────┘
                                 │  postMessage  (JSON protocol)
┌───────────────────────────────▼──────────────── Webview (HTML5 Canvas / JS) ───┐
│  engine.js     render loop · scene · HUD · particles · input · skins           │
│  dino.js       actor: state machine · physics · pose synthesis                 │
│  renderer.js   procedural cartoon T-Rex (pure canvas primitives)               │
│  skins.js      palettes + framework→accessory map                              │
│  dialogues.js  speech-bubble lines                                             │
└─────────────────────────────────────────────────────────────────────────────────┘

See docs/ARCHITECTURE.md for the full design and the docs/PUBLISHING.md Marketplace guide.

Project structure

coderex/
├── media/
│   ├── icon.png                 # Marketplace icon (generated, no deps)
│   ├── icon.svg                 # Monochrome panel icon
│   └── webview/
│       ├── style.css
│       └── engine/              # skins · dialogues · renderer · dino · engine · main
├── scripts/
│   └── make-icon.js             # Procedural PNG icon generator (zlib only)
├── src/
│   ├── extension.ts
│   ├── core/                    # StateManager · ProgressionManager · DinoViewProvider
│   ├── events/                  # WorkspaceWatcher
│   ├── commands/                # registerCommands
│   └── utils/                   # config · framework · logger · types
├── docs/                        # ARCHITECTURE.md · PUBLISHING.md
└── package.json

🚀 Getting started (development)

npm install        # install dev dependencies
npm run icon       # (re)generate media/icon.png
npm run compile    # build TypeScript → out/

Then press F5 in VS Code to launch the Extension Development Host. Open the bottom panel and pick the CodeRex tab, or run CodeRex: Spawn Dino from the Command Palette.

npm scripts

Script	Purpose
`npm run compile`	Compile TypeScript to `out/`.
`npm run watch`	Incremental compile on save.
`npm run lint`	ESLint over `src/`.
`npm run icon`	Regenerate the PNG icon procedurally.
`npm run package`	Build a `.vsix` with `vsce`.
`npm run publish`	Publish to the Marketplace with `vsce`.

🎮 Commands

Command	Description
`CodeRex: Spawn Dino`	Reveal the dino panel.
`CodeRex: Hide Dino`	Hide the dino sprite.
`CodeRex: Change Dino Skin`	Pick a skin from a quick-pick.
`CodeRex: Dino Dance`	Make the dino dance.
`CodeRex: Dino Sleep`	Send the dino to sleep.
`CodeRex: Toggle Follow Cursor`	Dino follows the mouse inside its panel.
`CodeRex: Feed Dino`	Feed the dino (raises mood).
`CodeRex: Show Dino Stats`	Show level, XP and achievements.

⚙️ Settings

Setting	Default	Description
`coderex.skin`	`classic`	Active skin.
`coderex.size`	`medium`	`small` · `medium` · `large`.
`coderex.speed`	`1`	Walking speed multiplier (0.25–3).
`coderex.opacity`	`1`	Dino opacity (0.2–1).
`coderex.renderMode`	`smooth`	`smooth` · `pixel` · `neon` · `retro`.
`coderex.sounds`	`false`	Optional retro sound effects.
`coderex.followCursor`	`false`	Walk toward the mouse pointer.
`coderex.reactToErrors`	`true`	React to diagnostics.
`coderex.autoSkinByLanguage`	`true`	Swap accessories by framework.
`coderex.idleSleepSeconds`	`90`	Inactivity before sleeping.

🥚 Easter eggs

Double-click the dino → backflip.
Triple-click the dino → 8-second disco mode with confetti.
Code after midnight to unlock the Night Owl achievement.

⚡ Performance strategy

Procedural rendering — the dino is canvas geometry, so there are no binary sprite assets to load, decode or cache.
Single requestAnimationFrame loop with delta-time clamping.
Auto-pause — the loop does no work while document.hidden.
Event throttling — diagnostics are debounced; typing is sampled in a rolling 6-second window instead of per-keystroke work.
retainContextWhenHidden keeps the webview warm without re-rendering.

📦 Publishing

A complete, step-by-step Marketplace guide (publisher account, PAT, vsce, versioning, CI) lives in docs/PUBLISHING.md.

CodeRex — Coding Dino Companion

CodeRex