Feature/add routing

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": {

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 />} />

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())}
         >

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>

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 discoveredApps = 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 : (discoveredApps[0] ?? probeAppId);
 
   if (isAuthenticated) {
-    return <Navigate to={from ?? `/${appId}/versions`} replace />;
+    return <Navigate to={from ?? `/${safeAppId}/versions`} replace />;
   }
 
   async function handleSubmit(e: FormEvent) {
@@ -68,7 +70,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>}

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,

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,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}`),
     ),
   ];
 
@@ -172,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
@@ -223,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 = {
@@ -305,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(() => {
@@ -402,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(
@@ -572,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}