@burdenoff/microfe-movethewheels 2026.703.6 → 2026.703.8

package/src/movethewheels/components/MetricCard.tsx

@@ -78,7 +78,13 @@ const accentChipClasses: Record<MetricAccent, string> = {
 function ArrowIcon({ direction }: { direction: 'up' | 'down' | 'flat' }) {
   if (direction === 'flat') {
     return (
-      <svg className="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden>
+      <svg
+        className="h-3.5 w-3.5"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+        aria-hidden
+      >
         <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 12h14" />
       </svg>
     );
@@ -91,7 +97,12 @@ function ArrowIcon({ direction }: { direction: 'up' | 'down' | 'flat' }) {
       stroke="currentColor"
       aria-hidden
     >
-      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M12 19V5m0 0l-6 6m6-6l6 6" />
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2.5}
+        d="M12 19V5m0 0l-6 6m6-6l6 6"
+      />
     </svg>
   );
 }
@@ -278,7 +289,9 @@ export function MetricCardSkeleton({ size = 'md' }: { size?: 'sm' | 'md' | 'lg'
             <div className="h-8 w-32 rounded bg-bg-sunken motion-safe:animate-vc-shimmer" />
             <div className="h-3 w-20 rounded bg-bg-sunken motion-safe:animate-vc-shimmer" />
           </div>
-          <div className={cn('rounded-xl bg-bg-sunken motion-safe:animate-vc-shimmer', styles.icon)} />
+          <div
+            className={cn('rounded-xl bg-bg-sunken motion-safe:animate-vc-shimmer', styles.icon)}
+          />
         </div>
       </div>
     </GlassCard>

package/src/movethewheels/components/charts/StatusDonut.tsx

@@ -67,9 +67,7 @@ export function StatusDonut({
             <Tooltip
               content={
                 <ChartTooltip
-                  formatter={(v) =>
-                    valueFormatter ? valueFormatter(Number(v)) : String(v)
-                  }
+                  formatter={(v) => (valueFormatter ? valueFormatter(Number(v)) : String(v))}
                 />
               }
             />
@@ -77,9 +75,7 @@ export function StatusDonut({
         </ResponsiveContainer>
         {centerLabel != null && (
           <div className="pointer-events-none absolute inset-0 flex flex-col items-center justify-center text-center">
-            <span className="text-2xl font-bold tabular-nums text-text-primary">
-              {centerLabel}
-            </span>
+            <span className="text-2xl font-bold tabular-nums text-text-primary">{centerLabel}</span>
             {centerSubLabel && (
               <span className="text-xs text-text-secondary">{centerSubLabel}</span>
             )}

package/src/movethewheels/components/charts/TrendChart.tsx

@@ -99,9 +99,7 @@ export function TrendChart({
               tickLine={false}
               axisLine={false}
               width={44}
-              tickFormatter={
-                valueFormatter ? (v: number) => valueFormatter(v, '') : undefined
-              }
+              tickFormatter={valueFormatter ? (v: number) => valueFormatter(v, '') : undefined}
             />
             <Tooltip
               cursor={{ stroke: chartTokens.axis, strokeOpacity: 0.3 }}
@@ -144,9 +142,7 @@ export function TrendChart({
               tickLine={false}
               axisLine={false}
               width={44}
-              tickFormatter={
-                valueFormatter ? (v: number) => valueFormatter(v, '') : undefined
-              }
+              tickFormatter={valueFormatter ? (v: number) => valueFormatter(v, '') : undefined}
             />
             <Tooltip
               cursor={{ stroke: chartTokens.axis, strokeOpacity: 0.3 }}

package/src/movethewheels/components/maps/LogisticsMap.tsx

@@ -40,10 +40,7 @@ export function LogisticsMap({
   fitToMarkers = true,
   emptyMessage = 'No live locations yet',
 }: LogisticsMapProps) {
-  const validMarkers = useMemo(
-    () => markers.filter((m) => isRealCoord(m.lat, m.lng)),
-    [markers]
-  );
+  const validMarkers = useMemo(() => markers.filter((m) => isRealCoord(m.lat, m.lng)), [markers]);
 
   const validRoutes = useMemo(
     () =>

package/src/movethewheels/components/maps/RouteMap.tsx

@@ -31,7 +31,8 @@ export function RouteMap({
   emptyMessage = 'No stops with coordinates yet',
 }: RouteMapProps) {
   const ordered = useMemo(
-    () => [...stops].filter((s) => isRealCoord(s.lat, s.lng)).sort((a, b) => a.sequence - b.sequence),
+    () =>
+      [...stops].filter((s) => isRealCoord(s.lat, s.lng)).sort((a, b) => a.sequence - b.sequence),
     [stops]
   );
 
@@ -48,10 +49,7 @@ export function RouteMap({
       emptyState={<p className="text-sm text-text-secondary">{emptyMessage}</p>}
     >
       {line.length >= 2 && (
-        <Polyline
-          positions={line}
-          pathOptions={{ color: routeColor, weight: 4, opacity: 0.85 }}
-        />
+        <Polyline positions={line} pathOptions={{ color: routeColor, weight: 4, opacity: 0.85 }} />
       )}
       {ordered.map((s) => (
         <Marker

package/src/movethewheels/components/maps/TrackingMap.tsx

@@ -70,11 +70,20 @@ export function TrackingMap({
       {trailLine.length >= 2 && (
         <Polyline
           positions={trailLine}
-          pathOptions={{ color: trailColor, weight: 4, opacity: 0.85, dashArray: '1 8', lineCap: 'round' }}
+          pathOptions={{
+            color: trailColor,
+            weight: 4,
+            opacity: 0.85,
+            dashArray: '1 8',
+            lineCap: 'round',
+          }}
         />
       )}
       {originOk && (
-        <Marker position={[originOk.lat, originOk.lng]} icon={createPinIcon('origin', { glyph: false })}>
+        <Marker
+          position={[originOk.lat, originOk.lng]}
+          icon={createPinIcon('origin', { glyph: false })}
+        >
           <Popup>
             <span className="font-semibold">{originOk.label ?? 'Origin'}</span>
           </Popup>

package/src/movethewheels/pages/CustomerDetailsPage.tsx

@@ -116,8 +116,9 @@ function NewCustomerForm() {
       }
     >
       <PagePurpose icon={<Users size={18} />}>
-        Add a customer once and their contact details auto-fill every future order you book for them.
-        Only a name is required — add email, phone and company to make deliveries easier to arrange.
+        Add a customer once and their contact details auto-fill every future order you book for
+        them. Only a name is required — add email, phone and company to make deliveries easier to
+        arrange.
       </PagePurpose>
 
       <form onSubmit={handleSubmit} className="max-w-2xl space-y-6">

package/src/movethewheels/pages/CustomersPage.tsx

@@ -20,7 +20,7 @@ export default function CustomersPage() {
   const { basePath, navigate } = useMoveTheWheels();
   const [page, setPage] = useState(0);
   const [pageSize, setPageSize] = useState(25);
-  const { customers, hasMore, isLoading, refetch } = useCustomers({
+  const { customers, hasMore, isLoading, error, refetch } = useCustomers({
     limit: pageSize,
     offset: page * pageSize,
   });
@@ -151,6 +151,8 @@ export default function CustomersPage() {
         columns={columns}
         data={customers}
         isLoading={isLoading}
+        error={error}
+        onRetry={refetch}
         searchable
         searchPlaceholder="Search customers..."
         searchFields={['name', 'email', 'company'] as (keyof Customer)[]}

package/src/movethewheels/pages/DriverDetailsPage.tsx

@@ -94,8 +94,8 @@ function NewDriverForm() {
       }
     >
       <PagePurpose icon={<Users size={18} />}>
-        Add a driver so they can be assigned to orders and routes. An employee ID and name get them on
-        the roster — add contact details and license number to keep the record complete.
+        Add a driver so they can be assigned to orders and routes. An employee ID and name get them
+        on the roster — add contact details and license number to keep the record complete.
       </PagePurpose>
 
       <form onSubmit={handleSubmit} className="max-w-2xl space-y-6">

package/src/movethewheels/pages/DriversPage.tsx

@@ -20,7 +20,7 @@ export default function DriversPage() {
   const { basePath, navigate } = useMoveTheWheels();
   const [page, setPage] = useState(0);
   const [pageSize, setPageSize] = useState(25);
-  const { drivers, isLoading, refetch } = useDrivers({
+  const { drivers, isLoading, error, refetch } = useDrivers({
     limit: pageSize,
     offset: page * pageSize,
   });
@@ -161,6 +161,8 @@ export default function DriversPage() {
         columns={columns}
         data={drivers}
         isLoading={isLoading}
+        error={error}
+        onRetry={refetch}
         searchable
         searchPlaceholder="Search drivers..."
         searchFields={['fullName', 'employeeId'] as (keyof Driver)[]}

package/src/movethewheels/pages/OrderDetailsPage.tsx

@@ -548,7 +548,8 @@ export default function OrderDetailsPage() {
 
                 <div className="space-y-2">
                   <p className="text-sm text-text-secondary">
-                    Current status: <span className="font-medium">{STATUS_LABELS[order.status]}</span>
+                    Current status:{' '}
+                    <span className="font-medium">{STATUS_LABELS[order.status]}</span>
                   </p>
                   {(() => {
                     const upcoming = nextStatus(order.status);

package/src/movethewheels/pages/OrdersListPage.tsx

@@ -55,7 +55,7 @@ export default function OrdersListPage() {
 
   const filtersActive = statusFilter !== 'all' || typeFilter !== 'all' || unassignedOnly;
 
-  const { orders, hasMore, isLoading, refetch } = useOrders({
+  const { orders, hasMore, isLoading, error, refetch } = useOrders({
     filters: {
       status: statusFilter === 'all' ? undefined : statusFilter,
       orderType: typeFilter === 'all' ? undefined : typeFilter,
@@ -346,6 +346,8 @@ export default function OrdersListPage() {
         columns={columns}
         data={orders}
         isLoading={isLoading}
+        error={error}
+        onRetry={refetch}
         searchable
         searchPlaceholder={t('movethewheels.orders.searchPlaceholder', 'Search orders...')}
         searchFields={['orderNumber', 'customerInfo'] as (keyof Order)[]}

package/src/movethewheels/pages/ProductsPage.tsx

@@ -19,7 +19,7 @@ export default function ProductsPage() {
   const { basePath, navigate } = useMoveTheWheels();
   const [page, setPage] = useState(0);
   const [pageSize, setPageSize] = useState(25);
-  const { products, hasMore, isLoading, refetch } = useProducts({
+  const { products, hasMore, isLoading, error, refetch } = useProducts({
     limit: pageSize,
     offset: page * pageSize,
   });
@@ -159,6 +159,8 @@ export default function ProductsPage() {
         columns={columns}
         data={products}
         isLoading={isLoading}
+        error={error}
+        onRetry={refetch}
         searchable
         searchPlaceholder="Search products..."
         searchFields={['name', 'sku', 'category'] as (keyof Product)[]}

package/src/movethewheels/pages/RoutesPage.tsx

@@ -20,7 +20,7 @@ export default function RoutesPage() {
   const { basePath, navigate } = useMoveTheWheels();
   const [page, setPage] = useState(0);
   const [pageSize, setPageSize] = useState(25);
-  const { routes, hasMore, isLoading, refetch } = useRoutes({
+  const { routes, hasMore, isLoading, error, refetch } = useRoutes({
     limit: pageSize,
     offset: page * pageSize,
   });
@@ -126,6 +126,8 @@ export default function RoutesPage() {
         columns={columns}
         data={routes}
         isLoading={isLoading}
+        error={error}
+        onRetry={refetch}
         searchable
         searchPlaceholder="Search routes..."
         searchFields={['name'] as (keyof Route)[]}

package/src/movethewheels/pages/VehicleDetailsPage.tsx

@@ -97,8 +97,8 @@ function NewVehicleForm() {
       }
     >
       <PagePurpose icon={<Truck size={18} />}>
-        Add a vehicle so it can be assigned to deliveries and routes. Give it a fleet number and type
-        to start — make, model and plate help identify it on the road.
+        Add a vehicle so it can be assigned to deliveries and routes. Give it a fleet number and
+        type to start — make, model and plate help identify it on the road.
       </PagePurpose>
 
       <form onSubmit={handleSubmit} className="max-w-2xl space-y-6">

package/src/movethewheels/pages/VehiclesPage.tsx

@@ -3,7 +3,15 @@
  */
 
 import { useState } from 'react';
-import { Truck, Plus, RefreshCw, Download, CircleCheck, Route as RouteIcon, Wrench } from 'lucide-react';
+import {
+  Truck,
+  Plus,
+  RefreshCw,
+  Download,
+  CircleCheck,
+  Route as RouteIcon,
+  Wrench,
+} from 'lucide-react';
 import { PageLayout } from '../components/PageLayout';
 import { MetricCard, MetricGrid } from '../components/MetricCard';
 import { DataTable, type Column } from '../components/DataTable';
@@ -19,7 +27,7 @@ export default function VehiclesPage() {
   const { basePath, navigate } = useMoveTheWheels();
   const [page, setPage] = useState(0);
   const [pageSize, setPageSize] = useState(25);
-  const { vehicles, isLoading, refetch } = useVehicles({
+  const { vehicles, isLoading, error, refetch } = useVehicles({
     limit: pageSize,
     offset: page * pageSize,
   });
@@ -163,6 +171,8 @@ export default function VehiclesPage() {
         columns={columns}
         data={vehicles}
         isLoading={isLoading}
+        error={error}
+        onRetry={refetch}
         searchable
         searchPlaceholder="Search vehicles..."
         searchFields={['vehicleNumber', 'make', 'model'] as (keyof Vehicle)[]}

package/src/movethewheels/pages/WarehouseDetailsPage.tsx

@@ -90,7 +90,9 @@ function NewWarehouseForm() {
       navigate?.(joinPath(basePath, `inventory/warehouses/${created.id}`));
     } catch (err) {
       console.error('Failed to create warehouse:', err);
-      setError(err instanceof Error ? err.message : 'Failed to create warehouse. Please try again.');
+      setError(
+        err instanceof Error ? err.message : 'Failed to create warehouse. Please try again.'
+      );
       setSubmitting(false);
     }
   };

package/src/movethewheels/pages/WarehousesPage.tsx

@@ -18,7 +18,7 @@ export default function WarehousesPage() {
   const { basePath, navigate } = useMoveTheWheels();
   const [page, setPage] = useState(0);
   const [pageSize, setPageSize] = useState(25);
-  const { warehouses, hasMore, isLoading, refetch } = useWarehouses({
+  const { warehouses, hasMore, isLoading, error, refetch } = useWarehouses({
     limit: pageSize,
     offset: page * pageSize,
   });
@@ -152,6 +152,8 @@ export default function WarehousesPage() {
         columns={columns}
         data={warehouses}
         isLoading={isLoading}
+        error={error}
+        onRetry={refetch}
         searchable
         searchPlaceholder="Search warehouses..."
         searchFields={['name', 'code'] as (keyof WarehouseType)[]}

package/src/movethewheels/utils/graphqlClient.ts

@@ -21,12 +21,25 @@ export function resolveGraphqlUrl(apiGatewayUrl?: string): string {
 
 const MAX_RETRIES = 3;
 
+/**
+ * Per-attempt hard timeout. The workspace service runs a lean single-replica
+ * pool with no PgBouncer, so under a burst of concurrent queries a connection
+ * can be accepted by the gateway but never answered — the request then hangs
+ * indefinitely. `fetch` has no built-in timeout, so without this an in-flight
+ * request never settles and the caller's `isLoading` sticks true forever
+ * (perpetual skeletons). A bounded abort turns a hang into a transient error
+ * that the retry loop can recover from on a fresh connection. Real queries
+ * return in well under a second, so 12s is generous headroom.
+ */
+const REQUEST_TIMEOUT_MS = 12000;
+
 /**
  * A transient failure is a momentary gateway↔service connectivity blip (the
  * workspace service runs a lean replica pool with no PgBouncer, so a burst of
  * concurrent dashboard queries can briefly exhaust connections and the gateway
- * returns an upstream-connect / 5xx / reset error). These are safe to retry;
- * genuine validation / auth / business errors are not.
+ * returns an upstream-connect / 5xx / reset error, or the request simply hangs
+ * until we abort it). These are safe to retry; genuine validation / auth /
+ * business errors are not.
  */
 function isTransientMessage(message?: string): boolean {
   if (!message) return false;
@@ -40,8 +53,56 @@ function isTransientStatus(status: number): boolean {
   return status === 429 || status === 502 || status === 503 || status === 504;
 }
 
+/**
+ * A fetch aborted by our timeout rejects with an `AbortError`. It arrives as a
+ * `DOMException`, which is not reliably an `instanceof Error` across engines, so
+ * we duck-type the `name` field rather than relying on the prototype chain.
+ */
+function isAbortError(error: unknown): boolean {
+  return (
+    typeof error === 'object' &&
+    error !== null &&
+    'name' in error &&
+    (error as { name?: unknown }).name === 'AbortError'
+  );
+}
+
 const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
 
+/**
+ * Global in-flight cap across every GraphQL call this MFE makes. The workspace
+ * service runs a single lean replica (no PgBouncer), and a page like the
+ * dashboard fans out ~7 queries at once; multiplied by the retry loop below a
+ * transient blip could balloon into dozens of simultaneous requests and tip the
+ * replica over. A small semaphore keeps the fan-out polite — requests beyond the
+ * limit queue for a moment instead of stampeding the service. 4 is high enough
+ * that normal navigation feels instant, low enough that a burst never floods.
+ */
+const MAX_CONCURRENT = 4;
+let activeRequests = 0;
+const pendingAcquirers: Array<() => void> = [];
+
+function acquireSlot(): Promise<void> {
+  return new Promise((resolve) => {
+    if (activeRequests < MAX_CONCURRENT) {
+      activeRequests += 1;
+      resolve();
+    } else {
+      pendingAcquirers.push(resolve);
+    }
+  });
+}
+
+function releaseSlot(): void {
+  const next = pendingAcquirers.shift();
+  if (next) {
+    // Hand the slot straight to the next waiter — activeRequests stays put.
+    next();
+  } else {
+    activeRequests -= 1;
+  }
+}
+
 export async function executeGraphQL<TData>(
   options: GraphQLRequestOptions,
   query: string,
@@ -61,15 +122,38 @@ export async function executeGraphQL<TData>(
   };
   const body = JSON.stringify({ query, variables });
 
+  // Serialize past the global concurrency cap before doing any network work,
+  // and always release the slot when this call settles (success or failure).
+  await acquireSlot();
+  try {
+    return await runWithRetries<TData>(url, headers, body);
+  } finally {
+    releaseSlot();
+  }
+}
+
+async function runWithRetries<TData>(
+  url: string,
+  headers: Record<string, string>,
+  body: string
+): Promise<TData> {
   let lastError: Error = new Error('GraphQL request failed');
 
   for (let attempt = 0; attempt <= MAX_RETRIES; attempt += 1) {
     const canRetry = attempt < MAX_RETRIES;
     // Exponential backoff with jitter before each retry (not the first attempt).
-    if (attempt > 0) await sleep(Math.min(250 * 2 ** (attempt - 1), 2000) + Math.floor(Math.random() * 150));
+    if (attempt > 0)
+      await sleep(Math.min(250 * 2 ** (attempt - 1), 2000) + Math.floor(Math.random() * 150));
 
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), REQUEST_TIMEOUT_MS);
     try {
-      const response = await fetch(url, { method: 'POST', headers, body });
+      const response = await fetch(url, {
+        method: 'POST',
+        headers,
+        body,
+        signal: controller.signal,
+      });
 
       if (!response.ok) {
         lastError = new Error(`GraphQL request failed with status ${response.status}`);
@@ -101,11 +185,22 @@ export async function executeGraphQL<TData>(
 
       return payload.data;
     } catch (error) {
-      // A thrown fetch is a network error (TypeError "Failed to fetch") — transient.
-      const message = error instanceof Error ? error.message : String(error);
-      lastError = error instanceof Error ? error : new Error(message);
-      if (canRetry && (isTransientMessage(message) || error instanceof TypeError)) continue;
+      const aborted = isAbortError(error);
+      // A thrown fetch is a network error (TypeError "Failed to fetch") or our
+      // own timeout abort — both transient and safe to retry on a fresh
+      // connection.
+      const message = aborted
+        ? `GraphQL request timed out after ${REQUEST_TIMEOUT_MS}ms`
+        : error instanceof Error
+          ? error.message
+          : String(error);
+      lastError = !aborted && error instanceof Error ? error : new Error(message);
+      if (canRetry && (aborted || isTransientMessage(message) || error instanceof TypeError)) {
+        continue;
+      }
       throw lastError;
+    } finally {
+      clearTimeout(timeoutId);
     }
   }