pinokiod 3.231.0 → 3.232.0

package/server/views/app.ejs

@@ -860,124 +860,6 @@ body.dark .grid-btns .btn2 {
   flex: 1 1 auto;
   min-width: 0;
 }
-.tab-link-popover {
-  position: fixed;
-  display: none;
-  flex-direction: column;
-  gap: 4px;
-  padding: 8px 0;
-  border-radius: 10px;
-  border: 1px solid rgba(0, 0, 0, 0.12);
-  background: rgba(255, 255, 255, 0.97);
-  box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.25);
-  z-index: 9999;
-  min-width: 240px;
-  max-width: 420px;
-  backdrop-filter: blur(6px);
-}
-body.dark .tab-link-popover {
-  border-color: rgba(255, 255, 255, 0.08);
-  background: rgba(17, 24, 39, 0.95);
-  box-shadow: 0 12px 36px -12px rgba(15, 23, 42, 0.55);
-}
-.tab-link-popover.visible {
-  display: flex;
-}
-.tab-link-popover .tab-link-popover-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 10px 14px 6px;
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
-  color: rgba(15, 23, 42, 0.55);
-}
-.tab-link-popover .tab-link-popover-header i {
-  font-size: 12px;
-}
-body.dark .tab-link-popover .tab-link-popover-header {
-  color: rgba(226, 232, 240, 0.7);
-}
-.tab-link-popover .tab-link-popover-item {
-  width: 100%;
-  border: none;
-  margin: 0;
-  padding: 8px 14px;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  text-align: left;
-  font: inherit;
-  color: inherit;
-  background: transparent;
-  cursor: pointer;
-}
-.tab-link-popover .tab-link-popover-item.qr-inline { flex-direction: row; align-items: center; gap: 10px; }
-.tab-link-popover .tab-link-popover-item.qr-inline .textcol { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
-.tab-link-popover .tab-link-popover-item.qr-inline .qr { width: 64px; height: 64px; image-rendering: pixelated; flex: 0 0 auto; margin-left: auto; }
-.tab-link-popover .tab-link-popover-item:hover,
-.tab-link-popover .tab-link-popover-item:focus-visible {
-  background: rgba(15, 23, 42, 0.06);
-  outline: none;
-}
-body.dark .tab-link-popover .tab-link-popover-item:hover,
-body.dark .tab-link-popover .tab-link-popover-item:focus-visible {
-  background: rgba(148, 163, 184, 0.12);
-}
-.tab-link-popover .tab-link-popover-item .label {
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-  color: rgba(15, 23, 42, 0.55);
-}
-body.dark .tab-link-popover .tab-link-popover-item .label {
-  color: rgba(226, 232, 240, 0.65);
-}
-.tab-link-popover .tab-link-popover-item .value {
-  font-size: 13px;
-  line-height: 1.35;
-  word-break: break-word;
-  color: rgba(15, 23, 42, 0.85);
-}
-body.dark .tab-link-popover .tab-link-popover-item .value {
-  color: rgba(226, 232, 240, 0.9);
-}
-.tab-link-popover .tab-link-popover-item .value .muted {
-  color: rgba(15, 23, 42, 0.55);
-}
-body.dark .tab-link-popover .tab-link-popover-item .value .muted {
-  color: rgba(226, 232, 240, 0.65);
-}
-.tab-link-popover .tab-link-popover-footer {
-  border-top: 1px solid rgba(15, 23, 42, 0.08);
-  margin-top: 4px;
-  padding-top: 12px;
-  background: rgba(59, 130, 246, 0.12);
-  color: #1d4ed8;
-}
-.tab-link-popover .tab-link-popover-footer .label,
-.tab-link-popover .tab-link-popover-footer .value {
-  color: inherit;
-}
-.tab-link-popover .tab-link-popover-footer .value {
-  font-weight: 600;
-}
-.tab-link-popover .tab-link-popover-footer:hover,
-.tab-link-popover .tab-link-popover-footer:focus-visible {
-  background: rgba(37, 99, 235, 0.2);
-}
-body.dark .tab-link-popover .tab-link-popover-footer {
-  border-top-color: rgba(148, 163, 184, 0.2);
-  background: rgba(96, 165, 250, 0.22);
-  color: #bfdbfe;
-}
-body.dark .tab-link-popover .tab-link-popover-footer:hover,
-body.dark .tab-link-popover .tab-link-popover-footer:focus-visible {
-  background: rgba(147, 197, 253, 0.35);
-}
 .tab.has-preview .tab-preview {
   color: rgba(0, 0, 0, 0.6);
   min-width: 0;
@@ -3058,6 +2940,7 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
 */
 </style>
 <link href="/app.css" rel="stylesheet"/>
+<link href="/tab-link-popover.css" rel="stylesheet"/>
 <script src="/window_storage.js"></script>
 <script src="/timeago.min.js"></script>
 <script src="/hotkeys.min.js"></script>
@@ -3081,6 +2964,7 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
 <script src="/fseditor.js"></script>
 <script src="/popper.min.js"></script>
 <script src="/tippy-bundle.umd.min.js"></script>
+<script src="/tab-link-popover.js"></script>
 </head>
 <body class='<%=theme%>' data-platform="<%=platform%>" data-agent="<%=agent%>">
 <header class='navheader grabbable'>
@@ -3113,7 +2997,7 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
   <div><i class="fa-solid fa-plus"></i></div>
 </button>
 <button class='btn2 hidden' id='close-window' data-tippy-content='close this section'>
-  <div><i class="fa-solid fa-xmark"></i></div>
+  <div><i class="fa-solid fa-stop"></i></div>
 </button>
 </h1>
 </header>
@@ -3128,23 +3012,6 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
 <% } else { %>
   <% if (type !== 'files') { %>
   <aside class='active'>
-     <!--
-    <div class='header-top header-item'>
-      <% if (type === "run") { %>
-        <div class='app-info'>
-          <div class='app-info-card'>
-            <% if (config.icon) { %>
-              <img src="<%=config.icon%>" onerror="this.src='/pinokio-black.png'"/>
-            <% } %>
-            <div class='app-info-container'>
-              <div class='app-info-title'><%=config.title%></div>
-              <div class='app-info-description collapsed'><%=config.description%></div>
-            </div>
-          </div>
-        </div>
-      <% } %>
-    </div>
-        -->
     <div class='menu-container'>
       <div class='m n system' data-type="n">
         <%if (type==='browse') { %>
@@ -3155,9 +3022,6 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
               <% } %>
               <div><%=config.title%></div>
             </div>
-            <!--
-            <div class='loader'><i class='fa-solid fa-angle-right'></i></div>
-            -->
           </a>
           
           <div class="dynamic <%=type==='run' ? '' : 'selected'%>">
@@ -3428,1426 +3292,98 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
   const updatedClass = "tab-updated"
   const tabStateStore = new Map()
   const TAB_STATE_STORAGE_KEY = "tab-state-store"
-  const TAB_LINK_POPOVER_ID = "tab-link-popover"
-  let tabLinkPopoverEl = null
-  let tabLinkActiveLink = null
-  let tabLinkPendingLink = null
-  let tabLinkHideTimer = null
-  let tabLinkLocalInfoPromise = null
-  let tabLinkLocalInfoExpiry = 0
-  let tabLinkRouterInfoPromise = null
-  let tabLinkRouterInfoExpiry = 0
-  let tabLinkRouterHttpsActive = null
-  let tabLinkPeerInfoPromise = null
-  let tabLinkPeerInfoExpiry = 0
-
-  const ensureTabLinkPopoverEl = () => {
-    if (!tabLinkPopoverEl) {
-      tabLinkPopoverEl = document.createElement("div")
-      tabLinkPopoverEl.id = TAB_LINK_POPOVER_ID
-      tabLinkPopoverEl.className = "tab-link-popover"
-      tabLinkPopoverEl.addEventListener("mouseenter", () => {
-        if (tabLinkHideTimer) {
-          clearTimeout(tabLinkHideTimer)
-          tabLinkHideTimer = null
-        }
-      })
-      tabLinkPopoverEl.addEventListener("mouseleave", () => {
-        hideTabLinkPopover({ immediate: true })
-      })
-      tabLinkPopoverEl.addEventListener("click", (event) => {
-        const item = event.target.closest(".tab-link-popover-item")
-        if (!item) {
-          return
-        }
-        event.preventDefault()
-        event.stopPropagation()
-        const url = item.getAttribute("data-url")
-        if (url) {
-          const targetMode = (item.getAttribute("data-target") || "_blank").toLowerCase()
-          if (targetMode === "_self") {
-            window.location.assign(url)
-          } else {
-            window.open(url, "_blank", "noopener")
-          }
-        }
-        hideTabLinkPopover({ immediate: true })
-      })
-      document.body.appendChild(tabLinkPopoverEl)
-    }
-    return tabLinkPopoverEl
-  }
-
-  const ensurePeerInfo = async () => {
-    const now = Date.now()
-    if (!tabLinkPeerInfoPromise || now > tabLinkPeerInfoExpiry) {
-      tabLinkPeerInfoPromise = fetch("/pinokio/peer", {
-        method: "GET",
-        headers: {
-          "Accept": "application/json"
-        }
-      })
-        .then((response) => {
-          if (!response.ok) {
-            throw new Error("Failed to load peer info")
-          }
-          return response.json()
-        })
-        .catch(() => null)
-      tabLinkPeerInfoExpiry = now + 3000
-    }
-    return tabLinkPeerInfoPromise
-  }
-
-  const canonicalizeUrl = (value) => {
-    try {
-      const parsed = new URL(value, location.origin)
-      if (!parsed.protocol) {
-        return value
-      }
-      const protocol = parsed.protocol.toLowerCase()
-      if (protocol !== "http:" && protocol !== "https:") {
-        return value
-      }
-      const hostname = parsed.hostname.toLowerCase()
-      const port = parsed.port ? `:${parsed.port}` : ""
-      let pathname = parsed.pathname || "/"
-      if (pathname !== "/") {
-        pathname = pathname.replace(/\/+/g, "/")
-        if (pathname.length > 1 && pathname.endsWith("/")) {
-          pathname = pathname.slice(0, -1)
-        }
-      }
-      const search = parsed.search || ""
-      return `${protocol}//${hostname}${port}${pathname}${search}`
-    } catch (_) {
-      return value
-    }
-  }
-
-  const ensureHttpDirectoryUrl = (value) => {
-    try {
-      const parsed = new URL(value)
-      if (parsed.protocol.toLowerCase() !== "http:") {
-        return value
-      }
-      let pathname = parsed.pathname || "/"
-      const lastSegment = pathname.split("/").pop() || ""
-      const hasExtension = lastSegment.includes(".")
-      if (!hasExtension && !pathname.endsWith("/")) {
-        pathname = `${pathname}/`
-        parsed.pathname = pathname
-      }
-      parsed.hash = parsed.hash || ""
-      parsed.search = parsed.search || ""
-      return parsed.toString()
-    } catch (_) {
-      return value
-    }
-  }
-
-  const isLocalHostLike = (hostname) => {
-    if (!hostname) {
-      return false
-    }
-    const hostLower = hostname.toLowerCase()
-    if (hostLower === location.hostname.toLowerCase()) {
-      return true
-    }
-    if (hostLower === "localhost" || hostLower === "0.0.0.0") {
-      return true
-    }
-    if (hostLower.startsWith("127.")) {
-      return true
-    }
-    if (/^\d+\.\d+\.\d+\.\d+$/.test(hostLower)) {
-      return true
+  const getWindowStorage = () => {
+    if (typeof windowStorage === "undefined" || !windowStorage) {
+      return null
     }
-    return false
+    return windowStorage
   }
-
-  const isIPv4Host = (host) => /^(\d{1,3}\.){3}\d{1,3}$/.test((host || '').trim())
-
-  const extractProjectSlug = (node) => {
-    if (!node) {
+  const frameContextKey = () => {
+    const frameName = window.frameElement?.name || ""
+    if (!frameName) {
       return ""
     }
-    const candidates = []
-    const targetFull = node.getAttribute("data-target-full")
-    if (typeof targetFull === "string" && targetFull.length > 0) {
-      candidates.push(targetFull)
-    }
-    const dataHref = node.getAttribute("href")
-    if (typeof dataHref === "string" && dataHref.length > 0) {
-      candidates.push(dataHref)
+    const datasetSrc = window.frameElement?.dataset?.src
+    if (typeof datasetSrc === 'string' && datasetSrc.length > 0) {
+      return `${frameName}:${datasetSrc}`
     }
     try {
-      const absolute = new URL(node.href, location.origin)
-      candidates.push(absolute.pathname)
-    } catch (_) {
-      // ignore
-    }
-    for (const candidate of candidates) {
-      if (typeof candidate !== "string" || candidate.length === 0) {
-        continue
-      }
-      const assetMatch = candidate.match(/\/asset\/api\/([^\/?#]+)/i)
-      if (assetMatch && assetMatch[1]) {
-        return assetMatch[1]
-      }
-      const pageMatch = candidate.match(/\/p\/([^\/?#]+)/i)
-      if (pageMatch && pageMatch[1]) {
-        return pageMatch[1]
+      const srcUrl = window.frameElement?.src ? new URL(window.frameElement.src, window.location.origin) : null
+      if (srcUrl) {
+        return `${frameName}:${srcUrl.pathname}${srcUrl.search}${srcUrl.hash}`
       }
-    }
-    return ""
-  }
-
-  const formatDisplayUrl = (value) => {
-    try {
-      const parsed = new URL(value, location.origin)
-      const host = parsed.host
-      const pathname = parsed.pathname || "/"
-      const search = parsed.search || ""
-      return `${host}${pathname}${search}`
-    } catch (_) {
-      return value
-    }
-  }
-
-  const isHttpOrHttps = (value) => {
-    try {
-      const parsed = new URL(value, location.origin)
-      const protocol = parsed.protocol.toLowerCase()
-      return protocol === "http:" || protocol === "https:"
-    } catch (_) {
-      return false
-    }
+    } catch (_) {}
+    return frameName
   }
-
-  const isHttpUrl = (value) => {
-    try {
-      const parsed = new URL(value, location.origin)
-      return parsed.protocol.toLowerCase() === "http:"
-    } catch (_) {
-      return false
+  const selectionStorageKey = () => {
+    const base = frameContextKey()
+    if (!base) {
+      return ""
     }
+    return `${base}:selector`
   }
-
-  const isHttpsUrl = (value) => {
-    try {
-      const parsed = new URL(value, location.origin)
-      return parsed.protocol.toLowerCase() === "https:"
-    } catch (_) {
-      return false
+  const selectionUrlStorageKey = () => {
+    const base = frameContextKey()
+    if (!base) {
+      return ""
     }
+    return `${base}:url`
   }
-
-  const collectUrlsFromLocal = (root) => {
-    if (!root || typeof root !== "object") {
-      return []
-    }
-    const queue = [root]
-    const visited = new Set()
-    const urls = new Set()
-    while (queue.length > 0) {
-      const current = queue.shift()
-      if (!current || typeof current !== "object") {
-        continue
-      }
-      if (visited.has(current)) {
-        continue
-      }
-      visited.add(current)
-      const values = Array.isArray(current) ? current : Object.values(current)
-      for (const value of values) {
-        if (typeof value === "string") {
-          if (isHttpOrHttps(value)) {
-            urls.add(value)
-          }
-        } else if (value && typeof value === "object") {
-          queue.push(value)
-        }
-      }
+  const SELECTION_SELECTOR_ATTRS = [
+    'target',
+    'data-target-full',
+    'href',
+    'data-shell',
+    'data-script',
+    'data-action',
+    'data-run',
+    'data-command',
+    'data-filepath'
+  ]
+  const buildFrameLinkSelector = (node) => {
+    if (!node || !node.classList || !node.classList.contains('frame-link')) {
+      return null
     }
-    return Array.from(urls)
-  }
-
-  const collectScriptKeys = (node) => {
-    const keys = new Set()
-    const scriptAttr = node.getAttribute("data-script")
-    if (scriptAttr) {
-      const decoded = decodeURIComponent(scriptAttr)
-      if (decoded) {
-        keys.add(decoded)
-        const withoutQuery = decoded.split("?")[0]
-        if (withoutQuery) {
-          keys.add(withoutQuery)
-        }
+    for (const attr of SELECTION_SELECTOR_ATTRS) {
+      const raw = node.getAttribute(attr)
+      if (typeof raw === 'string' && raw.length > 0) {
+        return `.frame-link[${attr}='${escapeTargetSelector(raw)}']`
       }
     }
-    const filepathAttr = node.getAttribute("data-filepath")
-    if (filepathAttr) {
-      keys.add(filepathAttr)
-    }
-    return Array.from(keys)
-  }
-
-  const ensureLocalMemory = async () => {
-    const now = Date.now()
-    if (!tabLinkLocalInfoPromise || now > tabLinkLocalInfoExpiry) {
-      tabLinkLocalInfoPromise = fetch("/info/local", {
-        method: "GET",
-        headers: {
-          "Accept": "application/json"
-        }
-      })
-        .then((response) => {
-          if (!response.ok) {
-            throw new Error("Failed to load local info")
-          }
-          return response.json()
-        })
-        .catch(() => ({}))
-      tabLinkLocalInfoExpiry = now + 3000
-    }
-    return tabLinkLocalInfoPromise
+    return null
   }
-
-  const normalizeHttpsTarget = (value) => {
-    if (!value || typeof value !== "string") {
-      return ""
-    }
-    let trimmed = value.trim()
-    if (!trimmed) {
-      return ""
+  const findLinkByAbsoluteHref = (href) => {
+    if (!href) {
+      return null
     }
-    // If it's already a URL, ensure it's HTTPS and not an IP host
-    if (/^https?:\/\//i.test(trimmed)) {
+    return Array.from(document.querySelectorAll('.frame-link')).find((el) => {
       try {
-        const parsed = new URL(trimmed)
-        const host = (parsed.hostname || '').toLowerCase()
-        if (!host || isIPv4Host(host)) {
-          return ""
-        }
-        // Only accept domains (prefer *.localhost) for HTTPS targets
-        if (!(host === 'localhost' || host.endsWith('.localhost') || host.includes('.'))) {
-          return ""
-        }
-        let pathname = parsed.pathname || ""
-        if (pathname === "/") pathname = ""
-        const search = parsed.search || ""
-        return `https://${host}${pathname}${search}`
+        return el.href === href
       } catch (_) {
-        return ""
-      }
-    }
-    // Not a full URL: accept plain domains (prefer *.localhost), reject IPs
-    try {
-      const hostCandidate = trimmed.split('/')[0].toLowerCase()
-      if (!hostCandidate || isIPv4Host(hostCandidate)) {
-        return ""
-      }
-      if (!(hostCandidate === 'localhost' || hostCandidate.endsWith('.localhost') || hostCandidate.includes('.'))) {
-        return ""
+        return false
       }
-      return `https://${hostCandidate}`
-    } catch (_) {
-      return ""
-    }
+    }) || null
   }
-
-  const parseHostPort = (value) => {
-    if (!value || typeof value !== "string") {
-      return null
-    }
-    let trimmed = value.trim()
-    if (!trimmed) {
-      return null
+  const persistFrameLinkSelection = (node) => {
+    const storage = getWindowStorage()
+    if (!storage || !node || !node.classList || !node.classList.contains('frame-link')) {
+      return
     }
-    if (/^https?:\/\//i.test(trimmed)) {
-      try {
-        const parsed = new URL(trimmed)
-        if (!parsed.hostname) {
+    const payload = {
+      selector: buildFrameLinkSelector(node),
+      hrefAttr: node.getAttribute('href') || null,
+      href: (() => {
+        try {
+          return node.href || null
+        } catch (_) {
           return null
         }
-        const protocol = parsed.protocol.toLowerCase()
-        let port = parsed.port
-        if (!port) {
-          if (protocol === "http:") {
-            port = "80"
-          } else if (protocol === "https:") {
-            port = "443"
-          }
-        }
-        if (!port) {
-          return null
-        }
-        return {
-          host: parsed.hostname.toLowerCase(),
-          port
-        }
-      } catch (_) {
-        return null
-      }
-    }
-    const slashIndex = trimmed.indexOf("/")
-    if (slashIndex >= 0) {
-      trimmed = trimmed.slice(0, slashIndex)
-    }
-    const match = trimmed.match(/^\[?([^\]]+)\]?(?::([0-9]+))$/)
-    if (!match) {
-      return null
-    }
-    const host = match[1] ? match[1].toLowerCase() : ""
-    const port = match[2] || ""
-    if (!host || !port) {
-      return null
-    }
-    return { host, port }
-  }
-
-  const ensureRouterInfoMapping = async () => {
-    const now = Date.now()
-    if (!tabLinkRouterInfoPromise || now > tabLinkRouterInfoExpiry) {
-      // Use lightweight router mapping to avoid favicon/installed overhead
-      tabLinkRouterInfoPromise = fetch("/info/router", {
-        method: "GET",
-        headers: {
-          "Accept": "application/json"
-        }
-      })
-        .then((response) => {
-          if (!response.ok) {
-            throw new Error("Failed to load system info")
-          }
-          return response.json()
-        })
-        .then((data) => {
-          if (typeof data?.https_active === "boolean") {
-            tabLinkRouterHttpsActive = data.https_active
-          }
-          const processes = Array.isArray(data?.router_info) ? data.router_info : []
-          const rewriteMapping = data?.rewrite_mapping && typeof data.rewrite_mapping === "object"
-            ? Object.values(data.rewrite_mapping)
-            : []
-          const portMap = new Map()
-          const hostPortMap = new Map()
-          const externalHttpByExtPort = new Map() // ext port -> Set of host:port (external_ip)
-          const externalHttpByIntPort = new Map() // internal port -> Set of host:port (external_ip)
-          const hostAliasPortMap = new Map()
-          if (data?.router && typeof data.router === "object") {
-            Object.entries(data.router).forEach(([dial, hosts]) => {
-              const parsedDial = parseHostPort(dial)
-              if (!parsedDial || !parsedDial.port) {
-                return
-              }
-              if (!Array.isArray(hosts)) {
-                return
-              }
-              hosts.forEach((host) => {
-                if (typeof host !== "string") {
-                  return
-                }
-                const trimmed = host.trim().toLowerCase()
-                if (!trimmed) {
-                  return
-                }
-                if (!hostAliasPortMap.has(trimmed)) {
-                  hostAliasPortMap.set(trimmed, new Set())
-                }
-                hostAliasPortMap.get(trimmed).add(parsedDial.port)
-              })
-            })
-          }
-          const localAliases = ["127.0.0.1", "localhost", "0.0.0.0", "::1", "[::1]"]
-
-          const addHttpMapping = (host, port, httpsSet) => {
-            if (!host || !port || !httpsSet || httpsSet.size === 0) {
-              return
-            }
-            const hostLower = host.toLowerCase()
-            const keys = new Set([`${hostLower}:${port}`])
-            if (localAliases.includes(hostLower)) {
-              localAliases.forEach((alias) => keys.add(`${alias}:${port}`))
-            }
-            keys.forEach((key) => {
-              if (!hostPortMap.has(key)) {
-                hostPortMap.set(key, new Set())
-              }
-              const set = hostPortMap.get(key)
-              httpsSet.forEach((url) => set.add(url))
-            })
-            if (localAliases.includes(hostLower)) {
-              if (!portMap.has(port)) {
-                portMap.set(port, new Set())
-              }
-              const portSet = portMap.get(port)
-              httpsSet.forEach((url) => portSet.add(url))
-            }
-          }
-
-          const gatherHttpsTargets = (value) => {
-            const targets = new Set()
-            const visit = (input) => {
-              if (!input) {
-                return
-              }
-              if (Array.isArray(input)) {
-                input.forEach(visit)
-                return
-              }
-              if (typeof input === "object") {
-                Object.values(input).forEach(visit)
-                return
-              }
-              if (typeof input !== "string") {
-                return
-              }
-              const normalized = normalizeHttpsTarget(input)
-              if (normalized) {
-                targets.add(normalized)
-              }
-            }
-            visit(value)
-            return targets
-          }
-
-          const collectHostPort = (value, hostPortCandidates, portCandidates) => {
-            if (!value) {
-              return
-            }
-            if (Array.isArray(value)) {
-              value.forEach((item) => collectHostPort(item, hostPortCandidates, portCandidates))
-              return
-            }
-            if (typeof value === "object") {
-              Object.values(value).forEach((item) => {
-                collectHostPort(item, hostPortCandidates, portCandidates)
-              })
-              return
-            }
-            if (typeof value !== "string") {
-              return
-            }
-            const parsed = parseHostPort(value)
-            let hostLower
-            if (parsed && parsed.host && parsed.port) {
-              hostLower = parsed.host.toLowerCase()
-              hostPortCandidates.add(`${hostLower}:${parsed.port}`)
-              if (localAliases.includes(hostLower)) {
-                portCandidates.add(parsed.port)
-              }
-            }
-            const rawHost = value.replace(/^https?:\/\//i, "").split("/")[0].toLowerCase()
-            const aliasPorts = hostAliasPortMap.get(rawHost)
-            if (aliasPorts && aliasPorts.size > 0) {
-              aliasPorts.forEach((aliasPort) => {
-                hostPortCandidates.add(`${rawHost}:${aliasPort}`)
-                if (localAliases.includes(rawHost)) {
-                  portCandidates.add(aliasPort)
-                }
-              })
-            }
-          }
-
-          const collectPort = (value, portCandidates) => {
-            if (value === null || value === undefined || value === "") {
-              return
-            }
-            if (Array.isArray(value)) {
-              value.forEach((item) => collectPort(item, portCandidates))
-              return
-            }
-            const port = `${value}`.trim()
-            if (port && /^[0-9]+$/.test(port)) {
-              portCandidates.add(port)
-            }
-          }
-
-          const registerEntry = (entry) => {
-            if (!entry || typeof entry !== "object") {
-              return
-            }
-            const httpsTargets = new Set()
-            const mergeTargets = (targetValue) => {
-              const targets = gatherHttpsTargets(targetValue)
-              targets.forEach((url) => httpsTargets.add(url))
-            }
-
-            mergeTargets(entry.external_router)
-            mergeTargets(entry.external_domain)
-            mergeTargets(entry.https_href)
-            mergeTargets(entry.app_href)
-            // Some rewrite mapping entries expose domain candidates under `hosts`
-            mergeTargets(entry.hosts)
-            // Internal router can also include domain aliases (e.g., comfyui.localhost)
-            mergeTargets(entry.internal_router)
-
-            // Record external http host:port candidates by external and internal ports for later
-            if (entry.external_ip && typeof entry.external_ip === 'string') {
-              const parsed = parseHostPort(entry.external_ip)
-              if (parsed && parsed.port) {
-                const keyExt = parsed.port
-                if (!externalHttpByExtPort.has(keyExt)) {
-                  externalHttpByExtPort.set(keyExt, new Set())
-                }
-                externalHttpByExtPort.get(keyExt).add(`${parsed.host}:${parsed.port}`)
-                const keyInt = String(entry.internal_port || '')
-                if (keyInt) {
-                  if (!externalHttpByIntPort.has(keyInt)) {
-                    externalHttpByIntPort.set(keyInt, new Set())
-                  }
-                  externalHttpByIntPort.get(keyInt).add(`${parsed.host}:${parsed.port}`)
-                }
-              }
-            }
-
-            if (httpsTargets.size === 0) {
-              return
-            }
-
-            const hostPortCandidates = new Set()
-            const portCandidates = new Set()
-
-            collectHostPort(entry.external_ip, hostPortCandidates, portCandidates)
-            collectHostPort(entry.internal_ip, hostPortCandidates, portCandidates)
-            collectHostPort(entry.ip, hostPortCandidates, portCandidates)
-            collectHostPort(entry.dial, hostPortCandidates, portCandidates)
-            collectHostPort(entry.match, hostPortCandidates, portCandidates)
-            collectHostPort(entry.target, hostPortCandidates, portCandidates)
-            collectHostPort(entry.forward, hostPortCandidates, portCandidates)
-            collectHostPort(entry.internal_router, hostPortCandidates, portCandidates)
-            collectHostPort(entry.external_router, hostPortCandidates, portCandidates)
-
-            collectPort(entry.port, portCandidates)
-            collectPort(entry.internal_port, portCandidates)
-            collectPort(entry.external_port, portCandidates)
-
-            if (hostPortCandidates.size === 0 && portCandidates.size === 0) {
-              httpsTargets.forEach((target) => {
-                collectHostPort(target, hostPortCandidates, portCandidates)
-              })
-            }
-
-            if (hostPortCandidates.size === 0 && portCandidates.size === 0) {
-              return
-            }
-
-            hostPortCandidates.forEach((key) => {
-              const parsed = parseHostPort(key)
-              if (parsed) {
-                addHttpMapping(parsed.host, parsed.port, httpsTargets)
-              }
-            })
-
-            portCandidates.forEach((port) => {
-              localAliases.forEach((host) => {
-                addHttpMapping(host, port, httpsTargets)
-              })
-            })
-          }
-
-          const visited = new WeakSet()
-          const traverseNode = (node) => {
-            if (!node) {
-              return
-            }
-            if (Array.isArray(node)) {
-              node.forEach(traverseNode)
-              return
-            }
-            if (typeof node !== "object") {
-              return
-            }
-            if (visited.has(node)) {
-              return
-            }
-            visited.add(node)
-            registerEntry(node)
-            Object.values(node).forEach((value) => {
-              if (value && typeof value === "object") {
-                traverseNode(value)
-              }
-            })
-          }
-
-          processes.forEach(traverseNode)
-          rewriteMapping.forEach(traverseNode)
-
-          return {
-            portMap,
-            hostPortMap,
-            externalHttpByExtPort,
-            externalHttpByIntPort
-          }
-        })
-        .catch(() => {
-          tabLinkRouterHttpsActive = null
-          return {
-            portMap: new Map(),
-            hostPortMap: new Map(),
-            externalHttpByExtPort: new Map(),
-            externalHttpByIntPort: new Map()
-          }
-        })
-      tabLinkRouterInfoExpiry = now + 3000
-    }
-    return tabLinkRouterInfoPromise
-  }
-
-  const collectHttpsUrlsFromRouter = (httpUrl, routerData) => {
-    if (!routerData) {
-      return []
-    }
-    let parsed
-    try {
-      parsed = new URL(httpUrl, location.origin)
-    } catch (_) {
-      return []
-    }
-    const protocol = parsed.protocol.toLowerCase()
-    if (protocol !== "http:" && protocol !== "https:") {
-      return []
-    }
-    let port = parsed.port
-    if (!port) {
-      if (protocol === "http:") {
-        port = "80"
-      } else if (protocol === "https:") {
-        port = "443"
-      }
-    }
-    const hostLower = parsed.hostname.toLowerCase()
-    const results = new Set()
-    if (port) {
-      const hostPortKey = `${hostLower}:${port}`
-      if (routerData.hostPortMap.has(hostPortKey)) {
-        routerData.hostPortMap.get(hostPortKey).forEach((value) => results.add(value))
-      }
-      if (routerData.portMap.has(port)) {
-        routerData.portMap.get(port).forEach((value) => results.add(value))
-      }
-    }
-    return Array.from(results)
-  }
-
-  const buildTabLinkEntries = async (link) => {
-    if (!link || !link.href) {
-      return []
-    }
-
-    const baseHref = link.href
-    let canonicalBase = canonicalizeUrl(baseHref)
-    if (canonicalBase && isHttpUrl(canonicalBase)) {
-      canonicalBase = ensureHttpDirectoryUrl(canonicalBase)
-    }
-    let parsedBaseUrl = null
-    let sameOrigin = false
-    let basePortNormalized = ""
-    try {
-      parsedBaseUrl = new URL(baseHref, location.origin)
-      sameOrigin = parsedBaseUrl.origin === location.origin
-      if (parsedBaseUrl) {
-        basePortNormalized = parsedBaseUrl.port
-        if (!basePortNormalized) {
-          const proto = parsedBaseUrl.protocol ? parsedBaseUrl.protocol.toLowerCase() : "http:"
-          basePortNormalized = proto === "https:" ? "443" : "80"
-        }
-      }
-    } catch (_) {}
-    const projectSlug = extractProjectSlug(link).toLowerCase()
-    const entries = []
-    const entryByUrl = new Map()
-    const addEntry = (type, label, url, opts = {}) => {
-      if (!url) {
-        return
-      }
-      let canonical = canonicalizeUrl(url)
-      if (canonical && type === "http") {
-        canonical = ensureHttpDirectoryUrl(canonical)
-      }
-      if (!canonical) {
-        return
-      }
-      let skip = false
-      const allowSameOrigin = opts && opts.allowSameOrigin === true
-      try {
-        const parsed = new URL(canonical)
-        const originLower = parsed.origin.toLowerCase()
-        if (!allowSameOrigin && originLower === location.origin.toLowerCase()) {
-          skip = true
-        }
-      } catch (_) {
-        // ignore parse failures but do not skip by default
-      }
-      if (skip) {
-        return
-      }
-      if (entryByUrl.has(canonical)) {
-        const existing = entryByUrl.get(canonical)
-        if (opts && opts.qr === true) existing.qr = true
-        return
-      }
-      const entry = {
-        type,
-        label,
-        url: canonical,
-        display: formatDisplayUrl(canonical),
-        qr: opts && opts.qr === true
-      }
-      entryByUrl.set(canonical, entry)
-      entries.push(entry)
-    }
-
-    if (isHttpUrl(baseHref)) {
-      addEntry("http", "HTTP", baseHref, { allowSameOrigin: true })
-    } else if (isHttpsUrl(baseHref)) {
-      addEntry("https", "HTTPS", baseHref, { allowSameOrigin: true })
-    } else {
-      addEntry("url", "URL", baseHref, { allowSameOrigin: true })
-    }
-
-    const httpCandidates = new Map() // url -> { qr: boolean }
-    const httpsCandidates = new Set()
-
-    if (isHttpUrl(baseHref)) {
-      httpCandidates.set(canonicalBase || canonicalizeUrl(baseHref), { qr: false })
-    } else if (isHttpsUrl(baseHref)) {
-      if (canonicalBase) {
-        httpsCandidates.add(canonicalBase)
-      } else {
-        httpsCandidates.add(canonicalizeUrl(baseHref))
-      }
-    }
-
-    if (projectSlug) {
-      try {
-        const baseUrl = parsedBaseUrl || new URL(baseHref, location.origin)
-        let pathname = baseUrl.pathname || "/"
-        if (pathname.endsWith("/index.html")) {
-          pathname = pathname.slice(0, -"/index.html".length)
-        }
-        if (!pathname.endsWith("/")) {
-          pathname = `${pathname}/`
-        }
-        const normalizedPath = pathname.toLowerCase()
-        if (normalizedPath.includes(`/asset/api/${projectSlug}`)) {
-          const fallbackHttp = `http://127.0.0.1:42000${pathname}`
-          httpCandidates.set(canonicalizeUrl(fallbackHttp), { qr: false })
-        }
-      } catch (_) {
-        // ignore fallback errors
-      }
-    }
-
-    const scriptKeys = collectScriptKeys(link)
-    if (scriptKeys.length > 0) {
-      const localInfo = await ensureLocalMemory()
-      scriptKeys.forEach((key) => {
-        if (!key) {
-          return
-        }
-        const local = localInfo ? localInfo[key] : undefined
-        if (!local) {
-          return
-        }
-        const urls = collectUrlsFromLocal(local)
-        urls.forEach((value) => {
-          const canonical = canonicalizeUrl(value)
-          if (isHttpsUrl(canonical)) {
-            httpsCandidates.add(canonical)
-          } else if (isHttpUrl(canonical)) {
-            const prev = httpCandidates.get(canonical)
-            httpCandidates.set(canonical, { qr: prev ? prev.qr === true : false })
-          }
-        })
-      })
-    }
-
-    const routerData = await ensureRouterInfoMapping()
-    if (httpCandidates.size > 0) {
-      Array.from(httpCandidates.keys()).forEach((httpUrl) => {
-        const mapped = collectHttpsUrlsFromRouter(httpUrl, routerData)
-        mapped.forEach((httpsUrl) => {
-          httpsCandidates.add(httpsUrl)
-        })
-      })
-    }
-
-    // Add external 192.168.* http host:port candidates mapped from the same internal port as base HTTP
-    try {
-      const base = parsedBaseUrl || new URL(baseHref, location.origin)
-      let basePort = base.port
-      if (!basePort) {
-        basePort = base.protocol.toLowerCase() === 'https:' ? '443' : '80'
-      }
-      const samePortHosts = routerData && routerData.externalHttpByIntPort ? routerData.externalHttpByIntPort.get(basePort) : null
-      if (samePortHosts && samePortHosts.size > 0) {
-        samePortHosts.forEach((hostport) => {
-          try {
-            const hpUrl = `http://${hostport}${base.pathname || '/'}${base.search || ''}`
-            const canonical = canonicalizeUrl(hpUrl)
-            if (isHttpUrl(canonical)) {
-              const prev = httpCandidates.get(canonical)
-              httpCandidates.set(canonical, { qr: true || (prev ? prev.qr === true : false) })
-            }
-          } catch (_) {}
-        })
-      }
-    } catch (_) {}
-
-    const httpsList = Array.from(httpsCandidates).sort()
-
-    if (httpsList.length > 0) {
-      httpsList.forEach((url) => {
-        try {
-          const parsed = new URL(url)
-          if (parsed.protocol.toLowerCase() !== "https:") {
-            return
-          }
-          if (!parsed.port || parsed.port !== "42000") {
-            return
-          }
-          const hostPort = parsed.port ? `${parsed.hostname}:${parsed.port}` : parsed.hostname
-          const httpUrl = `http://${hostPort}${parsed.pathname || "/"}${parsed.search || ""}`
-          const key = canonicalizeUrl(httpUrl)
-          const prev = httpCandidates.get(key)
-          httpCandidates.set(key, { qr: prev ? prev.qr === true : false })
-        } catch (_) {
-          // ignore failures
-        }
-      })
-    }
-
-    const httpList = Array.from(httpCandidates.keys()).sort()
-
-    httpList.forEach((url) => {
-      const meta = httpCandidates.get(url) || { qr: false }
-      addEntry("http", "HTTP", url, { qr: meta.qr === true })
-    })
-    httpsList.forEach((url) => {
-      addEntry("https", "HTTPS", url)
-    })
-
-    if (sameOrigin) {
-      try {
-        const peerInfo = await ensurePeerInfo()
-        const peerHost = peerInfo && typeof peerInfo.host === "string" ? peerInfo.host.trim() : ""
-        if (peerHost) {
-          const peerHostLower = peerHost.toLowerCase()
-          // Skip loopback-style peers
-          if (peerHostLower !== "localhost" && !peerHostLower.startsWith("127.")) {
-            const baseUrl = parsedBaseUrl || new URL(baseHref, location.origin)
-            const baseHostLower = (baseUrl.hostname || "").toLowerCase()
-            if (peerHostLower !== baseHostLower) {
-              const baseProtocol = baseUrl.protocol ? baseUrl.protocol.toLowerCase() : "http:"
-              const scheme = baseProtocol === "https:" ? "https://" : "http://"
-              const port = baseUrl.port || (baseProtocol === "https:" ? "443" : "80")
-              const hostPort = port ? `${peerHostLower}:${port}` : peerHostLower
-              const pathSegment = baseUrl.pathname || "/"
-              const searchSegment = baseUrl.search || ""
-              const fallbackUrl = `${scheme}${hostPort}${pathSegment}${searchSegment}`
-              const label = baseProtocol === "https:" ? "HTTPS" : "HTTP"
-              addEntry(baseProtocol === "https:" ? "https" : "http", label, fallbackUrl, { qr: true })
-            }
-          }
-        }
-      } catch (_) {}
-
-      const matchesBasePort = (value) => {
-        if (!basePortNormalized) {
-          return true
-        }
-        try {
-          const parsed = new URL(value, location.origin)
-          let port = parsed.port
-          if (!port) {
-            const proto = parsed.protocol ? parsed.protocol.toLowerCase() : "http:"
-            port = proto === "https:" ? "443" : "80"
-          }
-          return port === basePortNormalized
-        } catch (_) {
-          return false
-        }
-      }
-
-      const filteredEntries = entries.filter((entry) => {
-        if (!entry || !entry.url) {
-          return false
-        }
-        if (entry.url === canonicalBase) {
-          return true
-        }
-        if (entry.qr === true) {
-          return matchesBasePort(entry.url)
-        }
-        return false
-      })
-      if (filteredEntries.length > 0) {
-        return filteredEntries
-      }
-    }
-
-    return entries
-  }
-
-  const positionTabLinkPopover = (popover, link) => {
-    if (!popover || !link) {
-      return
-    }
-    const rect = link.getBoundingClientRect()
-    const minWidth = Math.max(rect.width, 260)
-    popover.style.minWidth = `${Math.round(minWidth)}px`
-    popover.style.display = "flex"
-    popover.classList.add("visible")
-    popover.style.visibility = "hidden"
-
-    const popoverWidth = popover.offsetWidth
-    const popoverHeight = popover.offsetHeight
-
-    let left = rect.left
-    let top = rect.bottom + 8
-
-    if (left + popoverWidth > window.innerWidth - 12) {
-      left = window.innerWidth - popoverWidth - 12
-    }
-    if (left < 12) {
-      left = 12
-    }
-
-    if (top + popoverHeight > window.innerHeight - 12) {
-      top = Math.max(12, rect.top - popoverHeight - 8)
-    }
-
-    popover.style.left = `${Math.round(left)}px`
-    popover.style.top = `${Math.round(top)}px`
-    popover.style.visibility = ""
-  }
-
-  const hideTabLinkPopover = ({ immediate = false } = {}) => {
-    const applyHide = () => {
-      if (tabLinkPopoverEl) {
-        tabLinkPopoverEl.classList.remove("visible")
-        tabLinkPopoverEl.style.display = "none"
-      }
-      tabLinkActiveLink = null
-      tabLinkPendingLink = null
-      tabLinkHideTimer = null
-    }
-
-    if (tabLinkHideTimer) {
-      clearTimeout(tabLinkHideTimer)
-      tabLinkHideTimer = null
-    }
-
-    if (immediate) {
-      applyHide()
-    } else {
-      tabLinkHideTimer = setTimeout(applyHide, 120)
-    }
-  }
-
-  const renderTabLinkPopover = async (link) => {
-    if (!link || !link.href) {
-      hideTabLinkPopover({ immediate: true })
-      return
-    }
-
-    let sameOrigin = false
-    let canonicalBase = canonicalizeUrl(link.href)
-    if (canonicalBase && isHttpUrl(canonicalBase)) {
-      canonicalBase = ensureHttpDirectoryUrl(canonicalBase)
-    }
-    let basePortNormalized = ""
-    try {
-      const linkUrl = new URL(link.href, location.href)
-      sameOrigin = linkUrl.origin === location.origin
-      canonicalBase = canonicalizeUrl(linkUrl.href)
-      if (canonicalBase && isHttpUrl(canonicalBase)) {
-        canonicalBase = ensureHttpDirectoryUrl(canonicalBase)
-      }
-      basePortNormalized = linkUrl.port
-      if (!basePortNormalized) {
-        const proto = linkUrl.protocol ? linkUrl.protocol.toLowerCase() : "http:"
-        basePortNormalized = proto === "https:" ? "443" : "80"
-      }
-    } catch (_) {
-      hideTabLinkPopover({ immediate: true })
-      return
-    }
-
-    if (tabLinkActiveLink === link && tabLinkPopoverEl && tabLinkPopoverEl.classList.contains("visible")) {
-      if (tabLinkHideTimer) {
-        clearTimeout(tabLinkHideTimer)
-        tabLinkHideTimer = null
-      }
-      return
-    }
-
-    if (tabLinkPendingLink === link && tabLinkPopoverEl && tabLinkPopoverEl.classList.contains("visible")) {
-      return
-    }
-
-    tabLinkPendingLink = link
-    if (tabLinkHideTimer) {
-      clearTimeout(tabLinkHideTimer)
-      tabLinkHideTimer = null
-    }
-
-    // Show lightweight loading popover immediately while mapping fetch runs
-    try {
-      const pop = ensureTabLinkPopoverEl()
-      pop.innerHTML = ''
-      const header = document.createElement('div')
-      header.className = 'tab-link-popover-header'
-      header.innerHTML = `<i class="fa-solid fa-arrow-up-right-from-square"></i><span>Open in browser</span>`
-      const item = document.createElement('div')
-      item.className = 'tab-link-popover-item'
-      const label = document.createElement('span')
-      label.className = 'label'
-      label.textContent = 'Loading…'
-      const value = document.createElement('span')
-      value.className = 'value muted'
-      value.textContent = 'Discovering routes'
-      item.append(label, value)
-      pop.append(header, item)
-      positionTabLinkPopover(pop, link)
-    } catch (_) {}
-
-    let entries
-    try {
-      entries = await buildTabLinkEntries(link)
-    } catch (_) {
-      tabLinkPendingLink = null
-      return
-    }
-
-    if (tabLinkPendingLink !== link) {
-      return
-    }
-
-    if (!entries || entries.length === 0) {
-      hideTabLinkPopover({ immediate: true })
-      return
-    }
-
-    if (sameOrigin) {
-      const slug = extractProjectSlug(link).toLowerCase()
-      const matchesBasePort = (value) => {
-        if (!basePortNormalized) {
-          return true
-        }
-        try {
-          const parsed = new URL(value, location.origin)
-          let port = parsed.port
-          if (!port) {
-            const proto = parsed.protocol ? parsed.protocol.toLowerCase() : "http:"
-            port = proto === "https:" ? "443" : "80"
-          }
-          return port === basePortNormalized
-        } catch (_) {
-          return false
-        }
-      }
-
-      if (slug) {
-        entries = entries.filter((entry) => {
-          if (!entry || !entry.url) {
-            return false
-          }
-          if (entry.url === canonicalBase) {
-            return true
-          }
-          if (entry.qr === true) {
-            return matchesBasePort(entry.url)
-          }
-          try {
-            const parsed = new URL(entry.url)
-            const hostLower = parsed.hostname ? parsed.hostname.toLowerCase() : ""
-            if (isLocalHostLike(hostLower)) {
-              if (entry.type === "http") {
-                const pathLower = parsed.pathname ? parsed.pathname.toLowerCase() : ""
-                if (pathLower.includes(`/asset/api/${slug}`) || pathLower.includes(`/p/${slug}`)) {
-                  return true
-                }
-              }
-              return false
-            }
-            const pathLower = parsed.pathname ? parsed.pathname.toLowerCase() : ""
-            if (pathLower.includes(`/asset/api/${slug}`)) {
-              return true
-            }
-            if (pathLower.includes(`/p/${slug}`)) {
-              return true
-            }
-            if (hostLower.split(".").some((part) => part === slug)) {
-              return true
-            }
-          } catch (_) {
-            return false
-          }
-          return false
-        })
-      } else {
-        entries = entries.filter((entry) => {
-          if (!entry || !entry.url) {
-            return false
-          }
-          if (entry.url === canonicalBase) {
-            return true
-          }
-          if (entry.qr === true) {
-            return matchesBasePort(entry.url)
-          }
-          return false
-        })
-      }
-
-      entries = entries.filter((entry) => {
-        if (!entry || !entry.url) {
-          return false
-        }
-        if (entry.url === canonicalBase) {
-          return true
-        }
-        if (entry.qr === true) {
-          return matchesBasePort(entry.url)
-        }
-        return false
-      })
-
-      const hasAlternate = entries.some((entry) => entry.url !== canonicalBase)
-      if (!hasAlternate) {
-        hideTabLinkPopover({ immediate: true })
-        return
-      }
-    }
-
-    if (!entries || entries.length === 0) {
-      hideTabLinkPopover({ immediate: true })
-      return
-    }
-
-    const popover = ensureTabLinkPopoverEl()
-    popover.innerHTML = ""
-
-    const header = document.createElement("div")
-    header.className = "tab-link-popover-header"
-    header.innerHTML = `<i class="fa-solid fa-arrow-up-right-from-square"></i><span>Open in browser</span>`
-    popover.appendChild(header)
-
-    const hasHttpsEntry = entries.some((entry) => entry && entry.type === "https")
-
-    entries.forEach((entry) => {
-      const item = document.createElement("button")
-      item.type = "button"
-      item.setAttribute("data-url", entry.url)
-      const labelSpan = document.createElement("span")
-      labelSpan.className = "label"
-      labelSpan.textContent = entry.label
-      const valueSpan = document.createElement("span")
-      valueSpan.className = "value"
-      valueSpan.textContent = entry.display
-
-      if (entry.type === 'http' && entry.qr === true) {
-        item.className = "tab-link-popover-item qr-inline"
-        const textCol = document.createElement('div')
-        textCol.className = 'textcol'
-        textCol.append(labelSpan, valueSpan)
-        const qrImg = document.createElement('img')
-        qrImg.className = 'qr'
-        qrImg.alt = 'QR'
-        qrImg.decoding = 'async'
-        qrImg.loading = 'lazy'
-        qrImg.src = `/qr?data=${encodeURIComponent(entry.url)}&s=4&m=0`
-        item.append(textCol, qrImg)
-      } else {
-        item.className = "tab-link-popover-item"
-        // Keep label and value as direct children so column layout applies
-        item.append(labelSpan, valueSpan)
-      }
-      popover.appendChild(item)
-    })
-
-    if (tabLinkRouterHttpsActive === false && !hasHttpsEntry) {
-      const footerButton = document.createElement("button")
-      footerButton.type = "button"
-      footerButton.className = "tab-link-popover-item tab-link-popover-footer"
-      footerButton.setAttribute("data-url", "/network")
-      footerButton.setAttribute("data-target", "_self")
-      footerButton.setAttribute("aria-label", "Open network settings to configure local HTTPS")
-
-      const footerLabel = document.createElement("span")
-      footerLabel.className = "label"
-      footerLabel.textContent = "Custom domain not active"
-
-      const footerValue = document.createElement("span")
-      footerValue.className = "value"
-      footerValue.textContent = "Click to activate"
-
-      footerButton.append(footerLabel, footerValue)
-      popover.appendChild(footerButton)
-    }
-
-    tabLinkActiveLink = link
-    tabLinkPendingLink = null
-    positionTabLinkPopover(popover, link)
-  }
-
-  const setupTabLinkHover = () => {
-    const container = document.querySelector(".appcanvas > aside .menu-container")
-    if (!container) {
-      return
-    }
-
-    container.addEventListener("mouseover", (event) => {
-      const link = event.target.closest(".frame-link")
-      if (!link || !container.contains(link)) {
-        return
-      }
-      renderTabLinkPopover(link)
-    })
-
-    container.addEventListener("mouseout", (event) => {
-      const origin = event.target.closest(".frame-link")
-      if (!origin || !container.contains(origin)) {
-        return
-      }
-      const related = event.relatedTarget
-      const popover = tabLinkPopoverEl || document.getElementById(TAB_LINK_POPOVER_ID)
-      if (related && (origin.contains(related) || (popover && popover.contains(related)))) {
-        return
-      }
-      hideTabLinkPopover()
-    })
-  }
-
-  const handleGlobalPointer = (event) => {
-    if (!tabLinkPopoverEl || !tabLinkPopoverEl.classList.contains("visible")) {
-      return
-    }
-    if (tabLinkPopoverEl.contains(event.target)) {
-      return
-    }
-    if (tabLinkActiveLink && tabLinkActiveLink.contains(event.target)) {
-      return
-    }
-    hideTabLinkPopover({ immediate: true })
-  }
-
-  window.addEventListener("scroll", () => {
-    if (tabLinkPopoverEl && tabLinkPopoverEl.classList.contains("visible")) {
-      hideTabLinkPopover({ immediate: true })
-    }
-  }, true)
-
-  window.addEventListener("resize", () => {
-    if (tabLinkPopoverEl && tabLinkPopoverEl.classList.contains("visible") && tabLinkActiveLink) {
-      positionTabLinkPopover(tabLinkPopoverEl, tabLinkActiveLink)
-    }
-  })
-
-  document.addEventListener("mousedown", handleGlobalPointer, true)
-  try {
-    document.addEventListener("touchstart", handleGlobalPointer, { passive: true, capture: true })
-  } catch (_) {
-    document.addEventListener("touchstart", handleGlobalPointer, true)
-  }
-  const getWindowStorage = () => {
-    if (typeof windowStorage === "undefined" || !windowStorage) {
-      return null
-    }
-    return windowStorage
-  }
-  const frameContextKey = () => {
-    const frameName = window.frameElement?.name || ""
-    if (!frameName) {
-      return ""
-    }
-    const datasetSrc = window.frameElement?.dataset?.src
-    if (typeof datasetSrc === 'string' && datasetSrc.length > 0) {
-      return `${frameName}:${datasetSrc}`
-    }
-    try {
-      const srcUrl = window.frameElement?.src ? new URL(window.frameElement.src, window.location.origin) : null
-      if (srcUrl) {
-        return `${frameName}:${srcUrl.pathname}${srcUrl.search}${srcUrl.hash}`
-      }
-    } catch (_) {}
-    return frameName
-  }
-  const selectionStorageKey = () => {
-    const base = frameContextKey()
-    if (!base) {
-      return ""
-    }
-    return `${base}:selector`
-  }
-  const selectionUrlStorageKey = () => {
-    const base = frameContextKey()
-    if (!base) {
-      return ""
-    }
-    return `${base}:url`
-  }
-  const SELECTION_SELECTOR_ATTRS = [
-    'data-index',
-    'target',
-    'href',
-    'data-target-full',
-    'data-shell',
-    'data-script',
-    'data-action',
-    'data-run',
-    'data-command',
-    'data-filepath'
-  ]
-  const buildFrameLinkSelector = (node) => {
-    if (!node || !node.classList || !node.classList.contains('frame-link')) {
-      return null
-    }
-    for (const attr of SELECTION_SELECTOR_ATTRS) {
-      const raw = node.getAttribute(attr)
-      if (typeof raw === 'string' && raw.length > 0) {
-        return `.frame-link[${attr}='${escapeTargetSelector(raw)}']`
-      }
-    }
-    return null
-  }
-  const findLinkByAbsoluteHref = (href) => {
-    if (!href) {
-      return null
-    }
-    return Array.from(document.querySelectorAll('.frame-link')).find((el) => {
-      try {
-        return el.href === href
-      } catch (_) {
-        return false
-      }
-    }) || null
-  }
-  const persistFrameLinkSelection = (node) => {
-    const storage = getWindowStorage()
-    if (!storage || !node || !node.classList || !node.classList.contains('frame-link')) {
-      return
-    }
-    const payload = {
-      selector: buildFrameLinkSelector(node),
-      hrefAttr: node.getAttribute('href') || null,
-      href: (() => {
-        try {
-          return node.href || null
-        } catch (_) {
-          return null
-        }
-      })(),
-      target: node.getAttribute('target') || null,
-      dataIndex: node.getAttribute('data-index') || null,
-      pagePath: (() => {
-        try {
-          return window.location?.pathname || null
-        } catch (_) {
+      })(),
+      target: node.getAttribute('target') || null,
+      pagePath: (() => {
+        try {
+          return window.location?.pathname || null
+        } catch (_) {
           return null
         }
       })()
@@ -4900,6 +3436,12 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
     if (typeof payload === 'string') {
       payload = { selector: payload }
     }
+    if (payload && typeof payload.selector === 'string' && /\[data-index=/.test(payload.selector)) {
+      payload.selector = null
+    }
+    if (payload && Object.prototype.hasOwnProperty.call(payload, 'dataIndex')) {
+      delete payload.dataIndex
+    }
     const trySelector = (selector) => {
       if (!selector || typeof selector !== 'string') {
         return null
@@ -4917,9 +3459,6 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
     if (!node && payload.target) {
       node = trySelector(`.frame-link[target='${escapeTargetSelector(payload.target)}']`)
     }
-    if (!node && payload.dataIndex) {
-      node = trySelector(`.frame-link[data-index='${escapeTargetSelector(payload.dataIndex)}']`)
-    }
     if (!node && payload.href) {
       node = findLinkByAbsoluteHref(payload.href)
     }
@@ -5682,17 +4221,7 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
       target = preselected
     }
 
-    if (!target) {
-      const defaultSelection = getDefaultSelection()
-      if (defaultSelection) {
-        target = defaultSelection
-      } else if (skipPersistedSelection) {
-        scheduleSelectionRetry()
-        return
-      }
-    }
-
-    <% if (type === "run" && env.PINOKIO_SCRIPT_DEFAULT && env.PINOKIO_SCRIPT_DEFAULT.toString().toLowerCase() === "true") { %>
+    <% if (autoselect && env.PINOKIO_SCRIPT_DEFAULT && env.PINOKIO_SCRIPT_DEFAULT.toString().toLowerCase() === "true") { %>
       if (!target && !hasPersistedSelection) {
         const defaultSelection = getDefaultSelection()
         if (defaultSelection && defaultSelection.href) {
@@ -5727,10 +4256,6 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
       target = preselected
     }
 
-    if (!target) {
-      target = document.querySelector(".frame-link")
-    }
-
     if (!target) {
       document.querySelector(".container").classList.remove("active")
       document.querySelector("aside").classList.add("active")
@@ -6033,7 +4558,7 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
     item.href = url
     item.setAttribute("data-index", index)
     item.className = "btn header-item frame-link"
-    item.innerHTML = `<div class='tab'><i class="fa-solid fa-link"></i><div class='display'>${url}</div><div class='flexible'></div><button class='btn2 del'><i class="fa-solid fa-circle-stop"></i></button></div>`
+    item.innerHTML = `<div class='tab'><i class="fa-solid fa-link"></i><div class='display'>${url}</div><div class='flexible'></div><button class='btn2 del'><i class="fa-solid fa-xmark"></i></button></div>`
 
     document.querySelector(".temp-menu").appendChild(item)
 
@@ -6492,29 +5017,6 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
     if (target) {
       e.preventDefault()
       e.stopPropagation()
-      if (typeof e.stopImmediatePropagation === "function") {
-        e.stopImmediatePropagation()
-      }
-      const parentLink = target.closest(".frame-link")
-      if (parentLink) {
-        let selectorCandidate = ""
-        const targetAttr = parentLink.getAttribute("target")
-        if (targetAttr) {
-          const escapedTarget = escapeTargetSelector(targetAttr)
-          if (escapedTarget) {
-            selectorCandidate = `.frame-link[target="${escapedTarget}"]`
-          }
-        }
-        if (!selectorCandidate && parentLink.href) {
-          const escapedHref = escapeTargetSelector(parentLink.getAttribute("href"))
-          if (escapedHref) {
-            selectorCandidate = `.frame-link[href="${escapedHref}"]`
-          }
-        }
-        if (selectorCandidate) {
-          global_selector = selectorCandidate
-        }
-      }
       let shell = target.closest("[data-shell]")
       if (shell) {
         let shell_id = shell.getAttribute("data-shell")
@@ -7027,55 +5529,6 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
   refresh_du()
   refresh_du("logs")
   renderSelection({ force: true })
-  <% if (type !== 'run') { %>
-  /*
-    fetch("<%=repos%>").then((res) => {
-      return res.text()
-    }).then((repos) => {
-      if (document.querySelector("#git-repos")) {
-        document.querySelector("#git-repos").innerHTML = repos
-      }
-    })
-    refresh()
-    */
-  <% } %>
-  <% if (plugin_menu) { %>
-//    document.querySelector(".dynamic .reveal").click()
-  <% } %>
-  /*
-  document.addEventListener("keydown", (e) => {
-    let size = document.querySelectorAll(".selectable").length
-    e = e || window.event;
-    if (e.key === "ArrowUp") {
-      if (cursorIndex > 0) {
-        cursorIndex--;
-      } else {
-        cursorIndex = size-1;
-      }
-      //renderCursor()
-      //let cursor = document.querySelector(".selectable.cursor")
-      //cursor.scrollIntoView(false)
-      // 
-    } else if (e.key === "ArrowDown") {
-      if (cursorIndex < size-1) {
-        cursorIndex++;
-      } else {
-        cursorIndex = 0;
-      }
-      //renderCursor()
-      //let cursor = document.querySelector(".selectable.cursor")
-      //cursor.scrollIntoView(false)
-    } else if (e.key === "Enter") {
-      //let selected = document.querySelector(".line.selected:not(.hidden) .btns a.selected")
-      let cursor = document.querySelector(".selectable.cursor")
-      if (cursor) {
-        e.preventDefault()
-        e.stopPropagation()
-        cursor.click()
-      }
-    }
-  });
-  */
   <% if (type === "browse" || type === "files") { %>
     const repoStatusCache = new Map()
     let lastRepoList = []