refactor: simplify task Browser tab — drop localhost rewrite, add open-in-new-tab

The Browser tab's iframe used to rewrite localhost URLs to the host's full Tailscale FQDN to handle the "remote UI / dev server only on the host" case, but the user navigates with explicit Tailscale IPs and hostnames, so the rewrite isn't pulling its weight. Delete `preview-url.ts` and its tests, and stop pulling `useTailscaleHostname` into the Browser tab — the iframe `src` is just the user-typed URL now.

Also drop the iframe `sandbox` attribute (with `allow-scripts`+`allow-same-origin` it provided no real security benefit anyway, but nudged some browsers toward stricter cookie partitioning) and add an "Open in new tab" toolbar button. Modern browsers block cross-site iframe cookies by default, which broke logins for dev apps like `http://citadel:5173`; the new button is a one-click escape hatch into a real top-level tab where auth works.

The `tailscaleHostname` setting, `useTailscaleHostname` hook, and `detectTailscaleHostname()` stay — they're still used by the public-domain/tunnel feature.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: knowsuchagency

frontend/components/viewer/browser-preview.tsx

@@ -5,29 +5,21 @@ import { HugeiconsIcon } from '@hugeicons/react'
 import {
   ArrowLeft01Icon,
   ArrowRight01Icon,
+  LinkSquare02Icon,
   RefreshIcon,
 } from '@hugeicons/core-free-icons'
 import { useBrowserUrl } from '@/hooks/use-browser-url'
-import { useTailscaleHostname } from '@/hooks/use-config'
-import { rewriteLocalhostForPreview } from '@/lib/preview-url'
 
 interface BrowserPreviewProps {
   taskId: string
 }
 
 export function BrowserPreview({ taskId }: BrowserPreviewProps) {
   const { url, setUrl } = useBrowserUrl(taskId)
-  const { data: tailscaleHostname } = useTailscaleHostname()
   const [inputValue, setInputValue] = useState(url)
   const [key, setKey] = useState(0)
   const iframeRef = useRef<HTMLIFrameElement>(null)
 
-  const iframeSrc = rewriteLocalhostForPreview(
-    url,
-    tailscaleHostname,
-    typeof window !== 'undefined' ? window.location.host : '',
-  )
-
   // Sync input value when URL changes (e.g., on initial load)
   useEffect(() => {
     setInputValue(url)
@@ -49,6 +41,11 @@ export function BrowserPreview({ taskId }: BrowserPreviewProps) {
     setKey((k) => k + 1)
   }, [])
 
+  const handleOpenInNewTab = useCallback(() => {
+    if (!url) return
+    window.open(url, '_blank', 'noopener,noreferrer')
+  }, [url])
+
   const handleNavigate = useCallback(
     (e: React.FormEvent) => {
       e.preventDefault()
@@ -84,17 +81,26 @@ export function BrowserPreview({ taskId }: BrowserPreviewProps) {
             placeholder="Enter URL..."
           />
         </form>
+
+        <Button
+          variant="ghost"
+          size="icon-xs"
+          onClick={handleOpenInNewTab}
+          disabled={!url}
+          title="Open in new tab"
+        >
+          <HugeiconsIcon icon={LinkSquare02Icon} size={14} strokeWidth={2} />
+        </Button>
       </div>
 
       {/* Browser content */}
       <div className="flex-1 overflow-hidden bg-card">
         <iframe
           ref={iframeRef}
           key={key}
-          src={iframeSrc}
+          src={url}
           className="h-full w-full border-0"
           title="Browser Preview"
-          sandbox="allow-scripts allow-same-origin allow-forms allow-popups"
           onLoad={handleIframeLoad}
         />
       </div>