Scorpion Pet

Scorpion Pet brings a hand-crafted, fully animated SVG scorpion into its own view in the VS Code sidebar. The scorpion patrols back and forth, reacts to clicks, and can be put to sleep, woken up, or made to perform an action — all driven by a WebviewViewProvider, not a webview tab.

Features

Own Activity Bar entry. The mascot lives in a dedicated "Scorpion Pet" view in the sidebar, not a floating panel or editor tab.
The original rig, unmodified. The character is the project's own media/scorpion.svg — an articulated rig with 8 three-segment legs, a 5-segment tail with an independent stinger, and two claws with a movable finger. Nothing was replaced with an emoji or a raster image.
Procedural animation. Legs, claws and tail segments are rotated around their own pivots (data-pivot attributes baked into the SVG) every frame — no baked keyframe animations, no unsupported effects.
States: walking (patrols the view and turns at the edges), idle, sleeping, plus the transient actions happy, angry and attacking.
Two-way communication. Commands from the Command Palette (or the view's title bar buttons) are sent to the webview with postMessage; clicking the scorpion notifies the extension the same way.
Configurable: scale, whether animation runs at all, whether the head follows the mouse cursor, and whether the on-screen control buttons are shown.
Fully offline. No remote resources, no external dependencies at runtime — everything ships inside the extension.

Commands

Command	What it does
`Scorpion Pet: Show Pet`	Reveals/focuses the Scorpion Pet view and un-hides the mascot.
`Scorpion Pet: Hide Pet`	Hides the mascot inside its view (the view itself stays registered in the sidebar; VS Code does not let extensions close a specific sidebar view).
`Scorpion Pet: Cheer Up`	Plays the `happy` action once.
`Scorpion Pet: Sleep`	Switches to the `sleeping` state and stops walking.
`Scorpion Pet: Wake Up`	Resumes walking.
`Scorpion Pet: Random Action`	Plays a random action: `happy`, `angry` or `attacking`.

The same actions are available as buttons in the view's title bar and, optionally, inside the view itself (see scorpionPet.showControls).

Settings

Setting	Default	Description
`scorpionPet.scale`	`1`	Size multiplier for the mascot (`0.5`–`2`).
`scorpionPet.animationEnabled`	`true`	Disable to hold a static pose and save CPU.
`scorpionPet.followMouse`	`false`	The head turns toward the pointer while it hovers over the view.
`scorpionPet.showControls`	`true`	Show/hide the Sleep / Wake / Random buttons inside the view.

Project structure

scorpion-pet/
├── src/
│   ├── extension.ts               # Activation, command registration
│   ├── scorpionPetViewProvider.ts # WebviewViewProvider: builds the HTML, wires messaging
│   └── types.ts                   # Shared message/config types
├── media/
│   ├── index.html                 # Webview HTML template
│   ├── style.css                  # Sidebar-responsive, theme-aware styling
│   ├── script.js                  # Animation state machine (runs inside the webview)
│   ├── scorpion.svg               # The mascot — the original animated rig
│   └── scorpion-icon.svg          # Monochrome Activity Bar glyph
├── package.json
└── tsconfig.json

Development

Install dependencies and compile:

npm install
npm run compile

Watch mode:

npm run watch

Lint:

npm run lint

Run with F5

Open this folder in VS Code.
Press F5 (or run the "Run Extension" launch configuration).
A new Extension Development Host window opens.
Click the Scorpion Pet icon in the Activity Bar to see the mascot.

Packaging (VSIX)

npm run package

This runs vsce package and produces scorpion-pet-<version>.vsix, ready to install locally (code --install-extension scorpion-pet-<version>.vsix) or upload to the Marketplace.

Before publishing to the Marketplace

This project is prepared for packaging but not published. "publisher": "Lebet" and the LICENSE copyright line are already filled in. Before you publish:

Make sure a publisher with the exact id Lebet (same casing) exists at marketplace.visualstudio.com/manage — create it there if you haven't yet. This id cannot be changed later.
Add a real 128×128 PNG icon and reference it from package.json's top-level "icon" field (the Marketplace requires a raster icon for the extension listing; media/scorpion-icon.svg is only used for the Activity Bar glyph, which VS Code requires to stay a simple monochrome SVG).
Get a Personal Access Token from Azure DevOps (User settings → Personal access tokens → scope: Marketplace (Manage)).
Run vsce login Lebet, paste the PAT when prompted, then run vsce publish (or npm run package and upload the generated .vsix manually from the publisher management page instead).

Known limitations

Hide Pet cannot close the sidebar view itself — the VS Code extension API does not let an extension close one specific view out of a multi-view container it owns. It hides the mascot's content instead.
followMouse only reacts to the pointer while it is over the Scorpion Pet view; webviews cannot see cursor position elsewhere in the editor.