diff --git a/docs/agents/agents-window.md b/docs/agents/agents-window.md index 8df37db792..e994b54498 100644 --- a/docs/agents/agents-window.md +++ b/docs/agents/agents-window.md @@ -55,7 +55,7 @@ The Agents window has the following main areas: 1. **Chat area**: in the center, where you see the chat conversation history and where you can interact with the agent through prompts. You can [open multiple session views side by side](#open-multiple-sessions-side-by-side) to compare or review work in parallel. -1. **Changes panel**: on the right, where you can review file changes and other artifacts generated by your agent during a session, and view a file explorer of the workspace. +1. **Side pane**: on the right, where you can review file changes and other artifacts generated by your agent during a session, and view a file explorer of the workspace. ![Screenshot of the Agents window interface, showing the sessions list, customizations panel, chat area, and changes panel.](images/agents-window/agents-window-ui-annotated.png) @@ -132,23 +132,30 @@ Use the session-type picker in the composer to choose which agent runs the quick ## Manage and review file changes -The Changes panel in the Agents window provides a dedicated view with detailed information about the files and agent edits made during a session. The Changes panel is split into two main tabs: +The side pane in the Agents window provides a dedicated view with detailed information about the files and agent edits made during a session. In the default layout, this area is shown as a **Changes** panel with two tabs: * **Files tab**: a file explorer view of all files in the workspace. * **Changes tab**: a list of files that have been changed, added, or deleted by the agent. Select the **Branch Changes** dropdown to choose which changes to view. +When you enable `setting(sessions.layout.singlePaneDetailPanel)` (Experimental), the side pane uses a single docked layout where the editor and detail panel share one tab bar. In this layout: + +* The tab strip includes a **New Tab** (`+`) action. +* The **Changes** multi-diff editor, file editors, and browser tabs open in the same docked editor area. +* The side pane restores your previous state when you switch sessions or reload, including open editors and the active tab. + The **Changes** tab groups edits that fall outside your workspace folders into a separate **Other Files** section, shown below the file changes tree. This section lists files that the agent created, edited, or deleted outside the session's workspace folders, for example a plan file that the agent writes to its session-state folder. These files aren't part of the workspace, so they aren't committed with your changes. Each row in the **Other Files** section shows the file icon, name, and a change badge: **A** for added, **M** for modified, and **D** for deleted. Deleted files appear with strikethrough. Only files that the agent changes through its file edit tools appear in this section. Files that the agent only reads, or changes that result from terminal commands, aren't listed. To review changes made by the agent, select a file in the **Changes** tab to open a diff view that shows the edits the agent has made compared to the current state of the workspace. -![Screenshot showing the diff view in a modal window in the Agents window, with the layout controls in the diff view toolbar visible.](images/agents-window/agents-window-diff-view.png) + +![Screenshot showing the diff view in the Agents window, with the layout controls in the diff view toolbar visible.](images/agents-window/agents-window-diff-view.png) > [!TIP] > By default, selecting a file opens a multi-file diff editor with all the changes in the session. To open a focused single-file diff editor for the selected file instead, enable the `setting(sessions.changes.openSingleFileDiff)` setting. -You can open the diff view side-by-side with the Chat view inside the Agents window or open it in a modal window to focus on the changes. Use the layout controls in the diff view toolbar to toggle between different display modes. +In the **Changes** multi-diff editor, use **Show side by side or inline diff view** to switch between inline and side-by-side diff rendering. Use **Expand All** and **Collapse All** to control file expansion in one step. The editor also remembers per-file expanded and collapsed state when you switch sessions or reload. When a next-step action is available, such as creating a pull request, it appears in the tab title area and compacts to icon-only when space is limited. While reviewing the changes in the diff view, you can leave feedback comments to signal the agent to make adjustments. This works for agents that run through an agent host provider. @@ -166,20 +173,21 @@ The agent reads your comments, makes the requested edits, and resolves each comm While you review the **Branch Changes** changeset in the multi-file diff editor, select **Mark as Reviewed** in a file's toolbar to track the changes you've already reviewed. The file collapses and the action shows as toggled. If you edit the file again, or a later agent turn changes it, the reviewed state clears. -After reviewing the changes, the Changes panel provides the following options to act on the edits made by the agent: +After reviewing the changes, the side pane provides the following options to act on the edits made by the agent: * **Commit**: when using folder isolation, commit the changes made by the agent directly to your workspace. * **Merge**: when using worktree isolation, merge (and optionally sync upstream) and create a pull request. * **Checkout**: for Copilot Cloud sessions, check out the branch associated with the session's pull request locally to review or request further edits. -* **Discard**: discard one or more edits directly from the Changes panel if you don't want to keep them. +* **Discard**: discard one or more edits directly from the side pane if you don't want to keep them. -![Screenshot showing the Changes panel in the Agents window, with the Files and Changes views visible.](images/agents-window/agents-window-changes.png) + +![Screenshot showing the side pane in the Agents window, with the Files and Changes views visible.](images/agents-window/agents-window-changes.png) When you create a new session, the **Files** panel includes a sync button that lets you pull in upstream changes from the base branch before the agent gets to work. This helps the agent start from the latest state of your branch and reduces the chance of merge conflicts when you bring its changes back. ## Validate agent changes locally -In addition to reviewing changes in the Changes panel, you can also validate the edits made by the agent locally before committing or merging them. The Agents window supports running tasks and commands in the context of the current session. For example, you can run a build or tests to ensure that the changes made by the agent do not break your project, or start a development server to verify that the edits behave as expected in a running environment. +In addition to reviewing changes in the side pane, you can also validate the edits made by the agent locally before committing or merging them. The Agents window supports running tasks and commands in the context of the current session. For example, you can run a build or tests to ensure that the changes made by the agent do not break your project, or start a development server to verify that the edits behave as expected in a running environment. To configure tasks in the Agents window: @@ -343,6 +351,12 @@ The Agents window shares all of your VS Code settings, so the configuration you' To override a setting for the Agents window only, edit your settings file and scope the value under the Agents window section. Open the Settings editor (`kb(workbench.action.openSettings)`) from the Agents window to see which scope a setting applies to. +Settings that are useful for the side pane and changes experience include: + +* `setting(sessions.layout.singlePaneDetailPanel)` (Experimental): docks the detail panel into the editor area so the side pane uses one shared tab bar. Reload the window after changing this setting. +* `setting(sessions.layout.autoCollapseSessionsSidebar)` (Experimental): automatically collapses the sessions sidebar on narrow windows when both the editor area and side pane are open. +* `setting(sessions.changes.openSingleFileDiff)`: opens a focused single-file diff editor instead of the multi-file Changes editor when you select a file change. + ## Use VS Code extensions in the Agents window The Agents window can run your VS Code extensions, so you can bring the tools you rely on into your agent-first workflow.