Panels

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, the simulator, the Config Editor, the file viewer, browser tabs for the BRICKS Controller or any web page, a terminal, your workspace’s devices, and device DevTools — 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 tab directly instead of showing the start page.

​

Tabs

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.

​

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 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 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 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 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 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 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 and 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 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 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. 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.

​

Terminal

The Terminal tab runs an interactive shell — your system’s default shell, or a custom one you set. 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). 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 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.

​

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.

​

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.