Why are some tabs disabled?

They have nothing to show yet. Data and More read the built app, so they stay locked until the first build finishes; Code unlocks earlier — as soon as the agent has written its first file — so you can read along while the app is still being built. A locked tab explains itself on hover: "Cannot open this tab until the app is built". Once unlocked they stay unlocked; a later turn doesn't re-lock them. Where: Code Builder › tab bar

Why do the header buttons change when I switch tabs?

The header only offers what the tab you're on can actually do: * Preview — the device-size toggle, the page switcher, Open preview in new tab, the More menu, the Edit element picker and Publish. * Code — a Download code button, which downloads the app's source as a zip. * Data, Trace, More — nothing but the tab's name. When the app is linked to a Git repository, the current branch is named in the header on every tab. One consequence worth knowing: Publish is only reachable from Preview. Where: Code Builder › header

Can I check how the app looks on a phone or tablet?

Yes. The device button on the Preview toolbar steps through Laptop (full width), Tablet and Mobile and then back round again — the icon shows where you are and the tooltip names what the next click gives you. It only changes the width the preview is rendered at; it doesn't change the app. Open preview in new tab opens the real running app in its own tab, on the page you're currently viewing. Where: Code Builder › Preview

The screen you build in: a chat on the left, and the app itself on the right across five tabs.

Overview

Two halves. On the left is the conversation with the agent, with the app's name and a back arrow at the top; on the right is the app, shown through a tab bar. You can collapse the chat entirely (Collapse chat panel / Expand chat panel) or drag the seam between the two halves to resize it — it stops at a minimum width and won't grow past 60% of the window, and the width you settle on is remembered for next time. The back arrow leaves the builder for the app's Overview page.

Where: Code Builder

Five tabs

Preview — the running app. This is the default tab.
Code — the app's source files, read-only, in a file tree.
Data — which objects the app reads and writes (covered in its own doc).
Trace — the detailed record of what the agent did.
More — Saved versions and Git, in a side rail.

Where: Code Builder › tab bar

Looking at a different page of the app

Use the page switcher in the header on the Preview tab. It shows the path you're currently on; clicking it opens a searchable list of every page the app declares ("Find page or enter path"). Pick one, or type a path that isn't listed and press Enter to go straight there. The refresh control on its left reloads the running preview. Before the app has any pages you'll see No pages yet.

Where: Code Builder › Preview › page switcher

Code tab

A collapsing folder tree of the app's files with a read-only editor beside it. Files stream in as the agent writes them, so early on you may see "Files will appear here as the agent writes them". Scaffolding folders that are rarely interesting start collapsed; everything else opens. Clicking a file chip in the conversation jumps here and opens that file — except for an edited file, which instead shows its before/after in a floating comparison over whatever you were looking at, so a quick "what changed?" doesn't pull you out of the preview. Download code in the header zips the whole source.

Where: Code Builder › Code

Trace tab

The full technical record of the agent's runs, rendered the same way it is for AI agents elsewhere in the platform: a list of traces on the left, and the selected one's timeline with its inputs, outputs, attributes and events beside it. These records are ingested in the background, so a turn that just finished takes a few minutes to appear — until then you'll see "No traces yet — spans take a few minutes to appear after a run". The view keeps re-reading while a run is filling in, and for a while after it ends, so it catches the last records. If the records can't be read you'll see "Couldn't load traces".

Where: Code Builder › Trace

More tab

A side rail with two sections: Saved versions — every change the agent made, previewable and restorable — and Git, where you connect the app to a repository and work with branches. Both have their own docs. Restoring a version from here takes you back to the Preview tab so you see the result immediately.

Where: Code Builder › More

The build workspace