make the editable tab name survive refreshes

sessionStorage is the per-tab store — separate per tab, survives reload and
navigation, dies with the tab. The route title is derived rather than assigned,
so navigating no longer wipes a name you typed.

Duplicating a tab clones sessionStorage, so a `navigate` that arrives already
holding a name is treated as a clone and drops it; fails soft.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

src/apps/officer-web/state/usePageTitle.ts

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 import { useLocation } from 'react-router';
 import { useGlobal } from 'hooks/useGlobal';
 
@@ -45,22 +45,92 @@ export function titleForPath(pathname: string): string {
   return RULES.find((r) => r.match(pathname))?.title ?? 'Officer';
 }
 
-/** The current page title — shared (header ↔ tab), editable, per-tab (not persisted). */
-export const usePageTitle = () => useGlobal<string>('PAGE_TITLE', 'Officer');
+// ── The name you gave this tab ──
+// There is no tab identity in the DOM: `tabId` is a privileged extension API, and page scripts are
+// deliberately not allowed to know which tab they are in or that other tabs exist. We don't need one —
+// **sessionStorage is already the per-tab store.** It is separate per tab, survives a refresh and
+// in-place navigation, and is discarded when the tab closes, which is exactly the lifetime of a tab
+// name. localStorage would be wrong in the obvious way: every tab would share one name.
+
+const TAB_LABEL_KEY = 'OFFICER_TAB_LABEL';
+
+/** Storage can throw outright (private mode, storage disabled). A tab name is not worth a crash. */
+function readTabLabel(): string | null {
+  try {
+    return sessionStorage.getItem(TAB_LABEL_KEY);
+  } catch {
+    return null;
+  }
+}
+
+function writeTabLabel(label: string | null): void {
+  try {
+    if (label) sessionStorage.setItem(TAB_LABEL_KEY, label);
+    else sessionStorage.removeItem(TAB_LABEL_KEY);
+  } catch {
+    /* the name just doesn't persist */
+  }
+}
 
 /**
- * Mount once in the dashboard layout: reset the title to the route default on navigation, and mirror
- * whatever the title is into the browser tab. Editing the title in the header just sets this value,
- * so the tab updates live; navigating away resets it (no persistence, by design).
+ * Duplicating a tab **clones its sessionStorage**, so the copy would open wearing the original's name —
+ * two tabs called "Platform Arch", which is precisely what naming one was meant to prevent. Same for a
+ * tab opened by `window.open` from inside the app.
+ *
+ * A duplicate is a fresh navigation and a refresh is not, so `navigation.type` separates them: only a
+ * `navigate` arriving with a name it did not earn is a clone. A brand-new tab is `navigate` too, but has
+ * nothing stored, so it is untouched.
+ *
+ * It fails soft on purpose. If the timing entry is missing, or a browser labels duplication some other
+ * way, the copy simply keeps the name — redundant, not wrong.
+ */
+function dropInheritedTabLabel(): void {
+  try {
+    const [nav] = performance.getEntriesByType('navigation') as PerformanceNavigationTiming[];
+    if (nav?.type === 'navigate' && readTabLabel()) writeTabLabel(null);
+  } catch {
+    /* leave it alone */
+  }
+}
+
+// Once per document, before React reads the stored name.
+dropInheritedTabLabel();
+
+/**
+ * The title shown in the header and in the browser tab, plus the setter behind the header's edit.
+ *
+ * A name you type is a property of the **tab**, not of the page, so it outlives navigation as well as a
+ * refresh: you named this window to find it again among a dozen others, and wiping it because you opened
+ * a different screen would defeat the point. Clear the field to hand the tab back to the route's own
+ * name — that is the only way out, and there is no third state to get stuck in.
+ */
+export function usePageTitle() {
+  const { pathname } = useLocation();
+  const [label, setLabel] = useGlobal<string | null>('TAB_LABEL', readTabLabel);
+
+  // The React Query copy is what re-renders every consumer; sessionStorage is what survives the reload.
+  const rename = useCallback(
+    (next: string) => {
+      const trimmed = next.trim() || null;
+      writeTabLabel(trimmed);
+      setLabel(trimmed);
+    },
+    [setLabel],
+  );
+
+  return [label ?? titleForPath(pathname), rename] as const;
+}
+
+/**
+ * Mount once in the dashboard layout: mirror the title into the browser tab.
+ *
+ * There used to be a second effect resetting the title to the route default on every navigation, which
+ * is what made a typed name last only until you clicked something. The route default is derived now
+ * rather than assigned, so navigation retitles the tab by itself when no name is set, and leaves it
+ * alone when one is.
  */
 export function usePageTitleSync(): void {
-  const { pathname } = useLocation();
-  const [title, setTitle] = usePageTitle();
-
-  // Route default — depends only on the path, so an in-place header edit is never clobbered.
-  useEffect(() => {
-    setTitle(titleForPath(pathname));
-  }, [pathname]);
+  const [title] = usePageTitle();
 
   useEffect(() => {
     document.title = title || 'Officer';