swarm-ui: each route sets its own document title ('<page> · <swarm name>')

frontend/packages/swarm-ui/src/shell/Shell.tsx

@@ -350,9 +350,16 @@ export function Shell({ children }: { children: ComponentChildren }) {
   }, []);
 
   const brand = swarmName ?? DEFAULT_BRAND;
+  // Per-route label so browser tabs of different pages tell apart: a
+  // top-level route takes its nav label, a terminal route takes the
+  // label its page registered as a dynamic tab. An unmatched path gets
+  // the bare brand.
+  const pageLabel =
+    NAV_ITEMS.find((item) => item.href === location)?.label ??
+    tabs.find((tab) => tab.href === location)?.label;
   useEffect(() => {
-    document.title = brand;
-  }, [brand]);
+    document.title = pageLabel ? `${pageLabel} · ${brand}` : brand;
+  }, [brand, pageLabel]);
 
   // Same value the indicator itself is drawn with, including mid-sweep —
   // the brand text rides the identical hop sequence rather than