The preview

#What it shows

• Your app, running live while it's built. It reloads by itself as files change.
• What Synonode shows you that needs the room: your running app, a big page, a long file or document, a change across many files, each with a download. Smaller things, like a picture, a table or a few lines, stay in the chat as a card; the preview button under it brings them here.
• The design board, with two designs to choose from. See Two designs.

#Side views

The buttons at the top right turn on what sits beside the chat. Turn on as many as you like: Preview, Changes and Files stack one under the other, each with Expand to fill the side and Close. Drag the bar between two of them to share the height, and the edge of the Overview or of the file tree to widen it; Synonode remembers the sizes. Drag the bar between the chat and them, with the mouse or a finger on a tablet, to give the chat more or less of the width. With every view off, the chat has the whole width.

The Overview lies behind the others: on its own it sits at the right edge without moving the chat, the other views cover it, and closing them shows it again.

• Preview: your app, or what Synonode shows you.
• Overview: where Synonode works (the computer, the project, the branch), how full the conversation is (a click opens what fills it, as /context does, and it follows as the conversation grows), the files the conversation read, wrote or edited, newest first (Outputs: tap one to open it; Show more lists them all; it keeps them through compactions and reloads), what it changed (and the pull request; in a project without git, also while a build is still running), and Background tasks: what runs now, with how long it has run and a stop button, and how many finished. Stopping a command the model is waiting for ends only that command: the model is told you stopped it and carries on. Every command the model ran counts, whether it waited for it or not. Its title folds it, like the other sections; N finished opens the Background tasks panel: Running and Finished, the latest on top, each with how long it took; tap one to read what it wrote (the end of it, and Show more for all of it). Tap Finished to fold that group. The bin clears the finished ones from the list (in this browser; the model still has them), Expand widens the panel over the chat (on a computer or tablet), and the cross goes back to the Overview. Put its sections in the order you like: drag one by the handle at its top right (or focus the handle and press ↑ or ↓). The order follows you to every device.
• Changes: every changed file, one after another, with its lines, updated as Synonode works (the chat's Review opens it). In a git project, what the branch changed since it left the main one (main → fix/cart) and what is not committed yet; otherwise what Synonode's edits changed in this conversation. List the files shows them all; press + on a line to comment on it.
• Files: the open file on the left, the project's tree on the right with Filter files…. A click opens a file in a preview tab (in italics) that the next click replaces; a double click keeps it open. Its menu has Show file tree (Ctrl Shift Y), Source control, New file, New folder, Collapse folders, Preview tabs, Word wrap, Indent guides, Show whitespace, Scroll past end and Tab size.

A link to your app in a reply (an address on localhost) opens here, at that page, on a computer and on a phone alike.

On a phone, one view fills the screen at a time. The › at the top right of the chat opens the one you looked at last, and the switch at the top goes between Preview, Files and Changes, in the same place on each, with the preview's own buttons at its right; the back arrow returns to the chat. Files is a list with Filter files… on top: tap a file to read it full screen (Edit to type in it), and back, or Files again, to return to the list. In Changes, tap a line's number to comment on it. The Overview is the button beside the project's name.

A tablet, upright or sideways, has the views beside the chat, as on a computer. On a narrow screen (an upright tablet) the project list folds away while a view is open; its button brings it back.

Turn off Show files and pages in Settings → Capabilities if you'd rather Synonode didn't show you files or open things here by itself.

#Screen sizes

See your app at desktop, tablet and phone sizes from the bar above the preview. What you mark at one size is checked at that size.

#Point at what you want changed

The toolbar at the bottom of the preview has four tools. What you mark goes with your next message.

Tool	Use it to
Select	Pick one or more parts of the page. Your next message is about just those parts: make this bigger.
Text	Type over any text right in the page. The change is made in the code.
Comment	Pin a note to a spot: this should link to the pricing page.
Draw	Circle, cross out or draw an arrow, then say what you mean in your own words.

#Visuals in the chat

Most things don't need the preview. Charts, diagrams, formulas, small interactive visuals and the files Synonode makes for you are shown right in the chat. See Charts, diagrams and files in the chat.

#Preview servers

Each project's app runs on your computer while you work on it. With Stop previews not in use on (the default), a preview stops a couple of minutes after you leave its project, or after half an hour with nothing happening. It starts again when you open the project.