Workflow Diagram: Keyboard control

It should be possible to drive the workflow diagram and the editor panel from the keyboard.

I've been thinking about this a little bit and would suggest the following keybindings while the diagram has focus:

• Cursor up - select parent node
• Cursor down - select first child node
• Cursor left - select previous sibling node
• Cursor right - select next sibling node
• Enter - Open and focus the side panel / commit placeholder node
• Escape - Close the side panel / remove placeholder node
• a, insert - Add new child node

When the editor is focused, pressing CTRL + cursor should change selection in the diagram. (This won't work while monaco has focus)

Note that we need to indicate clearly when the diagram and editor have focus.

I am not sure how to switch focus between the diagram and side panel - especially when monaco has focus. This might be a good reason to want to close the side panel - although I worry about the jerkiness of selecting a node, opening the editor, making a change, closing the editor, selecting another node, and re-opening the editor.

Some related but wider questions:

Do we need an outline effect as well as a selected style for selected nodes? The outline is only visible while the diagram has focus. Should it be possible to select a node from the keyboard without opening the side panel?

Should it even be possible to close the side panel?

When opening the workflow editor, should we select and open the trigger by default?

Start with the workflow diagram and editor panel described in the issue, and trace how focus currently moves between them, including when Monaco has focus. Done would require an agreed keyboard interaction model, visible focus indication, and behavior for the listed keybindings and unresolved panel-selection questions.