Add steps from an n8n-style Add a step panel, with sticky notes, YAML copy and paste, and canvas files

[ancongui]

Summary

With Try the new editor on (Settings › Preferences, or ?editor=next), Studio replaces the Steps palette and the "+" step picker with Add a step, and the canvas gains trigger choices, copy and paste, sticky notes, Tidy layout and a canvas file. With the new editor off, Studio's classic designer is unchanged.

Builds on step details (#38): inserted steps open there, and Save to file's canvas file now carries the settings of the actions a workflow owns.

• Add a step. Every +, a handle dragged to empty canvas, N or /, the empty state and the toolbar's Add a step open a 384 px panel on the right (a full sheet below 768 px), at that place in the workflow. An empty workflow starts on What triggers this workflow? with the search focused and the seven triggers first, then Start from a template; otherwise What happens next? lists AI, Action in an app, Data transformation, Flow, Wait, Human review and Add another trigger. Search understands everyday words ("http", "api", "request" and "url" find Call an API), groups triggers first while the workflow has none, and offers Make a custom API call when nothing matches. Apps open on their actions and triggers; installed apps list their published actions and every version. Entries the platform can't run stay visible, dimmed, with the reason. Choosing an entry inserts it as one undo step and opens its step details on the first required field. The list is an ARIA listbox: ↑ ↓ move, Enter adds, → opens, ← goes back, Escape closes.
• Trigger choices. A chosen trigger is drawn at the start of the workflow and reads Set up at activation; Studio keeps the choice, and the trigger is set up when the workflow is activated.
• Copy and paste. Ctrl/Cmd+C, X and V copy, cut and paste steps as YAML (with a JSON copy for Studio), within a workflow or between workflows. Pasted IDs are renumbered and references follow; connection slots and AI profiles come along after a confirmation; Call an API, email and file steps bring the settings of the actions they own. References the new place can't read show Setup needed. Text that isn't Weave steps, over 1 MiB, or with YAML aliases changes nothing and gets one sentence.
• Sticky notes. Shift+S adds a note (anchored to the selected step, in a free spot). Double-click to write; headings, bold, italics, lists, code and http/https/mailto links render without HTML. Six colors, three sizes, resize from the edges, arrow keys and Move…; up to 4,000 characters.
• Tidy layout. Shift+Alt+T or the broom moves free notes off the steps and fits the view, as one undo step.
• Step toolbar. Delete and More sit above a step, centered, as in n8n.
• Canvas file. With the new editor, Save to file writes <name>.canvas.json (notes, trigger choices, step notes and owned actions' settings), and Import workflow takes the workflow and its canvas file together. A draft on a platform keeps it in this browser for your account; signing out of the platform or removing it deletes what was kept.
• API samples. The API builder measures a pasted sample in bytes.
• For everyone, editor on or off: importing a file starts its Undo history there; a canvas or layout file chosen alone in Import is refused with a sentence; Back to a workflow opened from a file and left unchanged explains that Studio didn't keep a copy.

No new dependency and no new server operation. Platform calls use Studio's existing bridge and are authorized by the platform.

Verification

Local (macOS, Chromium headless shell):

• npm run check, npm run format:check
• npm test: 148 files, 1,964 passed
• npm run build: initial bundle +7.0 KiB gzip against main (limit 15 KiB); editor chunks 139 KiB gzip (limit 180 KiB)
• Full browser suite: 2,347 passed, 0 failed, 23 skipped (size-gated dialog layouts and real-platform tests)
• Visual tour: six new scenes at seven sizes (42 passed); Linux (mcr.microsoft.com/playwright:v1.55.1-noble) at 360x740 and 600x500 (12 passed, fonts loaded)
• Docs build (mkdocs build --strict), docs check and source-header coverage
• Platform calls are mocked in the browser tests; no real platform was used

CI only: the full browser suite on Linux; unit tests, build and cross-platform browser tests on macOS and Windows; desktop installers on Linux, macOS and Windows.

Known gaps

• Tidy moves only free notes. A later insert can push a step and the note anchored to it over another step; the note stays there until moved by hand. On dense branch groups a step's note can start well below its step.
• Note text at 50 % zoom is 5–6 px on screen, as in n8n.
• Differences from the design mockup: the title row follows the 32 px close button, the Enter hint is a key chip, the template icon differs, and a wrapped reason makes a row taller.
• Going Back to an unchanged file keeps /workflows/<id>/designer in the address bar while Workflows shows (also on main).
• A platform draft's notes and trigger choices live in this browser only: colleagues opening the same draft don't see them until the platform stores Studio's canvas.
• Not run: Windows locally, and any real platform.

Owner decisions to confirm

1. Step toolbar always above its step. It now always sits above the step, centered, as in n8n, even where it covers a neighbor's name on a lower lane at 50 %. Alternative: put it below the step's own name block when only that band is clear.
2. Note text size at 50 % zoom. 5–6 px on screen, as in n8n. Alternative: a minimum on-screen size for note text.
3. Tidy leaves anchored notes. Tidy moves only free notes; notes that follow a step stay with it. Alternative: Tidy also re-places anchored notes that cover another step.

Follow-ups

• Keep a draft's canvas only for the account that made the change: compare the signed-in account when the waiting write runs, or detach the draft when the account changes.
• Keep the last canvas change when the session renews within the 800 ms autosave window.
• Bound or defer the contract reads Add a step makes to sort published actions by app.
• Key the language manifest cache by platform and account, like installed apps.
• Store Studio's canvas on the platform so colleagues share notes and trigger choices.