Layout and windows

The editor is laid out like a code editor (VS Code):

• The canvas is always in the middle. The canvases you opened sit as tabs above it: Main first (pinned, can't be closed), then the others. Click a tab to switch, × or middle-click to close it, + to make a new canvas. The open tabs and the one shown are remembered in this browser for each flow. A tab shows the canvas's color, a spark for an agent's draft (pulsing while it works) and a lock when it's read-only for you.
• Around it, every other panel is a window in one of three areas: the left side (its rail is the activity bar on the outer edge, its windows the sidebar), the right side and the bottom. You choose which windows show, in which order and in which area. The layout is remembered in this browser, for every flow.

Windows

By default the left area shows Canvases, the right area shows Agent and Comments, and the bottom area shows Logs and Preview. The bottom area stays collapsed until a run starts.

The rail

Each area has a rail: the strip of window buttons on its edge (the activity bar on the far left, right of the right area, top of the bottom area).

• Click a window's button to show or hide it. Several windows can show at once; they share the area, each with a small title and a Minimize button.
• Drag a button along the rail to reorder, or onto another area's rail to move the window there.
• Right-click a button for Move up, Move down, Move to the left / right / bottom and Hide.
• + lists hidden windows; pick one to bring it back into this area. Reset layout sits at the bottom of the same menu.
• The last button collapses or expands the area (⌘B for the left sidebar, ⌥⌘B for the right side, ⌘J for the bottom panel, as in VS Code). The canvas never collapses.

Drag the inner edge of the right or bottom area to resize it (or focus the edge and use the arrow keys).

Badges on the rail count unresolved comments and pending suggestions (Comments) and log lines (Logs).

Hidden windows stay alive

A window mounts the first time it shows and stays mounted when you hide it, so a live preview stays connected and the agent conversation stays where it was. Hiding a window ends what it shows on the canvas (a version preview). Moving a window to another area starts it fresh.

Reset

Reset layout (in ⌘K, or at the bottom of any rail's + menu) puts every window back where it starts.

Where it's kept

localStorage key mooflair.studio.layout: { left, right, bottom }, each { isCollapsed, size, windows: [{ key, isCollapsed, isHidden }] } in order. Windows it doesn't know are dropped; new windows join their starting area. If the value can't be read, the default layout is used.

On phones

The left and right areas open over the canvas when one of their windows shows.

Code

• src/views/app/[workspace]/studio/[id]/area/index.tsx — one area: rail, windows, drag and drop, resize.
• src/views/app/[workspace]/studio/[id]/window/index.ts — every window: icon, body, when it's offered, its badge.
• src/views/app/[workspace]/studio/[id]/window/* — the window bodies (canvas/, agent/, comment.tsx, log.tsx…). Each gets isShown.
• src/stores/studio — layout and open(key) (show a window, its area too).

FAQ

How do I get the old full-width runs list back?

Move Runs to a side (right-click it › Move to the right) or open All runs for the workspace Runs page.

I closed a window by mistake. Where is it?

Press + on any rail and pick it, or use Reset layout (same menu, or ⌘K).

Is the layout shared with my team?

No. It lives in your browser only and applies to every flow you open there.