@effect.healthcare/messenger 0.4.1 → 0.5.0

package/.claude/CLAUDE.md

@@ -78,11 +78,11 @@ When a new component's shape conflicts with a rule, classify the rule before rec
 
 For advanced testing or debugging, the live web component can be served and driven through the `chrome-devtools` MCP. This gives access to the rendered component, its shadow DOM, the console, and DOM manipulation.
 
-1. **Start the dev server** — `npm run serve`. The `preserve` hook builds first (`src/` → `dist/`), and `web-dev-server.config.mjs` is auto-loaded (`rootDir: "."`, `port: 8000`, `watch: true`). Run it in the background. The server serves the repo root because the demo loads `../importmap` and `./dist` via the import map.
-2. **Navigate the controlled browser** — `mcp__chrome-devtools__navigate_page` to `http://localhost:8000/demo/index.html`. Always use the explicit `/demo/index.html` path; the demo uses relative asset paths and will not resolve at `/`.
+1. **Start the dev server** — `npm run serve`. The `preserve` hook builds first (`src/` → `dist/`), and `web-dev-server.config.mjs` is auto-loaded (`rootDir: "."`, `port: 3000`, `watch: true`). Run it in the background. The server serves the repo root because the demo loads `../importmap` and `./dist` via the import map. Port 3000 is the origin the backend CORS-whitelists, so do not change it.
+2. **Navigate the controlled browser** — `mcp__chrome-devtools__navigate_page` to `http://localhost:3000/demo/index.html`. Always use the explicit `/demo/index.html` path; the demo uses relative asset paths and will not resolve at `/`.
 3. **Verify** — `mcp__chrome-devtools__evaluate_script` to inspect the component (e.g. `customElements.get("app-messenger")` is defined; the base framework exposes the shadow root as `el.root`); `mcp__chrome-devtools__list_console_messages` to check for errors.
-4. **Clean up when done** — navigate the page to `about:blank` (the MCP keeps one page alive, so the last page cannot be closed), then stop the dev server process on port 8000.
+4. **Clean up when done** — navigate the page to `about:blank` (the MCP keeps one page alive, so the last page cannot be closed), then stop the dev server process on port 3000.
 
 Notes:
 - MCP tool schemas must be loaded via `ToolSearch` (`select:<name>`) before first use each session.
-- If a stale server already holds port 8000, the new one fails to bind — kill the straggler rather than letting it drift to another port.
+- If a stale server already holds port 3000, the new one fails to bind — kill the straggler rather than letting it drift to another port.

package/dist/index.d.ts

@@ -1,3 +1,4 @@
-export { Tag, Session, Protocol, Message, Attributes, State, Connection, Operation, Event, Gesture, } from "./messenger.meta.js";
+export { Tag, Session, Endpoint, Protocol, Message, Attributes, State, Connection, Operation, Event, Gesture, } from "./messenger.meta.js";
+export { type Path } from "./messenger.meta.js";
 export { Validate } from "./messenger.validation.js";
 export { Messenger } from "./messenger.js";

package/dist/index.js

@@ -1,3 +1,3 @@
-export { Tag, Session, Protocol, Message, Attributes, State, Connection, Operation, Event, Gesture, } from "./messenger.meta.js";
+export { Tag, Session, Endpoint, Protocol, Message, Attributes, State, Connection, Operation, Event, Gesture, } from "./messenger.meta.js";
 export { Validate } from "./messenger.validation.js";
 export { Messenger } from "./messenger.js";

package/dist/messenger.d.ts

@@ -4,7 +4,7 @@
 import { Component } from "@scalable.software/component";
 import { type Configuration } from "@scalable.software/component";
 import { Attributes, Connection } from "./messenger.meta.js";
-import { type Endpoint } from "./messenger.meta.js";
+import { type Path } from "./messenger.meta.js";
 /**
  * Configuration for the headless component — no template or stylesheet.
  * @category Configuration
@@ -31,11 +31,11 @@ export declare class Messenger extends Component {
      */
     private _connection;
     /**
-     * The negotiate endpoint URL. When absent the messenger stays disconnected.
+     * The negotiate request path. When absent the messenger stays disconnected.
      * @category State
      * @hidden
      */
