Update workshop and images

.github/copilot-instructions.md

@@ -1,6 +1,7 @@
 ## TinyShop
 
-<!-- Add Instructions here -->
+<!-- Add./Replace Instructions here -->
+- Use inline css in the same razor file, keep ui simple as possible, nothing custom
 
 ## Misc
 - To display an image you will always need to use `ImagePrefix` in the web front end which comes from the Configuration["ImagePrefix"] which isc @inject IConfiguration Configuration 

lab/part01-code-completion.md

@@ -13,10 +13,12 @@ In this section, you'll use GitHub Copilot's code completion to implement API en
 
 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
+   group.
    ```
 1. [] Wait for the ghost text suggestions to appear (gray text).
-;
+
+> If ghost text doesn't appare and only regular IntelliSense, exit IntelliSense with `ESC` and then press `ALT+.`.
+
    ![Code suggestions](./images/1-ghost-text.png)
 
 1. [] Press Tab to accept the suggestion or continue typing to get more specific suggestions.
@@ -34,6 +36,8 @@ In this section, you'll use GitHub Copilot's code completion to implement API en
      - Open 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.
      - Switch to **Agent** mode.
      - ![Switch to agent mode](./images/1-agent.png)]
+     - Attach the current document:
+     - ![Attach document](./images/1-attach-document.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** should look similar to:

lab/part03-referencing-files.md

@@ -3,18 +3,18 @@
 In this section, you'll learn how to reference existing code files in your chat conversations.
 
 1. [] Open the **Products.razor** again from the **Store** project.
-1. [] Ensure that GitHub Copilto Chat is open by clicking 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. [] Ensure that GitHub Copilot Chat is open by clicking 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. Change the mode to `Ask`
-
-	![Change to chat](./images/3-chat.png)
-
 1. Start a new chat by clicking the `+` icon in the top right corner of the chat window.
 
    ![New chat](./images/5-new-edits.png)
 
+1. Change the mode to `Ask`
+
+	![Change to chat](./images/0-ask-mode.png)
+
 1. [] Type: `#ProductService.cs` to reference the ProductService file.
 1. [] Ask: `How would I implement getting and visualizing the products in a table using the code in #ProductService and the css required.`
 1. [] Review the code suggestion but don't implement it yet.

lab/part04-custom-instructions.md

@@ -47,6 +47,8 @@ Here are some guidelines to consider when creating a Copilot instructions file:
 1. [] Review the code suggestion but don't implement it yet.
 1. [] Notice how the responses now incorporate your custom instructions.
 
+![Instructions begin referenced](./images/4-instructions.png)
+
 **Key Takeaway**: Custom instructions make Copilot's suggestions more aligned with your project standards and architecture preferences.
 
 ---

lab/part05-implementing-features.md

@@ -8,25 +8,25 @@ Let's add the ability to see a list of images into the app:
 
 1. [] Open 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. [] Switch to **Agent** mode.
