@oyehello/chat 0.5.0 → 0.5.2

package/README.md

@@ -74,23 +74,33 @@ await chat.sendMessage('Hello');
 
 ## Client tools (browser actions)
 
-An agent can call browser-side tools your page executes. Register a handler per tool; a tool
-reaches the agent only when it is (a) enabled for that agent in the console AND (b) registered here:
+The SDK supports two browser-side tools: `navigate` (go to a path on the current site) and `openUrl`
+(open a URL, by default in a new tab). Once a tool is enabled for the agent in the console **and** the
+target passes the agent's navigate allowlist (also set in the console), the SDK executes it itself —
+**no host integration required**:
+```html
+<script type="module">import '@oyehello/chat';</script>
+<oyehello-chat api-key="ohk_pub_…" agent-id="agt_…" base-url="https://api.oyehello.ai"></oyehello-chat>
+```
+That's it — a plain embed with no JS wiring can navigate the visitor or open a link when the agent calls
+the tool. `navigate` calls `window.location.assign(path)`; `openUrl` calls `window.open(url, '_blank')`
+(pass `newTab: false` from the agent to open in the same tab instead).
+
+A host page MAY still register its own `navigate`/`openUrl` handler to override the default behavior
+(e.g. push through a client-side router instead of a full navigation):
 ```js
 const chat = createChatClient({ apiKey, agentId, baseUrl });
 chat.registerTools({
   navigate: ({ path }) => router.push(path),
-  fillField: ({ selector, value }) => { /* your DOM logic */ },
 });
 // or on the web component: document.querySelector('oyehello-chat').registerTools({ … })
 ```
-Register handlers BEFORE `start()` — only tools registered at open are offered to the agent that session.
+Register handlers BEFORE `start()`. A host-registered handler always takes priority over the SDK's
+built-in; any other tool name has no handler and fails cleanly.
 
-> **Security.** `navigate`/`openUrl` targets can be constrained to an allowlist in the agent's console
-> settings. The other tools (`click`, `fillField`, `readPageContext`, `custom`) receive
-> model-generated arguments with no server-side restriction: **your handler is the trust boundary.**
-> Because a visitor can influence the conversation, treat these as capable of arbitrary DOM action —
-> validate selectors/values and scope what each handler can do before enabling them.
+> **Security.** Navigation targets (both the SDK's built-in execution and a host-overridden handler)
+> are validated against the agent's navigate allowlist **server-side** before the tool call ever
+> reaches the browser — the SDK/host is not the trust boundary for where a visitor can be sent.
 
 ## Requirements
 - `api-key` is a **publishable** key (`ohk_pub_…`) created in the oyehello console.

package/dist/index.cjs

@@ -67,6 +67,15 @@ async function postMessage(opts) {
   });
   if (!res.ok) throw await asError(res, res.status === 401 ? "session_expired" : void 0);
 }
