From c72299ddcb15fefec7935504ebe10d57525ef4df Mon Sep 17 00:00:00 2001
From: Alan Lail <alail@1edtech.org>
Date: Mon, 14 Sep 2026 11:39:30 -0400
Subject: [PATCH] Fixing bug where newly added CFItems were not instantly
 appearing in the Tree View

---
 apps/editor/src/ui/editor/treePanel/TreePanelView.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/apps/editor/src/ui/editor/treePanel/TreePanelView.tsx b/apps/editor/src/ui/editor/treePanel/TreePanelView.tsx
index 016ad54..00f9cca 100644
--- a/apps/editor/src/ui/editor/treePanel/TreePanelView.tsx
+++ b/apps/editor/src/ui/editor/treePanel/TreePanelView.tsx
@@ -182,7 +182,6 @@ export default function TreePanelView({ availableFrameworks = [], serverFramewor
     selectedNodeId,
     onNodesChange,
     addChild,
-    addDetachedItem,
   } = useEditor()
 
   const activeFrameworkId = frameworkNodeId
@@ -217,6 +216,11 @@ export default function TreePanelView({ availableFrameworks = [], serverFramewor
       return next
     })
   }, [])
+
+  const handleAddChild = useCallback((parentId: string) => {
+    addChild(parentId)
+    setLeftExpandedIds((prev) => (prev.has(parentId) ? prev : new Set(prev).add(parentId)))
+  }, [addChild])
   // ── SVG overlay state ──
   const [lineCoords, setLineCoords] = useState<LineCoord[]>([])
   const [hoveredLineId, setHoveredLineId] = useState<string | null>(null)
@@ -846,7 +850,7 @@ export default function TreePanelView({ availableFrameworks = [], serverFramewor
                 expandedIds={leftExpandedIds}
                 onToggleExpand={handleLeftToggleExpand}
                 onSelect={handleSelect}
-                onAddChild={addChild}
+                onAddChild={handleAddChild}
                 isDraggable={Boolean(expandedTargetFramework) && isSourcePublished}
                 onDragStart={() => { /* cursor hint only */ }}
                 associationCounts={leftAssociationCounts}
@@ -865,7 +869,7 @@ export default function TreePanelView({ availableFrameworks = [], serverFramewor
             <div className="shrink-0 border-t border-black/10 p-3">
               <button
                 type="button"
-                onClick={addDetachedItem}
+                onClick={() => { if (frameworkNodeId) addChild(frameworkNodeId) }}
                 className="flex w-full items-center justify-center gap-1.5 rounded-lg border border-dashed border-slate-300 px-3 py-2 text-xs text-slate-500 transition-colors hover:border-teal-400 hover:text-teal-600 focus:outline-none"
               >
                 <Plus className="h-3.5 w-3.5" />