Using the editor

The Swarmz editor is the workspace where you read code, run commands, watch the preview update, and talk to the agent. Everything you need lives on one screen — no context switching, no separate IDE.

Editor at a glance

The editor uses a three-column layout:

• Left — the file tree, with search and a folder/file context menu.
• Center — the code editor and the live preview, available as tabs (Preview, Code, Terminal, Cloud, Analytics). Drag the column dividers to resize.
• Right — the agent chat panel. Toggle it with Cmd+B to give your editor more room.

The top bar shows the project name (click it for rename, settings, and danger actions), the container status pill (running, hibernating, provisioning, restarting), and quick links to publish, share, GitHub, and project settings.

The file tree

The file tree mirrors what's actually inside your container at /workspace. It refreshes automatically when the agent creates, edits, or deletes files.

• Click any file to open it in the code editor.
• Right-click a file or folder to rename, delete, create new file, or download.
• Type into the search box at the top to fuzzy-find by filename. Results stay scoped to the project.
• The tree respects .gitignore — node_modules, .next, dist, and other build artifacts are hidden.
• Folders sort first; files sort alphabetically below.

The code editor

The code editor is built on Monaco — the same engine that powers VS Code — with a custom dark theme tuned for long sessions.

• Syntax highlighting for TypeScript, JavaScript, JSON, HTML, CSS, Markdown, Python, Rust, Go, YAML, SQL, GraphQL, Shell, and more.
• Autocomplete with type-aware suggestions for .ts / .tsx files.
• Multi-cursor editing (Alt+Click to add cursors, Cmd+D to select next match).
• Find and replace (Cmd+F, Cmd+Shift+H for replace).
• Bracket pair colorization, indent guides, and word wrap on by default.
• Autosave kicks in 1 second after you stop typing, or instantly on Cmd+S.

Open files appear as tabs across the top — click the X to close, drag to reorder. While the agent is editing a file, the editor goes read-only and shows an "AI is editing..." overlay so you don't fight the agent for control.

The terminal

The terminal gives you full shell access (sh) inside your project's container. It's the same shell the agent uses.

• The package manager auto-detects from your lockfile: pnpm-lock.yaml selects pnpm, yarn.lock picks yarn, otherwise npm.
• Each command has a 30-second default timeout, which you can extend up to 120 seconds.
• Output is capped at 5 MB per command — enough for a full npm install log but it'll truncate runaway loops.
• History persists for the session. Press Up / Down to recall previous commands. Ctrl+L or type clear to reset the screen.
• Ctrl+C cancels a running command.

Working directory is /workspace. Anything you write to disk shows up in the file tree and the live preview HMR will reload affected modules.

The live preview

The preview iframe runs your dev server — Vite, Next.js, or whatever the framework template starts. It refreshes automatically through hot module replacement, so changes from the agent or from your typing show up within a second.

• Toggle between desktop, tablet, and mobile viewports from the toolbar. The mobile view uses a phone mockup so you see chrome-accurate layout.
• Click the address bar to navigate to a different route. Detected routes appear in the dropdown.
• Hit the refresh button to force a hard reload (useful after schema changes).
• Click Open in new tab to share the live URL — anyone with the link can view, no login required while the container is running.

If the preview is blank, check the build error pill at the bottom of the panel — it surfaces compile errors and edge function errors as they happen, with one-click "fix this" prompts back to the agent.

The agent chat panel

The chat panel on the right is where you describe what you want and watch the agent execute it.

• Streaming responses appear token by token. The agent's reasoning, tool calls, and results render inline as a timeline.
• Plan mode (toggle in the prompt box) makes the agent propose changes as a checklist before touching any files. Approve the plan to execute, or send another message to refine it.
• Stop button appears mid-task. Hit it to abort cleanly — the agent finishes its current tool call, the run is marked aborted, and credits are refunded for any work not completed.
• The timeline shows file ops (Reading Header.tsx, Editing nav.css, Created 3 files), web fetches, terminal commands, and errors as they happen. Each row expands for the full diff or output.
• Drag and drop images directly into the prompt box to give the agent a screenshot to work from.

For a deeper look at how the agent reasons, see the AI Agent overview and Plan mode.

Snapshots and rollback

The editor takes automatic checkpoints before any write — every agent run creates a snapshot tagged with what it changed. You can also create manual snapshots before risky experiments.

Open the History panel (clock icon in the top bar) to see the timeline of versions:

• Each row shows the change message, timestamp, and a preview thumbnail.
• Click any version to preview it live in the iframe — your current work stays untouched.
• Click Restore to roll back. The current state is captured into a new snapshot first, so the rollback itself is reversible.
• Click View changes for a side-by-side diff against the previous snapshot.

The most recent 50 snapshots are kept per project. See Snapshots and rollback for how the agent decides when to checkpoint.

Container status

The status pill in the top bar tells you what your container is doing:

• running — green. Your dev server is up; the preview, terminal, and file tree are all live.
• provisioning — blue. First-time setup. The orchestrator is creating the K8s deployment, cloning the template, and running the install. Usually 30 to 60 seconds.
• waking — yellow. The container was hibernated and is starting back up. Usually 15 to 30 seconds.
• hibernated / sleeping — gray. The container is paused to save resources. Click Wake in the editor or just send a chat message — either will trigger a wake automatically.
• restarting — orange. The container is rebooting (you triggered it manually, or after a fatal crash).

Containers hibernate after 10 minutes of idle (no chat, no file edits, no terminal activity). Your files are preserved exactly as you left them. Waking from hibernation is much faster than the initial provision because the volume is already there.

Project settings

The settings dialog (gear icon, top right) covers everything that lives outside the file tree:

• Environment variables — KEY=VALUE pairs available to your dev server and to edge functions. Stored encrypted.
• Knowledge preset — pick a domain bundle (e.g. "Stripe checkout", "Supabase RLS", "shadcn/ui") that the agent loads as background context for every prompt.
• Skills — toggle agent capabilities like web search, image generation, or schema migrations.
• GitHub — link a repo for two-way sync. See GitHub integration.
• Custom domain — point your own domain at the published version. See Custom domains.
• Members — invite collaborators with viewer, editor, or admin roles. Workspace plans only.

Keyboard shortcuts

The shortcuts below use Cmd on macOS and Ctrl on Windows/Linux. They work everywhere except when focus is in the Monaco editor (it has its own bindings) — global toggles like Cmd+B work even there.

That's the full surface area of the editor. From here, the natural next step is to start prompting the agent — head to the AI Agent overview for how it picks files, plans changes, and writes code.