Improve tree editor modal UX: cancel/save and inline node naming

Change 1: Add Cancel button and defer saving until Done is clicked
- NodeEditorModal now uses local draft state instead of updating store directly
- Cancel button discards changes; Done button commits to store
- If editing a brand new node, Cancel deletes it entirely
- NodeList tracks isEditingNewNode to pass to modal

Change 2: Inline node naming when creating from NodePicker dropdown
- Selecting "+ New Decision/Action/Solution" shows inline title input
- User enters title before node is created (Enter to create, Escape to cancel)
- Node appears in dropdown with human-readable title immediately

Change 3: Improved dropdown labels
- Format changed from "UUID (UUID...)" to "Title (UUID...)"
- Untitled nodes show "Untitled Question" or "Untitled {type}"
- Root node shows "Root Question (root)" when empty

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

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

@@ -1,4 +1,4 @@
-import { useMemo } from 'react'
+import { useMemo, useState, useRef, useEffect } from 'react'
 import { useTreeEditorStore } from '@/store/treeEditorStore'
 import type { NodeType } from '@/types'
 import { cn } from '@/lib/utils'
@@ -16,6 +16,13 @@ const NODE_TYPE_SYMBOLS: Record<NodeType, string> = {
   solution: '✓'   // Checkmark for solution
 }
 