-    private _endpoint;
+    private _path;
     /**
      * The live Web PubSub socket. Held so it can be closed and replaced.
      * @category State
@@ -47,7 +47,7 @@ export declare class Messenger extends Component {
      * @category Event
      * @hidden
      */
-    private _onendpointchange;
+    private _onpathchange;
     private _onconnecting;
     private _onconnected;
     private _ondisconnected;
@@ -70,11 +70,11 @@ export declare class Messenger extends Component {
     get connection(): Connection;
     protected set connection(connection: Connection);
     /**
-     * The negotiate endpoint URL. When absent the messenger stays disconnected.
+     * The negotiate request path. When absent the messenger stays disconnected.
      * @category State
      */
-    get endpoint(): Endpoint | null;
-    set endpoint(endpoint: Endpoint | null);
+    get path(): Path | null;
+    set path(path: Path | null);
     /**
      * The session token, read fresh from local storage on every access — never
      * cached — because the License component renews and rewrites the key.
@@ -83,9 +83,18 @@ export declare class Messenger extends Component {
      */
     private get _token();
     /**
-     * Negotiates a client access URL from the configured endpoint, authenticating
+     * The endpoint host base URL, read fresh from local storage on every access —
+     * never cached — mirroring the session token. Composed with the `path` state
+     * to form the negotiate URL. When absent the messenger stays disconnected.
+     * @category State
+     * @hidden
+     */
+    private get _host();
+    /**
+     * Negotiates a client access URL from the configured path, authenticating
      * with the session token, then opens the live connection. No-op when the
-     * endpoint or token is unavailable, or when already connecting or connected.
+     * path or token is unavailable, or when already connecting or connected.
+     * When negotiate fails the connection returns to `disconnected`.
      * @category Operation
      */
     connect: () => Promise<void>;
@@ -103,11 +112,11 @@ export declare class Messenger extends Component {
      */
     send: (message: object) => boolean;
     /**
-     * Subscribes to the `onendpointchange` event. Assigning replaces the previous
+     * Subscribes to the `onpathchange` event. Assigning replaces the previous
      * handler; assigning `null` removes it.
      * @category Event
      */
-    set onendpointchange(handler: EventListener | null);
+    set onpathchange(handler: EventListener | null);
     /**
      * Subscribes to the `onconnecting` event. Assigning replaces the previous
      * handler; assigning `null` removes it.
@@ -139,7 +148,7 @@ export declare class Messenger extends Component {
      */
     protected _attributeHandlers: {
         connection: (value: Connection) => false | void;
-        endpoint: (value: Endpoint) => string;
+        path: (value: Path) => string;
     };
     /**
      * Cache element references to improve performance
@@ -160,13 +169,14 @@ export declare class Messenger extends Component {
      */
     protected _addEventListeners: () => void;
     /**
-     * Called by the disconnectedCallback prototypical method
+     * Called by the disconnectedCallback prototypical method. Closes the live
+     * connection so a removed element does not keep a socket open.
      * @category Configuration
      * @hidden
      */
     protected _removeEventListeners: () => void;
     /**
-     * Negotiates a short-lived Web PubSub client access URL from the endpoint,
+     * Negotiates a short-lived Web PubSub client access URL from the path,
      * authenticating the request with the session token.
      * @category Operation
      * @hidden

package/dist/messenger.js

@@ -4,7 +4,7 @@
 // Base Component
 import { Component } from "@scalable.software/component";
 // Component Metadata
-import { Tag, Attributes, Connection, Event, Gesture, Session, Protocol, Message, } from "./messenger.meta.js";
+import { Tag, Attributes, Connection, Event, Gesture, Session, Endpoint, Protocol, Message, } from "./messenger.meta.js";
 // Component Validation
 import { Validate } from "./messenger.validation.js";
 /**
@@ -39,11 +39,11 @@ export class Messenger extends Component {
      */
     _connection = Connection.DISCONNECTED;
     /**
-     * The negotiate endpoint URL. When absent the messenger stays disconnected.
+     * The negotiate request path. When absent the messenger stays disconnected.
      * @category State
      * @hidden
      */
-    _endpoint = null;
+    _path = null;
     /**
      * The live Web PubSub socket. Held so it can be closed and replaced.
      * @category State
@@ -55,7 +55,7 @@ export class Messenger extends Component {
      * @category Event
      * @hidden
      */
-    _onendpointchange = null;
+    _onpathchange = null;
     _onconnecting = null;
     _onconnected = null;
     _ondisconnected = null;
@@ -97,27 +97,27 @@ export class Messenger extends Component {
             this._dispatchEvent(Event.ON_DISCONNECTED, event);
     }
     /**
-     * The negotiate endpoint URL. When absent the messenger stays disconnected.
+     * The negotiate request path. When absent the messenger stays disconnected.
      * @category State
      */
-    get endpoint() {
-        return this._endpoint;
+    get path() {
+        return this._path;
     }
-    set endpoint(endpoint) {
+    set path(path) {
         // Normalize
-        endpoint = endpoint ?? null;
+        path = path ?? null;
         // Validate
-        endpoint = endpoint ? Validate.endpoint(endpoint) : null;
+        path = path ? Validate.path(path) : null;
         // Guard
-        if (this._endpoint === endpoint)
+        if (this._path === path)
             return;
         // Mutate
-        this._endpoint = endpoint;
-        endpoint === null
-            ? this.removeAttribute(Attributes.ENDPOINT)
-            : this.setAttribute(Attributes.ENDPOINT, endpoint);
+        this._path = path;
+        path === null
+            ? this.removeAttribute(Attributes.PATH)
+            : this.setAttribute(Attributes.PATH, path);
         // Dispatch
-        this._dispatchEvent(Event.ON_ENDPOINT_CHANGE, { detail: { endpoint } });
+        this._dispatchEvent(Event.ON_PATH_CHANGE, { detail: { path } });
     }
     /**
      * The session token, read fresh from local storage on every access — never
@@ -129,22 +129,40 @@ export class Messenger extends Component {
         return localStorage.getItem(Session);
     }
     /**
-     * Negotiates a client access URL from the configured endpoint, authenticating
+     * The endpoint host base URL, read fresh from local storage on every access —
+     * never cached — mirroring the session token. Composed with the `path` state
+     * to form the negotiate URL. When absent the messenger stays disconnected.
+     * @category State
+     * @hidden
+     */
+    get _host() {
+        return localStorage.getItem(Endpoint);
+    }
+    /**
+     * Negotiates a client access URL from the configured path, authenticating
      * with the session token, then opens the live connection. No-op when the
-     * endpoint or token is unavailable, or when already connecting or connected.
+     * path or token is unavailable, or when already connecting or connected.
+     * When negotiate fails the connection returns to `disconnected`.
      * @category Operation
      */
     connect = async () => {
         const token = this._token;
         // Gate + guard
-        if (!this.endpoint || !token)
+        if (!this._host || !this.path || !token)
             return;
         if (this._connection !== Connection.DISCONNECTED)
             return;
-        // Establish
+        // Establish — on negotiate failure, recover to disconnected
         this.connection = Connection.CONNECTING;
-        const url = await this._negotiate(token);
-        this._socket = this._open(url);
+        try {
+            const url = await this._negotiate(token);
+            if (this.connection !== Connection.CONNECTING)
+                return;
+            this._socket = this._open(url);
+        }
+        catch {
+            this.connection = Connection.DISCONNECTED;
+        }
     };
     /**
      * Closes the live connection.
@@ -176,16 +194,16 @@ export class Messenger extends Component {
         return true;
     };
     /**
-     * Subscribes to the `onendpointchange` event. Assigning replaces the previous
+     * Subscribes to the `onpathchange` event. Assigning replaces the previous
      * handler; assigning `null` removes it.
      * @category Event
      */
-    set onendpointchange(handler) {
-        this._onendpointchange &&
-            this.removeEventListener(Event.ON_ENDPOINT_CHANGE, this._onendpointchange);
-        this._onendpointchange = handler;
-        this._onendpointchange &&
-            this.addEventListener(Event.ON_ENDPOINT_CHANGE, this._onendpointchange);
+    set onpathchange(handler) {
+        this._onpathchange &&
+            this.removeEventListener(Event.ON_PATH_CHANGE, this._onpathchange);
+        this._onpathchange = handler;
+        this._onpathchange &&
+            this.addEventListener(Event.ON_PATH_CHANGE, this._onpathchange);
     }
     /**
      * Subscribes to the `onconnecting` event. Assigning replaces the previous
@@ -243,7 +261,7 @@ export class Messenger extends Component {
     _attributeHandlers = {
         [Attributes.CONNECTION]: (value) => value !== this._connection &&
             this.setAttribute(Attributes.CONNECTION, this._connection),
-        [Attributes.ENDPOINT]: (value) => (this.endpoint = value),
+        [Attributes.PATH]: (value) => (this.path = value),
     };
     /**
      * Cache element references to improve performance
@@ -267,22 +285,25 @@ export class Messenger extends Component {
      */
     _addEventListeners = () => { };
     /**
-     * Called by the disconnectedCallback prototypical method
+     * Called by the disconnectedCallback prototypical method. Closes the live
+     * connection so a removed element does not keep a socket open.
      * @category Configuration
      * @hidden
      */
-    _removeEventListeners = () => { };
+    _removeEventListeners = () => this.disconnect();
     /**
-     * Negotiates a short-lived Web PubSub client access URL from the endpoint,
+     * Negotiates a short-lived Web PubSub client access URL from the path,
      * authenticating the request with the session token.
      * @category Operation
      * @hidden
      */
     _negotiate = async (token) => {
-        const response = await fetch(this.endpoint, {
-            headers: { Authorization: `JWT ${token}` },
+        const response = await fetch(`${this._host}${this.path}`, {
+            headers: { Authorization: `Bearer ${token}` },
         });
         const { url } = await response.json();
+        if (!url)
+            throw new Error("Invalid negotiate response: missing url");
         return url;
     };
     /**

package/dist/messenger.meta.d.ts

@@ -11,6 +11,12 @@ export declare const Tag: "app-messenger";
  * @category Configuration
  */
 export declare const Session: "app-license.session";
+/**
+ * Local storage key under which the endpoint host base URL is cached by the
+ * Configurator component. Composed with the `path` state to form the negotiate URL.
+ * @category Configuration
+ */
+export declare const Endpoint: "data";
 /**
  * The Azure Web PubSub subprotocol required for structured group messaging.
  * @category Configuration
@@ -36,7 +42,7 @@ export type Message = (typeof Message)[keyof typeof Message];
  */
 export declare const Attributes: {
     readonly CONNECTION: "connection";
-    readonly ENDPOINT: "endpoint";
+    readonly PATH: "path";
 };
 /**
  * HTML Attributes available to set
@@ -50,7 +56,7 @@ export type Attributes = typeof Attributes;
  */
 export declare const State: {
     readonly CONNECTION: "connection";
-    readonly ENDPOINT: "endpoint";
+    readonly PATH: "path";
 };
 /**
  * HTML Attributes available to set
@@ -73,10 +79,10 @@ export declare const Connection: {
  */
 export type Connection = (typeof Connection)[keyof typeof Connection];
 /**
- * The negotiate endpoint URL value domain
+ * The negotiate request path value domain
  * @category Metadata
  */
-export type Endpoint = string;
+export type Path = string;
 /**
  * @category Metadata
  * @enum
@@ -95,7 +101,7 @@ export type Operation = (typeof Operation)[keyof typeof Operation];
  * @enum
  */
 export declare const Event: {
-    readonly ON_ENDPOINT_CHANGE: "onendpointchange";
+    readonly ON_PATH_CHANGE: "onpathchange";
     readonly ON_CONNECTING: "onconnecting";
     readonly ON_CONNECTED: "onconnected";
     readonly ON_DISCONNECTED: "ondisconnected";

package/dist/messenger.meta.js

@@ -11,6 +11,12 @@ export const Tag = "app-messenger";
  * @category Configuration
  */
 export const Session = "app-license.session";
+/**
+ * Local storage key under which the endpoint host base URL is cached by the
+ * Configurator component. Composed with the `path` state to form the negotiate URL.
+ * @category Configuration
+ */
+export const Endpoint = "data";
 /**
  * The Azure Web PubSub subprotocol required for structured group messaging.
  * @category Configuration
@@ -31,7 +37,7 @@ export const Message = {
  */
 export const Attributes = {
     CONNECTION: "connection",
-    ENDPOINT: "endpoint",
+    PATH: "path",
 };
 /**
  * HTML Attributes available to set
@@ -65,7 +71,7 @@ export const Operation = {
  * @enum
  */
 export const Event = {
-    ON_ENDPOINT_CHANGE: "onendpointchange",
+    ON_PATH_CHANGE: "onpathchange",
     ON_CONNECTING: "onconnecting",
     ON_CONNECTED: "onconnected",
     ON_DISCONNECTED: "ondisconnected",

package/dist/messenger.validation.d.ts

@@ -1,15 +1,15 @@
 /**
  * @module Component
  */
-import { type Endpoint } from "./messenger.meta.js";
+import { type Path } from "./messenger.meta.js";
 /**
  * Runtime enforcement of declared value domains.
  * @category Validation
  */
 export declare class Validate {
     /**
-     * Validates the negotiate endpoint URL value domain.
+     * Validates the negotiate request path value domain.
      * @category Validation
      */
-    static endpoint: (value: string) => Endpoint;
+    static path: (value: string) => Path;
 }

package/dist/messenger.validation.js

@@ -7,15 +7,12 @@
  */
 export class Validate {
     /**
-     * Validates the negotiate endpoint URL value domain.
+     * Validates the negotiate request path value domain.
      * @category Validation
      */
-    static endpoint = (value) => {
-        try {
-            new URL(value);
-        }
-        catch {
-            throw new Error(`Invalid endpoint value: ${value}`);
+    static path = (value) => {
+        if (!value.startsWith("/")) {
+            throw new Error(`Invalid path value: ${value}`);
         }
         return value;
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@effect.healthcare/messenger",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "Azure Pub Sub Messenger Web Component",
   "keywords": [
     "web component"

package/src/index.ts

@@ -1,6 +1,7 @@
 export {
   Tag,
   Session,
+  Endpoint,
   Protocol,
   Message,
   Attributes,
@@ -11,6 +12,8 @@ export {
   Gesture,
 } from "./messenger.meta.js";
 
+export { type Path } from "./messenger.meta.js";
+
 export { Validate } from "./messenger.validation.js";
 
 export { Messenger } from "./messenger.js";

package/src/messenger.meta.ts

@@ -14,6 +14,13 @@ export const Tag = "app-messenger" as const;
  */
 export const Session = "app-license.session" as const;
 
+/**
+ * Local storage key under which the endpoint host base URL is cached by the
+ * Configurator component. Composed with the `path` state to form the negotiate URL.
+ * @category Configuration
+ */
+export const Endpoint = "data" as const;
+
 /**
  * The Azure Web PubSub subprotocol required for structured group messaging.
  * @category Configuration
@@ -42,7 +49,7 @@ export type Message = (typeof Message)[keyof typeof Message];
  */
 export const Attributes = {
   CONNECTION: "connection",
-  ENDPOINT: "endpoint",
+  PATH: "path",
 } as const;
 /**
  * HTML Attributes available to set
@@ -83,10 +90,10 @@ export const Connection = {
 export type Connection = (typeof Connection)[keyof typeof Connection];
 
 /**
- * The negotiate endpoint URL value domain
+ * The negotiate request path value domain
  * @category Metadata
  */
-export type Endpoint = string;
+export type Path = string;
 
 /**
  * @category Metadata
@@ -108,7 +115,7 @@ export type Operation = (typeof Operation)[keyof typeof Operation];
  * @enum
  */
 export const Event = {
-  ON_ENDPOINT_CHANGE: "onendpointchange",
+  ON_PATH_CHANGE: "onpathchange",
   ON_CONNECTING: "onconnecting",
   ON_CONNECTED: "onconnected",
   ON_DISCONNECTED: "ondisconnected",

package/src/messenger.ts

@@ -14,11 +14,12 @@ import {
   Event,
   Gesture,
   Session,
+  Endpoint,
   Protocol,
   Message,
 } from "./messenger.meta.js";
 
-import { type Endpoint } from "./messenger.meta.js";
+import { type Path } from "./messenger.meta.js";
 
 // Component Validation
 import { Validate } from "./messenger.validation.js";
@@ -59,11 +60,11 @@ export class Messenger extends Component {
   private _connection: Connection = Connection.DISCONNECTED;
 
   /**
-   * The negotiate endpoint URL. When absent the messenger stays disconnected.
+   * The negotiate request path. When absent the messenger stays disconnected.
    * @category State
    * @hidden
    */
-  private _endpoint: Endpoint | null = null;
+  private _path: Path | null = null;
 
   /**
    * The live Web PubSub socket. Held so it can be closed and replaced.
@@ -77,7 +78,7 @@ export class Messenger extends Component {
    * @category Event
    * @hidden
    */
-  private _onendpointchange: EventListener | null = null;
+  private _onpathchange: EventListener | null = null;
   private _onconnecting: EventListener | null = null;
   private _onconnected: EventListener | null = null;
   private _ondisconnected: EventListener | null = null;
@@ -125,31 +126,31 @@ export class Messenger extends Component {
   }
 
   /**
-   * The negotiate endpoint URL. When absent the messenger stays disconnected.
+   * The negotiate request path. When absent the messenger stays disconnected.
    * @category State
    */
-  public get endpoint(): Endpoint | null {
-    return this._endpoint;
+  public get path(): Path | null {
+    return this._path;
   }
 
-  public set endpoint(endpoint: Endpoint | null) {
+  public set path(path: Path | null) {
     // Normalize
-    endpoint = endpoint ?? null;
+    path = path ?? null;
 
     // Validate
-    endpoint = endpoint ? Validate.endpoint(endpoint) : null;
+    path = path ? Validate.path(path) : null;
 
     // Guard
-    if (this._endpoint === endpoint) return;
+    if (this._path === path) return;
 
     // Mutate
-    this._endpoint = endpoint;
-    endpoint === null
-      ? this.removeAttribute(Attributes.ENDPOINT)
-      : this.setAttribute(Attributes.ENDPOINT, endpoint);
+    this._path = path;
+    path === null
+      ? this.removeAttribute(Attributes.PATH)
+      : this.setAttribute(Attributes.PATH, path);
 
     // Dispatch
-    this._dispatchEvent(Event.ON_ENDPOINT_CHANGE, { detail: { endpoint } });
+    this._dispatchEvent(Event.ON_PATH_CHANGE, { detail: { path } });
   }
 
   /**
@@ -163,22 +164,39 @@ export class Messenger extends Component {
   }
 
   /**
-   * Negotiates a client access URL from the configured endpoint, authenticating
+   * The endpoint host base URL, read fresh from local storage on every access —
+   * never cached — mirroring the session token. Composed with the `path` state
+   * to form the negotiate URL. When absent the messenger stays disconnected.
+   * @category State
+   * @hidden
+   */
+  private get _host(): string | null {
+    return localStorage.getItem(Endpoint);
+  }
+
+  /**
+   * Negotiates a client access URL from the configured path, authenticating
    * with the session token, then opens the live connection. No-op when the
-   * endpoint or token is unavailable, or when already connecting or connected.
+   * path or token is unavailable, or when already connecting or connected.
+   * When negotiate fails the connection returns to `disconnected`.
    * @category Operation
    */
   public connect = async (): Promise<void> => {
     const token = this._token;
 
     // Gate + guard
-    if (!this.endpoint || !token) return;
+    if (!this._host || !this.path || !token) return;
     if (this._connection !== Connection.DISCONNECTED) return;
 
-    // Establish
+    // Establish — on negotiate failure, recover to disconnected
     this.connection = Connection.CONNECTING;
-    const url = await this._negotiate(token);
-    this._socket = this._open(url);
+    try {
+      const url = await this._negotiate(token);
+      if (this.connection !== Connection.CONNECTING) return;
+      this._socket = this._open(url);
+    } catch {
+      this.connection = Connection.DISCONNECTED;
+    }
   };
 
   /**
@@ -216,21 +234,18 @@ export class Messenger extends Component {
   };
 
   /**
-   * Subscribes to the `onendpointchange` event. Assigning replaces the previous
+   * Subscribes to the `onpathchange` event. Assigning replaces the previous
    * handler; assigning `null` removes it.
    * @category Event
    */
-  public set onendpointchange(handler: EventListener | null) {
-    this._onendpointchange &&
-      this.removeEventListener(
-        Event.ON_ENDPOINT_CHANGE,
-        this._onendpointchange,
-      );
+  public set onpathchange(handler: EventListener | null) {
+    this._onpathchange &&
+      this.removeEventListener(Event.ON_PATH_CHANGE, this._onpathchange);
 
-    this._onendpointchange = handler;
+    this._onpathchange = handler;
 
-    this._onendpointchange &&
-      this.addEventListener(Event.ON_ENDPOINT_CHANGE, this._onendpointchange);
+    this._onpathchange &&
+      this.addEventListener(Event.ON_PATH_CHANGE, this._onpathchange);
   }
 
   /**
@@ -308,7 +323,7 @@ export class Messenger extends Component {
     [Attributes.CONNECTION]: (value: Connection) =>
       value !== this._connection &&
       this.setAttribute(Attributes.CONNECTION, this._connection),
-    [Attributes.ENDPOINT]: (value: Endpoint) => (this.endpoint = value),
+    [Attributes.PATH]: (value: Path) => (this.path = value),
   };
 
   /**
@@ -336,23 +351,25 @@ export class Messenger extends Component {
   protected _addEventListeners = () => {};
 
   /**
-   * Called by the disconnectedCallback prototypical method
+   * Called by the disconnectedCallback prototypical method. Closes the live
+   * connection so a removed element does not keep a socket open.
    * @category Configuration
    * @hidden
    */
-  protected _removeEventListeners = () => {};
+  protected _removeEventListeners = () => this.disconnect();
 
   /**
-   * Negotiates a short-lived Web PubSub client access URL from the endpoint,
+   * Negotiates a short-lived Web PubSub client access URL from the path,
    * authenticating the request with the session token.
    * @category Operation
    * @hidden
    */
   private _negotiate = async (token: string): Promise<string> => {
-    const response = await fetch(this.endpoint as string, {
-      headers: { Authorization: `JWT ${token}` },
+    const response = await fetch(`${this._host}${this.path}`, {
+      headers: { Authorization: `Bearer ${token}` },
     });
     const { url } = await response.json();
+    if (!url) throw new Error("Invalid negotiate response: missing url");
     return url;
   };
 

package/src/messenger.validation.ts

@@ -3,7 +3,7 @@
  */
 
 // Component Metadata
-import { type Endpoint } from "./messenger.meta.js";
+import { type Path } from "./messenger.meta.js";
 
 /**
  * Runtime enforcement of declared value domains.
@@ -11,15 +11,13 @@ import { type Endpoint } from "./messenger.meta.js";
  */
 export class Validate {
   /**
-   * Validates the negotiate endpoint URL value domain.
+   * Validates the negotiate request path value domain.
    * @category Validation
    */
-  public static endpoint = (value: string) => {
-    try {
-      new URL(value);
-    } catch {
-      throw new Error(`Invalid endpoint value: ${value}`);
+  public static path = (value: string) => {
+    if (!value.startsWith("/")) {
+      throw new Error(`Invalid path value: ${value}`);
     }
-    return value as Endpoint;
+    return value as Path;
   };
 }