diff --git a/.github/steps/1-preparing.md b/.github/steps/1-preparing.md index 88dacb1..65279cf 100644 --- a/.github/steps/1-preparing.md +++ b/.github/steps/1-preparing.md @@ -31,7 +31,6 @@ As you work in your IDE, you'll most often interact with GitHub Copilot in the f | ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- | | **⚡ 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 | diff --git a/.github/steps/3-copilot-edits.md b/.github/steps/3-copilot-edits.md index d39e0cf..241af18 100644 --- a/.github/steps/3-copilot-edits.md +++ b/.github/steps/3-copilot-edits.md @@ -1,43 +1,46 @@ -## Step 3: Getting work done even _faster_ with Copilot Edit Mode +## Step 3: Getting work done even _faster_ with Copilot Agent 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. +> [!NOTE] +> **Edit Mode Deprecation:** GitHub Copilot Edit Mode has been deprecated. As a workaround, we'll use **Agent Mode** instead, which provides even more powerful capabilities for making changes across multiple files. -### 📖 Theory: 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 **Agent Mode**, a feature that allows working more holistically on our repo. -Copilot **Edit Mode** and **Agent Mode** both let you apply **natural‑language** driven changes across **multiple files**, however there are some differences between them. +### 📖 Theory: Copilot Agent Mode -In this step we will focus on **Edit Mode** and explore **Agent Mode** in the next step. +Copilot **Agent Mode** lets you apply **natural‑language** driven changes across **multiple files** with autonomous capabilities. -Edit Mode is best used for **well defined** tasks where you **know the scope** of the needed changes. +Agent Mode is best used for **well defined** tasks where you want Copilot to autonomously determine the scope of needed changes and even run tests or commands. -#### How Edit Mode works +#### How Agent 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 + A[Prompt Copilot] --> B[Agent Analyzes Context] + B --> C[Finds Relevant Files] + C --> D[Proposes Changes] + D --> E{Review Changes} + E --> F[Accept] + E --> G[Discard] + E -->|Refine Prompt| A ``` -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. **Agent Analyzes**: Copilot autonomously explores your codebase to understand context. +1. **Finds Files**: Agent determines which files need to be modified. 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 🤫 +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. At the bottom of Copilot Chat window, use the dropdown to switch to **Agent** mode. - image + 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. @@ -47,18 +50,19 @@ Let's use Copilot to change the website to display signed up students under each image showing files added to context - > 💡 **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. +1. Ask Copilot to update our project to display the current participants of activities. Agent mode will autonomously find and update the relevant files. > ![Static Badge](https://img.shields.io/badge/-Prompt-text?style=social&logo=github%20copilot) > > ```prompt - > Hey Copilot, can you please edit the activity cards to add a participants section. + > #codebase 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! > ``` + > 💡 **Tip:** The `#codebase` tool helps Agent mode find the relevant files to modify. You can also provide additional context by mentioning specific files or using other tools. + + - Agent mode will analyze your codebase and determine which files need changes. - 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. @@ -66,7 +70,6 @@ Let's use Copilot to change the website to display signed up students under each edit navigation panel - 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. Activity card with participant info @@ -91,7 +94,6 @@ Let's use Copilot to change the website to display signed up students under each 1. Wait a moment for Mona to check your work, provide feedback, and share the next lesson. -
Having trouble? 🤷
diff --git a/.github/steps/4-copilot-agent-mode.md b/.github/steps/4-copilot-agent-mode.md index 84f9128..c4e7c6c 100644 --- a/.github/steps/4-copilot-agent-mode.md +++ b/.github/steps/4-copilot-agent-mode.md @@ -6,15 +6,11 @@ Copilot [agent mode](https://code.visualstudio.com/docs/copilot/chat/chat-agent- 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 is particularly powerful because it: +- **Autonomously explores** your codebase to find relevant files +- **Self-reviews** its work and retries on errors or failures +- **Invokes tools** to read/edit files, run commands, and inspect output +- **Handles broader scopes** that may touch related layers for consistency #### 🧰 Agent Mode Tools diff --git a/.github/steps/x-review.md b/.github/steps/x-review.md index 7e1bc55..e498ab4 100644 --- a/.github/steps/x-review.md +++ b/.github/steps/x-review.md @@ -9,8 +9,7 @@ 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**: Made multi-file changes and built features autonomously - **GitHub integration**: Generated commit messages, PR summaries, and code reviews ### What's next? diff --git a/.github/workflows/copilot-agent-helper.yml b/.github/workflows/copilot-agent-helper.yml index c1b5b6b..10dcaf6 100644 --- a/.github/workflows/copilot-agent-helper.yml +++ b/.github/workflows/copilot-agent-helper.yml @@ -4,6 +4,8 @@ on: push: branches: - "copilot/**" + - "claude/**" + - "codex/**" pull_request: types: [ready_for_review, opened] issue_comment: