Merge pull request #9 from cinnamon-msft/cinnamon/updates

Refresh lab instructions

Author: jamesmontemagno

lab/images/0-enable-nes.png

@@ -3,7 +3,7 @@
 GitHub Copilot Chat allows you to ask questions about your code and get intelligent responses.
 
 1. [] Open the solution in Visual Studio 2026 if it is not already open.
-1. Click on the Github Copilot Chat in the top-right corner of Visual Studio and select **Open Chat Window** or press `Ctrl+\+C` if Copilot chat isn't open.
+1. Click on the GitHub Copilot Chat in the top-right corner of Visual Studio and select **Open Chat Window** or press `Ctrl+\+C` if Copilot chat isn't open.
    ![Open chat window dialog](./images/1-open-copilot-chat.png)
 1. [] Ensure that you are in **Ask** mode by clicking on the **Ask** tab at the bottom of the chat window.
    ![Ask mode tab](./images/0-ask-mode.png)

lab/images/7-ask-copilot-exception.png

@@ -4,14 +4,14 @@ In this section, you'll use GitHub Copilot's code completion to implement API en
 
 > IMPORTANT: For this exercise, **DO NOT** copy and paste the code snippet provided, but rather type it manually. This will allow you to experience code completion as you would if you were coding back at your desk. You'll likely see you only have to type a few characters before GitHub Copilot begins suggesting the rest.
 
-1. [] Stop debugging the appliaction if it is currently running.
+1. [] Stop debugging the application if it is currently running.
 
 
 1. [] In the Solution Explorer, in the **Products** project, open **Endpoints/ProductEndpoints.cs** - it will have a single endpoint implemented.
 
    > Note: GitHub Copilot will not give code suggestions when debugging.
    
-1. [] Let's implement a new **MapGet** to get product details for a specific **id**. Move our cursor and click on line 20 under the existing **/** endpoint. Text suggestion may apprear or type:
+1. [] Let's implement a new **MapGet** to get product details for a specific **id**. Move our cursor and click on line 20 under the existing **/** endpoint. Text suggestion may appear or type:
    ```csharp
    g
    ```
@@ -36,7 +36,7 @@ In this section, you'll use GitHub Copilot's code completion to implement API en
      - ![Switch to agent mode](./images/1-agent.png)]
      - Ask the agent: `Can you implement the rest of the endpoints for the Product API and also implement the ProductService to call these new endpoints in the Store project?`
 
-   The end code in **ProductEndpoints.cs** sould look similar to:
+   The end code in **ProductEndpoints.cs** should look similar to:
 
    ```csharp
    group.MapGet("/", async (ProductDataContext db) =>

lab/images/7-visualizer-sparkle.png

@@ -7,7 +7,7 @@ Now, you'll improve the loading experience using Copilot's inline chat.
 1. [] In the **Solution explorer** under the **Store** project open **Components/Pages/Products.razor**.
 1. [] Find the "Loading..." text in the code.
 1. [] Select this text and right-click.
-1. [] Choose "Ask Copilot" or press `Alt+/`.
+1. [] Choose "Chat" or press `Alt+/`.
 1. [] In the inline chat, type: `Update this razor to have a simple spinner style, using built in bootstrap styles.`
 
     ![Screenshot of VS with inline chat](./images/2-inline-code.png)

lab/part00-exploring-codebase.md

@@ -4,7 +4,7 @@ There are always key pieces of information anyone generating code for your codeb
 
 Before we begin larger updates to the site with the help of Copilot, we want to ensure Copilot has a good understanding of how we're building our application. As a result, we're going to add a Copilot instructions file to the repository.
 
-Copilot instructions is a markdown file is placed in your **.github** folder. It becomes part of your project, and in turn is available to all contributors to your codebase. You can use this file to indicate various coding standards you wish to follow, the technologies your project uses, or anything else important for Copilot Chat to understand when generating suggestions.
+Copilot instructions is a markdown file placed in your **.github** folder. It becomes part of your project, and in turn is available to all contributors to your codebase. You can use this file to indicate various coding standards you wish to follow, the technologies your project uses, or anything else important for Copilot Chat to understand when generating suggestions.
 
 > [!IMPORTANT]
 > The *copilot-instructions.md* file is included in **every** call to GitHub Copilot Chat, and will be part of the context sent to Copilot. Because there is always a limited set of tokens an LLM can operate on, a large Copilot instructions file can obscure relevant information. As such, you should limit your Copilot instructions file to project-wide information, providing an overview of what you're building and how you're building it. If you need to provide more specific information for particular tasks, you can create [prompt files](https://docs.github.com/copilot/customizing-copilot/adding-repository-custom-instructions-for-github-copilot?tool=vscode#about-prompt-files).

lab/part01-code-completion.md

@@ -1,6 +1,6 @@
 # Part 05: Implementing Features with Copilot Agent
 
-Previously we utilized Copilot chat, which is great for working with an individual file or asking questions about our code. However, many updates necessitate changes to multiple files throughout a codebase. Even a seemingly basic change to a webpage likely requires updating HTML, CSS, Razor, and C# files. Copilot Agent allows you to modify multiple files at once across your project, self heals, and can run commands if granted permission like installing NuGet packages.
+Previously we utilized Copilot Chat, which is great for working with an individual file or asking questions about our code. However, many updates necessitate changes to multiple files throughout a codebase. Even a seemingly basic change to a webpage likely requires updating HTML, CSS, Razor, and C# files. Copilot Agent allows you to modify multiple files at once across your project, self heals, and can run commands if granted permission like installing NuGet packages.
 
 With Copilot Agent, you will add the files which need to be updated to the context. Once you provide the prompt, Copilot Agent will begin the updates across all files in the context. It also has the ability to create new files or add files to the context as it deems appropriate.
 
@@ -16,15 +16,15 @@ Let's add the ability to see a list of images into the app:
 
     ![New chat icon in VS copilot](./images/5-new-edits.png)
 
-1. [] At the bottom of the GitHub Copilot Chat pane, select the model (default is GPT-4o") from the dropdown list, and select **Claude 4.5 Sonnet** from the list of available models.
+1. [] At the bottom of the GitHub Copilot Chat pane, select the model (default is "GPT-4o") from the dropdown list, and select **Claude Opus 4.5** from the list of available models.
 
-    ![Select Sonnet in Copilot](./images/5-select-sonnet.png)
+    ![Select Opus in Copilot](./images/5-select-sonnet.png)
 
 1. [] Type: `Implement a simple product listing page in Products.razor that fetches products from #ProductService and displays them in a simple list with product name, description, price, and image.`
 
     > NOTE: You should use your own phrasing when generating the prompt. As highlighted previously, part of the exercise is to become comfortable creating prompts for GitHub Copilot. One key tip is it's always good to provide more guidance to ensure you get the code you are looking for.
 
