put the previewed browser tab in the url

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

src/apps/officer-web/Screens/Dashboard/Browser/shared.ts

@@ -0,0 +1,34 @@
+import { useQuery } from '@tanstack/react-query';
+import { useParams } from 'react-router';
+import { useClient } from 'hooks/useClient';
+
+// Which attached tab is being previewed is `/browser/:tabId`. It used to be a `BROWSER_SELECTED_TAB`
+// global read by three components, which meant the address bar said `/browser` no matter what you were
+// looking at, and a tab row was a `<button>` with the id in its onClick closure.
+
+export type BrowserTarget = {
+  id: string;
+  sessionId: string;
+  type: string;
+  title: string;
+  url: string;
+};
+
+export const browserTabPath = (id: string) => `/browser/${encodeURIComponent(id)}`;
+
+/** The previewed tab, or null on the bare `/browser` route — the list with nothing open. */
+export const useSelectedTabId = (): string | null => useParams<{ tabId?: string }>().tabId ?? null;
+
+// Both panels want this list and React Query serves both observers from one key, so the preview being
+// able to tell "no tab open" from "that tab is gone" costs no extra request. It needs to: a CDP target
+// id dies with the browser session, and now that the id is in the URL a reload can carry a stale one in
+// — which the old global, living in memory, could never do.
+export const useBrowserTargets = (enabled: boolean) => {
+  const client = useClient();
+  return useQuery({
+    queryKey: ['browser-targets'],
+    queryFn: () => client.get<BrowserTarget[]>('/browser/targets'),
+    refetchInterval: 3000,
+    enabled,
+  });
+};