Skip to content

Add interactive Quantum Katas learning experience to VS Code extension#3228

Merged
minestarks merged 27 commits into
mainfrom
minestarks/learning-katas-pr
May 20, 2026
Merged

Add interactive Quantum Katas learning experience to VS Code extension#3228
minestarks merged 27 commits into
mainfrom
minestarks/learning-katas-pr

Conversation

@minestarks
Copy link
Copy Markdown
Member

Previously, the Quantum Katas were only accessible through the website. This PR adds a full in-editor learning experience, including an AI tutor via Copilot Chat.

What's new

  • Activity bar panel — A "Microsoft Quantum" sidebar with a tree view showing all Katas units and activities, with completion tracking (checkmarks, progress counts).
  • Lesson panel — A webview that renders lesson text, runnable code examples, and exercises inline. Includes an action bar for navigation (Next/Back), Run, Check, Hint (via chat), and Explain (via chat).
  • Workspace-based progress — On first use, a qdk-learning/ subfolder is scaffolded in the workspace with .qs files for each exercise. Progress is persisted in qdk-learning.json.
  • Copilot agent and tools — A QDK Learning chat agent backed by ~12 language model tools (show, next, previous, goto, run, check, hint, solution, reset, read-code, get-state, list-units). The agent acts as a tutor: gives hints incrementally, explains concepts, and checks solutions.
  • Code lens — "Check Solution" / "Reset Exercise" lenses appear on exercise files.
  • Welcome view — Shown in the sidebar when no learning workspace is detected; prompts initialization.

Interesting files

  • service.ts is the core singleton — manages catalog loading, navigation state, progress file I/O, exercise checking (via the existing runProgram infrastructure), and Q# file scaffolding.
  • panel.ts manages the webview lifecycle; the webview app itself is a React/TSX app in src/learning/webview/.
  • learningTools.ts wraps the service for Copilot tool invocations, including a confirmInit flow that prompts workspace creation on first use.

To try it

  1. Build the extension (.build.py --wasm --npm --vscode)
  2. Open a folder in VS Code, click the Quantum activity bar icon
  3. Confirm workspace setup when prompted
  4. Navigate lessons/exercises in the tree or panel, or chat with the @QDK Learning agent

description written with heavy help from Copilot

Comment thread source/vscode/src/learning/webview/webview.css Outdated
Comment thread source/vscode/src/learning/commands.ts
Comment thread source/vscode/src/learning/commands.ts
Comment thread source/npm/qsharp/generate_katas_content.js
Comment thread source/vscode/src/telemetry.ts Outdated
Comment thread source/vscode/src/gh-copilot/learningTools.ts Outdated
Comment thread source/vscode/src/gh-copilot/learningTools.ts Outdated
Comment thread source/vscode/agents/qdk-learning.agent.md
Comment thread source/vscode/build.mjs
Comment thread source/vscode/src/telemetry.ts
Comment thread source/vscode/src/gh-copilot/learningTools.ts Outdated
Comment thread source/vscode/src/gh-copilot/learningTools.ts
Comment thread source/vscode/src/learning/panel.ts
Comment thread source/vscode/src/learning/progressTreeView.ts
Comment thread source/vscode/src/learning/welcomeView.ts
Comment thread source/vscode/src/learning/types.d.ts Outdated
@amcasey
Copy link
Copy Markdown
Member

amcasey commented May 19, 2026

The only thing I really care about is having copilot/eval know about the current editor contents - the rest of my comments are just hygiene. LGTM

Copy link
Copy Markdown
Member

@amcasey amcasey left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

:shipit:

Copy link
Copy Markdown
Contributor

@joao-boechat joao-boechat left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: should "agents", "prompts", "skills", all be in a folder centralizing all ai-related files? Just to make sure that in the future it's easy to find all of the md files and modify their behavior if necessary.

Comment thread source/npm/qsharp/generate_katas_content.js Outdated
Copy link
Copy Markdown
Contributor

@joao-boechat joao-boechat left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Some of copilot thinking mentions the tool calls and internal things that the user doesn't really need to see. Would be nice if there was a way to disable showing that, the experience would be more fluid

Comment thread source/vscode/src/gh-copilot/tools.ts
Comment thread source/vscode/build.mjs
Comment thread source/vscode/src/learning/service.ts Outdated
@joao-boechat
Copy link
Copy Markdown
Contributor

The experience is very fluid and even better than the one we had at the website. I was skeptical at the idea of running everything behind copilot but somehow you made it very easy to use, can't wait to have it shipped so I can keep going with the material haha

Thanks for all the work you put on this, Mine!

Besides my comments above, the code LGTM!

Comment thread source/vscode/agents/qdk-learning.agent.md
@minestarks
Copy link
Copy Markdown
Member Author

nit: should "agents", "prompts", "skills", all be in a folder centralizing all ai-related files? Just to make sure that in the future it's easy to find all of the md files and modify their behavior if necessary.

Staged at #3242

@minestarks
Copy link
Copy Markdown
Member Author

Some of copilot thinking mentions the tool calls and internal things that the user doesn't really need to see. Would be nice if there was a way to disable showing that, the experience would be more fluid

I played around with this, and found that the user can control how the Thinking parts are displayed, not us, and the setting applies to all agents, not just us.

So I'm gonna call this a limitation of us being in VS Code - we'll have to write our own application if we want more control over chat behavior :/

@minestarks minestarks added this pull request to the merge queue May 20, 2026
Merged via the queue into main with commit 7bcdae6 May 20, 2026
12 checks passed
@minestarks minestarks deleted the minestarks/learning-katas-pr branch May 20, 2026 19:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants