canvas/src/lib/__tests__/statusDotClass.test.ts

@@ -55,10 +55,10 @@ describe("statusDotClass", () => {
 
 describe("TIER_CONFIG", () => {
   it("has entries for all four tier levels", () => {
-    expect(TIER_CONFIG).toHaveProperty(1);
-    expect(TIER_CONFIG).toHaveProperty(2);
-    expect(TIER_CONFIG).toHaveProperty(3);
-    expect(TIER_CONFIG).toHaveProperty(4);
+    expect(TIER_CONFIG).toHaveProperty("1");
+    expect(TIER_CONFIG).toHaveProperty("2");
+    expect(TIER_CONFIG).toHaveProperty("3");
+    expect(TIER_CONFIG).toHaveProperty("4");
   });
 
   it("each tier has label, color, and border fields", () => {

canvas/src/store/canvas-topology.ts

@@ -34,7 +34,22 @@ export function sortParentsBeforeChildren<T extends { id: string; parentId?: str
     visited.add(n.id);
     out.push(n);
   };
-  for (const n of nodes) visit(n);
+  // Stable-sort: visit nodes without a valid parent first (true roots → orphans → non-roots).
+  // This ensures roots appear before their children and orphans appear after true roots.
+  const trueRoots: T[] = []; // parentId undefined
+  const orphans: T[] = []; // parentId defined but parent missing
+  const nonRoots: T[] = []; // parentId defined and parent exists in set
+  for (const n of nodes) {
+    if (!n.parentId) {
+      trueRoots.push(n);
+    } else {
+      const parent = byId.get(n.parentId);
+      if (parent) nonRoots.push(n);
+      else orphans.push(n);
+    }
+  }
+  for (const n of [...trueRoots, ...orphans]) visit(n);
+  for (const n of nonRoots) visit(n);
   return out;
 }