updates

Author: jamesmontemagno

lab/part1-code-completion.md

@@ -2,10 +2,12 @@
 
 In this section, you'll use GitHub Copilot's code completion to implement API endpoints.
 
-> [!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.
+> 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. [] Open **ProductEndpoints.cs** in the **Products** project under **Endpoints** - it should be empty or contain minimal code.
+
+   > Note: GitHub Copilot will not give code suggestions when debugging.
+   
 2. [] Begin typing a comment to describe what you want to implement:
    ```csharp
    group.MapGet(
@@ -110,4 +112,6 @@ In this section, you'll use GitHub Copilot's code completion to implement API en
    - Run the AppHost project.
    - Test your new endpoints by going to **https://localhost:7130/api/Product/1**
 
+10. [] Stop debugging and close the application
+
 **Key Takeaway**: GitHub Copilot can generate complete API implementations based on your comments or partial code, significantly speeding up development.

lab/part2-enhancing-ui.md

@@ -23,4 +23,6 @@ Now, you'll improve the loading experience using Copilot's inline chat.
     ```
 8. [] Run the application to see your new loading spinner in action.
 
+9. [] Stop debugging and close the application
+
 **Key Takeaway**: Inline chat allows you to make targeted improvements to your code without leaving your editor context.

lab/part5-implementing-features.md

@@ -26,7 +26,7 @@ Let's add the ability to see a list of images into the app:
 
 Copilot agent mode begins implementing the code suggestions!
 
-## Reviewing the suggestions
+## Reviewing the changes
 
 Unlike our prior examples where we worked with an individual file, we're now working with changes across multiple files - and maybe multiple sections of multiple files. Fortunately, Copilot Agent has functionality to help streamline this process.
 
@@ -59,6 +59,29 @@ GitHub Copilot will propose the following changes to the application including u
     </table>
     ```
 
+    The **ProductService* should have been injected at the top of the file:
+    ```html
+    @inject ProductService ProductService
+    ```
+
+    The code should have been updated at the bottom of the file:
+    ```cs
+        @code {
+        private List<Product>? products;
+        private string imagePrefix = string.Empty;
+    
+        protected override async Task OnInitializedAsync()
+        {
+            // Simulate asynchronous loading to demonstrate streaming rendering
+            await Task.Delay(500);
+            imagePrefix = Configuration["ImagePrefix"]!;
+            products = await ProductService.GetProducts();
+        }
+    }
+    ```
+
 1. [] Run the application to see your new product listing page.
 
+1. [] Stop debugging and close the application
+
 **Key Takeaway**: Copilot Agent can generate complete feature implementations based on your natural language descriptions, saving significant development time.

lab/part6-copilot-vision.md

@@ -1,16 +1,15 @@
 # Part 6: Using Copilot Vision
 
-In this final section, you'll use Copilot Vision to implement a UI design from an image.
+In this section, you'll use Copilot Vision. You can share screenshots of errors and Copilot will interpret the image and resolve the issue. Or share mockups of new designs, and Vision will help you bring them to life. Let's update our design based on a photo our design gave us.
 
-1. [] Find the store application image on your desktop.
-2. [] Open a new Copilot Chat thread.
-3. [] Click the **+** button in the chat and select the store application image that is found in the GitHub repo that is cloned called **eShop.png** inside of the **C:\Users\LabUser\Source\Repos\build-2025-lab300** directory.
+1. [] Open a new Copilot Chat thread in Agent mode.
+2. [] Click the **+** button in the chat, select **upload image**, and select the store application image that is found in the GitHub repo that is cloned called **eshop.png** inside of the **C:\Users\LabUser\Source\Repos\build-2025-lab300** directory.
 
     ![Attach image icon](./images/6-add-image.png)
 
-4. [] Ask: `Update the Products.razor to display products in a grid layout similar to this image. Add nice hover effects and make it responsive.`
-5. [] Review the suggested code changes and implement them. It should recommend changes to both the **Products.razor** and a new **Products.razor.css**
-6. [] Run the application to see the updated product grid layout.
+3. [] Ask: `Update the Products.razor to display products in a grid layout similar to this image. Add nice hover effects and make it responsive.`
+4. [] Review the suggested code changes and implement them. It should recommend changes to both the **Products.razor** and a new **Products.razor.css**
+5. [] 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.
 
 > Note: continue to iterate with Copilot Agent if it isn't to your liking.
 

lab/part7-debugging-with-copilot.md

@@ -2,7 +2,7 @@
 
 In this section, you'll learn how to use Copilot to debug an exception in your application.
 
-1. Launch the web application.
+1. Launch the web application if it isn't yet
 2. Click on the **Go to About** button in the navigation menu.
 3. Observe that an exception occurs, and the application crashes.
 4. Press the **Ask Copilot** option in the pop up.

lab/setup.md

@@ -48,6 +48,8 @@ The .NET Aspire AppHost will start two applications and the .NET Aspire Dashboar
 - The backend .NET app on **https://localhost:7130**. 
 - The frontend Blazor app on **http://localhost:7085**. You can see the app by opening that URL from the dashboard
 
+2. [] Stop debugging and close the application
+
 ## Summary and next steps
 
 You've now cloned the repository you'll use for this for the rest of the workshop.