diff --git a/frontend/packages/swarm-ui/src/shell/Shell.tsx b/frontend/packages/swarm-ui/src/shell/Shell.tsx index 71f57543..7989fc6f 100644 --- a/frontend/packages/swarm-ui/src/shell/Shell.tsx +++ b/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