refactor: Update forms for inline safety, add MetadataSidePanel, update layout

- NodeFormDecision: option reorder via onUpdate (no premature store writes)
- NodePicker: add allowCreate prop (default true) to hide Create New options
  during inline canvas editing, preventing side-effect node creation
- MetadataSidePanel: 320px right slide-in overlay wrapping TreeMetadataForm,
  closes on backdrop click, close button, and Escape key
- TreeEditorLayout: Flow mode now renders full-width TreeCanvas + MetadataSidePanel
  overlay; Code mode unchanged (Monaco + preview split)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/components/tree-editor/NodePicker.tsx

@@ -35,6 +35,9 @@ interface NodePickerProps {
   error?: string
   /** Callback when a new node is created (receives the new node ID) */
   onNodeCreated?: (nodeId: string) => void
+  /** Whether to show the "Create New Node" options. Default: true.
+   *  Set to false in inline canvas editing to prevent premature store writes. */
+  allowCreate?: boolean
 }
 
 export function NodePicker({
@@ -46,7 +49,8 @@ export function NodePicker({
   className,
   label,
   error,
-  onNodeCreated
+  onNodeCreated,
+  allowCreate = true
 }: NodePickerProps) {
   const { getAvailableTargetNodes, addNode, updateNode } = useTreeEditorStore()
   const availableNodes = getAvailableTargetNodes(excludeNodeId)
@@ -201,12 +205,14 @@ export function NodePicker({
           >
             <option value="">{placeholder}</option>
 
-            {/* Create new options */}
-            <optgroup label="Create New Node">
-              <option value={CREATE_DECISION}>+ New Decision (question)</option>
-              <option value={CREATE_ACTION}>+ New Action (task)</option>
-              <option value={CREATE_SOLUTION}>+ New Solution (endpoint)</option>
-            </optgroup>
+            {/* Create new options — hidden when allowCreate=false (e.g. canvas inline editing) */}
+            {allowCreate && (
+              <optgroup label="Create New Node">
+                <option value={CREATE_DECISION}>+ New Decision (question)</option>
+                <option value={CREATE_ACTION}>+ New Action (task)</option>
+                <option value={CREATE_SOLUTION}>+ New Solution (endpoint)</option>
+              </optgroup>
+            )}
 
             {/* Existing nodes grouped by type */}
             {groupedNodes.decisions.length > 0 && (