put the previewed browser tab in the url

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

src/apps/officer-web/Screens/Dashboard/Browser/TabPreview.tsx

@@ -1,14 +1,20 @@
 import { useState, useCallback } from 'react';
+import { Link } from 'react-router';
 import { useQuery } from '@tanstack/react-query';
 import { Globe, RefreshCw, Send, Terminal, Loader2 } from 'lucide-react';
 import { toast } from 'sonner';
 import { Button } from '@/components/ui/button';
 import { useClient } from 'hooks/useClient';
-import { useGlobal } from 'hooks/useGlobal';
+import { useBrowserTargets, useSelectedTabId } from './shared';
 
 export const TabPreview = () => {
   const client = useClient();
-  const [selectedId] = useGlobal<string | null>('BROWSER_SELECTED_TAB', null);
+  // Reads the URL itself rather than being told by the list.
+  const selectedId = useSelectedTabId();
+  const { data: targets } = useBrowserTargets(!!selectedId);
+  // A target id dies with the browser session, so a link or a reload can name a tab that is no longer
+  // attached. Screenshotting it would 404 every ten seconds; better to say so once.
+  const isKnownTab = !!selectedId && !!targets?.some((t) => t.id === selectedId);
   const [navUrl, setNavUrl] = useState('');
   const [evalExpr, setEvalExpr] = useState('');
   const [evalResult, setEvalResult] = useState<string | null>(null);
@@ -23,7 +29,7 @@ export const TabPreview = () => {
   } = useQuery({
     queryKey: ['browser-screenshot', selectedId],
     queryFn: () => client.get<{ data: string; format: string }>(`/browser/targets/${selectedId}/screenshot`),
-    enabled: !!selectedId,
+    enabled: isKnownTab,
     refetchInterval: 10000,
   });
 
@@ -64,6 +70,19 @@ export const TabPreview = () => {
     );
   }
 
+  // Waiting on the list is not the same as knowing the tab is gone, so only say so once it has arrived.
+  if (targets && !isKnownTab) {
+    return (
+      <div className="flex h-full flex-col items-center justify-center gap-2 text-sm opacity-50">
+        <Globe className="h-8 w-8" />
+        <span>That tab is no longer attached</span>
+        <Link to="/browser" className="text-xs underline">
+          Back to the tab list
+        </Link>
+      </div>
+    );
+  }
+
   return (
     <div className="flex h-full flex-col overflow-hidden">
       {/* URL bar */}