diff --git a/.github/images/activities-dict-highlighted.png b/.github/images/activities-dict-highlighted.png
new file mode 100644
index 0000000..57b21af
Binary files /dev/null and b/.github/images/activities-dict-highlighted.png differ
diff --git a/.github/images/activity-card-with-participants.png b/.github/images/activity-card-with-participants.png
index 138b9cc..485069c 100644
Binary files a/.github/images/activity-card-with-participants.png and b/.github/images/activity-card-with-participants.png differ
diff --git a/.github/images/agent-mode-dropdown.png b/.github/images/agent-mode-dropdown.png
index 925b8e5..2133fcb 100644
Binary files a/.github/images/agent-mode-dropdown.png and b/.github/images/agent-mode-dropdown.png differ
diff --git a/.github/images/ask-mode-selection.png b/.github/images/ask-mode-selection.png
index 20efb1f..c31fcd7 100644
Binary files a/.github/images/ask-mode-selection.png and b/.github/images/ask-mode-selection.png differ
diff --git a/.github/images/edit-mode-dropdown.png b/.github/images/edit-mode-dropdown.png
deleted file mode 100644
index df1bb8a..0000000
Binary files a/.github/images/edit-mode-dropdown.png and /dev/null differ
diff --git a/.github/images/edit-navigation-panel.png b/.github/images/edit-navigation-panel.png
deleted file mode 100644
index 625dac0..0000000
Binary files a/.github/images/edit-navigation-panel.png and /dev/null differ
diff --git a/.github/images/files-added-to-context.png b/.github/images/files-added-to-context.png
index 96001b1..a55841f 100644
Binary files a/.github/images/files-added-to-context.png and b/.github/images/files-added-to-context.png differ
diff --git a/.github/images/inline-chat-highlight.png b/.github/images/inline-chat-highlight.png
new file mode 100644
index 0000000..0db1421
Binary files /dev/null and b/.github/images/inline-chat-highlight.png differ
diff --git a/.github/images/plan-mode-dropdown.png b/.github/images/plan-mode-dropdown.png
new file mode 100644
index 0000000..d005d92
Binary files /dev/null and b/.github/images/plan-mode-dropdown.png differ
diff --git a/.github/images/plan-mode-start-implementation.png b/.github/images/plan-mode-start-implementation.png
new file mode 100644
index 0000000..f922c8d
Binary files /dev/null and b/.github/images/plan-mode-start-implementation.png differ
diff --git a/.github/images/review-changes-buttons.png b/.github/images/review-changes-buttons.png
new file mode 100644
index 0000000..e5d4f48
Binary files /dev/null and b/.github/images/review-changes-buttons.png differ
diff --git a/.github/images/shadow-text.gif b/.github/images/shadow-text.gif
new file mode 100644
index 0000000..590c5b0
Binary files /dev/null and b/.github/images/shadow-text.gif differ
diff --git a/.github/images/tools-icon.png b/.github/images/tools-icon.png
index ea2c772..da45f6b 100644
Binary files a/.github/images/tools-icon.png and b/.github/images/tools-icon.png differ
diff --git a/.github/steps/1-preparing.md b/.github/steps/1-step.md
similarity index 84%
rename from .github/steps/1-preparing.md
rename to .github/steps/1-step.md
index 083bdbe..3186ab4 100644
--- a/.github/steps/1-preparing.md
+++ b/.github/steps/1-step.md
@@ -16,13 +16,13 @@ GitHub Copilot has been proven to increase developer productivity and accelerate
As you work in your IDE, you'll most often interact with GitHub Copilot in the following ways:
-| Interaction Mode | 📝 Description | 🎯 Best For |
-| ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- |
-| **⚡ Inline suggestions** | AI-powered code suggestions that appear as you type, offering context-aware completions from single lines to entire functions. | Completion of the current line, sometimes a whole new block of code |
-| **💬 Ask Mode** | Optimized for answering questions about your codebase, coding, and general technology concepts. | Understanding how code works, brainstorming ideas, asking questions |
-| **✏️ Edit Mode** | Optimized for making code edits across multiple files in your project. VS Code directly applies the code changes in the editor for in-place review. | Coding tasks when you have a good understanding of the changes you want to make and which files you want to edit |
-| **🤖 Agent Mode** | Optimized for making autonomous edits across multiple files in your project. | Coding tasks when you have a less well-defined task that might also require running terminal commands and tools |
-| **💭 Inline Chat** | Interactive chat scoped to your current file or selection. Ask questions about specific code blocks. | Code explanations, debugging specific functions, targeted improvements |
+| Interaction Mode | 📝 Description | 🎯 Best For |
+| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------- |
+| **⚡ Inline suggestions** | AI-powered code suggestions that appear as you type, offering context-aware completions from single lines to entire functions. | Completion of the current line, sometimes a whole new block of code |
+| **💭 Inline Chat** | Interactive chat scoped to your current file or selection. Ask questions about specific code blocks. | Code explanations, debugging specific functions, targeted improvements |
+| **💬 Ask Mode** | Optimized for answering questions about your codebase, coding, and general technology concepts. | Understanding how code works, brainstorming ideas, asking questions |
+| **🤖 Agent Mode** | Recommended default mode for most coding tasks: autonomous edits, tool use, and follow-through until the task is done. | Daily coding tasks, from scoped fixes to larger multi-file implementation work |
+| **🧭 Plan Agent** | Optimized for drafting a plan and asking clarifying questions before any code changes are made. | When you want a reviewed plan first, then hand off to implementation |
As you work, you'll find GitHub Copilot can help out in several places across the `github.com` website and in your favorite coding environments such as VS Code, Jet Brains, and Xcode!
@@ -40,7 +40,6 @@ Let's start up our development environment, use copilot to learn a bit about the
[](https://codespaces.new/{{full_repo_name}}?quickstart=1)
1. Confirm the **Repository** field is your copy of the exercise, not the original, then click the green **Create Codespace** button.
-
- ✅ Your copy: `/{{full_repo_name}}`
- ❌ Original: `/skills/getting-started-with-github-copilot`
@@ -60,8 +59,8 @@ Let's start up our development environment, use copilot to learn a bit about the
1. Make sure you are in **Ask Mode** for our first interaction
-
+
1. Enter the below prompt to ask Copilot to introduce you to the project.
> 
diff --git a/.github/steps/2-first-introduction.md b/.github/steps/2-step.md
similarity index 90%
rename from .github/steps/2-first-introduction.md
rename to .github/steps/2-step.md
index 6687cc5..3d274e0 100644
--- a/.github/steps/2-first-introduction.md
+++ b/.github/steps/2-step.md
@@ -34,19 +34,24 @@ In short, you can think of Copilot like a very specialized coworker. To be effec
> ```
1. Now that we know the issue is in the `src/app.py` file and the `signup_for_activity` method, let's follow Copilot's recommendation and go fix it (semi-manually). We'll start with a comment and let Copilot finish the correction.
+ 1. Open the `src/app.py` file.
- 1. In VS Code, select the file **Explorer tab** to show the project files and open the `src/app.py` file.
+ > 💡 **Tip:** If Copilot mentioned `src/app.py` in chat, you can click the file directly in the chat view to open it.
- 1. Scroll near the bottom of the file and find the `signup_for_activity` method.
+ 1. Near the bottom of the file, find the `signup_for_activity` function.
1. Find the comment line that describes adding a student. Above this is where it seems logical to do our registration check.
1. Enter the below comment and press enter to go to the next line. After a moment, temporary shadow text will appear with a suggestion from Copilot! Nice! :tada:
+ Comment:
+
```python
# Validate student is not already signed up
```
+
+
1. Press `Tab` to accept Copilot's suggestion and convert the shadow text to code.
@@ -84,11 +89,16 @@ In new project developments, it's often helpful to have some realistic looking f
1. Near the top of the `src/app.py` file (about line 23), find the `activities` variable, where our example extracurricular activities are configured.
-1. Click on any of the related lines and bring up Copilot inline chat by using the keyboard command `Ctrl + I` (windows) or `Cmd + I` (mac).
+1. Highlight the entire `activities` dictionary by clicking and dragging your mouse from the top to the bottom of the dictionary. This will help provide context to Copilot for our next prompt.
+
+
+
- > 💡 **Tip:** Another way to bring up Copilot inline chat is: `right click` on any of the selected lines -> `Copilot` -> `Editor Inline Chat`.
+1. Bring up Copilot inline chat by using the keyboard command `Ctrl + I` (windows) or `Cmd + I` (mac).
-1. Enter the following prompt text and press enter or the **Send and Dispatch** button.
+ > 💡 **Tip:** Another way to bring up Copilot inline chat is: `right click` on any of the selected lines -> `Open Inline Chat`.
+
+1. Enter the following prompt text and press enter or the **Send** button on the right.
> 
>
@@ -97,7 +107,7 @@ In new project developments, it's often helpful to have some realistic looking f
> activities, and 2 more intellectual activities.
> ```
-1. After a moment, Copilot will directly start making changes to the code. The changes will be stylized differently to make any additions and removals easy to identify. Take a moment to inspect and then press the **Accept** button.
+1. After a moment, Copilot will directly start making changes to the code. The changes will be stylized differently to make any additions and removals easy to identify. Take a moment to inspect and verify the changes, and then press the **Keep** button.
Example Results
@@ -166,6 +176,8 @@ In new project developments, it's often helpful to have some realistic looking f
+1. You can now go to your website and verify that the new activities are visible.
+
### :keyboard: Activity: Use Copilot to describe our work 💬
Nice work fixing that bug and expanding the example activities! Now let's get our work committed and pushed to GitHub, again with the help of Copilot!
@@ -179,7 +191,6 @@ Nice work fixing that bug and expanding the example activities! Now let's get ou

1. Above the list of staged changes, find the **Message** text box, but **don't enter anything** for now.
-
- Typically, you would write a short description of the changes here, but now we have Copilot to help out!
1. To the right of the **Message** text box, find and click the **Generate Commit Message** button (sparkles icon).
diff --git a/.github/steps/3-copilot-edits.md b/.github/steps/3-copilot-edits.md
deleted file mode 100644
index b286bc3..0000000
--- a/.github/steps/3-copilot-edits.md
+++ /dev/null
@@ -1,103 +0,0 @@
-## Step 3: Getting work done even _faster_ with Copilot Edit Mode
-
-In our previous steps, we used features of Copilot that require more hands-on guidance and they produced mostly localized results. Now, we will explore Copilot **Edit Mode**, a feature that allows working more holistically on our repo.
-
-### 📖 Theory: Copilot Edit Mode
-
-Copilot **Edit Mode** and **Agent Mode** both let you apply **natural‑language** driven changes across **multiple files**, however there are some differences between them.
-
-In this step we will focus on **Edit Mode** and explore **Agent Mode** in the next step.
-
-Edit Mode is best used for **well defined** tasks where you **know the scope** of the needed changes.
-
-#### How Edit Mode works
-
-```mermaid
-flowchart LR
- A[Select Context Files] --> B[Prompt Copilot]
- B --> C[Proposed Changes]
- C --> D{Review Change}
- D --> E[Accept]
- D --> F[Discard]
- D -->|Refine Prompt| B
-
-```
-
-1. **Set Context**: Select files that Copilot should consider in it's changes
-1. **Prompt Copilot**: Use natural language to describe the required changes.
-1. **Review Changes**: See proposed changes in-place in your code.
-1. **Accept or Discard**: Review each suggested edit and choose which to keep.
-1. **Iterate**: If needed, provide follow-up instructions to refine the changes.
-
-### :keyboard: Activity: Use Copilot to add a new feature! :rocket:
-
-Our website lists activities, but it's keeping the guest list secret 🤫
-
-Let's use Copilot to change the website to display signed up students under each activity!
-
-1. At the bottom of Copilot Chat window, use the dropdown to switch to **Edit** mode.
-
-
-
-1. Open the files related to our webpage then drag each editor window (or file) to the chat panel, informing Copilot to use them as context.
-
- - `src/static/app.js`
- - `src/static/index.html`
- - `src/static/styles.css`
-
-
-
- > 💡 **Tip:** You can also use the **Add Context...** button to provide other sources of context items, like a GitHub issue, the entire codebase, or the results of a terminal window.
-
-1. Ask Copilot to update our project to display the current participants of activities. Wait a moment for the edit suggestions to arrive and be applied.
-
- > 
- >
- > ```prompt
- > Hey Copilot, can you please edit the activity cards to add a participants section.
- > It will show what participants that are already signed up for that activity as a bulleted list.
- > Remember to make it pretty!
- > ```
-
- - An extra icon has appeared next to the file names and open editor windows indicating they have suggested edits.
- - A suggested edits panel has appeared in the bottom right of the editor window providing controls to jump to the recommended changes.
-
-
-
-
-
-
-1. Before we simply accept the changes, please check our website again and verify everything is updated as expected. Here is an example of an updated activity card. You may need to restart the app or refresh the page.
-
-
-
- > 🪧 **Note:** Your activity card may look different. Copilot won't always produce the same results.
-
-
- Need help? 🤷
- If the website is not loading, here are some things to check.
-
- - Restart the VS Code Debugger to make sure the latest version of the website is served.
- - If you forgot the url, or closed the window, please review step 1.
- - Try hard refreshing the webpage or opening in a private window so it downloads a fresh copy.
-
-
-
-1. Now that we have confirmed our changes are good, use the panel to cycle through each suggested edit and press **Keep** to apply the change.
-
- > 💡 **Tip:** You can accept the changes directly, modify them, or provide additional instruction to refine them using the chat interface.
-
-1. With our new feature complete, please **commit** and **push** the changes to GitHub.
-
-1. Wait a moment for Mona to check your work, provide feedback, and share the next lesson.
-
-
-
-Having trouble? 🤷
-
-If you don't get feedback, here are some things to check:
-
-- Make sure your commit the changes in the `src/static/` directory to the branch `accelerate-with-copilot` and pushed/synchronized to GitHub.
-- If Mona found a mistake, simply make a correction and push your changes again. Mona will check your work as many times as needed.
-
-
diff --git a/.github/steps/3-step.md b/.github/steps/3-step.md
new file mode 100644
index 0000000..06dd489
--- /dev/null
+++ b/.github/steps/3-step.md
@@ -0,0 +1,139 @@
+## Step 3: Engage Hyperdrive - Copilot Agent Mode 🚀
+
+### 📖 Theory: What is Copilot Agent Mode?
+
+Copilot [agent mode](https://code.visualstudio.com/docs/copilot/chat/chat-agent-mode) is the next evolution in AI-assisted coding. Acting as an autonomous peer programmer, it performs multi-step coding tasks at your command.
+
+Copilot Agent Mode responds to compile and lint errors, monitors terminal and test output, and auto-corrects in a loop until the task is completed.
+
+#### Agent Mode (at a glance)
+
+| Aspect | 👩🚀 Agent Mode |
+| --- | --- |
+| Autonomy and planning | Breaks down high-level requests into multi-step work and iterates until the task is complete. |
+| Context gathering | Uses your current context and can discover additional relevant files when needed. |
+| Tool use | Selects and invokes tools automatically; you can also direct tools with mentions like `#codebase`. |
+| Approval and safety gates | Sensitive actions can require approval before execution, helping you stay in control. |
+
+#### 🧰 Agent Mode Tools
+
+Agent mode uses tools to accomplish specialized tasks while processing a user request. Examples of such tasks are:
+
+- Finding relevant files to complete your prompt
+- Fetching contents of a webpage
+- Running tests or terminal commands
+
+> [!TIP]
+> While VS Code provides many built‑in tools, you can also provide Agent Mode more domain‑specific powers through **MCP tools**.
+>
+> Read more on [MCP servers](https://code.visualstudio.com/docs/copilot/customization/mcp-servers) and [GitHub MCP Server](https://github.com/github/github-mcp-server)
+
+Now, let's give **Agent Mode** a try! 👩🚀
+
+### :keyboard: Activity: Use Copilot to add a new feature! :rocket:
+
+Our website lists activities, but it's keeping the guest list secret 🤫
+
+Let's use Copilot to change the website to display signed up students under each activity!
+
+1. At the bottom of Copilot Chat window, use the dropdown to switch to **Agent** mode.
+
+
+
+1. Open the files related to our webpage then drag each editor window (or file) to the chat panel, informing Copilot to use them as context.
+
+ - `src/static/app.js`
+ - `src/static/index.html`
+ - `src/static/styles.css`
+
+ > 🪧 **Note:** Adding files as context is optional. If you skip this, Copilot Agent Mode can still use tools like `#codebase` to search for relevant files from your prompt. Adding specific files helps point Copilot in the right direction, which is especially useful in larger codebases.
+
+
+
+ > 💡 **Tip:** You can also use the **Add Context...** button to provide other sources of context items, like a GitHub issue or the results of a terminal window.
+
+1. Ask Copilot to update our project to display the current participants of activities. Wait a moment for the edit suggestions to arrive and be applied.
+
+ > 
+ >
+ > ```prompt
+ > Hey Copilot, can you please edit the activity cards to add a participants section.
+ > It will show what participants that are already signed up for that activity as a bulleted list.
+ > Remember to make it pretty!
+ > ```
+
+ After Copilot finishes work, you are in control of what changes get to stay.
+
+ Using the **Keep** buttons shown below, you can accept/discard all changes or review and decide change by change. This can be done either from the chat panel view or while inspecting each edited file.
+
+
+
+
+1. Before we simply accept the changes, please check our website again and verify everything is updated as expected.
+
+ Here is an example of an updated activity card. You may need to restart the app or refresh the page.
+
+
+
+ > 🪧 **Note:** Your activity card may look different. Copilot won't always produce the same results.
+
+
+ Need help? 🤷
+ If the website is not loading, here are some things to check.
+
+ - Restart the VS Code Debugger to make sure the latest version of the website is served.
+ - If you forgot the url, or closed the window, please review step 1.
+ - Try hard refreshing the webpage or opening in a private window so it downloads a fresh copy.
+
+
+
+1. Now that we have confirmed our changes are good, use the panel to cycle through each suggested edit and press **Keep** to apply the change.
+
+ > 💡 **Tip:** You can accept the changes directly, modify them, or provide additional instruction to refine them using the chat interface.
+
+### :keyboard: Activity: Use Agent mode to add functional "unregister" buttons
+
+Let's experiment with some more open-ended requests that will add more functionality to our web application.
+
+If you don't get the desired results, you can try other models or provide follow-up feedback to refine the results.
+
+1. Make sure your Copilot is still in **Agent** mode.
+
+
+
+1. Click on the **Tools** icon and explore all Tools currently available to Copilot Agent Mode.
+
+
+
+1. Time for our test! Let's ask Copilot to add functionality for removing participants.
+
+ > 
+ >
+ > ```prompt
+ > #codebase Please add a delete icon next to each participant and hide the bullet points.
+ > When clicked, it will unregister that participant from the activity.
+ > ```
+
+ The `#codebase` tool is used by Copilot to find relevant files, code chunks that are relevant to the task at hand.
+
+ > 🪧 **Note:** In this lab we explicitly include the `#codebase` tool to get the most repeatable results.
+ > Feel free to try the prompt **without** `#codebase` and observe whether Agent Mode decides to gather broader project context on its own.
+
+1. When Copilot is finished, inspect the code changes and the results on the website. If you like the results, press the **Keep** button. If not, try providing Copilot some feedback to refine the results.
+
+ > 🪧 **Note:** If you don't see updates on the website, you may need to restart the debugger
+
+1. Ask Copilot to fix a registration bug.
+
+ > 💡 **Tip:** We recommend testing the registration flow yourself so you can clearly see the before/after changes behavior.
+
+ > 
+ >
+ > ```prompt
+ > I've noticed there seems to be a bug.
+ > When a participant is registered, the page must be refreshed to see the change on the activity.
+ > ```
+
+1. When Copilot is finished, inspect the results and validate the registration flow on the website.
+
+ If you like the results, press the **Keep** button. If not, try providing Copilot some feedback.
diff --git a/.github/steps/4-copilot-agent-mode.md b/.github/steps/4-copilot-agent-mode.md
deleted file mode 100644
index 06060f3..0000000
--- a/.github/steps/4-copilot-agent-mode.md
+++ /dev/null
@@ -1,95 +0,0 @@
-## Step 4: Engage Hyperdrive - Copilot Agent Mode 🚀
-
-### 📖 Theory: What is Copilot Agent Mode?
-
-Copilot [agent mode](https://code.visualstudio.com/docs/copilot/chat/chat-agent-mode) is the next evolution in AI-assisted coding. Acting as an autonomous peer programmer, it performs multi-step coding tasks at your command.
-
-Copilot Agent Mode responds to compile and lint errors, monitors terminal and test output, and auto-corrects in a loop until the task is completed.
-
-#### Edit Mode vs Agent Mode (at a glance)
-
-| Aspect | ✏️ Edit Mode | 👩🚀 Agent Mode |
-| -------------- | --------------------------------- | -------------------------------------------------------------------------------- |
-| Context scope | Only the files you explicitly add | May read/add additional files & surfaces as needed |
-| Self‑review | Minimal (you drive iteration) | Built‑in feedback & retry loop on errors/failures |
-| Change scope | Highly scoped & surgical | Broader; may touch related layers for consistency |
-| When to choose | You know exactly what to change | Goal is broader or uncertain; requires exploration |
-| Tool calling | None (you run commands manually) | Can invoke tools (read/edit files, run commands, inspect terminal & test output) |
-
-#### 🧰 Agent Mode Tools
-
-Agent mode uses tools to accomplish specialized tasks while processing a user request. Examples of such tasks are:
-
-- Finding relevant files to complete your prompt
-- Fetching contents of a webpage
-- Running tests or terminal commands
-
-> [!TIP]
-> While VS Code provides many built‑in tools, you can also provide Agent Mode more domain‑specific powers through **MCP tools**.
->
-> Read more on [MCP servers](https://code.visualstudio.com/docs/copilot/customization/mcp-servers) and [GitHub MCP Server](https://github.com/github/github-mcp-server)
-
-Now, let's give **Agent Mode** a try! 👩🚀
-
-### :keyboard: Activity: Use Agent mode to add functional "unregister" buttons
-
-Let's experiment with some more open-ended requests that will add more functionality to our web application.
-
-If you don't get the desired results, you can try other models or provided followup feedback to refine the results.
-
-1. Open the **Copilot** chat panel and use the dropdown menu to switch to **Agent** mode.
-
-
-
-1. Click on the **Tools** icon and explore all Tools currently available to Copilot Agent Mode.
-
-
-
-
-1. Time for our test! Let's ask Copilot to add functionality for removing participants.
-
- > 
- >
- > ```prompt
- > #codebase Please add a delete icon next to each participant and hide the bullet points.
- > When clicked, it will unregister that participant from the activity.
- > ```
-
- The `#codebase` tool is used by Copilot to find relevant files, code chunks that are relevant to the task at hand.
-
- > 🪧 **Note:** In this lab we explicitly include the `#codebase` tool to get the most repeatable results.
- > Feel free to try the prompt **without** `#codebase` and observe whether Agent Mode decides to gather broader project context on its own.
-
-1. When Copilot is finished, restart the debugger and inspect the results. If you like the results, press the **Keep** button. If not, try providing Copilot some feedback to refined the results.
-
-1. Ask Copilot to fix a registration bug.
-
- > 
- >
- > ```prompt
- > I've noticed there seems to be a bug.
- > When a participant is registered, the page must be refreshed to see the change on the activity.
- > ```
-
-1. When Copilot is finished, inspect the results. If you like the results, press the **Keep** button. If not, try providing Copilot some feedback.
-
-### :keyboard: Activity: Use Agent mode to get test coverage 🧑🚀
-
-Your backend is now feature‑rich—but still has zero test coverage. Use Copilot **Agent Mode** to add test dependencies, scaffold starter tests and run them.
-
-1. Ask Copilot in **Agent mode** to set up and run tests for your backend.
-
- > 
- >
- > ```prompt
- > Add fastapi tests using pytest in a new tests directory and run them.
- > Make sure to add any new dependencies to requirements.txt
- > ```
-
-1. As Copilot works on your prompt, different tools might need your approval.
-
- **🎯 Goal: Get all tests passing (green) — aim for a clean run! ✅**
-
- > 🪧 **Note:** Copilot may one-shot this with the initial prompt or need more guidance from you.
-
-1. Once the tests are passing - **commit** and **push** all changes to your `accelerate-with-copilot` branch to progress to the last step! Almost done!
diff --git a/.github/steps/4-step.md b/.github/steps/4-step.md
new file mode 100644
index 0000000..0c3d969
--- /dev/null
+++ b/.github/steps/4-step.md
@@ -0,0 +1,89 @@
+## Step 4: Plan your implementation with the Planning Agent 🧭
+
+In the last step, Agent Mode helped us move fast and ship new functionality. 🚀
+
+Now let's slow down for one round and work like architects: define a strong testing approach first, then hand it off for implementation. This gives us better clarity, fewer surprises, and cleaner results. 🧪
+
+### 📖 Theory: What is Copilot Plan Agent?
+
+Copilot [Plan Agent](https://code.visualstudio.com/docs/copilot/chat/chat-planning) helps you design a solution before any code is changed.
+
+Instead of jumping straight into edits, it researches your request, asks clarifying questions, and drafts an implementation plan you can refine.
+
+#### Plan Agent (at a glance)
+
+| Aspect | 🧭 Plan Agent |
+| --- | --- |
+| Purpose | Creates a structured implementation plan before coding starts. |
+| Context gathering | Uses read-only research to understand requirements and constraints. |
+| Collaboration style | Asks clarifying questions, then updates the plan using your answers. |
+| Iteration | Supports multiple refinement passes before implementation. |
+| Safety | Does not edit files until you approve the plan and hand off to **Agent Mode**. |
+| Handoff | **Start implementation** button hands off the approved plan to **Agent Mode** for coding. |
+
+> [!TIP]
+> You can start from a high-level request and then add constraints and details in follow-up prompts.
+
+### ⌨️ Activity: Plan and implement backend tests
+
+Your backend still has zero test coverage. Use **Plan Agent** to create a plan, answer questions, and then launch implementation.
+
+1. Open the **Copilot Chat** panel and switch to **Plan Agent**.
+
+
+
+
+1. Let's start with a broad prompt and Copilot will help us fill in the details:
+
+ > 
+ >
+ > ```prompt
+ > I want to add backend FastAPI tests in a separate tests directory.
+ > ```
+
+1. Wait for Copilot to generate its first plan. If it asks you any questions, answer them to the best of your ability.
+
+ > 🪧 **Note:** Don't worry about getting it perfect, you can always refine the plan later.
+
+1. You can refine the plan and provide additional details in follow up prompts
+
+ Here are some examples:
+
+ > 
+ >
+ > ```prompt
+ > Let's use the AAA (Arrange-Act-Assert) testing pattern to structure our tests
+ > ```
+
+ > 
+ >
+ > ```prompt
+ > Make sure we use `pytest` and add it to `requirements.txt` file
+ > ```
+
+
+1. Review the proposed plan and when you are happy with it, click **Start implementation** to hand off to **Agent Mode**.
+
+
+
+ Notice that clicking the button switched from **Plan** to **Agent Mode**. From this point on, Copilot can edit your codebase, just like before.
+
+1. Watch Copilot implement the plan you just created. It may ask for permissions to run certain tools (e.g., run commands or create virtual environments). Approve these permissions so it can continue working.
+
+1. Review the changes and make sure tests run successfully. If needed, continue guiding until implementation is complete.
+
+ **🎯 Goal: Get all tests passing (green) before you move on. ✅**
+
+ > 🪧 **Note:** Agent Mode may complete this in one pass, or it may need follow-up prompts from you.
+
+1. **Commit** and **push** all your changes to the `accelerate-with-copilot` branch.
+
+1. Wait for Mona to check your work and share the next step.
+
+
+Having trouble? 🤷
+
+- If tests did not run, ask Copilot to run them for you.
+- Make sure `pytest` is added in `requirements.txt` and a `tests/` directory exists.
+
+
diff --git a/.github/steps/5-copilot-on-github.md b/.github/steps/5-step.md
similarity index 100%
rename from .github/steps/5-copilot-on-github.md
rename to .github/steps/5-step.md
diff --git a/.github/steps/x-review.md b/.github/steps/x-review.md
index 7e1bc55..acfd75a 100644
--- a/.github/steps/x-review.md
+++ b/.github/steps/x-review.md
@@ -9,8 +9,8 @@ Here's a recap of the GitHub Copilot features you learned:
- **Ask Mode**: Used @workspace to explore and understand your codebase
- **Inline suggestions**: Completed code with Tab acceptance
- **Inline Chat**: Generated code and data with Ctrl/Cmd + I
-- **Edit Mode**: Made multi-file changes with targeted prompts
-- **Agent Mode**: Built features and tests autonomously
+- **Agent Mode**: Built features autonomously
+- **Plan Agent**: Drafted a plan, answered questions, and started implementation
- **GitHub integration**: Generated commit messages, PR summaries, and code reviews
### What's next?
diff --git a/.github/workflows/0-start-exercise.yml b/.github/workflows/0-start-exercise.yml
index 05e5aa5..26d2b4a 100644
--- a/.github/workflows/0-start-exercise.yml
+++ b/.github/workflows/0-start-exercise.yml
@@ -11,7 +11,7 @@ permissions:
issues: write
env:
- STEP_1_FILE: ".github/steps/1-preparing.md"
+ STEP_1_FILE: ".github/steps/1-step.md"
jobs:
start_exercise:
@@ -42,7 +42,7 @@ jobs:
with:
repository: skills/exercise-toolkit
path: exercise-toolkit
- ref: v0.7.0
+ ref: v0.8.1
- name: Create comment - add step content
uses: GrantBirki/comment@v2.1.1
diff --git a/.github/workflows/1-preparing.yml b/.github/workflows/1-step.yml
similarity index 94%
rename from .github/workflows/1-preparing.yml
rename to .github/workflows/1-step.yml
index dd57c15..6a736a3 100644
--- a/.github/workflows/1-preparing.yml
+++ b/.github/workflows/1-step.yml
@@ -12,12 +12,12 @@ permissions:
issues: write
env:
- STEP_2_FILE: ".github/steps/2-first-introduction.md"
+ STEP_2_FILE: ".github/steps/2-step.md"
jobs:
find_exercise:
name: Find Exercise Issue
- uses: skills/exercise-toolkit/.github/workflows/find-exercise-issue.yml@v0.7.0
+ uses: skills/exercise-toolkit/.github/workflows/find-exercise-issue.yml@v0.8.1
check_step_work:
name: Check step work
@@ -29,14 +29,14 @@ jobs:
steps:
- name: Checkout
- uses: actions/checkout@v5
+ uses: actions/checkout@v6
- name: Get response templates
- uses: actions/checkout@v5
+ uses: actions/checkout@v6
with:
repository: skills/exercise-toolkit
path: exercise-toolkit
- ref: v0.7.0
+ ref: v0.8.1
- name: Find last comment
id: find-last-comment
@@ -99,14 +99,14 @@ jobs:
steps:
- name: Checkout
- uses: actions/checkout@v5
+ uses: actions/checkout@v6
- name: Get response templates
- uses: actions/checkout@v5
+ uses: actions/checkout@v6
with:
repository: skills/exercise-toolkit
path: exercise-toolkit
- ref: v0.7.0
+ ref: v0.8.1
- name: Create comment - step finished
uses: GrantBirki/comment@v2.1.1
diff --git a/.github/workflows/2-first-introduction.yml b/.github/workflows/2-step.yml
similarity index 97%
rename from .github/workflows/2-first-introduction.yml
rename to .github/workflows/2-step.yml
index ac32380..90e7d02 100644
--- a/.github/workflows/2-first-introduction.yml
+++ b/.github/workflows/2-step.yml
@@ -12,12 +12,12 @@ permissions:
issues: write
env:
- STEP_3_FILE: ".github/steps/3-copilot-edits.md"
+ STEP_3_FILE: ".github/steps/3-step.md"
jobs:
find_exercise:
name: Find Exercise Issue
- uses: skills/exercise-toolkit/.github/workflows/find-exercise-issue.yml@v0.7.0
+ uses: skills/exercise-toolkit/.github/workflows/find-exercise-issue.yml@v0.8.1
check_step_work:
name: Check step work
@@ -36,7 +36,7 @@ jobs:
with:
repository: skills/exercise-toolkit
path: exercise-toolkit
- ref: v0.7.0
+ ref: v0.8.1
- name: Find last comment
id: find-last-comment
@@ -102,7 +102,7 @@ jobs:
with:
repository: skills/exercise-toolkit
path: exercise-toolkit
- ref: v0.7.0
+ ref: v0.8.1
- name: Create comment - step finished
uses: GrantBirki/comment@v2.1.1
diff --git a/.github/workflows/3-copilot-edits.yml b/.github/workflows/3-step.yml
similarity index 97%
rename from .github/workflows/3-copilot-edits.yml
rename to .github/workflows/3-step.yml
index 6466d31..33149b0 100644
--- a/.github/workflows/3-copilot-edits.yml
+++ b/.github/workflows/3-step.yml
@@ -13,12 +13,12 @@ permissions:
issues: write
env:
- STEP_4_FILE: ".github/steps/4-copilot-agent-mode.md"
+ STEP_4_FILE: ".github/steps/4-step.md"
jobs:
find_exercise:
name: Find Exercise Issue
- uses: skills/exercise-toolkit/.github/workflows/find-exercise-issue.yml@v0.7.0
+ uses: skills/exercise-toolkit/.github/workflows/find-exercise-issue.yml@v0.8.1
check_step_work:
name: Check step work
@@ -37,7 +37,7 @@ jobs:
with:
repository: skills/exercise-toolkit
path: exercise-toolkit
- ref: v0.7.0
+ ref: v0.8.1
- name: Find last comment
id: find-last-comment
@@ -136,7 +136,7 @@ jobs:
with:
repository: skills/exercise-toolkit
path: exercise-toolkit
- ref: v0.7.0
+ ref: v0.8.1
- name: Create comment - step finished
uses: GrantBirki/comment@v2.1.1
diff --git a/.github/workflows/4-copilot-agent-mode.yml b/.github/workflows/4-step.yml
similarity index 94%
rename from .github/workflows/4-copilot-agent-mode.yml
rename to .github/workflows/4-step.yml
index dd11dee..e6f9c87 100644
--- a/.github/workflows/4-copilot-agent-mode.yml
+++ b/.github/workflows/4-step.yml
@@ -11,12 +11,12 @@ permissions:
issues: write
env:
- STEP_5_FILE: ".github/steps/5-copilot-on-github.md"
+ STEP_5_FILE: ".github/steps/5-step.md"
jobs:
find_exercise:
name: Find Exercise Issue
- uses: skills/exercise-toolkit/.github/workflows/find-exercise-issue.yml@v0.7.0
+ uses: skills/exercise-toolkit/.github/workflows/find-exercise-issue.yml@v0.8.1
check_step_work:
name: Check step work
@@ -28,14 +28,14 @@ jobs:
steps:
- name: Checkout
- uses: actions/checkout@v5
+ uses: actions/checkout@v6
- name: Get response templates
- uses: actions/checkout@v5
+ uses: actions/checkout@v6
with:
repository: skills/exercise-toolkit
path: exercise-toolkit
- ref: v0.7.0
+ ref: v0.8.1
- name: Find last comment
id: find-last-comment
@@ -108,14 +108,14 @@ jobs:
steps:
- name: Checkout
- uses: actions/checkout@v5
+ uses: actions/checkout@v6
- name: Get response templates
- uses: actions/checkout@v5
+ uses: actions/checkout@v6
with:
repository: skills/exercise-toolkit
path: exercise-toolkit
- ref: v0.7.0
+ ref: v0.8.1
- name: Create comment - step finished
uses: GrantBirki/comment@v2.1.1
diff --git a/.github/workflows/5-copilot-on-github.yml b/.github/workflows/5-step.yml
similarity index 96%
rename from .github/workflows/5-copilot-on-github.yml
rename to .github/workflows/5-step.yml
index 84b546f..321919f 100644
--- a/.github/workflows/5-copilot-on-github.yml
+++ b/.github/workflows/5-step.yml
@@ -18,7 +18,7 @@ env:
jobs:
find_exercise:
name: Find Exercise Issue
- uses: skills/exercise-toolkit/.github/workflows/find-exercise-issue.yml@v0.7.0
+ uses: skills/exercise-toolkit/.github/workflows/find-exercise-issue.yml@v0.8.1
post_review_content:
name: Post review content
@@ -37,7 +37,7 @@ jobs:
with:
repository: skills/exercise-toolkit
path: exercise-toolkit
- ref: v0.7.0
+ ref: v0.8.1
- name: Create comment - step finished - final review next
uses: GrantBirki/comment@v2.1.1
@@ -61,7 +61,7 @@ jobs:
finish_exercise:
name: Finish Exercise
needs: [find_exercise, post_review_content]
- uses: skills/exercise-toolkit/.github/workflows/finish-exercise.yml@v0.7.1
+ uses: skills/exercise-toolkit/.github/workflows/finish-exercise.yml@v0.8.1
with:
issue-url: ${{ needs.find_exercise.outputs.issue-url }}
exercise-title: "Getting Started with GitHub Copilot"
diff --git a/.vscode/launch.json b/.vscode/launch.json
index b349f44..0bce79f 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -11,7 +11,9 @@
"module": "uvicorn",
"args": [
"src.app:app",
- "--reload"
+ "--reload",
+ "--reload-include",
+ "src/static/*"
],
"jinja": true
}
diff --git a/README.md b/README.md
index 3fddb86..315bb59 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@ _Get started using GitHub Copilot in less than an hour._
## Welcome
- **Who is this for**: Developers at any experience level looking to accelerate their code workflow.
-- **What you'll learn**: The different ways to interact with Copilot to explain, write, debug, and develop code.
+- **What you'll learn**: The different ways to interact with Copilot to explain, write, plan, and develop code.
- **What you'll build**: You will guide Copilot to update Mergington High School's extracurricular activities website.
- **Prerequisites**:
- Skills exercise: [Introduction to GitHub](https://github.com/skills/introduction-to-github)
@@ -16,7 +16,7 @@ _Get started using GitHub Copilot in less than an hour._
In this exercise, you will:
1. Use a preconfigured Codespace to run VS Code in your browser.
-1. Learn different interaction options to develop with GitHub Copilot.
+1. Learn different interaction options to develop and plan with GitHub Copilot.
1. Use Copilot to summarize and review your pull request.
### How to start this exercise
diff --git a/requirements.txt b/requirements.txt
index 97dc7cd..5d9efb5 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -1,2 +1,4 @@
fastapi
uvicorn
+httpx
+watchfiles
\ No newline at end of file