Editor
Studio's editor — panes, controls, and how the parts work together.
The editor is Studio's main surface. It opens at /studio and runs the full workspace — file tree, code editor, AI chat, preview, and deploy. This page is a tour of every region and control.
Top bar
Persists at the top of the editor at all times.
| Element | Purpose |
|---|---|
| Insites Studio logo | Returns to the workspace home. |
| Project switcher | Click the project name to swap between projects in this workspace without leaving the editor. |
| Connection pill | Shows Disconnected — connect to deploy when no instance is bound, or the connected instance URL when one is. Click to open the connect drawer. |
| Test mode pill | Shows the current user's first name and plan tier (e.g. "Test mode · Shane · Free"). Indicates Studio is running with the test-mode persona; click to switch persona for "view as" testing. |
| Resources | Opens the workspace resources panel — instances, integrations, bound repo, deploy history. |
| Deploy | Disabled when no instance is connected. When enabled, kicks off the deploy stream — see Deploy panel. |
Layout
The editor below the top bar is a three-column workspace:
| Region | What it does |
|---|---|
| File tree (left) | Every file in your repo, grouped by path prefix. |
| Centre pane (toggleable) | Switch between Preview, Code, Styles, Setup. |
| AI chat (right) | Conversation with Claude. Pending Patches surface here. |
| Canvas mode selector | When the centre pane is Preview, choose AI feedback, Direct edit, or View. |
| RuleTrace (bottom) | Pinned button that toggles a debug overlay for tracing how Studio's prompt rules fired on the last AI turn. |
File tree and File Palette
The file tree groups by path prefix — pages/, partials/, layouts/, data/, assets/, app/, and an other bucket for anything that doesn't fit. New files you've created in the session but haven't deployed yet are tagged "local only" so you can spot them.
For fast navigation, hit ⌘P (or Ctrl+P) to open the File Palette:
- Fuzzy-matches across every file in the tree, including locally-created ones.
- Arrow keys to move, Enter to open, Esc to close.
The palette is built on the same cmdk primitive used elsewhere in Studio.
Editor pane
The editor pane uses Monaco (the same engine as VS Code) with syntax highlighting for:
- Liquid (
.liquid) - JSON, YAML
- JavaScript, TypeScript
- CSS
- Markdown
It's wrapped with Liveblocks for real-time collaboration. Two members editing the same project see each other's cursors and changes live, no merge step needed.
Edits are in-memory until you Deploy. The original file content is preserved separately, so the AI's diff view always has a baseline to compare against.
Centre pane modes
Toggle the centre area between four modes:
- Preview — live view of the connected instance. Reflects the last deployed state, not your unsaved edits. Gated: shows "PREVIEW UNLOCKS WHEN CONNECTED" until the project has a bound Insites instance.
- Code — Monaco code editor.
- Styles — inferred design tokens (colours, fonts) for the project. Useful when you're discussing design with the AI.
- Setup — project-level configuration: repo connection, instance bindings, CloudShell credentials.
Canvas modes (Preview only)
When the centre pane is on Preview, the canvas mode selector toggles between three interaction modes. Number-key shortcuts only fire when no modifier is held and no input is focused.
| Mode | Shortcut | Behaviour |
|---|---|---|
| AI feedback | 1 | Click an element on the page to send it to the AI as context. Useful for "fix this", "rephrase this", "make this match the rest". |
| Direct edit | 2 | Click-to-edit text and styles inline, without going through the AI. |
| View | 3 | Read-only preview, no click interception. The default mode for showing work to others. |
AI chat
The chat is a streaming conversation with Claude. Each message renders in scrollable history; the input field at the bottom accepts text or voice (browser speech recognition).
The welcome message on a new project is "Welcome to project name. Your brief, architecture and design tokens are loaded. Tell me what to scaffold first — homepage, dashboard, login, or something else?"
Affordances under the input:
- Send — submit the current message. Keyboard: ⌘+Enter (Ctrl+Enter). Plain Enter inserts a newline.
- Suggest — asks Studio to propose the next prompt for you. Useful when you're not sure what to ask next; based on the brief and recent activity.
- Model picker — pick Haiku, Sonnet, or Opus per turn. The picker only appears when Developer mode is on; otherwise the workspace default is used silently.
- Voice toggle — dictate instead of typing. Uses the browser's speech recognition; Chromium-based browsers behave best.
- Approval mode toggle in the chat header — Auto / Confirm / Dangerous. Your choice persists across sessions. See Approval mode.
- Pending Patches — every AI-proposed change lands as a card under the assistant's message, with line-level diffs and Accept / Reject buttons.
Deploy panel
The deploy action streams Server-Sent Events from /api/deploy. The panel surfaces:
- GitHub commit progress (and a link to the commit).
- CloudShell deploy job status.
- Errors with enough context to retry or escalate.
Deploys are not undoable, but each prior deploy is recoverable through the per-instance Deploy history menu on the project home — see Project workspace.
Keyboard shortcuts
Mac chords are shown first; the bracketed Ctrl variant is the Windows / Linux equivalent. Press ? from anywhere in Studio (outside an input) to open the in-app cheatsheet.
Global
| Chord | Action | Notes |
|---|---|---|
| ? | Toggle the keyboard shortcuts cheatsheet | Disabled while typing in an input, textarea, or contenteditable. |
| ⌘ K (Ctrl K) | Open the quick-jump search | Available across the Studio shell and the docs site. |
| / | Open docs search | Docs site only, when no input is focused. |
| Esc | Close the active modal, popover, or menu | Closes the cheatsheet, file palette, Resources menu, Test mode panel, activity drawer, and similar overlays. |
Studio shell
| Chord | Action | Notes |
|---|---|---|
| ⌘ P (Ctrl P) | Open the File Palette | Fuzzy-matches every file in the tree, including locally-created files. Arrow keys move, Enter opens, Esc closes. |
| ↑ / ↓ | Move highlight in palette / autocomplete lists | Works in the File Palette and the chat slash-command list. |
| Enter | Select highlighted item | File Palette, autocomplete, inline rename. |
Canvas
The canvas mode selector lives in the Studio toolbar. Number-key shortcuts only fire when no modifier is held and no input is focused.
| Chord | Action | Notes |
|---|---|---|
| 1 | Switch canvas to AI feedback mode | Click elements to send them to the AI as context. |
| 2 | Switch canvas to Direct edit mode | Click-to-edit text and styles inline. |
| 3 | Switch canvas to View mode | Read-only preview, no click interception. |
Code editor (Monaco)
The editor pane uses Monaco, so most VS Code chords work. The ones below are the ones we explicitly support inside Studio.
| Chord | Action | Notes |
|---|---|---|
| ⌘ S (Ctrl S) | Save the current file to the in-memory workspace | Edits stay local until you Deploy. |
| ⌘ / (Ctrl /) | Toggle line comment | Language-aware via Monaco. |
| ⌘ F (Ctrl F) | Find in current file | Standard Monaco find widget. |
| ⌘ Z / ⌘ ⇧ Z | Undo / Redo | Scoped to the current file's edit history. |
| Alt ↑ / Alt ↓ | Move line up / down | Monaco built-in. |
AI chat
| Chord | Action | Notes |
|---|---|---|
| ⌘ Enter (Ctrl Enter) | Send the current chat message | Plain Enter inserts a newline. |
| ↑ / ↓ | Navigate slash-command suggestions | Only when the suggestion list is open. |
| Esc | Dismiss slash-command suggestions |
Sitemap editor
These chords are active inside the sitemap editor (migration on-ramp, step 4).
| Chord | Action | Notes |
|---|---|---|
| Tab | Indent the selected row | |
| ⇧ Tab | Outdent the selected row | |
| Enter | Save an inline rename | |
| Esc | Cancel an inline rename |
Migration on-ramp
| Chord | Action | Notes |
|---|---|---|
| ⌘ → (Ctrl →) | Advance to the next step | Disabled when the current step is incomplete. |
| ⌘ ← (Ctrl ←) | Return to the previous step |
Settings and modals
| Chord | Action | Notes |
|---|---|---|
| Esc | Close the active modal | Settings, Add Instance, Test Mode, Resources menu, activity drawer, and Pending Patches overlays all respond to Esc. |
Where this lives in code
app/studio/page.tsx— the route entry point.app/studio/StudioApp.tsx— the in-browser editor.components/FilePalette.tsx— the Cmd-P palette.components/PendingPatchesCard.tsx— Pending Patches UI.components/DeployOverlay.tsx— Deploy panel.