-    > NOTE: If you are asked to **Enable Claude 4.5 Sonnet for all clients** click on **Enable** button.
+    > NOTE: If you are asked to **Enable Claude Opus 4.5 for all clients** click on **Enable** button.
 
 Copilot agent mode begins implementing the code suggestions!
 

lab/part02-enhancing-ui.md

@@ -9,7 +9,7 @@ In this section, you'll use Copilot Vision. You can share screenshots of errors
 
 1. [] Ask: `Update the Products.razor to display products in a grid layout similar to this image. Add nice hover effects and make it responsive.`
 1. [] Review the suggested code changes and implement them. It should recommend changes to both the **Products.razor** and a new **Products.razor.css**
-1. [] Run the application to see the updated product grid layout. You may have to clear the browser cashe with CTRL+SHIFT+R if you don't see the css update.
+1. [] Run the application to see the updated product grid layout. You may have to clear the browser cache with CTRL+SHIFT+R if you don't see the CSS update.
 
 > Note: continue to iterate with Copilot Agent if it isn't to your liking.
 

lab/part04-custom-instructions.md

@@ -2,12 +2,12 @@
 
 In this section, you'll learn how to use Copilot to debug an exception in your application.
 
-1. [] Debug the **AppHost** project if it isn't yet, and open the **store** from teh .NET Aspire dashboard.
+1. [] Debug the **AppHost** project if it isn't yet, and open the **store** from the .NET Aspire dashboard.
 1. [] Click on the **Go to About** button in the navigation menu.
 1. [] Observe that an exception occurs, and the application crashes.
-1. [] Press the **Ask Copilot** option in the pop up.
+1. [] Press the **Analyze with Copilot** option in the pop up.
 
-    ![Pop up for exception with Ask Copilot option](./images/7-ask-copilot-exception.png)
+    ![Pop up for exception with Analyze with Copilot option](./images/7-ask-copilot-exception.png)
 
 1. [] Review how Copilot brings in debugger information, including stack traces and variable states.
 1. [] Note how Copilot recommends a fix for the issue or provides code suggestions to resolve it.
@@ -18,7 +18,7 @@ In this section, you'll learn how to use Copilot to debug an exception in your a
 
 In this subsection, you'll learn how to use Copilot to analyze variables using watch windows and visualizers.
 
-1. [] Open the **Products.razor** file again from the **Products** projet.
+1. [] Open the **Products.razor** file again from the **Products** project.
 1. [] Add a breakpoint at the end of the **OnInitializedAsync** method.
 1. [] Debug the **TinyShop.AppHost** and open the **store** from the .NET Aspire dashboard, and navigate to the **Products** page.
 1. [] When the breakpoint is hit, hover over the **imagePrefix** variable.
@@ -34,12 +34,10 @@ In this subsection, you'll learn how to use Copilot to analyze variables using w
     ![View button on products](./images/7-view-products.png)
 
 1. [] Use the visualizer to inspect the contents of the **products** collection.
-1. [] Click the sparkle button and, in natural language, type:  `Products that have the name outdoor in them and are under 40 dollars`
+1. [] Click the Generate expression button and, in natural language, type:  `Products that have the name outdoor in them and are under 40 dollars`
 1. [] Observe how Copilot generates the appropriate expression automatically.
 
-    ![Sparkle icon for visualizer](./images/7-visualizer-sparkle.png)
-
-1. [] Click **Continue in Chat** to have Copilot provide the equivalent LINQ query for the same filter criteria.
+    ![Generate expression for visualizer](./images/7-visualizer-sparkle.png)
 
 **Key Takeaway**: Copilot can enhance debugging by providing detailed insights into variables through watch windows and visualizers. Copilot can simplify complex debugging tasks by generating expressions and LINQ queries based on natural language input.