[knihit]

Description

Layer 2 of 4 of the editing work in the Designer. It adds the part you see and use: pick an agent, rename a stage, add one, delete one. Nothing is written to the file yet; the draft lives in the page.

Designer (workflow-canvas/src/designer/):

• Properties (right of the graph): the selected stage (the first one when the page opens), with a Required card that holds name (a text field) and agent (a list of the agents Konductor ships, each with a line on what it is for), a Complete, Has a note or Needs a fix mark, and Delete stage. A file that names an agent not on the list keeps it, shown first.
• Add stage adds agent-N (the first free N) with agent k-developer at the end, selects it and moves focus to its name. It is off at 40 stages, with the reason.
• A stage is selected by a click or by Enter or Space on its node; the intent and the end are not selectable. The name of the selected node ends with "selected" for a screen reader, and its outline is thicker.
• Read-only workflow: the name is read-only and Add stage, Delete stage and the agent list are off, with the reason.
• The draft lives in App (useEditor), so it survives a switch of tab. The Execution tab draws the workflow as loaded and shows an info note when the Designer holds changes that are not saved.

Canvas and graph:

• WorkflowCanvas takes an optional selection; without it the canvas is read-only as before. FitWhenGrown fits the graph again when a stage is added or deleted.
• The graph names a node by the id of its stage, so two stages that share a name for a moment still have two nodes.

Tests and docs: unit tests for the selection, the graph by stage id, the agent list (and api/agents.test.ts, which checks it against agents/), and the Designer through App (Properties, select by click and Enter, rename, agent list, add, delete, limits, the draft kept across tabs, read-only). Existing e2e expectations changed on purpose: the first stage's node name now ends with "selected" and the node description no longer says "Read-only". README.md has the Designer tab section.

How to review

• Review the diff against Add the editing core of the Designer: draft, stage text, findings and editor state #98, the layer below (the GitHub diff of this PR is already against it).
• Start with PropertiesPane.tsx and DesignerEditor.tsx, then use-editor.ts, then the canvas selection (WorkflowCanvas.tsx, selection.ts), then the graph change.
• Run it: cd workflow-canvas && npm ci && npm run dev:stub, open the address it prints, and edit a stage. Saving is not there yet, so a reload gives the file back.

What the next layer adds

PR #100: Save, the check while typing, the 409 conflict flow with Load the file again, the 422 findings, the lost-answer rule, the save line and alerts, and the API client calls.

Fixes from the hands-on QA run

• No warning before unsaved edits were thrown away. While the draft differs from the file, a beforeunload handler (useLeaveGuard) makes the browser ask before the page is closed or reloaded. It is off when the draft equals the file, also after a change is put back.
• Tests: unit tests of the hook; end-to-end e2e/tests/leave-page.spec.ts (asks with unsaved changes and the page stays; no question with no change or with the change put back). The first failed before the change.

Type of Change

• Other: editing on the Designer tab of the workflow canvas, in workflow-canvas/

Testing

• Root npm test (tests/scripts/**/*.test.js): not applicable; this PR changes only workflow-canvas/.
• If cli/ changed: not applicable, cli/ is untouched
• Smoke tested affected agent(s): not applicable, no agent changed
• If an agent's or skill's behavior changed: not applicable, none changed
• New or changed code files carry the required SPDX header (see AGENTS.md's License headers rule); formats without comment syntax (e.g. JSON) are exempt

Checked in workflow-canvas/ on this head: npm run lint, npm run typecheck (3 projects), npm test (74 files, 1266 tests), npm run test:stub (20 files, 354 tests), npm run api:lint, npm run build and npm run test:e2e (78 tests) all pass. npm run screenshots was run and its files are committed; a second run gives the same files.

Screenshots

Designer tab, full page, 1280x800 (regenerated by npm run screenshots; the links are pinned to the head commit of this PR):

Opens with a stage selected	Agent changed and a stage renamed

Opens, dark theme	Edits, dark theme

Checklist

• My code follows the style guidelines of this project (see AGENTS.md's Code Style & Conventions)
• I have performed a self-review of my own changes
• I have commented my code where necessary
• I have made corresponding changes to the documentation
• My changes generate no new warnings - build is clean
• I have added or updated tests that prove my change works (see Testing above for the exact commands)

Notes for Reviewers

• Stacked on Add the editing core of the Designer: draft, stage text, findings and editor state #98, which is stacked on Run the workflow from the Execution tab with live node states #93 (wc/06-execution).
• The screenshots of this layer have no save line yet; that comes with the next layer.
• There is no undo, and no confirmation to delete: nothing is written, and a reload gives the file back.
• Product code in this layer: about 650 added lines; the rest is tests, README and screenshots.
• Size: about 650 lines of product code, above the 600 target for the same reason as Add the editing core of the Designer: draft, stage text, findings and editor state #98 (a fifth PR would be needed to go lower).
• The save part of the core that Add the editing core of the Designer: draft, stage text, findings and editor state #98 adds (reducer save events, SaveState, stage-text.ts, textOf) is not dispatched by use-editor here; Save the workflow from the Designer, with checks while typing and conflict handling #100 uses it first.
• The end-to-end tests of this layer are those of the layers below, with the changed expectations, and e2e/tests/designer.spec.ts (Enter, Space and Escape on the selected stage, and the layout of the read-only note); the editing flow has its own e2e project in Test editing in the Designer end to end and add the changelog entry #97, which runs against the finished page.

Fixes from the second adversarial review

• Enter or Space on the stage that is already selected moves focus to its name; Escape on a node keeps focus. The tests fail without the fix.
• The Complete / Needs a fix mark shows only for a draft a check has answered for, and a component test feeds a check result.
• A polite live region says what was added, deleted or selected; a read-only workflow gets a note that says why; an agent named by the saved file stays on offer; two stages with one name say their place in the list to a screen reader.
• Tests of disabled buttons now read the reason. The agents test skips without the repository.
• Rebased onto the new wc/07a-edit-core. The e2e for add, delete and keyboard selection are in Test editing in the Designer end to end and add the changelog entry #97.

Fixes from the third adversarial review

• The read-only note spans both columns of the Designer grid, so the graph keeps the wide column (before, the note took the first cell and pushed the graph into the narrow one). A browser test measures it with the workflow set to read-only.
• An add names the new stage ("Stage agent-2 added and selected."), and every announcement is a new element, so a repeated one is read again.
• Escape is kept from React Flow only on a canvas that can select; the read-only canvas of the Execution tab keeps its default.
• Browser tests for Enter and Space on the already selected stage, and for Escape on a node.
• Rebased onto the new wc/07a-edit-core.
• Rejected: passing only a stage's own saved agent to its list (draft ids no longer map to saved stages after a save; harmless); moving the visually-hidden style out of the Execution folder (it lives in the layer below); the "press Enter" wording of the edge labels (edges cannot be focused).

Fixes from the second hands-on QA run

• A pasted launch address that would drop unsaved changes, or stop following a run, first asks to confirm. Cancel keeps the page as it is; the address can be pasted again (swap-guard.ts; unit tests, App tests for what is at risk, e2e for cancel and accept).
• After Add stage the generated name is selected, so typing replaces it (unit and e2e tests).
• The names in a field error are shown as code, without backticks.
• Rejected: Delete or Backspace on a focused node to delete the stage. There is no undo and no confirmation for a delete, a node is easy to hit by accident, and Delete stage is already reachable by Tab.

Round 6

Rebased on #98 (the session guard and the page policy). No change of its own.

Round 9: rebased on #98. No change of its own. npm test (1360 tests), lint and typecheck pass.