Fix in vscode ssh sessions

Author: banesullivan

demos/example.ipynb

@@ -16,6 +16,30 @@
     "If the red square renders and the WebSocket echo answers back, the full round-trip works."
    ]
   },
+  {
+   "cell_type": "markdown",
+   "id": "892ad7e3",
+   "metadata": {},
+   "source": [
+    "## 0. Enable the comm bridge (for VS Code and other non-jupyter-server frontends)\n",
+    "\n",
+    "JupyterLab / Hub / Binder can reach the loopback port through the HTTP proxy mounted by the server extension (step 2), so this step is not strictly required there. But for VS Code Jupyter (local or SSH), Colab, Shiny, Solara, and marimo, the notebook webview has no way to reach the jupyter-server origin for root-relative URLs. Enabling the comm bridge gives the browser a second, always-available path to the kernel's loopback port over the kernel's comm channel.\n",
+    "\n",
+    "Once enabled, `window.__jupyter_loopback__` is installed in the output pane and exposes `fetch(port, path)`, `resolveUrl(port, path, {mime})`, and `openWebSocket(port, path)`. The HTML cell below feature-detects those APIs and prefers them; otherwise it falls back to the direct URL that the HTTP proxy handles."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "7d433484",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import jupyter_loopback\n",
+    "\n",
+    "jupyter_loopback.enable_comm_bridge()"
+   ]
+  },
   {
    "cell_type": "markdown",
    "id": "env",
@@ -219,12 +243,17 @@
    "id": "browser",
    "metadata": {},
    "source": [
-    "## 6. Browser round-trip through the proxy\n",
+    "## 6. Browser round-trip\n",
+    "\n",
+    "The HTML below feature-detects `window.__jupyter_loopback__`:\n",
     "\n",
-    "The HTML below uses `http_url` / `ws_url` from step 4. The browser hits the Jupyter server, the extension routes to `127.0.0.1:<port>`. Three checks:\n",
+    "- If the comm bridge is enabled (step 0), the browser fetches `/hello`, `/image.png`, and opens the WebSocket **through the kernel comm channel** via `api.fetch`, `api.resolveUrl`, and `api.openWebSocket`. This is the path that works in VS Code Jupyter (including Remote-SSH), Colab, Shiny, Solara, and marimo.\n",
+    "- Otherwise it uses the direct URL built in step 4, which goes through the jupyter-server's HTTP proxy handler. This is the faster path when it's available (JupyterLab, Hub, Binder, Notebook 7+).\n",
     "\n",
-    "- **JSON link**: opens `/hello` in a new tab.\n",
-    "- **Inline image**: 1×1 red PNG, CSS-upscaled to 80×80 with `image-rendering: pixelated`. If you see a red square, binary bodies survive proxying.\n",
+    "Three checks regardless of path:\n",
+    "\n",
+    "- **JSON fetch**: text of `GET /hello` appears inline.\n",
+    "- **Inline image**: 1×1 red PNG, CSS-upscaled to 80×80. If you see a red square, binary bodies survive the round-trip.\n",
     "- **WebSocket echo**: type a message, press Enter. Server echoes back prefixed with a count."
    ]
   },