-
-   ![Switch to agent mode](./images/1-agent.png)
-
 1. [] In Visual Studio, open a new Copilot Chat with the **+** chat icon.
 
     ![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 Opus 4.5** from the list of available models.
+1. [] Switch to **Agent** mode.
+
+   ![Switch to agent mode](./images/1-agent.png)
+
+1. [] At the bottom of the GitHub Copilot Chat pane, select the model (default is "Auto") from the dropdown list, and select **GPT-5.3 Codex** from the list of available models.
 
     ![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 Opus 4.5 for all clients** click on **Enable** button.
+    > NOTE: If you are asked to **Enable GPT-5.3-Codex for all clients** click on **Enable** button.
 
-Copilot agent mode begins implementing the code suggestions!
+Copilot agent mode begins implementing the feature!
 
 ## Reviewing the changes
 

lab/part06-copilot-vision.md

@@ -2,7 +2,7 @@
 
 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 designer gave us.
 
-1. [] Open a new Copilot Chat thread in Agent mode.
+1. [] Open a new Copilot Chat thread in **Agent** mode.
 1. [] Click the **+** button in the chat, select **upload image**, and select the **eshop.png** image found in the root of the cloned repository.
 
     ![Attach image icon](./images/6-add-image.png)

lab/part07-debugging-with-copilot.md

@@ -5,7 +5,7 @@ In this section, you'll learn how to use Copilot to debug an exception in your a
 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 **Analyze with Copilot** option in the pop up.
+1. [] Press the **Analyze with Copilot** option in the pop up. This will open the **Debugger** agent.
 
     ![Pop up for exception with Analyze with Copilot option](./images/7-ask-copilot-exception.png)
 

lab/part09-mcp.md

@@ -14,21 +14,24 @@ To see your existing tools and MCP servers installed:
 
    ![MCP Tools icon](./images/9-mcp-tools.png)
 1. Tools that are built in and from MCP servers will appear.
-1. Click the **+** icon to add a new MCP server.
+1. Click the **+** icon to add a new MCP server and **Add from MCP MCP**.
 1. 
    ![Add MCP server](./images/9-add-mcp-server.png)
 1. Specify the following
-1. **Destination**: Solution
-1. **Server Id**: `github`
-1. **Type**: HTTP
-1. **URL**: https://api.githubcopilot.com/mcp/
+1. **Search for GitHub**
+1. **Click Install** -> Trust and install Remote installation.
 
    ![GitHub MCP server configuration](./images/9-github-mcp-server.png)
 
 
-1. The GitHub MCP requires authentication. From the **Solution Explorer**, expand **SolutionItems** and open **.mcp.json**, and you will see a **Authentication required** message. Click on it and click Authenticate. Afer this you will see that it is online and ready to use.
-   ![GitHub MCP authentication](./images/9-github-mcp-authentication.png)
+1. The GitHub MCP requires authentication. From the **Tools** menu in the chat, expand **the Added GitHub MCP** with the ... and then select **Edit**:
 
+   ![GitHub MCP authentication](./images/9-auth-github.png)
+
+
+You will see a **Authentication required** message. Click on it and click Authenticate. Afer this you will see that it is online and ready to use.
+
+   ![Auth GitHub](./images/9-github-mcp-authentication.png)
 
 Visual Studio 2026 has a built in MCP gallery to help you easily install MCP server.:
 
@@ -51,18 +54,21 @@ Now that you have the Microsoft Learn and GitHub MCP servers installed, let's us
 1. [] Ensure that the Microsoft Learn MCP server is selected as an active tool. If you don't see it click on a new chat session or toggle modes:
   ![Select MCP server](./images/9-select-mcp-server.png)
 1. [] Type the following prompt: `Using the Microsoft Learn docs mcp, what are the best practices for optimizing image loading and asset delivery in a Blazor Server application?`
+1. Copilot will ask for permission for each request. You can approve each manually or **Allow in this session**
+1. ![Allow MCP](./impags/9-allow-mcp.png)
 1. [] Review the response from Copilot, which now has access to the latest Microsoft documentation through the MCP server.
 
 ## Creating GitHub Issues with MCP
 
 The GitHub MCP server allows Copilot to interact with your GitHub repository. Let's use it to create issues for improvements we want to make to the application.
 
-1. [] Ensure that the GitHub MCP server is selected as an active tool in Copilot Chat.
+1. [] Ensure that the GitHub MCP server is selected as an active tool in Copilot Chat and that the tools are enabled for .
 1. [] In the same chat session, type: `Based on the asset optimization recommendations, create 3 GitHub issues for improving the TinyShop application's performance.`
 
    > NOTE:
    > Copilot will use the GitHub MCP server to create the issues directly in your repository. You may be prompted to authorize the action.
 
+1. ![create issue enabled](./images/9-create-issue-enabled.png)
 1. [] Review the issues that Copilot proposes to create.
 1. [] Approve the creation of the issues when prompted.
 1. [] Navigate to your GitHub repository to verify that the issues have been created.

lab/part10-planning-mode.md

@@ -17,34 +17,34 @@ Let's use Planning Mode to implement a feature that allows users to click on a p
 
 1. [] Open the Copilot Chat window if it's not already open.
 1. [] Create a new chat session.
-1. [] Switch to **Agent** mode.
-1. [] Ensure **Planning** is enabled in the tools.
+1. [] Switch to **Plan** mode.
+1. ![Plan mode](./images/5-plan.png)
+1. [] Ensure **Planning** is enabled in the tools, these can also be enabled in normal **Agent* mode.
 
    ![Planning Mode enabled](./images/10-planning-mode.png)
 
 1. [] Enter the following prompt:
 
    ```
-   Create a plan for the following: I want to add product navigation to the TinyShop application. When a user clicks on a product in the product listing page, they should be taken to a new product detail page that shows:
-   - The product image (larger size)
-   - Product name as the page title
-   - Full description
-   - Price
-   - A "Back to Products" button
-
-   The URL should be /product/{id} where id is the product ID.
+   Create a plan for the following: I want to add product navigation to the TinyShop application. When a user clicks on a product in the product listing page, they should be taken to a new product detail page that shows details. Ask me questions along the way.
    ```
 
+   ![Questions](./images/10-questions.png)
+
+1. Answer any questiosn along the way.
+
 1. [] Review the plan that Copilot generates. It should include:
    - Creating a new `ProductDetail.razor` component
    - Updating routing configuration
    - Modifying the product listing to include navigation links
    - Adding any necessary CSS styling
    - Etc.
 
-   ![Generated Plan](./images/10-generated-plan.png)
+Once a plan has been created, the plan can be reviewed, iterated upon or implemented with a click of the button. 
+
+![Implement](./images/10-implement.png)
 
-1. [] If the plan looks good, click **Execute Plan** to begin implementation.
+1. [] If the plan looks good, click **Implement Plan** to begin implementation.
 1. [] If you want to modify the plan, you can add additional instructions or ask Copilot to revise specific steps.
 
 ## Reviewing and Refining the Plan
@@ -61,11 +61,12 @@ For example, you might add:
 Update the plan to also ensure the product detail page handles cases where the product ID doesn't exist by showing a "Product not found" message.
 ```
 
-## Executing the Plan
+## Implementing the Plan
 
-1. [] Once you're satisfied with the plan, tell copilot to **Execute Plan**.
-1. [] Copilot will implement each step of the plan, creating and modifying files as needed.
-1. [] Review the changes in the editor as they're made.
+1. [] Once you're satisfied with the plan, click **Implement Plan**.
+1. [] Copilot will change to **Agent** mode, implement each step of the plan, creating and modifying files as needed.
+1. [] Watch teh status and eview the changes in the editor as they're made.
+1. ![Watch implementation](./images/10-watch-implementation.png)
 1. [] Run the application to test the new product navigation feature.
 
 ## Testing the Feature

lab/part11-reusable-prompts.md

@@ -26,7 +26,7 @@ Now let's create a prompt file that helps generate additional unit tests using M
 
 1. [] In **Solution Explorer** we will see the **GitHub** node from the extension to add it easily:
    - Right-Click the **GitHub** node icon/extension in Visual Studio.
-   - Choose **Add Copilot File...**.
+   - Choose **Add Agent File...**.
    - Select **Prompt file...** from the dialog.
    - Change the file name to `unit-test.prompt.md` and click **OK**.
    - The new file will open in the editor; paste the content shown below into the file and save it.

lab/part12-delegate-to-cloud.md

@@ -31,8 +31,10 @@ Before delegating to the cloud, it's important to write a clear, detailed prompt
 
 ## Delegating to the Cloud
 
-1. [] Open Copilot Chat and switch to **Agent** mode.
+1. [] Open Copilot Chat and create a new chat
+1. Switch to **Cloud** agent.
 
+   ![Cloud agent](./images/12-cloud-agent.png)
 
 1. [] Enter a detailed prompt for the dark theme feature:
 
@@ -65,16 +67,20 @@ Before delegating to the cloud, it's important to write a clear, detailed prompt
    ```
 
 1. [] Review the prompt to ensure it includes all necessary details.
-1. [] Click on the **Send to Copilot Coding Agent** button (cloud icon) at the bottom of the chat window.
+1. [] Click on the **Send** button (cloud icon) at the bottom of the chat window.
 
-   ![Delegate to Cloud button](./images/12-delegate-cloud.png)
 1. The cloud agent will acknowledge the request and begin processing it.
 1. [] You will be prompted to confirm the delegation and create an issue. Click **Confirm** to proceed.
+
+   ![Confirm cloud](./images/12-confirm.png)
+
 1. [] After the issue has been created you will be able to view the pull request for the changes in in Visual Studio or on GitHub.
   ![View Pull Request](./images/12-view-pull-request.png)
 
 1. When viewing on GitHub, you can see the proposed changes in the pull request, and view the session to see it in realtime.
 
+   ![View PR](./images/12-pull-request-in-vs.png)
+
 
 ## While the Task Runs
 

lab/setup.md

@@ -47,17 +47,23 @@ Before we begin, let's install the .github + MCP extension for Visual Studio. Th
 ## Turn on Copilot Settings
 
 1. [] Ensure Code Completions and Next Edit Suggestions are enabled:
-   - Go to the Code Completions settings in Visual Studio by heading to **Tools -> Options -> Text Editor -> Code Completions**
+   - Go to the Code Completions settings in Visual Studio by heading to **Tools -> Options -> Text Editor -> Inline Suggestions -> General** under Suggestion Providers
    - Ensure **Copilot Completions** is checked.
    - Ensure **Copilot Next Edit Suggestions** is checked.
 
    ![](./images/0-enable-nes.png)
 
 1. [] Head to **Tools -> Options -> GitHub -> Copilot -> Copilot Chat** and ensure the following settings are enabled:
+   - **Enable Agent mode in chat pane**
+   - **Enable MCP server integration in agent mdoe**
    - **Enable Planning**
+   - **Enable Ask Question**
    - **Enable View Plan Execution**
-   - **Enable Copilot Coding agent (Preview)**
+   - **Enable Cloud agent (Preview)**
+   - **Enable custom instructions**
 
+1. [] Head to **Tools -> Options -> GitHub -> Editor** and ensure the following settings are enabled:
+   - **Enable AI generated description for auto-inserted documentation comments in support languages**
 
 ## Clone Lab Repository
 
@@ -79,7 +85,7 @@ The code is now opened in Visual Studio. Feel free to take a look at it or skip
 1. [] Open the **Solution Explorer** from the **View -> Solution Explorer** menu.
 1. [] Set the **TinyShop.AppHost** as the startup project if it isn't already by right-clicking on **TinyShop.AppHost** and selecting **Set as Startup Project**. Start the project with F5 or **Debug -> Start Debugging** from the menu.
 
-    The .NET Aspire AppHost will start two applications and the .NET Aspire Dashboard:
+    The [Aspire](https://aspire.dev) AppHost will start two applications and the  Aspire Dashboard:
 
     - The backend .NET app on **https://localhost:7130/api/Product**
     - The frontend Blazor app on **https://localhost:7085** - You can see the app by opening that URL from the dashboard