Drops mock auth, reorganizes UI, adds webhook tab

Removes mock user endpoints to streamline authentication
Extracts routing into a dedicated component for maintainability
Centralizes style definitions and simplifies logout flow
Includes new webhook tab to enhance workflow control

Author: mbertelsen

server/src/index.ts

@@ -48,26 +48,12 @@ process.on('unhandledRejection', (reason) => {
   console.error('Unhandled rejection:', reason);
 });
 
-// Mock user for auth endpoints
-const mockUser = {
-  id: "user-1",
-  name: "Demo User",
-  avatar:
-    "https://www.gravatar.com/avatar/00000000000000000000000000000000?d=mp&s=128",
-};
 
 // API mounted under /api to make it easy to host frontend and backend together
 app.get("/api/health", (_req: Request, res: Response) => {
   res.json({ status: "ok", uptime: process.uptime() });
 });
 
-app.get("/api/me", (_req: Request, res: Response) => {
-  res.json({ authenticated: true, profile: mockUser });
-});
-
-app.post("/api/logout", (_req: Request, res: Response) => {
-  res.json({ ok: true });
-});
 
 // Register webhook-related routes (event store, SSE, diagnostics)
 registerWebhookRoutes(app);

src/App.tsx

@@ -19,7 +19,7 @@ import { usePersistedSelections } from './hooks/usePersistedSelections';
 import AppProviders from './app/Providers';
 import AppShell from './app/AppShell';
 
-type TabType = 'edit' | 'documentation';
+type TabType = 'edit' | 'documentation' | 'webhook';
 
 interface Bay {
   id: string;
@@ -269,7 +269,10 @@ export default function App() {
     });
     if (mutated) {
       // dispatch minimal updates via LOAD_SCRIPT to reuse validation effect
-      dispatch({ type: 'LOAD_SCRIPT', script: { activities: repairedActivities } });
+      // repairedActivities may be a freshly-mapped array and TypeScript
+      // can be conservative about subtype narrowing here. Cast to ScriptData
+      // to satisfy the reducer action shape while preserving runtime value.
+      dispatch({ type: 'LOAD_SCRIPT', script: { activities: repairedActivities } as unknown as ScriptData });
     }
     setMigrationComplete(true);
   }, [script.activities, migrationComplete]);
