From ab75975eab00e2eff7cb959395bb89df8b866ecd Mon Sep 17 00:00:00 2001
From: Neil Dorin <ndorin@pepperdash.com>
Date: Thu, 16 Apr 2026 21:14:12 -0600
Subject: [PATCH 1/5] feat: Remove tsconfig.tsbuildinfo file as part of project
 cleanup

---
 tsconfig.tsbuildinfo | 1 -
 1 file changed, 1 deletion(-)
 delete mode 100644 tsconfig.tsbuildinfo

diff --git a/tsconfig.tsbuildinfo b/tsconfig.tsbuildinfo
deleted file mode 100644
index 1b6a8f0..0000000
--- a/tsconfig.tsbuildinfo
+++ /dev/null
@@ -1 +0,0 @@
-{"root":["./src/app.test.tsx","./src/app.tsx","./src/index.tsx","./src/react-app-env.d.ts","./src/reportwebvitals.ts","./src/setuptests.ts","./src/features/apipathdetaildrawer.tsx","./src/features/apipaths.tsx","./src/features/configfile.tsx","./src/features/devicedetail.tsx","./src/features/devicelist.tsx","./src/features/errorboundary.tsx","./src/features/errorbox.tsx","./src/features/initializationexceptions.tsx","./src/features/loginform.tsx","./src/features/mainlayout.tsx","./src/features/mobilecontrol.tsx","./src/features/requireauth.tsx","./src/features/routing.tsx","./src/features/routingdevicenode.tsx","./src/features/tielineedge.tsx","./src/features/topnav.tsx","./src/features/types.tsx","./src/features/versions.tsx","./src/features/debugconsole/consolewindow.tsx","./src/features/debugconsole/debugconsole.tsx","./src/features/debugconsole/debugfilters.tsx","./src/features/debugconsole/devicefilterdropdown.tsx","./src/features/debugconsole/logmessagedetaildrawer.tsx","./src/features/debugconsole/minimumlogleveldropdown.tsx","./src/features/debugconsole/restartconfirmmodal.tsx","./src/features/debugconsole/debugconsts.ts","./src/features/debugconsole/hooks/usefilteredmessages.ts","./src/services/httpservice.ts","./src/shared/filterclearbutton.tsx","./src/shared/filterdropdownsearchparams.tsx","./src/shared/filtersearchtext.tsx","./src/shared/headerscrollerfooter.tsx","./src/shared/listfiltersheader.tsx","./src/shared/tablecellspacer.tsx","./src/shared/functions/meetsminimumversion.ts","./src/shared/hooks/useappparams.ts","./src/shared/icons/objecticons.ts","./src/shared/icons/othericons.ts","./src/shared/icons/index.tsx","./src/shared/types/idlabel.ts","./src/shared/types/logmessage.ts","./src/store/apislice.ts","./src/store/hooks.ts","./src/store/store.ts","./src/store/websocketmiddleware.ts","./src/store/websocketslice.ts","./src/store/auth/authselectors.ts","./src/store/auth/authslice.ts","./src/store/commonui/commonuihooks.ts","./src/store/commonui/commonuiselectors.ts","./src/store/commonui/commonuislice.ts","./src/store/commonui/commonuistate.ts","./src/store/debugconsole/debugconsoleselectors.ts","./src/store/debugconsole/debugconsoleslice.ts","./vite.config.ts"],"version":"6.0.2"}
\ No newline at end of file

From 9c7994712b922c2a5e354c03c44abcec6856bbbd Mon Sep 17 00:00:00 2001
From: Neil Dorin <ndorin@pepperdash.com>
Date: Thu, 16 Apr 2026 21:19:37 -0600
Subject: [PATCH 2/5] feat: Update routing for login and enhance LoginForm UI
 with title