@@ -237,39 +266,88 @@
    "source": [
     "from IPython.display import HTML\n",
     "\n",
-    "html = f'''\n",
+    "# Pick a path: if autodetect produced a prefix (JupyterLab / Hub) we can\n",
+    "# fetch directly through the Path A proxy. Otherwise we'll still compute\n",
+    "# a direct loopback URL as a fallback, but the HTML below prefers the\n",
+    "# comm bridge (window.__jupyter_loopback__) when it's available.\n",
+    "http_fallback = http_url\n",
+    "ws_fallback = ws_url\n",
+    "\n",
+    "html = f\"\"\"\n",
     "<div style=\"border:1px solid #ddd;border-radius:6px;padding:12px;\n",
     "            font-family:system-ui,sans-serif;max-width:640px\">\n",
     "  <p style=\"margin:0 0 8px\">Bound to <code>127.0.0.1:{port}</code> in the kernel.</p>\n",
     "  <ul style=\"margin:0 0 8px\">\n",
-    "    <li><a href=\"{http_url}/hello\" target=\"_blank\"><code>GET {http_url}/hello</code></a></li>\n",
-    "    <li><code>GET {http_url}/image.png</code>:\n",
-    "      <img src=\"{http_url}/image.png\" alt=\"red square\"\n",
+    "    <li><code>GET /hello</code> <span id=\"lpbk-hello-{port}\">(loading...)</span></li>\n",
+    "    <li><code>GET /image.png</code>\n",
+    "      <img id=\"lpbk-img-{port}\" alt=\"red square\"\n",
     "           style=\"vertical-align:middle;width:80px;height:80px;\n",
     "                  image-rendering:pixelated;border:1px solid #ccc;\n",
     "                  border-radius:4px;margin-left:6px\"/></li>\n",
-    "    <li><code>WS  {ws_url}</code></li>\n",
+    "    <li><code>WS /ws</code> (<span id=\"lpbk-mode-{port}\">detecting...</span>)</li>\n",
     "  </ul>\n",
     "  <input id=\"lpbk-in-{port}\" type=\"text\" placeholder=\"type, press Enter\"\n",
     "         style=\"width:100%;padding:6px;border:1px solid #ccc;border-radius:4px\"/>\n",
     "  <pre id=\"lpbk-log-{port}\"\n",
     "       style=\"margin-top:8px;background:#f7f7f7;padding:8px;border-radius:4px;\n",
     "              max-height:140px;overflow:auto\"></pre>\n",
     "  <script>\n",
-    "    (function() {{\n",
-    "      var wsPath = {json.dumps(ws_url)};\n",
-    "      var abs = new URL(wsPath, window.location.origin);\n",
-    "      abs.protocol = window.location.protocol === \"https:\" ? \"wss:\" : \"ws:\";\n",
-    "      var input = document.getElementById(\"lpbk-in-{port}\");\n",
-    "      var log = document.getElementById(\"lpbk-log-{port}\");\n",
-    "      var ws = new WebSocket(abs.toString());\n",
-    "      ws.onopen = function()  {{ log.textContent += \"[open \" + abs + \"]\\\\n\"; }};\n",
-    "      ws.onclose = function() {{ log.textContent += \"[close]\\\\n\"; }};\n",
-    "      ws.onerror = function() {{ log.textContent += \"[error]\\\\n\"; }};\n",
-    "      ws.onmessage = function(ev) {{\n",
+    "    (async function() {{\n",
+    "      var port = {port};\n",
+    "      var httpFallback = {json.dumps(http_fallback)};\n",
+    "      var wsFallback = {json.dumps(ws_fallback)};\n",
+    "      var api = window.__jupyter_loopback__;\n",
+    "      var useBridge = !!(api && api.resolveUrl && api.openWebSocket);\n",
+    "\n",
+    "      var log = document.getElementById(\"lpbk-log-\" + port);\n",
+    "      var img = document.getElementById(\"lpbk-img-\" + port);\n",
+    "      var helloSpan = document.getElementById(\"lpbk-hello-\" + port);\n",
+    "      var modeSpan = document.getElementById(\"lpbk-mode-\" + port);\n",
+    "      modeSpan.textContent = useBridge ? \"comm bridge\" : \"direct\";\n",
+    "\n",
+    "      // GET /hello\n",
+    "      try {{\n",
+    "        if (useBridge) {{\n",
+    "          var resp = await api.fetch(port, \"/hello\");\n",
+    "          var text = await resp.text();\n",
+    "          helloSpan.textContent = text;\n",
+    "        }} else {{\n",
+    "          var resp2 = await fetch(httpFallback + \"/hello\");\n",
+    "          helloSpan.textContent = await resp2.text();\n",
+    "        }}\n",
+    "      }} catch (err) {{\n",
+    "        helloSpan.textContent = \"error: \" + err;\n",
+    "      }}\n",
+    "\n",
+    "      // GET /image.png\n",
+    "      try {{\n",
+    "        if (useBridge) {{\n",
+    "          img.src = await api.resolveUrl(port, \"/image.png\", {{mime: \"image/png\"}});\n",
+    "        }} else {{\n",
+    "          img.src = httpFallback + \"/image.png\";\n",
+    "        }}\n",
+    "      }} catch (err) {{\n",
+    "        log.textContent += \"[image error: \" + err + \"]\\\\n\";\n",
+    "      }}\n",
+    "\n",
+    "      // WS /ws\n",
+    "      var ws;\n",
+    "      if (useBridge) {{\n",
+    "        ws = api.openWebSocket(port, \"/ws\");\n",
+    "      }} else {{\n",
+    "        var abs = new URL(wsFallback, window.location.origin);\n",
+    "        abs.protocol = window.location.protocol === \"https:\" ? \"wss:\" : \"ws:\";\n",
+    "        ws = new WebSocket(abs.toString());\n",
+    "      }}\n",
+    "      ws.onopen    = function()    {{ log.textContent += \"[open]\\\\n\"; }};\n",
+    "      ws.onclose   = function()    {{ log.textContent += \"[close]\\\\n\"; }};\n",
+    "      ws.onerror   = function(e)   {{ log.textContent += \"[error]\\\\n\"; }};\n",
+    "      ws.onmessage = function(ev)  {{\n",
     "        log.textContent += \"< \" + ev.data + \"\\\\n\";\n",
     "        log.scrollTop = log.scrollHeight;\n",
     "      }};\n",
+    "\n",
+    "      var input = document.getElementById(\"lpbk-in-\" + port);\n",
     "      input.addEventListener(\"keydown\", function(e) {{\n",
     "        if (e.key !== \"Enter\") return;\n",
     "        var v = input.value; input.value = \"\";\n",
@@ -280,7 +358,7 @@
     "    }})();\n",
     "  </script>\n",
     "</div>\n",
-    "'''\n",
+    "\"\"\"\n",
     "\n",
     "HTML(html)"
    ]
@@ -306,13 +384,33 @@
     "thread.join(timeout=5)\n",
     "print(\"stopped\")"
    ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "5dce253c",
+   "metadata": {},
+   "outputs": [],
+   "source": []
   }
  ],
  "metadata": {
   "kernelspec": {
-   "display_name": "Python 3",
+   "display_name": "jupyter-loopback",
    "language": "python",
    "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.14.3"
   }
  },
  "nbformat": 4,

jupyter_loopback/__init__.py

@@ -18,6 +18,7 @@
     CommBridge,
     RequestHandler,
     enable_comm_bridge,
+    intercept_localhost,
     is_comm_bridge_enabled,
     off_request,
     on_request,
@@ -30,6 +31,7 @@
     "RequestHandler",
     "autodetect_prefix",
     "enable_comm_bridge",
+    "intercept_localhost",
     "is_comm_bridge_enabled",
     "is_in_jupyter_kernel",
     "off_request",