The editor

#Layout

Chat on the left, your app on the right. On a phone the bottom bar switches between Chat and Preview.

The header has Projects (back), the project name and status, the connection chips, Add sign-in (only on an older project without accounts), Share, and Deploy (or, for an extension, Download extension and How to install).

#Chat and turns

Three modes sit above the conversation:

• Build: "Changes the app. Every turn is a version."
• Chat: "Questions and advice. Reads the code, never changes it." Answers can include a prompt you send to Build with one click.
• Design: "The look. Instant, free, every change is a version." Opens the design panel (below).

Type in the box and press Enter to send; Shift+Enter for a new line; start a line with - for bullets. The box takes 1,000 characters. Under it, "≈ N tokens · reason" updates as you type, so you know the price before you send.

Quality (Build only): Fast builds straight away with no plan step and is cheapest; Careful (the default) plans first, then builds; Best plans, builds, then reviews its own changes and fixes what it finds. Max Quality tries the request several ways at once and keeps the best; it costs roughly three to four times a normal turn, so a dialog shows the estimate and asks before it runs.

#Phases

Each turn shows a card with its steps: Prompt received, reading the brief, planning, building the screens, laying them out, saving data, polishing, writing up, testing. Steps tick as the builder does them, with the files written under each. When the turn finishes the card folds to one line, for example "1:42 · 6 files · 12.3k chars · ~140 tokens". The gear on the card sets the style (Conversational, Terminal, Minimal) and what stays visible.

Under each reply: the tokens it cost, how many files changed, Undo this turn (files go back to before that turn), and thumbs up or down.

After a build turn the preview reloads and is checked. The status on the right pane reads "visual check", then "visual check passed", "visual check found issues, fixing" or "preview error, fixing". Up to two fix turns run on their own; after that it leaves it to you. Next suggestions then appear above the box as one-tap follow-ups.

#Preview

The Preview tab runs the app in a sandbox. Buttons on the tab bar:

• Select: click an element in the preview, then say what should change about it. The builder gets the exact element and file line.
• Edit text: click any words in the preview, type, press Enter. If those words appear once in the source they are changed there directly, no tokens spent, and a version is saved. Otherwise a toast says "Asking the builder." and a build turn makes the change.
• Phone width, Download the code (a zip), and reload.

An extension previews as a 380px popup hanging off a toolbar.

#Map

Map draws the app's structure from its files, with no model call: pages by area, the menu, whether people sign in, whether a landing page is in front. Click a page to open it in the preview (signed-in pages open as a preview account). Click the file name to open it in Code.

#Code and History

Code lists every file; each has its own history and can be put back on its own. NOTES.md is the builder's notes about the app, and you can edit it.

History has one entry per build turn, newest marked Current. Restore brings a version back into the editor. Put live makes it the live app; Take offline removes the live app while keeping versions, data and users. The live version carries a Live badge.

#Design

Switch the chat to Design. The panel is instant and costs no tokens: preset themes and Shuffle; six landing page layouts (Centered, Split, Showcase, Story, Minimal, Feature led) when the app has a landing page; colours, heading and body fonts, corners (0 to 32px), spacing, type size, shadow, and light, dark or auto mode.

Describing a look in the box ("warmer", "bigger corners and a mint accent") is an AI edit. Make the app follow it (AI edit) rewrites hardcoded styles to use the tokens.

#The other tabs

• Data: what the live app has stored, and the preview's own data. See App users and data.
• Users: who has an account, who may sign up, invites, blocking, admins.
• Errors: crashes from the preview and the published app, each with a Fix button. The count shows on the tab.
• Sales: every payment the app took. See Products and sales.
• Settings: project name; tab title, meta description, favicon and search indexing for the published app; payments processor and products; custom domains; Delete project. Save sits at the bottom.