# The side panel

Keep the project's changes, files, terminals and a web browser next to the conversation, as tabs.

The side panel sits to the right of the conversation and holds your tools as tabs. It works on the project of the session you're looking at. Show or hide it with the button at the top right of the window or <kbd>⌥</kbd> <kbd>⌘</kbd> <kbd>0</kbd>, and expand it with the arrows at the right of its tabs for more room.

## Tabs

Click **+** for a new tab. Until you go somewhere, it shows your tools (**Changes**, **Terminal**, **Files**) and the sites you visit most. Pick one, or search. The **Tools** menu opens them too:

| Tool | Shortcut |
| --- | --- |
| Changes | <kbd>⌥</kbd> <kbd>⌘</kbd> <kbd>I</kbd> |
| Files | <kbd>⌥</kbd> <kbd>⌘</kbd> <kbd>F</kbd> |
| New terminal | <kbd>⌃</kbd> <kbd>`</kbd> |
| Run | <kbd>⌘</kbd> <kbd>R</kbd> |
| New browser tab | <kbd>⌥</kbd> <kbd>⌘</kbd> <kbd>B</kbd> |

Terminals and pages keep running while you look at another tab, and end when you close theirs.

## Changes

The project's uncommitted changes, with comments for the agent. See [Reviewing changes](/code/docs/changes/).

## Files

The project's files as a tree, with a filter to find one by name. In a project with several folders, each folder is a row of its own, and the filter looks in all of them. Code is highlighted, Markdown is rendered, and anything else opens in Quick Look. To open a file without looking for it, press <kbd>⇧</kbd> <kbd>⌘</kbd> <kbd>O</kbd> and type part of its name. Select some lines of code and right-click **Add to Message** to point the agent at them; your message names the file and lines, like `@src/app.ts:4-6`. **Open** opens the file in its default app; the menu beside it lists the other apps that open it.

![A stylesheet open in the panel, beside the project's files](/code/screens/crop-panel.webp)

## Terminal

Your login shell in the project's folder; for a project on a [machine](/code/docs/machines/), the machine's shell. Select some output, like an error, and right-click **Add to Message** to paste it into your message.

To start your app with one click, give the project a run command, like `npm run dev`, in **Edit Project…**. The play button in the title bar, or <kbd>⌘</kbd> <kbd>R</kbd>, runs it in a terminal of its own, in the session's folder (its [worktree](/code/docs/sessions/#worktrees), if it has one). Run it again to start it over.

## Browser

A full web browser, using the same engine as Safari. Type an address, or anything else to search. Sign-in windows, like **Sign in with Google**, open in their own tab and close when you're done. It keeps its own sign-ins, separate from your other browsers. The camera button adds a screenshot of the page to your message, so the agent sees what you see. The agent can use it too: see [Browsing for the agent](/code/docs/browsing/).

When you sign in to a site, the browser offers to save the password, in your login keychain. On a sign-in page, click the key in the toolbar to fill it in. It's never filled in on its own, and the agent never sees saved passwords.

## Settings

**Settings › Panel** chooses the tab the panel starts with, what new tabs show, and whether the panel comes forward when the agent browses. **Settings › Browser** chooses your search engine, clears the history, and lists the sites that keep data in the browser, to remove one or all. **Settings › Passwords** lists the saved passwords, to show, copy or delete one.