> ## Documentation Index
> Fetch the complete documentation index at: https://docs.bricks.tools/llms.txt
> Use this file to discover all available pages before exploring further.
# Panels
> Two tabbed docks — right panel and bottom panel — for the diff, simulator, Config Editor, Files, browser tabs, terminal, devices, and device DevTools
CTOR has two tabbed docks: the **right panel**, running down the right edge of the window, and the **bottom panel**, spanning the full width below the chat and right panel. Both host the same set of tabs — the [diff view](/ctor/reference/diff-view), the [simulator](/ctor/reference/simulator), the [Config Editor](/ctor/reference/editor), the [file viewer](/ctor/reference/file-viewer), [browser tabs](/ctor/reference/browser) for the [BRICKS Controller](/controller) or any web page, a terminal, your workspace's devices, and device [DevTools](/foundation/local-debugging) — so you can arrange them however fits your window, and keep more than one in view at once.
## Open a panel
Click **Right panel** or **Bottom panel** in the top bar. Each button stays pinned to its own spot — **Right panel** to the top-right corner, **Bottom panel** just to its left — whether its panel is open or closed. CTOR remembers each panel's open/closed state independently and restores it the next time you launch the app.
Opening a panel shows the tabs you already have there. If neither panel has any tabs open yet, it shows a start page listing the views you can open — pick one to load it there. The bottom panel is an exception: opening it for the first time, with nothing else already hosted there, creates a [Terminal](#terminal) tab directly instead of showing the start page.
## Tabs
| Tab | Shows | Available when |
| ------------- | -------------------------------------------------------------- | --------------------------------------- |
| **Diff** | Uncommitted changes from `git diff` | The project is in a Git repository |
| **Simulator** | The compiled app in an embedded webview | A project is open |
| **Editor** | The visual Config Editor wired to your project | A project is open (BRICKS CLI 2.25+) |
| **Files** | The project's file tree and any files you open from it | A project is open |
| **Devices** | Your workspace's devices, matched against a local network scan | Always — project or main chat |
| **Browser** | The BRICKS Controller or any web page | Always — project or main chat |
| **DevTools** | A device's Chrome DevTools inspector | Opened from the **Local Devices** panel |
| **Terminal** | An interactive shell | Always — project or main chat |
Diff, Simulator, Editor, Files, Devices, and each device's DevTools tab are singletons — only one copy of each exists across both panels at a time. Browser and Terminal tabs aren't — open as many of either as you like. See [Move tabs between panels](#move-tabs-between-panels).
### Diff
The **Diff** tab shows your project's uncommitted changes and carries a badge with the current added and deleted line counts (`+` / `−`). See the [diff view reference](/ctor/reference/diff-view) for view modes and per-file controls.
### Simulator
The **Simulator** tab runs your compiled project as an embedded webview and exposes a Chrome DevTools Protocol (CDP) endpoint. Its toolbar includes a **DevTools** toggle that docks the simulator's own inspector. See the [simulator reference](/ctor/reference/simulator) for the full pane controls.
### Editor
The **Editor** tab embeds the visual Config Editor, wired to your open project. Saving compiles your edits into the project source and commits them. See the [Config Editor reference](/ctor/reference/editor) for the full editing workflow.
### Files
The **Files** tab opens your project's file tree; each file you open from it becomes its own tab alongside it. See the [file viewer reference](/ctor/reference/file-viewer) for the tree, previews, search, and external-editor handoff.
### Devices
Add a **Devices** tab from the **+** (New tab) menu, or click **Open Devices panel** in the footer of the [Local Devices](/ctor/guide/agent-usage#local-devices) dialog — both open it in the bottom panel by default. It works in both project and main chat sessions, without needing a project open, and lists your workspace's devices matched against the same local-network scan the Local Devices dialog uses.
Devices are grouped **Online** and **Offline** (online means checked in within the last 5 minutes), each group showing a count. A row's summary line shows its type, running application, and version; expand it for the Unique ID, last-alive time, mode (its platform — iOS, iPadOS, Android, Android TV, macOS, tvOS, Windows, Linux, or Virtual Device), screen resolution, memory and disk usage, and — for a locally matched device — its LAN address.
* **Local** — the device is also reachable directly on your network right now, not just through the cloud.
* **CDP** — a locally matched device that advertises a debug endpoint; unlocks an **Open DevTools** button that opens the same [DevTools tab](#devtools) as the Local Devices dialog.
* **Update** — a BRICKS Foundation update is available for the device.
While a device is online, you can also **Refresh** or **Clear cache** — the same actions as [BRICKS Foundation's own Refresh](/foundation/launch-applications#refresh-the-application) and [Clear Cache](/foundation/launch-applications#clear-cache) — or capture a **Screenshot**, shown as an inline preview (requires Media workspace to be enabled). These actions, and Open DevTools, are unavailable while a device is offline.
The list refreshes every 30 seconds and the local scan every 60 seconds, but only while the **Devices** tab is the active tab in its panel.
#### Dashboard view
The toolbar's **List** / **Dashboard** toggle switches how the panel draws those devices, and CTOR remembers your choice for the next session.
**Dashboard** replaces the rows with a grid of screenshot cards, still grouped **Online** and **Offline**. Each card shows the latest capture, the device name, its **Local** and **CDP** badges, and a caption with the screen resolution and how long ago the shot was taken. Hover a card to reveal a capture button, plus **Open DevTools** for a CDP device. Offline devices are dimmed and show how long they have been gone, with no actions.
CTOR captures every online device once when you switch to **Dashboard** and again whenever the device list changes. The **Auto refresh** dropdown next to the toggle re-captures the whole grid on an interval — off, 10s, 30s (the default), or 60s — and the toolbar's refresh button captures on demand. Like the list refresh, auto refresh only runs while the **Devices** tab is active. Captures are queued one device at a time so a large workspace doesn't flood the API.
A device that advertises **CDP** is captured straight over its local debug connection — fast, and no Media workspace needed; those cards carry a **LIVE** badge. Every other device falls back to the same Media workspace path the list view's **Screenshot** action uses, and its badge shows the capture's age, turning amber once the shot is older than two refresh intervals.
### Browser
**Browser** tabs run web pages in the panel — open the [BRICKS Controller](/controller) or enter any URL. You can open several at once, spread across either panel, and the agent can drive them through an authorized CDP bridge. See the [browser reference](/ctor/reference/browser) for the toolbar, find-in-page, screenshots, and agent automation.
Add one from the **+** (New tab) menu: **New Browser Tab** opens a blank tab, and **Open Controller** points a browser tab at the Controller for the active app and stage.
### DevTools
Open a device's Chrome DevTools inspector from the **Local Devices** panel — see [Local devices](/ctor/guide/agent-usage#local-devices). Each device opens as its own **DevTools** tab, titled with the device name and hosting the `devtools://` inspector in a webview.
DevTools tabs behave differently from the built-in tabs:
* **Deduplicated per device** — reopening a device reuses its tab and refreshes the connection (for example, after re-authenticating).
* **Persistent** — they stay open across project and session switches, because they track physical devices rather than the current project.
* **Pop out** — click **Open DevTools in window** in the tab bar to move the inspector into a standalone window. This closes the tab and restores the classic separate-window behavior.
When the device you inspect is the foreground project's running preview, the **DevTools** button docks the inspector inside the **Simulator** tab instead of opening a separate tab. See [Dock the simulator's DevTools](/ctor/reference/simulator#dock-the-simulators-devtools).
### Terminal
The **Terminal** tab runs an interactive shell — your system's default shell, or a [custom one you set](/ctor/reference/settings#terminal-shell). It works in both project and main chat sessions; in a project, it starts in the project's root directory.
Add one from the **+** (New tab) menu, listed after every other tab — or open the bottom panel for the first time to get one automatically (see [Open a panel](#open-a-panel)). Each terminal is an independent shell; closing its tab ends the shell immediately, with no confirmation, even if a command is still running.
A terminal keeps running when you switch away from its session, drag it to the other panel, or come back to it later — the same shell reattaches rather than restarting. Its font follows the **Code font** and **Code font size** from [Appearance settings](/ctor/reference/settings#fonts) and updates live; its color theme is fixed when the tab is created and doesn't change if you switch the app's light/dark theme afterward.
## Manage tabs
* **Add a tab** — click **+** (New tab) in the tab bar and pick a tab. **New Browser Tab** and **Open Controller** open browser tabs; opening the **Simulator** tab starts compiling the project; opening **Diff** loads the current changes.
* **Close a tab** — click the **×** on the tab. Closing **Diff** or **Simulator** also stops its backend; closing a **DevTools** tab disconnects that inspector, and closing a **Browser** tab closes that page.
* **Reorder tabs** — drag a tab left or right within the same panel's bar to change its position. A drop indicator shows where it will land.
* **Switch tabs by keyboard** — press **Cmd+1** through **Cmd+9** (**Ctrl** on Windows and Linux) to jump to the first through ninth tab in the **right panel**, matching its tab order. This shortcut doesn't apply to the bottom panel.
When more tabs are open than fit, a panel's tab row scrolls horizontally so every tab stays reachable. If a panel is narrow or short, the active tab's toolbar collapses its buttons to icons to make room.
## Move tabs between panels
Drag a tab out of its panel's tab bar and drop it on the other panel's tab bar to move it there. If the target panel is currently closed, a drop strip appears along its edge while you drag — the right edge of the window for the right panel, the bottom edge for the bottom panel. Dropping on it moves the tab there and opens that panel in the same action.
Because Diff, Simulator, Editor, Files, Devices, and device DevTools tabs are singletons, dragging is the only way to relocate one — reopening it from the **+** menu, a tool entry, or the **Local Devices** panel while it's already open just brings the existing tab to the front in whichever panel currently hosts it, instead of opening a duplicate. Browser and Terminal tabs aren't singleton, so you can keep separate ones open in each panel at once.
Moving a **Browser** or **DevTools** tab to the other panel reloads its page. The **Simulator**, **Editor**, and **Terminal** tabs don't — their content, and for Terminal its running shell, survives the move.
## Split a panel into panes
Drop a tab on the content area below the tab bar, instead of on a tab bar, to show it beside what is already there. The edge you drop nearest picks the split — **left** or **right** places the new pane side by side, **top** or **bottom** stacks it. A group holds up to four panes.
Panes in the same group share one tab in the bar, titled with their names joined by `|`. Each pane has a grip to drag it to another position in the group and a close button that returns it to the tab bar as its own tab again. Drag the divider between two panes to resize them; neither side can shrink below 15% of the group.
The file viewer is one shared view, so a group can hold at most one **Files** or open-file pane.
## Resize or close a panel
### Right panel
Drag the handle on the panel's left edge to resize it against the chat area. The panel can take up to 80% of the window width. Dragging the handle inward past its narrowest width closes the panel.
### Bottom panel
Drag the handle on the panel's top edge to resize its height against the chat and right panel above it. It opens at 300px by default, can shrink to 120px, and can grow to 70% of the window's height, leaving room for the top bar and a usable strip of chat above it. Dragging the handle down past its shortest height closes the panel.