The workspace: edit, files and preview
A tour of every panel and control in the MaShop workspace: the chat that drives the build, the preview that shows your deployed site, the code editor, the file tree, and the pages panel.
How-to: find every panel and control in the workspace.
The workspace is the three-pane screen you land on when you open a project. The chat sits on the left and drives the build, the preview or code editor fills the center, and a tabbed panel on the right holds tasks, files, and version history. This page names each control so you can drive the workspace without guessing.
The layout at a glance
On a wide screen you see three columns under a glass top bar:
- Left. The AI chat. It stays open the whole time and is where you type what you want built.
- Center. Either the Preview (the default) or the Code editor. A toggle in the top bar switches between them.
- Right. A panel with three tabs: Tasks, Files, and Versions. It is shown only on large screens.
Below 1024px the three panes collapse into a bottom tab switcher, so one surface owns the full width at a time.
The top bar
The 56px bar across the top carries, left to right:
- Project switcher with a status dot. The dot is green when GitHub, Supabase, and Netlify are all connected, amber when one is missing.
- Preview / Code toggle in the center. It switches the center column between the preview and the editor.
- Theme toggle (light/dark pill).
- Credits chip showing your balance. Click it to open the credits panel of settings.
- GitHub button. Opens the GitHub sync panel.
- Search button. Opens project search (also reachable with a keyboard shortcut, below).
- Share button. Opens the share modal to invite collaborators by email.
- Deploy button. The primary action. It reads Publier before your first deploy and Mettre a jour after. See deploy overview.
- Notification bell and a project settings gear (also opens with the Cmd/Ctrl+comma shortcut).
- Your avatar, which opens an account menu with referral, account settings, language, the help center, and sign out.
The chat
The chat is the control surface for the whole build. You describe a change in plain language, the builder replies, and the files it writes flow into the other panels. For how to phrase requests, read prompting.
The composer
The input box at the bottom of the chat auto-grows as you type, up to a fixed height, then scrolls. Controls on it:
- Send. Press Enter to send. Press Shift+Enter for a newline. The send button is active only when the box has text.
- Attach (paperclip). Opens a small menu to attach an image from your device or an image from a URL. Images only, up to 5 per message, max 5 MB each. Thumbnails appear above the box with a remove button on each.
- Model chip. A chip lets you pick which AI model handles the request. Each option in the list carries a context-size label and a credit-cost badge, so you can see the relative cost before you pick. Your choice is remembered across reloads. See models.
- Interrupt. While the builder is working, the send button becomes a stop button. Press it to cut the turn short; the message is tagged Interrompu.
A single message is capped at 20000 characters.
Reading the replies
Your own messages show under a Vous label. The builder''s replies show a status card that reads Reflexion while it works and Termine when it finishes, followed by a step list of the actions it took. Under a finished reply you get reaction buttons (like, dislike, copy, and retry) and, when applicable, a one-line billing readout with the credits charged and the token count.
Context window and the long-conversation nudge
The builder keeps only about the last 20 messages of a conversation in active context. Once a conversation passes 120 turns, a dismissible banner above the composer suggests starting a new conversation so older turns do not drift out of context. There is no hard message limit; the nudge is a suggestion.
Conversation history
The History panel lists past conversations grouped by Today, Yesterday, This week, and Older. From it you can start a new conversation or delete one (delete asks for confirmation on the row).
The preview
The Preview is the center column by default. It renders your site inside a device frame with its own chrome: a refresh button to reload the frame and an open in browser control. While files are saving, a Syncing to preview pill appears in the corner.
The preview shows your deployed site, not a local sandbox
Before your first deploy, the preview shows a placeholder, not a running app. There is no in-browser runtime: the generated pages are server components that read your own Supabase, so they cannot run inside the browser. The frame loads the real site only once a Netlify deployment exists. Publish once, and from then on the preview tracks your deployed site. See deploy to Netlify.
Device sizes
A device switcher under the preview flips it between desktop, tablet, and mobile. In tablet or mobile mode, a dropdown above the frame snaps it to a named preset at real pixel dimensions:
| Category | Presets |
|---|---|
| Mobile | iPhone 16, iPhone 16 Pro Max, iPhone SE, Galaxy S24, Pixel 9 |
| Tablet | iPad Pro 11", iPad Pro 12.9", iPad Air, iPad Mini, Galaxy Tab S9 |
The code editor
Switch the center toggle to Code to open the editor. It is a self-contained card with a file tree on the left and a full Monaco (VS Code) editor on the right.
The toolbar
- Tree toggle. Show or hide the file tree so the editor can fill the width.
- Fullscreen and refresh buttons.
- File badge and path in the center, showing the file type (TS, TSX, JSON, and so on) and full path of the open file.
- Copy the file contents to the clipboard.
- Download. Save the open file to disk. This button shows only for an owner or an editor; viewers do not see it.
The file tree
The tree is a VS Code-style list: a chevron, an icon, and the name on one row, indented by folder depth. Click a folder to expand it, click a file to open it in the editor. Ancestors of the open file expand on their own. The divider between the tree and the editor is draggable, defaulting to 25% width with a 200px minimum and a 40% maximum. When the builder is actively writing a file, that row shows a small pulsing dot.
Editing
The editor gives you real syntax highlighting, autocompletion, and bracket matching. Edits sync into the preview. Two shortcuts work inside the editor:
| Shortcut | Action |
|---|---|
| Cmd/Ctrl+S | Flush the current file (save) |
| Cmd/Ctrl+F | Open the in-editor find widget |
If the AI writes a file you are editing
If the builder writes to a file you touched in the last 30 seconds and the content differs, the workspace does not silently overwrite your edits. It opens a conflict dialog so you can keep your version, accept the AI version, or view the difference, one file at a time.
The right panel: tasks, files, versions
On large screens the right column has three tabs. It is hidden in Code mode, where the editor takes that space.
Tasks
The default tab. It is a chronological feed of every tool call the builder makes in the current conversation, so you can watch what it is doing as it works.
Files (the pages panel)
This tab lists your pages, not raw file paths, in three collapsible groups:
- Frontend. The customer-facing pages.
- Backend. The merchant backoffice pages.
- Emails. The transactional email templates under
emails/.
Each row shows the route it renders at (for example /, /checkout, or /orders) and a short title. Click a page row to point the preview at that route; click an email row to preview that template in the device frame.
Versions
This tab is the snapshot timeline. MaShop captures a snapshot at meaningful generation points. From a snapshot you can Restore it (a confirmation dialog appears first, because restoring rewrites your files) or View diff to compare it against the previous snapshot. A restore reloads the file tree and drops any open tab whose file no longer exists. For the full rollback workflow, read versions and history.
Project search
Press Cmd/Ctrl+K or Cmd/Ctrl+Shift+F to open project search. It searches across three categories: Files, Emails, and Conversations. Arrow keys move the selection, Enter opens the highlighted result, and Escape closes the modal. Selecting a file opens it in the Code editor; selecting a conversation loads it into the chat.
Where to go next
You now know where every control lives. To get better output from the chat, read prompting. To understand what the builder does behind each turn, read how the builder works. To put your site online from the Deploy button, read deploy overview.