+// Node type labels for UI
+const NODE_TYPE_LABELS: Record<NodeType, string> = {
+  decision: 'Decision',
+  action: 'Action',
+  solution: 'Solution'
+}
+
 interface NodePickerProps {
   value: string
   onChange: (nodeId: string) => void
@@ -41,9 +48,21 @@ export function NodePicker({
   error,
   onNodeCreated
 }: NodePickerProps) {
-  const { getAvailableTargetNodes, addNode } = useTreeEditorStore()
+  const { getAvailableTargetNodes, addNode, updateNode } = useTreeEditorStore()
   const availableNodes = getAvailableTargetNodes(excludeNodeId)
 
+  // State for inline node creation
+  const [creatingNodeType, setCreatingNodeType] = useState<NodeType | null>(null)
+  const [newNodeTitle, setNewNodeTitle] = useState('')
+  const titleInputRef = useRef<HTMLInputElement>(null)
+
+  // Focus the title input when creating a new node
+  useEffect(() => {
+    if (creatingNodeType && titleInputRef.current) {
+      titleInputRef.current.focus()
+    }
+  }, [creatingNodeType])
+
   // Group nodes by type
   const groupedNodes = useMemo(() => {
     const decisions = availableNodes.filter(n => n.type === 'decision')
@@ -66,20 +85,54 @@ export function NodePicker({
         return
       }
 
-      // Create the new node as a child of the parent
-      const newNodeId = addNode(parentNodeId, nodeType)
-
-      // Set this new node as the selected value
-      onChange(newNodeId)
-
-      // Notify parent if callback provided
-      onNodeCreated?.(newNodeId)
+      // Show inline title input instead of immediately creating
+      setCreatingNodeType(nodeType)
+      setNewNodeTitle('')
     } else {
       // Normal selection
       onChange(selectedValue)
     }
   }
 
+  const handleCreateNode = () => {
+    if (!creatingNodeType || !newNodeTitle.trim()) return
+
+    // Create the new node as a child of the parent
+    const newNodeId = addNode(parentNodeId, creatingNodeType)
+
+    // Set the title/question on the new node
+    if (creatingNodeType === 'decision') {
+      updateNode(newNodeId, { question: newNodeTitle.trim() })
+    } else {
+      updateNode(newNodeId, { title: newNodeTitle.trim() })
+    }
+
+    // Set this new node as the selected value
+    onChange(newNodeId)
+
+    // Notify parent if callback provided
+    onNodeCreated?.(newNodeId)
+
+    // Reset creation state
+    setCreatingNodeType(null)
+    setNewNodeTitle('')
+  }
+
+  const handleCancelCreate = () => {
+    setCreatingNodeType(null)
+    setNewNodeTitle('')
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && newNodeTitle.trim()) {
+      e.preventDefault()
+      handleCreateNode()
+    } else if (e.key === 'Escape') {
+      e.preventDefault()
+      handleCancelCreate()
+    }
+  }
+
   // Find the label for the currently selected node
   const selectedNode = availableNodes.find(n => n.id === value)
 
@@ -90,62 +143,110 @@ export function NodePicker({
           {label}
         </label>
       )}
-      <select
-        value={value || ''}
-        onChange={(e) => handleChange(e.target.value)}
-        className={cn(
-          'block w-full rounded-md border px-3 py-2 text-sm',
-          'bg-background text-foreground',
-          'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary',
-          error ? 'border-destructive' : 'border-input'
-        )}
-      >
-        <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>
+      {/* Inline node creation UI */}
+      {creatingNodeType ? (
+        <div className="space-y-2">
+          <div className="flex items-center gap-2 rounded-md border border-primary bg-primary/5 p-2">
+            <span className="text-xs font-medium text-primary">
+              New {NODE_TYPE_LABELS[creatingNodeType]}:
+            </span>
+            <input
+              ref={titleInputRef}
+              type="text"
+              value={newNodeTitle}
+              onChange={(e) => setNewNodeTitle(e.target.value)}
+              onKeyDown={handleKeyDown}
+              placeholder={creatingNodeType === 'decision' ? 'Enter question...' : 'Enter title...'}
+              className={cn(
+                'flex-1 rounded-md border border-input px-2 py-1 text-sm',
+                'bg-background text-foreground placeholder:text-muted-foreground',
+                'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary'
+              )}
+            />
+          </div>
+          <div className="flex gap-2">
+            <button
+              type="button"
+              onClick={handleCancelCreate}
+              className="flex-1 rounded-md border border-input px-3 py-1.5 text-xs font-medium hover:bg-accent"
+            >
+              Cancel
+            </button>
+            <button
+              type="button"
+              onClick={handleCreateNode}
+              disabled={!newNodeTitle.trim()}
+              className={cn(
+                'flex-1 rounded-md px-3 py-1.5 text-xs font-medium',
+                'bg-primary text-primary-foreground hover:bg-primary/90',
+                'disabled:opacity-50 disabled:cursor-not-allowed'
+              )}
+            >
+              Create
+            </button>
+          </div>
+        </div>
+      ) : (
+        <>
+          <select
+            value={value || ''}
+            onChange={(e) => handleChange(e.target.value)}
+            className={cn(
+              'block w-full rounded-md border px-3 py-2 text-sm',
+              'bg-background text-foreground',
+              'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary',
+              error ? 'border-destructive' : 'border-input'
+            )}
+          >
+            <option value="">{placeholder}</option>
 
-        {/* Existing nodes grouped by type */}
-        {groupedNodes.decisions.length > 0 && (
-          <optgroup label="── Decisions ──">
-            {groupedNodes.decisions.map((node) => (
-              <option key={node.id} value={node.id}>
-                {NODE_TYPE_SYMBOLS.decision} {node.label}
-              </option>
-            ))}
-          </optgroup>
-        )}
+            {/* 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>
 
-        {groupedNodes.actions.length > 0 && (
-          <optgroup label="── Actions ──">
-            {groupedNodes.actions.map((node) => (
-              <option key={node.id} value={node.id}>
-                {NODE_TYPE_SYMBOLS.action} {node.label}
-              </option>
-            ))}
-          </optgroup>
-        )}
+            {/* Existing nodes grouped by type */}
+            {groupedNodes.decisions.length > 0 && (
+              <optgroup label="── Decisions ──">
+                {groupedNodes.decisions.map((node) => (
+                  <option key={node.id} value={node.id}>
+                    {NODE_TYPE_SYMBOLS.decision} {node.label}
+                  </option>
+                ))}
+              </optgroup>
+            )}
 
-        {groupedNodes.solutions.length > 0 && (
-          <optgroup label="── Solutions ──">
-            {groupedNodes.solutions.map((node) => (
-              <option key={node.id} value={node.id}>
-                {NODE_TYPE_SYMBOLS.solution} {node.label}
-              </option>
-            ))}
-          </optgroup>
-        )}
-      </select>
+            {groupedNodes.actions.length > 0 && (
+              <optgroup label="── Actions ──">
+                {groupedNodes.actions.map((node) => (
+                  <option key={node.id} value={node.id}>
+                    {NODE_TYPE_SYMBOLS.action} {node.label}
+                  </option>
+                ))}
+              </optgroup>
+            )}
 
-      {/* Show what's selected */}
-      {value && selectedNode && (
-        <p className="mt-1 text-xs text-muted-foreground">
-          → {selectedNode.label}
-        </p>
+            {groupedNodes.solutions.length > 0 && (
+              <optgroup label="── Solutions ──">
+                {groupedNodes.solutions.map((node) => (
+                  <option key={node.id} value={node.id}>
+                    {NODE_TYPE_SYMBOLS.solution} {node.label}
+                  </option>
+                ))}
+              </optgroup>
+            )}
+          </select>
+
+          {/* Show what's selected */}
+          {value && selectedNode && (
+            <p className="mt-1 text-xs text-muted-foreground">
+              → {selectedNode.label}
+            </p>
+          )}
+        </>
       )}
 
       {error && <p className="mt-1 text-xs text-destructive">{error}</p>}