Skip to content

Ijtihed/stage

Repository files navigation

Stage

Visual debugger canvas for Node.js. Pause at a breakpoint, see the local scope as a graph, fork it, replay it with edited inputs, and let Anthropic's Sonnet write the patch.

CI Marketplace Version Installs License: MIT

Stage canvas with two timelines side by side (origin paused at the bug, forked timeline returning the corrected value)

Stage turns a paused Node.js debug session into a parallel-timelines canvas. When you hit a breakpoint inside a forkable function, Stage opens a webview that shows the real local scope as an editable graph (powered by React Flow). You can:

  • Edit primitive values in place. Stage writes them back into the live debug session via DAP setExpression / setVariable, so continuing execution sees your new values.
  • Fork the timeline to explore counterfactuals without disturbing the paused process. Forked timelines re-run the captured function in a worker_threads sandbox with whatever edits you make.
  • Commit a timeline to extract a fix. Stage sends the function source, your edits, and the observed state delta to Claude Sonnet 4.6 and opens a vscode.diff view with the proposed change.

Quick start

  1. Install from VSIX (or from the Marketplace once published):

    # latest VSIX is attached to every GitHub Release
    gh release download v0.1.0 --pattern '*.vsix' --repo Ijtihed/stage
    code --install-extension stage-0.1.0.vsix
  2. Open the bundled demo workspace:

    cd fixture-refund
    npm install
  3. Set a breakpoint on the calculated_amount = … line in fixture-refund/src/refund.ts and run Debug refund tests from the Run and Debug panel. Stage opens automatically.

  4. Click tax_rate, type -0.05, press Enter, then Cmd+F to fork, Cmd+R to run. The fork should return 95 instead of 105.

  5. Cmd+Enter to commit. Stage asks Sonnet to produce a one-line fix (flipping + to -) and opens it in vscode.diff. Apply, re-run npm test, green line.

Setting the Anthropic API key

Stage uses VS Code's SecretStorage (OS keychain) for the API key. Run Stage: Set Anthropic API Key from the command palette and paste your key. Stage also falls back to the ANTHROPIC_API_KEY environment variable when no secret is stored.

Run Stage: Clear Anthropic API Key to remove the stored key.

Settings

Setting Default Description
stage.maxTimelines 4 Maximum number of parallel timelines visible on the canvas.
stage.model claude-sonnet-4-6 Anthropic model id used for commit / fix proposals.
stage.sandbox.timeoutMs 30000 Wall-clock budget for a sandboxed timeline run (ms).
stage.anthropicApiKey "" Deprecated. Prefer the Stage: Set Anthropic API Key command.

Keyboard shortcuts

Action Mac Windows / Linux
Fork timeline Cmd+F Ctrl+F
Run timeline Cmd+R Ctrl+R
Commit / propose fix Cmd+↵ Ctrl+↵

Shortcuts only fire when the Stage canvas has focus.

Forkability (v0.1)

The v0.1 sandbox profile accepts a narrow but useful slice of functions:

  • Synchronous (no async/await)
  • Plain identifier parameters (no destructuring or rest)
  • No fetch, fs, crypto, timers, dynamic import(), or require()
  • Body under 200 lines
  • Source on disk in the open workspace (not node_modules, not virtual)

When a frame isn't forkable, the canvas surfaces the reason and the Fork / Run buttons stay disabled for that frame. Async, IO replay, and timer virtualization are tracked for v0.2.

Security note

The worker_threads sandbox is for crash containment (so an infinite loop in your code can't freeze the extension host), not for isolating untrusted code. Stage only runs source from your own workspace.

Development

npm install
npm run lint
npm test                 # 34 Vitest tests across 9 files
npm run build            # tsc + vite → out/ and media/webview.{js,css}
npm run test:extension   # @vscode/test-electron headless smoke
npx vsce package         # produces stage-0.1.0.vsix

Press F5 with this repo open in VS Code to launch an Extension Development Host preloaded with the fixture-refund workspace.

Manual end-to-end smoke

Automated tests cover protocol, executor state machine, sandbox replay, LLM client shape, and headless extension activation. The full live-debug loop is best validated by hand once per release:

  1. F5 in this repo → launches Extension Dev Host with fixture-refund.
  2. Set a breakpoint on the calculated_amount line in refund.ts.
  3. Run Debug refund tests in the dev host's debug panel.
  4. Verify the Stage canvas auto-opens and renders order, subtotal, tax_rate, calculated_amount with their real DAP values.
  5. Click tax_rate, type -0.05, press Enter. Confirm VS Code's own Variables view reflects the new value (proves DAP write-back).
  6. Cmd+FCmd+R. Confirm the forked pane shows returnValue: 95.
  7. Cmd+Enter without an API key set → confirm the "Set Anthropic API Key" message.
  8. Run Stage: Set Anthropic API Key, paste a real key, Cmd+Enter again → confirm a vscode.diff opens with the proposed operator fix.

License

MIT

About

Visual debugger canvas for Node.js. Fork timelines at a breakpoint, replay in a sandbox, commit fixes via Anthropic Sonnet.

Resources

License

Stars

0 stars

Watchers

0 watching

Forks

Packages

 
 
 

Contributors

Languages