+async function postPageViews(opts) {
+  const res = await opts.fetchImpl(`${opts.baseUrl}/chat/sessions/${opts.sessionId}/page-views`, {
+    method: "POST",
+    credentials: "omit",
+    headers: { "Content-Type": "application/json", Authorization: `Bearer ${opts.sessionToken}` },
+    body: JSON.stringify({ views: opts.views })
+  });
+  if (!res.ok) throw await asError(res, res.status === 401 ? "session_expired" : void 0);
+}
 async function endSession(opts) {
   await opts.fetchImpl(`${opts.baseUrl}/chat/sessions/${opts.sessionId}/end`, {
     method: "POST",
@@ -84,6 +93,15 @@ async function postToolResult(opts) {
   }).catch(() => {
   });
 }
+async function refreshSessionToken(opts) {
+  const res = await opts.fetchImpl(`${opts.baseUrl}/chat/sessions/${opts.sessionId}/refresh-token`, {
+    method: "POST",
+    credentials: "omit",
+    headers: { Authorization: `Bearer ${opts.sessionToken}` }
+  });
+  if (!res.ok) throw await asError(res, res.status === 401 ? "session_expired" : void 0);
+  return await res.json();
+}
 async function mintStreamTicket(opts) {
   const res = await opts.fetchImpl(`${opts.baseUrl}/chat/sessions/${opts.sessionId}/stream-ticket`, {
     method: "POST",
@@ -96,15 +114,18 @@ async function mintStreamTicket(opts) {
 function streamUrl(baseUrl, sessionId, ticket) {
   return `${baseUrl}/chat/sessions/${sessionId}/stream?ticket=${encodeURIComponent(ticket)}`;
 }
-async function presignAttachment(opts) {
-  const res = await opts.fetchImpl(`${opts.baseUrl}/chat/sessions/${opts.sessionId}/attachments`, {
+async function uploadAttachment(opts) {
+  const form = new FormData();
+  form.append("file", opts.file, opts.file.name);
+  const res = await opts.fetchImpl(`${opts.baseUrl}/chat/sessions/${opts.sessionId}/upload`, {
     method: "POST",
     credentials: "omit",
-    headers: { "Content-Type": "application/json", Authorization: `Bearer ${opts.sessionToken}` },
-    body: JSON.stringify({ contentType: opts.contentType })
+    headers: { Authorization: `Bearer ${opts.sessionToken}` },
+    body: form
   });
   if (!res.ok) throw await asError(res, res.status === 401 ? "session_expired" : void 0);
-  return await res.json();
+  const j = await res.json();
+  return { storageRef: j.storageRef, contentType: j.contentType, name: j.name };
 }
 async function getAttachmentUrl(opts) {
   const res = await opts.fetchImpl(`${opts.baseUrl}/chat/sessions/${opts.sessionId}/attachment-url`, {
@@ -116,10 +137,6 @@ async function getAttachmentUrl(opts) {
   if (!res.ok) throw await asError(res, res.status === 401 ? "session_expired" : void 0);
   return (await res.json()).url;
 }
-async function uploadToPresigned(uploadUrl, file, fetchImpl) {
-  const res = await fetchImpl(uploadUrl, { method: "PUT", body: file, headers: { "Content-Type": file.type } });
-  if (!res.ok) throw new ChatApiError(`attachment upload failed with HTTP ${res.status}`, res.status);
-}
 
 // src/fingerprint.ts
 async function sha256Hex(input) {
@@ -165,9 +182,161 @@ async function computeDeviceFingerprint() {
   }
 }
 
+// src/journey.ts
+var MAX_BUFFER = 25;
+var storageKey = (agentId) => `oyehello-chat:journey:${agentId}`;
+var store = () => {
+  try {
+    return globalThis.sessionStorage ?? null;
+  } catch {
+    return null;
+  }
+};
+function load(agentId) {
+  const s = store();
+  if (!s) return { views: [], flushed: 0 };
+  try {
+    const raw = s.getItem(storageKey(agentId));
+    if (!raw) return { views: [], flushed: 0 };
+    const parsed = JSON.parse(raw);
+    const views = Array.isArray(parsed?.views) ? parsed.views.filter((v) => !!v && typeof v.path === "string" && typeof v.at === "string") : [];
+    const flushedRaw = typeof parsed?.flushed === "number" && parsed.flushed >= 0 ? parsed.flushed : 0;
+    return { views, flushed: Math.min(flushedRaw, views.length) };
+  } catch {
+    return { views: [], flushed: 0 };
+  }
+}
+function save(agentId, data) {
+  const s = store();
+  if (!s) return;
+  try {
+    s.setItem(storageKey(agentId), JSON.stringify(data));
+  } catch {
+  }
+}
+var sanitizePath = (raw) => (raw || "/").split("?")[0].split("#")[0];
+function recordView(agentId, path) {
+  try {
+    const p = sanitizePath(path);
+    const data = load(agentId);
+    const last = data.views[data.views.length - 1];
+    if (last && last.path === p) return;
+    data.views.push({ path: p, at: (/* @__PURE__ */ new Date()).toISOString() });
+    if (data.views.length > MAX_BUFFER) {
+      const drop = data.views.length - MAX_BUFFER;
+      data.views = data.views.slice(drop);
+      data.flushed = Math.max(0, data.flushed - drop);
+    }
+    save(agentId, data);
+  } catch {
+  }
+}
+function unsentViews(agentId) {
+  try {
+    const data = load(agentId);
+    return data.views.slice(data.flushed);
+  } catch {
+    return [];
+  }
+}
+function markFlushed(agentId, count) {
+  if (count <= 0) return;
+  try {
+    const data = load(agentId);
+    data.flushed = Math.min(data.views.length, data.flushed + count);
+    save(agentId, data);
+  } catch {
+  }
+}
+function installSpaHooks(onNav) {
+  const originalPush = history.pushState;
+  const originalReplace = history.replaceState;
+  let pushInstalled = false;
+  let replaceInstalled = false;
+  try {
+    history.pushState = function(...args) {
+      const ret = originalPush.apply(this, args);
+      try {
+        onNav();
+      } catch {
+      }
+      return ret;
+    };
+    pushInstalled = true;
+  } catch {
+  }
+  try {
+    history.replaceState = function(...args) {
+      const ret = originalReplace.apply(this, args);
+      try {
+        onNav();
+      } catch {
+      }
+      return ret;
+    };
+    replaceInstalled = true;
+  } catch {
+  }
+  const onPopState = () => {
+    try {
+      onNav();
+    } catch {
+    }
+  };
+  let popstateInstalled = false;
+  try {
+    window.addEventListener("popstate", onPopState);
+    popstateInstalled = true;
+  } catch {
+  }
+  return () => {
+    if (pushInstalled) {
+      try {
+        history.pushState = originalPush;
+      } catch {
+      }
+    }
+    if (replaceInstalled) {
+      try {
+        history.replaceState = originalReplace;
+      } catch {
+      }
+    }
+    if (popstateInstalled) {
+      try {
+        window.removeEventListener("popstate", onPopState);
+      } catch {
+      }
+    }
+  };
+}
+
 // src/client.ts
 var seq = 0;
 var uid = (p) => `${p}_${Date.now().toString(36)}_${(seq++).toString(36)}`;
+var isSafeRelativePath = (p) => p.startsWith("/") && !p.startsWith("//");
+var isSafeHttpUrl = (u) => {
+  try {
+    const parsed = new URL(u, window.location.origin);
+    return parsed.protocol === "http:" || parsed.protocol === "https:";
+  } catch {
+    return false;
+  }
+};
+var BUILTIN_TOOL_HANDLERS = {
+  navigate: (args) => {
+    const path = String(args.path ?? "");
+    if (!isSafeRelativePath(path)) return { ok: false, error: "unsafe navigate path" };
+    window.location.assign(path);
+    return { ok: true };
+  },
+  openUrl: (args) => {
+    const url = String(args.url ?? "");
+    if (!isSafeHttpUrl(url)) return { ok: false, error: "unsafe url" };
+    window.open(url, args.newTab === false ? "_self" : "_blank", "noopener,noreferrer");
+    return { ok: true };
+  }
+};
 function createChatClient(options) {
   const fetchImpl = options.fetch ?? globalThis.fetch.bind(globalThis);
   const ES = options.eventSource ?? globalThis.EventSource;
@@ -187,13 +356,95 @@ function createChatClient(options) {
   let closed = false;
   let warnedProtocol = false;
   let deviceFingerprint;
+  let refreshTimer = null;
   const toolHandlers = /* @__PURE__ */ new Map();
+  let journeyFlushChain = Promise.resolve();
+  let journeyFlushQueued = false;
+  const flushJourney = () => {
+    if (!session) return;
+    if (journeyFlushQueued) return;
+    journeyFlushQueued = true;
+    journeyFlushChain = journeyFlushChain.then(async () => {
+      journeyFlushQueued = false;
+      if (!session) return;
+      const pending = unsentViews(options.agentId);
+      if (pending.length === 0) return;
+      const s = session;
+      try {
+        await postPageViews({ baseUrl: options.baseUrl, sessionId: s.sessionId, sessionToken: s.sessionToken, views: pending, fetchImpl });
+        markFlushed(options.agentId, pending.length);
+      } catch {
+      }
+    });
+  };
   const clearReconnect = () => {
     if (reconnectTimer) {
       clearTimeout(reconnectTimer);
       reconnectTimer = null;
     }
   };
+  const clearRefresh = () => {
+    if (refreshTimer) {
+      clearTimeout(refreshTimer);
+      refreshTimer = null;
+    }
+  };
+  const scheduleRefresh = () => {
+    clearRefresh();
+    if (closed || !session) return;
+    const untilExpiry = Date.parse(session.expiresAt) - Date.now();
+    const delay = Number.isNaN(untilExpiry) ? 10 * 6e4 : Math.max(5e3, untilExpiry - 6e4);
+    refreshTimer = setTimeout(async () => {
+      if (closed || !session) return;
+      try {
+        const r = await refreshSessionToken({ baseUrl: options.baseUrl, sessionId: session.sessionId, sessionToken: session.sessionToken, fetchImpl });
+        session = { ...session, sessionToken: r.sessionToken, expiresAt: r.expiresAt };
+        persistSession(session);
+        scheduleRefresh();
+      } catch (err) {
+        const code = err?.code;
+        if (code === "session_ended" || code === "session_expired") clearStoredSession();
+      }
+    }, delay);
+    refreshTimer.unref?.();
+  };
+  const sessKey = `oyehello-chat-sess:${options.agentId}`;
+  const store2 = (() => {
+    try {
+      return globalThis.sessionStorage ?? null;
+    } catch {
+      return null;
+    }
+  })();
+  const loadStoredSession = () => {
+    if (!store2) return null;
+    try {
+      const raw = store2.getItem(sessKey);
+      if (!raw) return null;
+      const s = JSON.parse(raw);
+      if (!s?.sessionId || !s?.sessionToken || !s?.expiresAt || !s?.agent) return null;
+      const exp = Date.parse(s.expiresAt);
+      if (Number.isNaN(exp) || Date.now() >= exp - 5e3) {
+        store2.removeItem(sessKey);
+        return null;
+      }
+      return s;
+    } catch {
+      return null;
+    }
+  };
+  const persistSession = (s) => {
+    try {
+      store2?.setItem(sessKey, JSON.stringify({ sessionId: s.sessionId, sessionToken: s.sessionToken, expiresAt: s.expiresAt, agent: s.agent }));
+    } catch {
+    }
+  };
+  const clearStoredSession = () => {
+    try {
+      store2?.removeItem(sessKey);
+    } catch {
+    }
+  };
   const emit = (e) => {
     for (const l of listeners) l(e);
   };
@@ -244,7 +495,7 @@ function createChatClient(options) {
     } else if (ev.type === "tool_call") {
       if (seenCallIds.has(ev.callId)) return;
       seenCallIds.add(ev.callId);
-      const handler = toolHandlers.get(ev.name);
+      const handler = toolHandlers.get(ev.name) ?? BUILTIN_TOOL_HANDLERS[ev.name];
       void (async () => {
         if (!session) return;
         const base = { baseUrl: options.baseUrl, sessionId: session.sessionId, sessionToken: session.sessionToken, callId: ev.callId, fetchImpl };
@@ -284,8 +535,10 @@ function createChatClient(options) {
     } else if (ev.type === "done") {
       closed = true;
       clearReconnect();
+      clearRefresh();
       es?.close();
       es = null;
+      clearStoredSession();
       setState("ended");
     }
   };
@@ -318,6 +571,7 @@ function createChatClient(options) {
     reconnectTimer = setTimeout(() => {
       openStream().catch((err) => {
         if (err instanceof ChatApiError && err.code === "session_expired") {
+          clearStoredSession();
           open().catch((e) => {
             emit({ type: "error", error: e });
             scheduleReconnect();
@@ -329,8 +583,19 @@ function createChatClient(options) {
     }, delay);
   };
   const open = async () => {
+    const resumed = loadStoredSession();
+    if (resumed) {
+      session = resumed;
+      emit({ type: "agent", agent: resumed.agent });
+      await openStream();
+      scheduleRefresh();
+      flushJourney();
+      return;
+    }
     if (deviceFingerprint === void 0) deviceFingerprint = await computeDeviceFingerprint().catch(() => null);
-    session = await openSession({ baseUrl: options.baseUrl, apiKey: options.apiKey, agentId: options.agentId, user: options.user, clientTools: Array.from(toolHandlers.keys()), fingerprint: deviceFingerprint ?? void 0, fetchImpl });
+    const advertisedTools = /* @__PURE__ */ new Set([...toolHandlers.keys(), ...Object.keys(BUILTIN_TOOL_HANDLERS)]);
+    session = await openSession({ baseUrl: options.baseUrl, apiKey: options.apiKey, agentId: options.agentId, user: options.user, clientTools: Array.from(advertisedTools), fingerprint: deviceFingerprint ?? void 0, fetchImpl });
+    persistSession(session);
     if (!warnedProtocol && typeof session.protocol === "number" && session.protocol !== CHAT_PROTOCOL_VERSION) {
       warnedProtocol = true;
       try {
@@ -340,13 +605,11 @@ function createChatClient(options) {
     }
     emit({ type: "agent", agent: session.agent });
     await openStream();
+    scheduleRefresh();
+    flushJourney();
   };
   const uploadFiles = async (files) => {
-    return Promise.all(files.map(async (file) => {
-      const { storageRef, uploadUrl } = await presignAttachment({ baseUrl: options.baseUrl, sessionId: session.sessionId, sessionToken: session.sessionToken, contentType: file.type, fetchImpl });
-      await uploadToPresigned(uploadUrl, file, fetchImpl);
-      return { storageRef, contentType: file.type, name: file.name };
-    }));
+    return Promise.all(files.map((file) => uploadAttachment({ baseUrl: options.baseUrl, sessionId: session.sessionId, sessionToken: session.sessionToken, file, fetchImpl })));
   };
   return {
     getMessages: () => messages.slice(),
@@ -365,6 +628,13 @@ function createChatClient(options) {
     getWidgetConfig() {
       return getWidgetConfig({ baseUrl: options.baseUrl, apiKey: options.apiKey, agentId: options.agentId, fetchImpl });
     },
+    recordPageView(path) {
+      try {
+        recordView(options.agentId, path);
+        flushJourney();
+      } catch {
+      }
+    },
     async start() {
       if (state === "opening" || state === "ready") return;
       closed = false;
@@ -410,6 +680,7 @@ function createChatClient(options) {
       } catch (err) {
         if (err instanceof ChatApiError && err.code === "session_expired") {
           try {
+            clearStoredSession();
             await open();
             const freshAttachments = fileList.length ? await uploadFiles(fileList) : [];
             await postMessage({ baseUrl: options.baseUrl, sessionId: session.sessionId, sessionToken: session.sessionToken, text, attachments: freshAttachments, fetchImpl });
@@ -421,18 +692,29 @@ function createChatClient(options) {
         }
       }
     },
+    detach() {
+      closed = true;
+      clearReconnect();
+      clearRefresh();
+      es?.close();
+      es = null;
+    },
     async end() {
       closed = true;
       clearReconnect();
+      clearRefresh();
+      clearStoredSession();
       if (session) await endSession({ baseUrl: options.baseUrl, sessionId: session.sessionId, sessionToken: session.sessionToken, fetchImpl });
       es?.close();
       es = null;
       setState("ended");
     },
     reset() {
+      clearStoredSession();
       es?.close();
       es = null;
       clearReconnect();
+      clearRefresh();
       session = null;
       streamingId = null;
       handoffState = "ai";
@@ -523,6 +805,10 @@ var STYLES = `
     --oc-glass-border: rgba(9,13,20,0.12);
 
     position: fixed; right: 24px; bottom: 24px; z-index: 2147483000;
+    /* Explicit display/visibility so a host-page reset or consent/privacy tool that blanket-hides
+     * body children (oyehello-chat { display:none }) can't silently kill the widget. Also pinned
+     * inline with !important at mount (see element.ts) to beat an external !important rule. */
+    display: block; visibility: visible; opacity: 1;
     font-family: 'Geist', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
     -webkit-font-smoothing: antialiased;
   }
@@ -562,7 +848,7 @@ var STYLES = `
   .launcher:hover { transform: scale(1.06); }
   .launcher:active { transform: scale(0.93); }
   .ring { pointer-events: none; position: absolute; inset: -1px; border-radius: var(--oc-r-full); border: 2px solid var(--oc-ac); opacity: 0; }
-  .oc.ring:not(.open) .ring { animation: w-ring 2.4s ease-out 1.1s 3; }
+  .oc.show-ring:not(.open) .ring { animation: w-ring 2.4s ease-out 1.1s 3; }
   .ic-chat, .ic-close { position: absolute; display: flex; align-items: center; justify-content: center; transition: all .3s var(--oc-bounce); }
   .ic-chat { width: 28px; height: 28px; opacity: 1; transform: rotate(0) scale(1); }
   .ic-close { opacity: 0; transform: rotate(90deg) scale(0.6); }
@@ -584,7 +870,7 @@ var STYLES = `
     transition: opacity .3s var(--oc-ease), transform .38s var(--oc-bounce);
   }
   .oc.has-teaser .teaser { display: flex; }
-  .oc.teaser:not(.open) .teaser { opacity: 1; transform: none; pointer-events: auto; }
+  .oc.show-teaser:not(.open) .teaser { opacity: 1; transform: none; pointer-events: auto; }
   .teaser-btn {
     max-width: 250px; display: flex; align-items: center; gap: 10px; padding: 11px 15px;
     border-radius: 16px 16px 5px 16px; border: 1px solid var(--oc-glass-border); background: var(--oc-bg);
@@ -681,6 +967,7 @@ var STYLES = `
 
   /* \u2500\u2500 Composer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
   .composer { flex: none; display: flex; flex-direction: column; gap: 9px; padding: 12px 14px 13px; background: var(--oc-bg); }
+  .composer[hidden] { display: none; }
   .field { display: flex; flex-direction: column; gap: 11px; padding: 13px 14px 11px; border-radius: 18px; border: 1px solid var(--oc-field-border); background: var(--oc-field-bg); transition: border-color .18s var(--oc-ease); }
   .oc.focus .field { border-color: var(--oc-ac); }
   .input { width: 100%; border: none; background: transparent; color: var(--oc-fg); font-size: 13.5px; line-height: 1.4; outline: none; padding: 0; resize: none; max-height: 108px; font-family: inherit; }
@@ -921,10 +1208,14 @@ var OyehelloChatElement = class extends HTMLElement {
   // widget-config resolved (so we know online/offline before starting)
   idleTimer = null;
   idleReset = null;
+  // Uninstaller for the SPA history-navigation hooks (journey tracking), installed in
+  // connectedCallback and torn down in disconnectedCallback alongside everything else.
+  uninstallSpaHooks = null;
   // ── shadow refs ──
   oc;
   bodyEl;
   textareaEl;
+  composerEl;
   fileEl;
   titleEl;
   statusEl;
@@ -946,7 +1237,16 @@ var OyehelloChatElement = class extends HTMLElement {
       this.pendingTools = {};
     }
     this.off = this.client.on((e) => this.onClientEvent(e));
+    recordView(agentId, location.pathname);
+    try {
+      this.uninstallSpaHooks = installSpaHooks(() => this.client?.recordPageView(location.pathname));
+    } catch {
+      this.uninstallSpaHooks = null;
+    }
     this.renderShell();
+    this.style.setProperty("display", "block", "important");
+    this.style.setProperty("visibility", "visible", "important");
+    this.style.setProperty("opacity", "1", "important");
     this.renderMessages();
     this.updateHeader();
     this.updateStatus();
@@ -963,7 +1263,7 @@ var OyehelloChatElement = class extends HTMLElement {
     }
     this.updateClasses(true);
     this.timers.push(setTimeout(() => {
-      this.oc?.classList.remove("ring");
+      this.oc?.classList.remove("show-ring");
     }, 6e3));
     this.armIdleTeaser();
   }
@@ -1050,8 +1350,10 @@ var OyehelloChatElement = class extends HTMLElement {
   }
   disconnectedCallback() {
     this.off?.();
-    void this.client?.end();
+    this.client?.detach();
     this.teardownIdle();
+    this.uninstallSpaHooks?.();
+    this.uninstallSpaHooks = null;
     for (const t of this.timers) clearTimeout(t);
     for (const url of this.imagePreviewCache.values()) {
       if (typeof URL.revokeObjectURL === "function") URL.revokeObjectURL(url);
@@ -1129,6 +1431,7 @@ var OyehelloChatElement = class extends HTMLElement {
     this.oc = root.querySelector(".oc");
     this.bodyEl = root.querySelector(".body");
     this.textareaEl = root.querySelector("textarea.input");
+    this.composerEl = root.querySelector(".composer");
     this.fileEl = root.querySelector('input[type="file"]');
     this.titleEl = root.querySelector(".hd-title");
     this.statusEl = root.querySelector(".hd-status .t");
@@ -1187,18 +1490,22 @@ var OyehelloChatElement = class extends HTMLElement {
     this.shadowRoot.innerHTML = `<div style="position:fixed;right:16px;bottom:16px;color:#b91c1c;font:12px system-ui;background:#fef2f2;border:1px solid #fecaca;padding:8px 12px;border-radius:8px">${escapeHtml(msg)}</div>`;
   }
   // ── State-class sync ──────────────────────────────────────────────────────────────────────────
+  // State classes on `.oc` MUST NOT share a name with any element class that has a bare base rule
+  // (e.g. `.teaser`, `.ring`): the bare selector would also match `.oc.<state>` and, tying `.oc`'s
+  // own rule on specificity, win on source order — e.g. `.teaser{display:none}` would hide the whole
+  // widget. Hence the `show-` prefix on the teaser/ring state classes.
   updateClasses(initialRing = false) {
     if (!this.oc) return;
     const c = this.oc.classList;
     c.toggle("open", this.uiOpen);
     c.toggle("max", this.uiMax);
     c.toggle("emoji", this.emojiOpen);
-    c.toggle("teaser", this.teaserActive);
+    c.toggle("show-teaser", this.teaserActive);
     c.toggle("away", this.away);
     c.toggle("focus", this.focused);
     c.toggle("ready", (this.textareaEl?.value.trim().length ?? 0) > 0);
     c.toggle("unread", this.unseen > 0);
-    if (initialRing) c.add("ring");
+    if (initialRing) c.add("show-ring");
     const badge = this.oc.querySelector(".badge");
     if (badge) badge.textContent = this.unseen > 9 ? "9+" : String(this.unseen);
     const launcher = this.oc.querySelector(".launcher");
@@ -1267,6 +1574,7 @@ var OyehelloChatElement = class extends HTMLElement {
     if (!this.textareaEl) return;
     const disabled = this.state !== "ready" || this.offline;
     this.textareaEl.disabled = disabled;
+    if (this.composerEl) this.composerEl.hidden = this.state === "ended" || this.offline;
     const handoff = HANDOFF_STATUS[this.handoffState];
     const text = this.offline ? "Offline" : this.state === "opening" ? "Connecting\u2026" : handoff ?? (this.getAttribute("status") ?? DEFAULT_STATUS);
     if (this.statusEl) this.statusEl.textContent = text;