---
 src/App.tsx                | 6 ++----
 src/features/LoginForm.tsx | 3 ++-
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index f150db5..03a8f52 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -52,12 +52,10 @@ function App() {
       <Suspense fallback={null}>
         <Routes>
         <Route path="/" element={<Navigate to="/login" replace />} />
-        <Route path="/login" element={<MainLayout isConnected={isConnected} />}>
-          <Route index element={<LoginForm />} />
-        </Route>
+        <Route path="/login" element={<LoginForm />} />
           
+        <Route path=":appId/login" element={<LoginForm />} />
         <Route path=":appId" element={<MainLayout isConnected={isConnected} />}>
-          <Route path="login" element={<LoginForm />} />
           <Route element={<RequireAuth />}>
             <Route path="versions" element={<Versions />} />
             <Route path="apiPaths" element={<ApiPaths />} />
diff --git a/src/features/LoginForm.tsx b/src/features/LoginForm.tsx
index 8e0d44f..2153e5b 100644
--- a/src/features/LoginForm.tsx
+++ b/src/features/LoginForm.tsx
@@ -68,7 +68,8 @@ const LoginForm = () => {
   }
 
   return (
-    <div className="d-flex justify-content-center align-items-center h-100">
+    <div className="d-flex flex-column justify-content-center align-items-center h-100">
+      <h1 className="mb-5 text-center">PepperDash Essentials Developer Tools</h1>
       <div className="w-100" style={{ maxWidth: '360px' }}>
         <h2 className="mb-4">Sign In</h2>
         {error && <Alert variant="danger">{error}</Alert>}

From 86a27c31462b797a52cb1a277d1eeb20f999a4b7 Mon Sep 17 00:00:00 2001
From: Neil Dorin <ndorin@pepperdash.com>
Date: Fri, 1 May 2026 08:50:19 -0600
Subject: [PATCH 3/5] feat: Enhance navigation links with AppNavLink component
 and add disabled state styling

---
 src/features/DebugConsole/DebugFilters.tsx |   2 +-
 src/features/InitializationExceptions.tsx  |  12 +--
 src/features/LoginForm.tsx                 |   6 +-
 src/features/MobileControl.tsx             |   1 -
 src/features/Routing.tsx                   |  15 ++-
 src/features/TopNav.tsx                    | 120 +++++----------------
 src/styles.scss                            |   4 +
 7 files changed, 54 insertions(+), 106 deletions(-)

diff --git a/src/features/DebugConsole/DebugFilters.tsx b/src/features/DebugConsole/DebugFilters.tsx
index 36ae562..1ca03b1 100644
--- a/src/features/DebugConsole/DebugFilters.tsx
+++ b/src/features/DebugConsole/DebugFilters.tsx
@@ -33,7 +33,7 @@ export const DebugFilters = () => {
       <div className="col-12 d-none d-lg-block">
         <DeviceFilterDropdown items={items} />
         <Button
-          variant="outline"
+          variant="outline-secondary"
           className="py-1 ms-1"
           onClick={() => dispatch(debugConsoleActions.clearAllFilters())}
         >
diff --git a/src/features/InitializationExceptions.tsx b/src/features/InitializationExceptions.tsx
index 6c372a3..b14e77a 100644
--- a/src/features/InitializationExceptions.tsx
+++ b/src/features/InitializationExceptions.tsx
@@ -1,5 +1,5 @@
 import { skipToken } from "@reduxjs/toolkit/query";
-import { useState } from "react";
+import { Fragment, useState } from "react";
 import useAppParams from "../shared/hooks/useAppParams";
 import {
   EssentialsException,
@@ -12,8 +12,6 @@ const InitializationExceptions = () => {
     appId ? { appId } : skipToken,
   );
 
-  console.log("Initialization exceptions:", data?.Exceptions);
-
   const [expandedIndex, setExpandedIndex] = useState<number | null>(null);
 
   if (isLoading) return <div className="p-3">Loading…</div>;
@@ -48,8 +46,8 @@ const InitializationExceptions = () => {
             {data.Exceptions.map((ex: EssentialsException, idx: number) => {
               const isExpanded = expandedIndex === idx;
               return (
-                <>
-                  <tr key={`ex-${idx}`}>
+                <Fragment key={`ex-${idx}`}>
+                  <tr>
                     <td className="text-muted">{idx + 1}</td>
                     <td>
                       <span className="text-danger fw-semibold">
@@ -70,7 +68,7 @@ const InitializationExceptions = () => {
                     </td>
                   </tr>
                   {isExpanded && ex.StackTrace && (
-                    <tr key={`ex-${idx}-trace`}>
+                    <tr>
                       <td colSpan={3} className="p-0">
                         <pre
                           className="m-0 p-3 bg-light text-muted"
@@ -81,7 +79,7 @@ const InitializationExceptions = () => {
                       </td>
                     </tr>
                   )}
-                </>
+                </Fragment>
               );
             })}
           </tbody>
diff --git a/src/features/LoginForm.tsx b/src/features/LoginForm.tsx
index 2153e5b..9339130 100644
--- a/src/features/LoginForm.tsx
+++ b/src/features/LoginForm.tsx
@@ -3,7 +3,7 @@ import { Alert, Button, Form, Spinner } from 'react-bootstrap';
 import { Navigate, useLocation, useNavigate } from 'react-router-dom';
 import useAppParams from '../shared/hooks/useAppParams';
 import { useSetLoginCredentialsMutation } from '../store/apiSlice';
-import { selectIsAuthenticated } from '../store/auth/authSelectors';
+import { selectAvailableApps, selectIsAuthenticated } from '../store/auth/authSelectors';
 import { authActions } from '../store/auth/authSlice';
 import { useAppDispatch, useAppSelector } from '../store/hooks';
 
@@ -15,6 +15,7 @@ const ALL_APP_IDS = [
 const LoginForm = () => {
   const { appId } = useAppParams();
   const isAuthenticated = useAppSelector(selectIsAuthenticated);
+  const availableApps = useAppSelector(selectAvailableApps);
   const dispatch = useAppDispatch();
   const navigate = useNavigate();
   const location = useLocation();
@@ -30,9 +31,10 @@ const LoginForm = () => {
 
   const isValidAppId = appId && ALL_APP_IDS.includes(appId);
   const probeAppId = isValidAppId ? appId : ALL_APP_IDS[0];
+  const safeAppId = isValidAppId ? appId : (availableApps[0] ?? probeAppId);
 
   if (isAuthenticated) {
-    return <Navigate to={from ?? `/${appId}/versions`} replace />;
+    return <Navigate to={from ?? `/${safeAppId}/versions`} replace />;
   }
 
   async function handleSubmit(e: FormEvent) {
diff --git a/src/features/MobileControl.tsx b/src/features/MobileControl.tsx
index c8750dd..2bfdb2b 100644
--- a/src/features/MobileControl.tsx
+++ b/src/features/MobileControl.tsx
@@ -16,7 +16,6 @@ import {
 
 const MobileControl = () => {
   const { appId } = useAppParams();
-  console.log("AppId in MobileControl", appId);
 
   const { data: info } = useGetMobileControlInfoQuery(
     appId ? { appId, deviceKey: "appServer" } : skipToken,
diff --git a/src/features/Routing.tsx b/src/features/Routing.tsx
index 4672ebb..f505eeb 100644
--- a/src/features/Routing.tsx
+++ b/src/features/Routing.tsx
@@ -125,13 +125,20 @@ function buildGraph(
       : d,
   );
 
+   const effectiveDeviceKeys = new Set(effectiveDevices.map((d) => d.key));
   // Collect one unique device-pair edge per source→destination (dagre only
-  // needs connectivity, not multiplicity, for rank assignment).
+  // needs connectivity, not multiplicity, for rank assignment). Only use
+  // visible tie lines whose endpoints are present in the visible device set
+  // so hidden devices cannot be implicitly added to the layout graph.
   const uniquePairs = [
     ...new Set(
-      data.tieLines.map(
-        (tl) => `${tl.sourceDeviceKey}|${tl.destinationDeviceKey}`,
-      ),
+      visibleTieLines
+        .filter(
+          (tl) =>
+            effectiveDeviceKeys.has(tl.sourceDeviceKey) &&
+            effectiveDeviceKeys.has(tl.destinationDeviceKey),
+        )
+        .map((tl) => `${tl.sourceDeviceKey}|${tl.destinationDeviceKey}`),
     ),
   ];
 
diff --git a/src/features/TopNav.tsx b/src/features/TopNav.tsx
index 956aa26..9a9cf06 100644
--- a/src/features/TopNav.tsx
+++ b/src/features/TopNav.tsx
@@ -8,6 +8,25 @@ import { useGetVersionsQuery } from "../store/apiSlice";
 import { selectAvailableApps } from "../store/auth/authSelectors";
 import { useAppSelector } from "../store/hooks";
 
+const AppNavLink = ({
+  appId,
+  path,
+  children,
+}: {
+  appId: string | undefined;
+  path: string;
+  children: React.ReactNode;
+}) => {
+  if (!appId) {
+    return <span className="me-3 text-muted nav-link-disabled">{children}</span>;
+  }
+  return (
+    <NavLink className="me-3" to={`/${appId}/${path}`}>
+      {children}
+    </NavLink>
+  );
+};
+
 const TopNav = ({ isConnected }: { isConnected: boolean }) => {
   const location = useLocation();
   const params = useAppParams();
@@ -71,100 +90,19 @@ const TopNav = ({ isConnected }: { isConnected: boolean }) => {
           </Dropdown>
         )}
         <Nav className="me-auto">
-          <NavLink
-            className={
-              location.pathname.includes(`/${params.appId}/versions`)
-                ? "text-secondary me-3"
-                : "me-3"
-            }
-            to={`/${params.appId}/versions`}
-          >
-            Versions
-          </NavLink>
-          <NavLink
-            className={
-              location.pathname.includes(`/${params.appId}/apiPaths`)
-                ? "text-secondary me-3"
-                : "me-3"
-            }
-            to={`/${params.appId}/apiPaths`}
-          >
-            API Paths
-          </NavLink>
+          <AppNavLink appId={params.appId} path="versions">Versions</AppNavLink>
+          <AppNavLink appId={params.appId} path="apiPaths">API Paths</AppNavLink>
           {showInitializationExceptions && (
-            <NavLink
-              className={
-                location.pathname.includes(
-                  `/${params.appId}/initializationExceptions`,
-                )
-                  ? "text-secondary me-3"
-                  : "me-3"
-              }
-              to={`/${params.appId}/initializationExceptions`}
-            >
+            <AppNavLink appId={params.appId} path="initializationExceptions">
               Initialization Exceptions
-            </NavLink>
+            </AppNavLink>
           )}
-          <NavLink
-            className={
-              location.pathname.includes(`/${params.appId}/console`)
-                ? "text-secondary me-3"
-                : "me-3"
-            }
-            to={`/${params.appId}/console`}
-          >
-            Debug Console
-          </NavLink>
-          <NavLink
-            className={
-              location.pathname.includes(`/${params.appId}/config`)
-                ? "text-secondary me-3"
-                : "me-3"
-            }
-            to={`/${params.appId}/config`}
-          >
-            Config File
-          </NavLink>
-          <NavLink
-            className={
-              location.pathname.includes(`/${params.appId}/devices`)
-                ? "text-secondary me-3"
-                : "me-3"
-            }
-            to={`/${params.appId}/devices`}
-          >
-            Devices
-          </NavLink>
-          <NavLink
-            className={
-              location.pathname.includes(`/${params.appId}/types`)
-                ? "text-secondary me-3"
-                : "me-3"
-            }
-            to={`/${params.appId}/types`}
-          >
-            Types
-          </NavLink>
-          <NavLink
-            className={
-              location.pathname.includes(`/${params.appId}/routing`)
-                ? "text-secondary me-3"
-                : "me-3"
-            }
-            to={`/${params.appId}/routing`}
-          >
-            Routing
-          </NavLink>
-          <NavLink
-            className={
-              location.pathname.includes(`/${params.appId}/mobileControl`)
-                ? "text-secondary me-3"
-                : "me-3"
-            }
-            to={`/${params.appId}/mobileControl`}
-          >
-            Mobile Control
-          </NavLink>
+          <AppNavLink appId={params.appId} path="console">Debug Console</AppNavLink>
+          <AppNavLink appId={params.appId} path="config">Config File</AppNavLink>
+          <AppNavLink appId={params.appId} path="devices">Devices</AppNavLink>
+          <AppNavLink appId={params.appId} path="types">Types</AppNavLink>
+          <AppNavLink appId={params.appId} path="routing">Routing</AppNavLink>
+          <AppNavLink appId={params.appId} path="mobileControl">Mobile Control</AppNavLink>
         </Nav>
         <div className="d-flex align-items-center">
           <IconDarkEllipse
diff --git a/src/styles.scss b/src/styles.scss
index 6a22963..78d5600 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -894,3 +894,7 @@ textarea:hover {
 //   max-height: 25rem;
 //   overflow: hidden ;
 // }
+
+.nav-link-disabled {
+  cursor: default;
+}

From 91933baffa4a529bf44bab71f53015a46e9100ae Mon Sep 17 00:00:00 2001
From: Neil Dorin <ndorin@pepperdash.com>
Date: Fri, 1 May 2026 14:09:39 -0600
Subject: [PATCH 4/5] feat: Update app version to 1.0.0-local, enhance TopNav
 component layout, and define APP_VERSION in Vite config

---
 package.json            |  2 +-
 src/features/TopNav.tsx | 60 ++++++++++++++++++++++++++++-------------
 src/vite-env.d.ts       |  2 ++
 vite.config.ts          | 43 ++++++++++++++++++-----------
 4 files changed, 73 insertions(+), 34 deletions(-)
 create mode 100644 src/vite-env.d.ts

diff --git a/package.json b/package.json
index dd62db1..ab8575c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "essentials-web-config-app",
-  "version": "0.1.0",
+  "version": "1.0.0-local",
   "type": "module",
   "private": true,
   "dependencies": {
diff --git a/src/features/TopNav.tsx b/src/features/TopNav.tsx
index 9a9cf06..93b5db1 100644
--- a/src/features/TopNav.tsx
+++ b/src/features/TopNav.tsx
@@ -18,7 +18,9 @@ const AppNavLink = ({
   children: React.ReactNode;
 }) => {
   if (!appId) {
-    return <span className="me-3 text-muted nav-link-disabled">{children}</span>;
+    return (
+      <span className="me-3 text-muted nav-link-disabled">{children}</span>
+    );
   }
   return (
     <NavLink className="me-3" to={`/${appId}/${path}`}>
@@ -32,10 +34,12 @@ const TopNav = ({ isConnected }: { isConnected: boolean }) => {
   const params = useAppParams();
   const availableApps = useAppSelector(selectAvailableApps);
 
+  const reactAppVersion = APP_VERSION;
+
   // Single version query for the currently active app only (used for feature flagging)
   const { data: currentVersions } = useGetVersionsQuery(
-    params.appId ? { appId: params.appId } : { appId: '' },
-    { skip: !params.appId }
+    params.appId ? { appId: params.appId } : { appId: "" },
+    { skip: !params.appId },
   );
 
   const appIdOptions = availableApps;
@@ -90,27 +94,47 @@ const TopNav = ({ isConnected }: { isConnected: boolean }) => {
           </Dropdown>
         )}
         <Nav className="me-auto">
-          <AppNavLink appId={params.appId} path="versions">Versions</AppNavLink>
-          <AppNavLink appId={params.appId} path="apiPaths">API Paths</AppNavLink>
+          <AppNavLink appId={params.appId} path="versions">
+            Versions
+          </AppNavLink>
+          <AppNavLink appId={params.appId} path="apiPaths">
+            API Paths
+          </AppNavLink>
           {showInitializationExceptions && (
             <AppNavLink appId={params.appId} path="initializationExceptions">
               Initialization Exceptions
             </AppNavLink>
           )}
-          <AppNavLink appId={params.appId} path="console">Debug Console</AppNavLink>
-          <AppNavLink appId={params.appId} path="config">Config File</AppNavLink>
-          <AppNavLink appId={params.appId} path="devices">Devices</AppNavLink>
-          <AppNavLink appId={params.appId} path="types">Types</AppNavLink>
-          <AppNavLink appId={params.appId} path="routing">Routing</AppNavLink>
-          <AppNavLink appId={params.appId} path="mobileControl">Mobile Control</AppNavLink>
+          <AppNavLink appId={params.appId} path="console">
+            Debug Console
+          </AppNavLink>
+          <AppNavLink appId={params.appId} path="config">
+            Config File
+          </AppNavLink>
+          <AppNavLink appId={params.appId} path="devices">
+            Devices
+          </AppNavLink>
+          <AppNavLink appId={params.appId} path="types">
+            Types
+          </AppNavLink>
+          <AppNavLink appId={params.appId} path="routing">
+            Routing
+          </AppNavLink>
+          <AppNavLink appId={params.appId} path="mobileControl">
+            Mobile Control
+          </AppNavLink>
         </Nav>
-        <div className="d-flex align-items-center">
-          <IconDarkEllipse
-            className={isConnected ? "text-success" : "text-danger"}
-          />
-          <span className="ms-2">
-            Debug Console {isConnected ? "Connected" : "Disconnected"}
-          </span>
+        <div className="d-flex flex-column align-items-end">
+          <span>Version: {reactAppVersion}</span>
+
+          <div className="d-flex align-items-center">
+            <IconDarkEllipse
+              className={isConnected ? "text-success" : "text-danger"}
+            />
+            <span className="ms-2">
+              Debug Console {isConnected ? "Connected" : "Disconnected"}
+            </span>
+          </div>
         </div>
       </div>
     </Navbar>
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100644
index 0000000..28929cc
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="vite/client" />
+declare const APP_VERSION: string;
\ No newline at end of file
diff --git a/vite.config.ts b/vite.config.ts
index ba76fcb..79cafa9 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,31 +1,44 @@
-import react from '@vitejs/plugin-react';
-import { defineConfig, loadEnv } from 'vite';
-import svgr from 'vite-plugin-svgr';
+import react from "@vitejs/plugin-react";
+import { defineConfig, loadEnv } from "vite";
+import svgr from "vite-plugin-svgr";
 
 export default defineConfig(({ mode }) => {
-  const env = loadEnv(mode, process.cwd(), '');
+  const env = loadEnv(mode, process.cwd(), "");
 
   const programHost = env.PROGRAM_HOST;
-  if (!programHost && mode !== 'test') {
-    console.warn('Warning: PROGRAM_HOST is not set — proxy will not be configured.');
+  if (!programHost && mode !== "test") {
+    console.warn(
+      "Warning: PROGRAM_HOST is not set — proxy will not be configured.",
+    );
   }
 
   return {
-    base: '/cws/debug/',
-    plugins: [react(), svgr({ include: '**/*.svg', svgrOptions: { exportType: 'named' } })],
+    base: "/cws/debug/",
+    plugins: [
+      react(),
+      svgr({ include: "**/*.svg", svgrOptions: { exportType: "named" } }),
+    ],
+    define: {
+      APP_VERSION: JSON.stringify(process.env.npm_package_version),
+    },
     server: {
       proxy: programHost
         ? {
-            '^/cws/.*/api/.*': {
+            "^/cws/.*/api/.*": {
               target: programHost,
               changeOrigin: true,
               secure: false,
               configure: (proxy) => {
-                proxy.on('proxyReq', (proxyReq) => {
-                  const referer = proxyReq.getHeader('referer') as string | undefined;
+                proxy.on("proxyReq", (proxyReq) => {
+                  const referer = proxyReq.getHeader("referer") as
+                    | string
+                    | undefined;
                   if (referer) {
-                    const newReferer = referer.replace(/https:\/\/localhost:.*/, programHost);
-                    proxyReq.setHeader('referer', newReferer);
+                    const newReferer = referer.replace(
+                      /https:\/\/localhost:.*/,
+                      programHost,
+                    );
+                    proxyReq.setHeader("referer", newReferer);
                   }
                 });
               },
@@ -35,8 +48,8 @@ export default defineConfig(({ mode }) => {
     },
     test: {
       globals: true,
-      environment: 'jsdom',
-      setupFiles: './src/setupTests.ts',
+      environment: "jsdom",
+      setupFiles: "./src/setupTests.ts",
     },
   };
 });

From 1ba566ff693dac0f40d42e2ed3343fa84b1c81aa Mon Sep 17 00:00:00 2001
From: Neil Dorin <ndorin@pepperdash.com>
Date: Fri, 1 May 2026 16:05:22 -0600
Subject: [PATCH 5/5] feat: Rename availableApps to discoveredApps in LoginForm
 and update safeAppId logic; refactor Routing and TopNav for improved
 readability and accessibility

---
 src/features/LoginForm.tsx |  4 ++--
 src/features/Routing.tsx   | 47 +++++++++++++++++++++++---------------
 src/features/TopNav.tsx    | 14 ++++++++++--
 3 files changed, 43 insertions(+), 22 deletions(-)

diff --git a/src/features/LoginForm.tsx b/src/features/LoginForm.tsx
index 9339130..79fdd96 100644
--- a/src/features/LoginForm.tsx
+++ b/src/features/LoginForm.tsx
@@ -15,7 +15,7 @@ const ALL_APP_IDS = [
 const LoginForm = () => {
   const { appId } = useAppParams();
   const isAuthenticated = useAppSelector(selectIsAuthenticated);
-  const availableApps = useAppSelector(selectAvailableApps);
+  const discoveredApps = useAppSelector(selectAvailableApps);
   const dispatch = useAppDispatch();
   const navigate = useNavigate();
   const location = useLocation();
@@ -31,7 +31,7 @@ const LoginForm = () => {
 
   const isValidAppId = appId && ALL_APP_IDS.includes(appId);
   const probeAppId = isValidAppId ? appId : ALL_APP_IDS[0];
-  const safeAppId = isValidAppId ? appId : (availableApps[0] ?? probeAppId);
+  const safeAppId = isValidAppId ? appId : (discoveredApps[0] ?? probeAppId);
 
   if (isAuthenticated) {
     return <Navigate to={from ?? `/${safeAppId}/versions`} replace />;
diff --git a/src/features/Routing.tsx b/src/features/Routing.tsx
index f505eeb..17fd37b 100644
--- a/src/features/Routing.tsx
+++ b/src/features/Routing.tsx
@@ -17,7 +17,7 @@ import dagre from "dagre";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { Dropdown } from "react-bootstrap";
 
-import { meetsMinVersion } from '../shared/functions/meetsMinimumVersion';
+import { meetsMinVersion } from "../shared/functions/meetsMinimumVersion";
 import useAppParams from "../shared/hooks/useAppParams";
 import {
   RoutingDevice,
@@ -125,7 +125,7 @@ function buildGraph(
       : d,
   );
 
-   const effectiveDeviceKeys = new Set(effectiveDevices.map((d) => d.key));
+  const effectiveDeviceKeys = new Set(effectiveDevices.map((d) => d.key));
   // Collect one unique device-pair edge per source→destination (dagre only
   // needs connectivity, not multiplicity, for rank assignment). Only use
   // visible tie lines whose endpoints are present in the visible device set
@@ -179,18 +179,20 @@ function buildGraph(
   dagre.layout(g);
 
   // Map dagre positions → React Flow nodes
-  const nodes: Node<RoutingDeviceNodeData>[] = effectiveDevices.map((device) => {
-    const pos = g.node(device.key);
-    return {
-      id: device.key,
-      type: "routingDevice",
-      position: {
-        x: pos.x - NODE_WIDTH / 2,
-        y: pos.y - nodeHeight(device) / 2,
-      },
-      data: { device },
-    };
-  });
+  const nodes: Node<RoutingDeviceNodeData>[] = effectiveDevices.map(
+    (device) => {
+      const pos = g.node(device.key);
+      return {
+        id: device.key,
+        type: "routingDevice",
+        position: {
+          x: pos.x - NODE_WIDTH / 2,
+          y: pos.y - nodeHeight(device) / 2,
+        },
+        data: { device },
+      };
+    },
+  );
 
   // Map tieLines → React Flow edges, filtering by hidden signal types and hidden devices.
   // All tie lines are rendered regardless of whether they were excluded from
@@ -230,7 +232,6 @@ function uniqueSignalTypes(tieLines: TieLine[]): string[] {
   return [...new Set(tieLines.map((tl) => tl.signalType))].sort();
 }
 
-
 // ─── Node types registry (stable reference outside component) ────────────────
 
 const nodeTypes: NodeTypes = {
@@ -312,7 +313,16 @@ const Routing = () => {
     );
     setEdges(layoutEdges);
     setSelectedEdgeId(null);
-  }, [data, hiddenTypes, hideUnconnected, hiddenDevices, hideUnconnectedPorts, darkMode, setNodes, setEdges]);
+  }, [
+    data,
+    hiddenTypes,
+    hideUnconnected,
+    hiddenDevices,
+    hideUnconnectedPorts,
+    darkMode,
+    setNodes,
+    setEdges,
+  ]);
 
   // Re-style edges when selection changes without triggering a layout rebuild.
   useEffect(() => {
@@ -409,7 +419,6 @@ const Routing = () => {
   if (isError || !data)
     return <div className="p-3 text-danger">Failed to load routing data.</div>;
 
-
   if (
     versions &&
     !versions.some(
@@ -579,7 +588,9 @@ const Routing = () => {
       </div>
 
       {/* React Flow canvas */}
-      <div className={`flex-grow-1 position-relative${darkMode ? " bg-dark" : ""}`}>
+      <div
+        className={`flex-grow-1 position-relative${darkMode ? " bg-dark" : ""}`}
+      >
         <ReactFlow
           nodes={nodes}
           edges={edges}
diff --git a/src/features/TopNav.tsx b/src/features/TopNav.tsx
index 93b5db1..412f815 100644
--- a/src/features/TopNav.tsx
+++ b/src/features/TopNav.tsx
@@ -19,11 +19,21 @@ const AppNavLink = ({
 }) => {
   if (!appId) {
     return (
-      <span className="me-3 text-muted nav-link-disabled">{children}</span>
+      <span
+        className="me-3 text-muted nav-link-disabled"
+        role="link"
+        aria-disabled="true"
+        tabIndex={-1}
+      >
+        {children}
+      </span>
     );
   }
   return (
-    <NavLink className="me-3" to={`/${appId}/${path}`}>
+    <NavLink
+      className={({ isActive }) => (isActive ? "me-3 text-secondary" : "me-3")}
+      to={`/${appId}/${path}`}
+    >
       {children}
     </NavLink>
   );