From feefc4bb4146abcd8aefc7e10c507b3ec5ede669 Mon Sep 17 00:00:00 2001
From: rcourtman <courtmanr@gmail.com>
Date: Sun, 10 May 2026 15:09:19 +0100
Subject: [PATCH] Reflect active tab in document.title
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Every Pulse route rendered as a browser tab labeled "Pulse" — the
title never changed even when navigating between Infrastructure,
Workloads, Storage, Recovery, Alerts, Patrol, and Settings. Multi-tab
users couldn't tell tabs apart, browser history showed identical
entries, and screen-reader page-title announcements gave no useful
context.

Add a createEffect in AppLayout that maps the active tab id (resolved
via getActiveTabForPath on location.pathname) to a label and writes
"{label} · Pulse" to document.title. Verified live: all seven top-level
routes update correctly.

Title:
  /infrastructure        → Infrastructure · Pulse
  /workloads             → Workloads · Pulse
  /storage               → Storage · Pulse
  /recovery              → Recovery · Pulse
  /alerts                → Alerts · Pulse
  /patrol                → Patrol · Pulse
  /settings/...          → Settings · Pulse
---
 frontend-modern/src/AppLayout.tsx | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/frontend-modern/src/AppLayout.tsx b/frontend-modern/src/AppLayout.tsx
index 825fc0bda..e71bb96d9 100644
--- a/frontend-modern/src/AppLayout.tsx
+++ b/frontend-modern/src/AppLayout.tsx
@@ -184,6 +184,24 @@ export function AppLayout(props: AppLayoutProps) {
     }
   });
 
+  // Reflect the active tab in the browser tab title so multi-tab use,
+  // browser history, and screen-reader page-title announcements all
+  // identify the current Pulse surface instead of every page reading
+  // as the bare app name.
+  const tabTitleByActive: Record<NonNullable<ReturnType<typeof getActiveTabForPath>>, string> = {
+    infrastructure: 'Infrastructure',
+    workloads: 'Workloads',
+    storage: 'Storage',
+    recovery: 'Recovery',
+    alerts: 'Alerts',
+    ai: 'Patrol',
+    settings: 'Settings',
+  };
+  createEffect(() => {
+    const active = getActiveTabForPath(location.pathname);
+    document.title = active ? `${tabTitleByActive[active]} · Pulse` : 'Pulse';
+  });
+
   const toggleKioskMode = () => {
     setKioskMode(!kioskMode());
   };