@@ -583,56 +586,19 @@ export default function App() {
 
     if (logoutComplete) {
       return (
-        <div style={{ 
-          height: '100vh', 
-          display: 'flex', 
-          flexDirection: 'column',
-          alignItems: 'center', 
-          justifyContent: 'center',
-          backgroundColor: '#f5f5f5',
-          fontFamily: 'system-ui, -apple-system, sans-serif'
-        }}>
-          <div style={{
-            padding: '2rem',
-            backgroundColor: 'white',
-            borderRadius: '8px',
-            boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
-            textAlign: 'center',
-            maxWidth: '400px'
-          }}>
-            <div style={{ fontSize: '48px', marginBottom: '1rem' }}>✅</div>
-            <h2 style={{ margin: '0 0 1rem 0', color: '#333' }}>Logout Successful</h2>
-            <p style={{ margin: '0', color: '#666' }}>
+        <div className="logout-center">
+          <div className="logout-box">
+            <div className="logout-emoji">✅</div>
+            <h2 className="logout-heading">Logout Successful</h2>
+            <p className="logout-text">
               You have been logged out successfully.<br/>
               Redirecting to login page...
             </p>
-            <div style={{ 
-              marginTop: '1rem', 
-              padding: '0.5rem',
-              backgroundColor: '#f8f9fa',
-              borderRadius: '4px',
-              fontSize: '0.9em',
-              color: '#666'
-            }}>
-              <div className="spinner" style={{
-                display: 'inline-block',
-                width: '16px',
-                height: '16px',
-                border: '2px solid #ddd',
-                borderTop: '2px solid #007acc',
-                borderRadius: '50%',
-                animation: 'spin 1s linear infinite',
-                marginRight: '8px'
-              }}></div>
+            <div className="logout-spinner-wrap">
+              <div className="logout-spinner" aria-hidden="true"></div>
               Please wait...
             </div>
           </div>
-          <style>{`
-            @keyframes spin {
-              0% { transform: rotate(0deg); }
-              100% { transform: rotate(360deg); }
-            }
-          `}</style>
         </div>
       );
     }
@@ -649,12 +615,14 @@ export default function App() {
         activeTab={activeTab}
         setActiveTab={setActiveTab}
         state={state}
+        selectedNode={selectedNode}
         script={script}
         isValid={isValid}
-        validationErrors={validationErrors.errors || validationErrors}
+  validationErrors={validationErrors}
         selections={selections}
         selectedLocation={selectedLocation}
         selectedBayObj={selectedBayObj}
+        parentActivityForAdd={parentActivityForAdd}
         onLoadScript={loadScript}
         onDownloadScript={downloadScript}
         onLocationSelect={handleLocationSelect}

src/app/AppShell.tsx

@@ -7,6 +7,9 @@ import { ScriptEditor } from '../components/ScriptEditor';
 import { NodeEditor } from '../components/NodeEditor';
 import { DocViewer } from '../components/DocViewer';
 import WebhookView from '../components/WebhookView';
+import Routes from './Routes';
+import { ScriptData, Activity, Step } from '../types';
+import { SidebarProps } from '../components/Sidebar';
 
 export type TabType = 'edit' | 'documentation' | 'webhook';
 
@@ -19,12 +22,14 @@ export interface AppShellProps {
   setActiveTab: (t: TabType) => void;
   // editor state and handlers (kept generic to avoid tight coupling in this step)
   state: any;
-  script: any;
+  selectedNode?: Activity | Step | null;
+  script: ScriptData;
   isValid: boolean;
-  validationErrors: any[];
+  validationErrors: string[];
   selections: any;
   selectedLocation: any;
   selectedBayObj: any;
+  parentActivityForAdd?: any;
   onLoadScript: () => void;
   onDownloadScript: () => void;
   onLocationSelect: (l: any) => void;
@@ -46,14 +51,17 @@ export const AppShell: React.FC<AppShellProps> = (props) => {
     selections,
     selectedLocation,
     selectedBayObj,
+    parentActivityForAdd,
     onLoadScript,
     onDownloadScript,
     onLocationSelect,
     onBaySelect,
     dispatch
   } = props;
 
-  const selectedNode = (() => {
+  // Prefer a hydrated selected node object from the top-level App when available
+  const effectiveSelectedNode = (() => {
+    if (props.selectedNode !== undefined) return props.selectedNode;
     try { return (state && state.selectedRef && state.selectedRef.kind !== 'script') ? state.selectedRef : null; } catch { return null; }
   })();
 
@@ -69,75 +77,24 @@ export const AppShell: React.FC<AppShellProps> = (props) => {
         onTabChange={setActiveTab} 
       />
 
-      {activeTab === 'edit' ? (
-        <div className="tree-flex">
-          <DialogManager
-            // dialog props are expected to be provided via dispatch or parent
-            showActivityDialog={false}
-            showStepDialog={false}
-            onCloseActivityDialog={() => {}}
-            onCloseStepDialog={() => {}}
-            onAddActivity={() => {}}
-            onAddStep={() => {}}
-            parentActivityForAdd={undefined}
-          />
-          <Sidebar
-            script={script}
-            selectedRef={state.selectedRef}
-            selectedNode={selectedNode}
-            isValid={isValid}
-            validationErrors={validationErrors}
-            selectedFacilityId={selectedFacilityId}
-            selectedLocationId={selectedLocation?.id || null}
-            persistedLocationId={selections?.locationId || null}
-            selectedBayId={selectedBayObj?.id || null}
-            persistedBayId={selections?.bayId || null}
-            selectedBayObj={selectedBayObj}
-            onLoadScript={onLoadScript}
-            onDownloadScript={onDownloadScript}
-            onLocationSelect={onLocationSelect}
-            onBaySelect={onBaySelect}
-            onCloneSelected={() => dispatch({ type: 'CLONE_SELECTED' })}
-            onShowActivityDialog={() => {}}
-            onShowStepDialog={() => {}}
-            onSelectScript={() => dispatch({ type: 'SELECT_SCRIPT' })}
-            onSelectActivity={(activityId: string) => dispatch({ type: 'SELECT_ACTIVITY', activityId })}
-            onSelectStep={(activityId: string, stepId: string) => dispatch({ type: 'SELECT_STEP', activityId, stepId })}
-            onDeleteActivity={(id: string) => dispatch({ type: 'DELETE_ACTIVITY', activityId: id })}
-            onDeleteStep={(activityId: string, stepId: string) => dispatch({ type: 'DELETE_STEP', activityId, stepId })}
-            parentActivityForAdd={undefined}
-          />
-
-          <div className="tree-main">
-            {state.selectedRef?.kind === 'script' ? (
-              <>
-                <h2>Script Configuration</h2>
-                <ScriptEditor
-                  script={script}
-                  onChange={(s: any) => dispatch({ type: 'LOAD_SCRIPT', script: s })}
-                />
-                <pre>{JSON.stringify(script, null, 2)}</pre>
-              </>
-            ) : selectedNode ? (
-              <NodeEditor
-                node={selectedNode}
-                onUpdateActivity={(activityId: string, patch: any) => dispatch({ type: 'UPDATE_ACTIVITY', activityId, patch })}
-                onUpdateStep={(stepId: string, patch: any) => dispatch({ type: 'UPDATE_STEP', stepId, patch })}
-              />
-            ) : (
-              <div className="empty-node-editor">Select a node to edit its details.</div>
-            )}
-          </div>
-        </div>
-      ) : activeTab === 'documentation' ? (
-        <div className="documentation-flex">
-          <DocViewer />
-        </div>
-      ) : activeTab === 'webhook' ? (
-        <div className="documentation-flex">
-          <WebhookView selectedBayDbId={selectedBayObj?.dbId ?? null} />
-        </div>
-      ) : null}
+      <Routes
+        activeTab={activeTab}
+        state={state}
+  selectedNode={effectiveSelectedNode ?? null}
+        script={script}
+        isValid={isValid}
+        validationErrors={validationErrors}
+        selections={selections}
+        selectedFacilityId={selectedFacilityId}
+        parentActivityForAdd={parentActivityForAdd}
+        selectedLocation={selectedLocation}
+        selectedBayObj={selectedBayObj}
+        onLoadScript={onLoadScript}
+        onDownloadScript={onDownloadScript}
+        onLocationSelect={onLocationSelect}
+        onBaySelect={onBaySelect}
+        dispatch={dispatch}
+      />
     </div>
   );
 };