JatayuExplains

Turn "explain this code" into a short guided tour that lives on the code itself.

• ▶ Explain above any function, method or class (or right-click → JatayuExplains: Explain).

• The editor highlights the lines for each step and scrolls with you.

• Each step is 2 to 4 sentences. Follow-ups are buttons: Back, Got it, Explain again, plus an Ask a question box.

• 🎯 Quiz me: 2 to 3 questions. A wrong answer offers Replay step N, and the results screen replays only the steps you missed.

• 🎨 CSS playground: a small live sample with a switch per CSS property (and a slider for numbers like gap), plus a caption saying what changed.

• Live preview: your running app inside VS Code. Click any element to see the CSS rules that apply, toggle or slide values live, jump to the rule in your source, or explain it with Jatayu.

It only runs when you ask. It never interrupts on its own.

CSS playground

Open it from:

• the 🎨 Playground button on tour steps about CSS;
• the 🎨 Playground CodeLens above rules in .css / .scss / .sass / .less files;
• right-click → JatayuExplains: Open playground (CSS files, or any selection), or the Command Palette.

It opens in a tab beside your code. The AI writes a tiny HTML + CSS sample, rendered in a fully sandboxed frame (no scripts). Nothing is written to your files.

Live preview

1. Start your app's dev server (e.g. npm run dev).
2. Click 🌐 Live preview and enter its URL (the last one is remembered per workspace). The button is in:
   • the status bar (bottom right),
   • the editor toolbar (top right) of HTML, CSS/SCSS/Less, JS/TS/JSX/TSX, Vue and Svelte files,
   • the editor's right-click menu,
   • the JatayuExplains sidebar,
   • and the Command Palette as JatayuExplains: Open live preview.
3. With 🎯 Inspect on, click any element. The inspector lists the matching CSS rules (most important first) with their source file and any @media conditions.
4. Toggle declarations or drag sliders to try changes live. Clear changes or any reload restores your real CSS. Your files are never changed.
5. Go to source opens the rule in your .css / .scss file. 🦅 Explain with Jatayu starts a normal tour over the element's HTML and its CSS.

Turn Inspect off to click around and use your app normally.

Show on page

Above every rule in a .css / .scss / .sass / .less file there's a 🔍 Show on page CodeLens (also in the right-click menu). It opens the live preview if needed, outlines every element on the current page that the rule styles, scrolls to the first one and selects it, so its rules and toggles appear straight away. You see your component in place, next to everything else on the page.

• SCSS/Less nesting is resolved (.cart { &__item {} } → .cart__item).
• State pseudo-classes like :hover are ignored when matching, so the element is found even when not hovered.
• It waits a few seconds for components that render after the page loads (React, Vue, …).
• It can only look at the page currently open in the preview. If nothing matches, navigate to the page that shows the component (turn Inspect off to click around) and click Show on page again.

How it works: a local proxy (listening on 127.0.0.1 only) sits in front of your dev server, forwards everything, including hot-reload WebSockets, and adds a small inspector script to HTML pages. To allow that script and the framing inside VS Code, it removes the Content-Security-Policy, X-Frame-Options and Cross-Origin-* headers from proxied responses. This only happens inside the preview; your app itself is unchanged.

Known limits: stylesheets from other origins (e.g. CDN fonts) can't be read; Tailwind, CSS Modules and CSS-in-JS rules show up but "Go to source" may not find them; SCSS rules written with & nesting may not be found by "Go to source".

What gets explained

Requirements

• VS Code 1.95 or newer
• GitHub Copilot signed in. JatayuExplains uses Copilot's models through the VS Code Language Model API, so no API key is needed. The first request shows a consent prompt; choose Allow.

Settings

Commands

• JatayuExplains: Explain
• JatayuExplains: Quiz me
• JatayuExplains: Open playground
• JatayuExplains: Open live preview
• JatayuExplains: Show on page (CSS/SCSS/Less files)
• JatayuExplains: End tour

Tip: the Buddy panel opens in the left sidebar. Drag its activity-bar icon into the secondary (right) sidebar to keep it beside your code; VS Code remembers the position.

Development

npm install
npm run compile      # type-check + bundle to dist/
npm test             # unit tests (lesson-plan parser, quiz logic)

Press F5 in VS Code to launch an Extension Development Host with the extension loaded.

Package a .vsix to install locally:

npx @vscode/vsce package

Layout

src/
  extension.ts            entry point: registers everything
  ai/                     provider.ts (interface), copilot.ts (vscode.lm)
  lesson/                 schema.ts (zod lesson plan + validation), prompt.ts, planner.ts (call + retry once)
  editor/                 codelens.ts, highlight.ts, target.ts, symbols.ts
  panel/                  BuddyViewProvider.ts (webview), messages.ts (panel <-> extension protocol)
  tour/                   controller.ts (steps, follow-ups, quiz flow), quiz.ts (pure scoring)
  playground/             PlaygroundPanel.ts (editor tab, AI-generated CSS sample)
  preview/                proxy.ts (dev-server proxy), PreviewPanel.ts, sourceFinder.ts, selectorSearch.ts, elementDoc.ts
  test/                   Mocha unit tests
media/                    panel.*, playground.js, preview.js, inspector.js (injected into the app), cssControls.js, tools.css, icon.svg

Roadmap

• v0.1: Explain via CodeLens/menu/command, lesson-plan JSON, highlights, panel with follow-ups, quiz with replay, Copilot.
• v0.2 (this version): CSS playground, live preview with CSS inspector.
• v0.5: concept memory, hover tips, Ollama and bring-your-own-key providers, Marketplace + Open VSX.
• v1.0: narration, push-to-talk, shareable saved tours, optional animated buddy.