Tidy up

packages/client/src/components/ClientApp.svelte

@@ -63,10 +63,10 @@
 
           // If using devtools, find the first screen matching our role
           if ($devToolsStore.role) {
-            firstRoute =
-              $screenStore.screens.filter(
+            const roleRoutes = $screenStore.screens.filter(
               screen => screen.routing?.roleId === $devToolsStore.role
-              )[0]?.routing?.route || "/"
+            )
+            firstRoute = roleRoutes[0]?.routing?.route || "/"
           }
 
           // Otherwise just use the fist route
@@ -164,12 +164,10 @@
                   </div>
                 </div>
 
-                <!-- Selection indicators should be bounded by device -->
-                <!--
-                  We don't want to key these by componentID as they control their own
-                  re-mounting to avoid flashes.
-                -->
+                <!-- Preview and dev tools utilities  -->
+                {#if $appStore.isDevApp}
                   <SelectionIndicator />
+                {/if}
                 {#if $builderStore.inBuilder || $devToolsStore.allowSelection}
                   <HoverIndicator />
                 {/if}
@@ -219,6 +217,7 @@
     justify-content: flex-start;
     align-items: stretch;
   }
+
   #app-body {
     flex: 1 1 auto;
     display: flex;

packages/server/src/middleware/currentapp.js

@@ -70,7 +70,7 @@ module.exports = async (ctx, next) => {
     const isDevApp = appId && isDevAppID(appId)
     const roleHeader = ctx.request.headers[Headers.PREVIEW_ROLE]
     if (isBuilder && isDevApp && roleHeader) {
-      // Ensure the role is valid ensuring a definition exists
+      // Ensure the role is valid by ensuring a definition exists
       try {
         await getRole(roleHeader)
         roleId = roleHeader