Plain Code Reader

Plain Code Reader breaks a file down into plain-English explanations of its functions, methods, classes, objects and types, to help you read code you didn't write (or forgot you wrote).

Supported now: JavaScript, TypeScript, JSX, TSX. More languages are planned.

Features

• Breakdown panel (right sidebar). Shows a file overview (libraries used, exports, hardest parts to read) and an expandable card for every declaration: summary, inputs, outputs, side effects, what it calls, and complexity. Click Go to line to jump to the code. The card for the code under your cursor is highlighted as you move.
• Code Diagram (Cmd+Alt+D / Ctrl+Alt+D, or the hierarchy icon in the editor title bar). Draws the file as a horizontal tree: file → classes, functions and types → their methods. Click a node for details, double-click to jump to the code, collapse branches, and pan/zoom (drag, scroll, pinch). Turn on Show calls to see arrows between functions that call each other; selecting a node highlights its own calls. Export PNG saves the diagram as an image.
• Inline summaries (CodeLens). A one-line explanation above each function, class and type. Click it to open the full breakdown.
• Hover. Hover over a declaration's name for a quick explanation.
• Explain This (Cmd+Alt+E / Ctrl+Alt+E, or right-click in the editor). Opens the breakdown for whatever is under the cursor.
• ✨ Explain with AI (Cmd+Alt+Shift+E / Ctrl+Alt+Shift+E, the button on any card, or the link above a function). Gives a detailed explanation of what the code actually does: its purpose, a step-by-step walkthrough, what each input means, what it returns, side effects, gotchas and a usage example. Turn on codereader.ai.autoExplain to explain whatever your cursor rests in automatically.

Privacy

The breakdown panel, inline summaries and hover all run offline, using static analysis with the TypeScript compiler's parser. No code leaves your machine for these.

Explain with AI is the only feature that sends code anywhere, and only when you ask for it (or turn on auto-explain). It sends the function or class being explained, plus a short outline of names in the same file, to the Plain Code Reader service, which forwards it to Groq to generate the explanation. Nothing is stored by the service. To turn AI off completely, set codereader.ai.enabled to false.

Settings

Development

npm install
npm run watch   # or press F5 in VS Code to launch an Extension Development Host
npm test

Architecture

src/
  analysis/
    types.ts               Language-agnostic model (CodeUnit, FileAnalysis, Analyzer)
    typescriptAnalyzer.ts  JS/TS parser → CodeUnits (TypeScript compiler API, syntax only)
    explainer.ts           CodeUnit → plain-English summary + details
    index.ts               Analyzer registry (add new languages here)
  analysisService.ts       Per-document cache keyed on version
  ai/aiExplainer.ts        Client for the AI proxy, with a content-hash cache
  breakdownView.ts         Webview panel in the secondary sidebar
  diagramPanel.ts          Code Diagram (horizontal tree) editor tab
  providers.ts             CodeLens + hover
media/                     Webview script/styles and icons
proxy/                     Cloudflare Worker that holds the Groq key and builds the prompt

The proxy is deployed separately: cd proxy && npx wrangler deploy. The Groq key lives only in the Worker, set with npx wrangler secret put GROQ_API_KEY.

To add a language, implement Analyzer so it produces the same CodeUnit model, then register it in src/analysis/index.ts. The panel, CodeLens and hover work unchanged.