clay-server 3.8.1 → 4.0.0-beta.2

package/lib/public/modules/dm-render.js

@@ -0,0 +1,82 @@
+// dm-render.js - Shared DOM builders for DM-style messages and typing state.
+
+export function buildDmMessage(msg, options) {
+  options = options || {};
+  var container = options.container || null;
+  var timestamp = typeof msg.ts === "number" ? msg.ts : 0;
+  var date = new Date(timestamp);
+  var timeStr = date.getHours().toString().padStart(2, "0") + ":" + date.getMinutes().toString().padStart(2, "0");
+  var previous = container ? container.lastElementChild : null;
+  var compact = false;
+  if (previous && previous.dataset.from === String(msg.from || "")) {
+    var previousTimestamp = parseInt(previous.dataset.ts || "0", 10);
+    if (timestamp - previousTimestamp < 300000) compact = true;
+  }
+
+  var row = document.createElement("div");
+  row.className = "dm-msg" + (compact ? " dm-msg-compact" : "");
+  row.dataset.from = msg.from || "";
+  row.dataset.ts = timestamp;
+
+  if (compact) {
+    var hoverTime = document.createElement("span");
+    hoverTime.className = "dm-msg-hover-time";
+    hoverTime.textContent = timeStr;
+    row.appendChild(hoverTime);
+
+    var compactBody = document.createElement("div");
+    compactBody.className = "dm-msg-body";
+    compactBody.textContent = msg.text || "";
+    row.appendChild(compactBody);
+    return row;
+  }
+
+  var avatar = document.createElement("img");
+  avatar.className = "dm-msg-avatar";
+  avatar.src = options.avatarUrl || "";
+  avatar.alt = "";
+  row.appendChild(avatar);
+
+  var content = document.createElement("div");
+  content.className = "dm-msg-content";
+
+  var header = document.createElement("div");
+  header.className = "dm-msg-header";
+
+  var name = document.createElement("span");
+  name.className = "dm-msg-name";
+  name.textContent = options.displayName || (options.isMe ? "Me" : "User");
+  header.appendChild(name);
+
+  var time = document.createElement("span");
+  time.className = "dm-msg-time";
+  time.textContent = timeStr;
+  header.appendChild(time);
+  content.appendChild(header);
+
+  var body = document.createElement("div");
+  body.className = "dm-msg-body";
+  body.textContent = msg.text || "";
+  content.appendChild(body);
+  row.appendChild(content);
+  return row;
+}
+
+export function buildDmTypingIndicator(options) {
+  options = options || {};
+  var row = document.createElement("div");
+  if (options.id) row.id = options.id;
+  row.className = "dm-msg dm-typing-indicator";
+
+  var avatar = document.createElement("img");
+  avatar.className = "dm-msg-avatar";
+  avatar.src = options.avatarUrl || "";
+  avatar.alt = "";
+  row.appendChild(avatar);
+
+  var dots = document.createElement("div");
+  dots.className = "dm-typing-dots";
+  dots.innerHTML = "<span></span><span></span><span></span>";
+  row.appendChild(dots);
+  return row;
+}

package/lib/public/modules/home-capsule-creation-intent.js

@@ -0,0 +1,31 @@
+// Mate-neutral Capsule creation entry contract for Home surfaces.
+
+import { store } from './store.js';
+import { findHomeMate } from './home-mate-selection.js';
+
+export var HOME_CAPSULE_CREATION_EVENT = "clay:home-capsule-create";
+
+export function normalizeCapsuleDescription(value) {
+  if (typeof value !== "string") return "";
+  return value.replace(/[\u0000-\u0008\u000b\u000c\u000e-\u001f\u007f]/g, " ").trim().slice(0, 4000);
+}
+
+export function resolveCapsuleCreationMate(mates, currentMateId) {
+  var visible = (Array.isArray(mates) ? mates : []).filter(function (mate) {
+    return !!mate && !mate.archived;
+  });
+  return findHomeMate(visible, currentMateId);
+}
+
+export function requestHomeCapsuleCreation(value) {
+  var description = normalizeCapsuleDescription(value);
+  if (!description || !store.get('homeSurfaceLoaded')) return false;
+  var mate = resolveCapsuleCreationMate(
+    store.get('cachedMatesList') || [],
+    store.get('homeChatMateId')
+  );
+  if (!mate) return false;
+  var detail = { mateId: mate.id, description: description, accepted: false };
+  window.dispatchEvent(new CustomEvent(HOME_CAPSULE_CREATION_EVENT, { detail: detail }));
+  return detail.accepted === true;
+}

package/lib/public/modules/home-capsule-library.js

@@ -0,0 +1,146 @@
+// Native host surface for browsing the user's installed Capsules.
+
+import { iconHtml } from './icons.js';
+import { requestHomeCapsuleCreation } from './home-capsule-creation-intent.js';
+
+function installedCapsules(definitions) {
+  return (definitions || []).filter(function (definition) {
+    return !!definition && !!definition.manifest && !!definition.manifest.id;
+  }).sort(function (a, b) {
+    return String(a.manifest.name || a.manifest.id).localeCompare(String(b.manifest.name || b.manifest.id));
+  });
+}
+
+function submitCreation(input, status) {
+  var description = input.value.trim();
+  if (!description) return;
+  status.textContent = "";
+  if (requestHomeCapsuleCreation(description)) return;
+  status.textContent = "Your Mate is not ready yet. Try again in a moment.";
+}
+
+function createComposer() {
+  var form = document.createElement("form");
+  form.className = "home-capsule-library-create";
+  var label = document.createElement("label");
+  label.className = "home-capsule-library-create-label";
+  label.htmlFor = "home-capsule-library-prompt";
+  label.textContent = "Create with Mate";
+  form.appendChild(label);
+  var guidance = document.createElement("p");
+  guidance.id = "home-capsule-library-create-guidance";
+  guidance.className = "home-capsule-library-create-guidance";
+  guidance.textContent = "Describe what should stay useful beyond this conversation. Your current Mate will open a new conversation and shape it with you.";
+  form.appendChild(guidance);
+  var frame = document.createElement("div");
+  frame.className = "home-capsule-library-create-frame";
+  var input = document.createElement("textarea");
+  input.id = "home-capsule-library-prompt";
+  input.className = "home-capsule-library-create-input";
+  input.rows = 2;
+  input.maxLength = 4000;
+  input.placeholder = "Describe the interface you need";
+  input.setAttribute("aria-describedby", "home-capsule-library-create-guidance home-capsule-library-create-status");
+  frame.appendChild(input);
+  var submit = document.createElement("button");
+  submit.type = "submit";
+  submit.className = "home-capsule-library-create-submit";
+  submit.setAttribute("aria-label", "Start a Capsule conversation with your Mate");
+  submit.innerHTML = iconHtml("arrow-up");
+  frame.appendChild(submit);
+  form.appendChild(frame);
+  var status = document.createElement("p");
+  status.id = "home-capsule-library-create-status";
+  status.className = "home-capsule-library-create-status";
+  status.setAttribute("role", "status");
+  form.appendChild(status);
+  form.addEventListener("submit", function (event) {
+    event.preventDefault();
+    submitCreation(input, status);
+  });
+  input.addEventListener("keydown", function (event) {
+    if (event.key !== "Enter" || event.shiftKey || event.isComposing) return;
+    event.preventDefault();
+    submitCreation(input, status);
+  });
+  return form;
+}
+
+export function renderHomeCapsuleLibrary(container, definitions, openCapsule) {
+  var root = document.createElement("section");
+  root.className = "home-capsule-library";
+  root.setAttribute("aria-labelledby", "home-capsule-library-title");
+
+  var intro = document.createElement("header");
+  intro.className = "home-capsule-library-intro";
+  var title = document.createElement("h2");
+  title.id = "home-capsule-library-title";
+  title.tabIndex = -1;
+  title.textContent = "Capsule Home";
+  intro.appendChild(title);
+  var description = document.createElement("p");
+  description.textContent = "Turn a recurring need into something you can open, use, and keep.";
+  intro.appendChild(description);
+  root.appendChild(intro);
+  var definition = document.createElement("section");
+  definition.className = "home-capsule-library-definition";
+  definition.setAttribute("aria-labelledby", "home-capsule-library-definition-title");
+  var definitionTitle = document.createElement("h3");
+  definitionTitle.id = "home-capsule-library-definition-title";
+  definitionTitle.textContent = "What is a Capsule?";
+  definition.appendChild(definitionTitle);
+  var definitionText = document.createElement("p");
+  definitionText.textContent = "A Capsule is a small, persistent app that a Mate creates with you. It keeps its interface and data beyond the conversation, and every Mate can help you use or improve it.";
+  definition.appendChild(definitionText);
+  root.appendChild(definition);
+  root.appendChild(createComposer());
+
+  var capsules = installedCapsules(definitions);
+  if (!capsules.length) { container.appendChild(root); return; }
+
+  var inventory = document.createElement("section");
+  inventory.className = "home-capsule-library-inventory";
+  inventory.setAttribute("aria-labelledby", "home-capsule-library-installed-title");
+  var inventoryTitle = document.createElement("h3");
+  inventoryTitle.id = "home-capsule-library-installed-title";
+  inventoryTitle.textContent = "Installed Capsules";
+  inventory.appendChild(inventoryTitle);
+  var list = document.createElement("ul");
+  list.className = "home-capsule-library-list";
+  for (var i = 0; i < capsules.length; i++) {
+    (function (definition) {
+      var manifest = definition.manifest;
+      var item = document.createElement("li");
+      item.className = "home-capsule-library-item";
+      var row = document.createElement("button");
+      row.type = "button";
+      row.className = "home-capsule-library-row";
+      row.setAttribute("aria-label", "Open " + (manifest.name || manifest.id) + " Capsule");
+      var icon = document.createElement("span");
+      icon.className = "home-capsule-library-icon";
+      icon.innerHTML = iconHtml(manifest.lucideIcon || "box");
+      row.appendChild(icon);
+      var copy = document.createElement("span");
+      copy.className = "home-capsule-library-copy";
+      var name = document.createElement("span");
+      name.className = "home-capsule-library-name";
+      name.textContent = manifest.name || manifest.id;
+      copy.appendChild(name);
+      var hint = document.createElement("span");
+      hint.className = "home-capsule-library-hint";
+      hint.textContent = "Open Capsule";
+      copy.appendChild(hint);
+      row.appendChild(copy);
+      var arrow = document.createElement("span");
+      arrow.className = "home-capsule-library-arrow";
+      arrow.innerHTML = iconHtml("arrow-up-right");
+      row.appendChild(arrow);
+      row.addEventListener("click", function () { openCapsule(manifest.id); });
+      item.appendChild(row);
+      list.appendChild(item);
+    })(capsules[i]);
+  }
+  inventory.appendChild(list);
+  root.appendChild(inventory);
+  container.appendChild(root);
+}

package/lib/public/modules/home-capsule-source.js

@@ -0,0 +1,383 @@
+import { getWs } from './ws-ref.js';
+import { iconHtml, refreshIcons } from './icons.js';
+
+var hosts = Object.create(null);
+var sequence = 0;
+
+function send(message) {
+  var ws = getWs();
+  if (!ws || ws.readyState !== 1) return false;
+  ws.send(JSON.stringify(message));
+  return true;
+}
+
+function nextRequestId(prefix) {
+  sequence += 1;
+  return prefix + "_" + Date.now() + "_" + sequence;
+}
+
+function setRuntimeVisible(host, visible) {
+  var surfaces = host.root.querySelectorAll("[data-capsule-runtime-surface]");
+  for (var i = 0; i < surfaces.length; i++) surfaces[i].hidden = !visible;
+}
+
+function setAccessStatus(host, text, error) {
+  if (!host.accessStatus) return;
+  host.accessStatus.textContent = text || "";
+  host.accessStatus.classList.toggle("is-error", error === true);
+}
+
+function syncAccess(host, metadata) {
+  if (!host.access) return;
+  var allowed = host.definition.manifest.runtime === "worker" && !!(metadata && metadata.mateEditingAllowed === true);
+  host.definition.metadata = Object.assign({}, host.definition.metadata || {}, metadata || {}, { mateEditingAllowed: allowed });
+  host.accessRequestId = null;
+  host.access.disabled = false;
+  host.access.setAttribute("aria-disabled", "false");
+  host.access.setAttribute("aria-checked", allowed ? "true" : "false");
+  host.access.classList.remove("is-saving");
+  setAccessStatus(host, allowed ? "Mates can inspect and propose source edits." : "Mates cannot inspect or propose source edits.", false);
+}
+
+function menuItems(host) {
+  if (!host.menu) return [];
+  var items = [];
+  for (var i = 0; i < host.menu.children.length; i++) {
+    var role = host.menu.children[i].getAttribute("role");
+    if ((role === "menuitem" || role === "menuitemcheckbox") && !host.menu.children[i].disabled) items.push(host.menu.children[i]);
+  }
+  return items;
+}
+
+function focusAccess(host) {
+  if (host.access && !host.menu.hidden && host.access.isConnected) host.access.focus({ preventScroll: true });
+}
+
+function removeMenuDocumentHandler(host) {
+  if (!host.outsideMenuHandler) return;
+  document.removeEventListener("pointerdown", host.outsideMenuHandler, true);
+  host.outsideMenuHandler = null;
+}
+
+function closeActionsMenu(host, returnFocus) {
+  if (!host || !host.menu) return;
+  host.menu.hidden = true;
+  host.actionsButton.setAttribute("aria-expanded", "false");
+  removeMenuDocumentHandler(host);
+  if (returnFocus && host.actionsButton.isConnected) host.actionsButton.focus({ preventScroll: true });
+}
+
+function openActionsMenu(host, focusFirst) {
+  if (!host || !host.menu) return;
+  var ids = Object.keys(hosts);
+  for (var i = 0; i < ids.length; i++) {
+    if (hosts[ids[i]] !== host) closeActionsMenu(hosts[ids[i]], false);
+  }
+  host.menu.hidden = false;
+  host.actionsButton.setAttribute("aria-expanded", "true");
+  removeMenuDocumentHandler(host);
+  host.outsideMenuHandler = function (event) {
+    if (host.toolbar.contains(event.target)) return;
+    closeActionsMenu(host, false);
+  };
+  document.addEventListener("pointerdown", host.outsideMenuHandler, true);
+  if (focusFirst) {
+    var items = menuItems(host);
+    if (items.length) items[0].focus({ preventScroll: true });
+  }
+}
+
+function toggleActionsMenu(host) {
+  if (host.menu.hidden) openActionsMenu(host, true);
+  else closeActionsMenu(host, true);
+}
+
+function closeInspector(host) {
+  if (!host || !host.inspector) return;
+  host.inspector.remove();
+  host.inspector = null;
+  host.sourceRequestId = null;
+  setRuntimeVisible(host, true);
+  if (host.actionsButton && host.actionsButton.isConnected) host.actionsButton.focus({ preventScroll: true });
+}
+
+function createTab(label, index, host) {
+  var tab = document.createElement("button");
+  tab.type = "button";
+  tab.className = "home-capsule-source-tab";
+  tab.id = "home-capsule-source-tab-" + host.toolId + "-" + index;
+  tab.setAttribute("role", "tab");
+  tab.dataset.sourceIndex = String(index);
+  tab.textContent = label;
+  return tab;
+}
+
+export function highlightCapsuleSource(code, language, text) {
+  code.className = "home-capsule-source-code language-" + language;
+  code.removeAttribute("data-highlighted");
+  code.textContent = text;
+  var highlighter = typeof window !== "undefined" ? window.hljs : null;
+  if (!highlighter || typeof highlighter.highlightElement !== "function") return false;
+  if (typeof highlighter.getLanguage === "function" && !highlighter.getLanguage(language)) return false;
+  try {
+    highlighter.highlightElement(code);
+    return true;
+  } catch (error) {
+    code.className = "home-capsule-source-code language-" + language;
+    code.removeAttribute("data-highlighted");
+    code.textContent = text;
+    return false;
+  }
+}
+
+function showSourcePanel(host, index) {
+  var tabs = host.inspector.querySelectorAll('[role="tab"]');
+  for (var i = 0; i < tabs.length; i++) {
+    var selected = Number(tabs[i].dataset.sourceIndex) === index;
+    tabs[i].setAttribute("aria-selected", selected ? "true" : "false");
+    tabs[i].tabIndex = selected ? 0 : -1;
+  }
+  var source = host.source;
+  var label = index === 0 ? "Manifest" : (index === 1 ? "UI" : "Logic");
+  var language = index === 2 ? "javascript" : "json";
+  var text;
+  host.code.setAttribute("aria-label", label + " source");
+  if (index === 0) text = JSON.stringify(source.manifest, null, 2);
+  else if (index === 1) text = JSON.stringify(source.uiTree, null, 2);
+  else if (source.logicAvailable) text = source.logicSource || "";
+  else text = "Logic is server-managed and is not available as authored Capsule source.";
+  highlightCapsuleSource(host.code, language, text);
+}
+
+function renderSource(host, source) {
+  host.source = source;
+  host.inspector.classList.remove("is-loading");
+  host.loading.remove();
+  var tablist = document.createElement("div");
+  tablist.className = "home-capsule-source-tabs";
+  tablist.setAttribute("role", "tablist");
+  tablist.setAttribute("aria-label", "Capsule source files");
+  var labels = ["Manifest", "UI", "Logic"];
+  for (var i = 0; i < labels.length; i++) {
+    var tab = createTab(labels[i], i, host);
+    tab.addEventListener("click", function (event) {
+      showSourcePanel(host, Number(event.currentTarget.dataset.sourceIndex));
+    });
+    tablist.appendChild(tab);
+  }
+  var code = document.createElement("pre");
+  code.className = "home-capsule-source-code";
+  code.setAttribute("role", "region");
+  code.tabIndex = 0;
+  host.code = code;
+  host.inspector.appendChild(tablist);
+  host.inspector.appendChild(code);
+  showSourcePanel(host, 0);
+  tablist.firstElementChild.focus({ preventScroll: true });
+}
+
+function openInspector(host) {
+  if (host.inspector) return;
+  closeActionsMenu(host, false);
+  var inspector = document.createElement("section");
+  inspector.className = "home-capsule-source-inspector is-loading";
+  inspector.setAttribute("aria-label", host.definition.manifest.name + " source inspector");
+  var header = document.createElement("header");
+  header.className = "home-capsule-source-header";
+  var back = document.createElement("button");
+  back.type = "button";
+  back.className = "home-capsule-source-back";
+  back.setAttribute("aria-label", "Return to Capsule");
+  back.innerHTML = iconHtml("arrow-left") + '<span>Capsule</span>';
+  back.addEventListener("click", function () { closeInspector(host); });
+  header.appendChild(back);
+  var title = document.createElement("div");
+  title.className = "home-capsule-source-title";
+  title.textContent = "Source · " + host.definition.manifest.name;
+  header.appendChild(title);
+  inspector.appendChild(header);
+  var loading = document.createElement("p");
+  loading.className = "home-capsule-source-loading";
+  loading.textContent = "Loading source…";
+  inspector.appendChild(loading);
+  inspector.addEventListener("keydown", function (event) {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      event.stopPropagation();
+      closeInspector(host);
+      return;
+    }
+    if (!event.target || event.target.getAttribute("role") !== "tab") return;
+    var tabs = inspector.querySelectorAll('[role="tab"]');
+    var current = Number(event.target.dataset.sourceIndex);
+    var next = current;
+    if (event.key === "ArrowRight") next = (current + 1) % tabs.length;
+    else if (event.key === "ArrowLeft") next = (current + tabs.length - 1) % tabs.length;
+    else if (event.key === "Home") next = 0;
+    else if (event.key === "End") next = tabs.length - 1;
+    else return;
+    event.preventDefault();
+    showSourcePanel(host, next);
+    tabs[next].focus({ preventScroll: true });
+  });
+  host.inspector = inspector;
+  host.loading = loading;
+  host.root.appendChild(inspector);
+  setRuntimeVisible(host, false);
+  back.focus({ preventScroll: true });
+  var requestId = nextRequestId("tool_source");
+  host.sourceRequestId = requestId;
+  if (!send({ type: "tool_source_get", toolId: host.toolId, requestId: requestId })) {
+    loading.textContent = "Source is unavailable while Clay is disconnected.";
+    inspector.classList.remove("is-loading");
+  }
+  refreshIcons();
+}
+
+export function mountCapsuleHostControls(toolId, definition, chromeRoot, contentRoot) {
+  var toolbar = document.createElement("section");
+  toolbar.className = "home-capsule-chrome-controls";
+  toolbar.setAttribute("aria-label", definition.manifest.name + " Capsule controls");
+  var host = { toolId: toolId, definition: definition, root: contentRoot, toolbar: toolbar, actionsButton: null, menu: null, outsideMenuHandler: null, access: null, accessStatus: null, accessRequestId: null, inspector: null, sourceRequestId: null };
+  hosts[toolId] = host;
+  var actionsButton = document.createElement("button");
+  actionsButton.type = "button";
+  actionsButton.className = "home-capsule-actions-trigger";
+  actionsButton.setAttribute("aria-label", definition.manifest.name + " Capsule actions");
+  actionsButton.setAttribute("aria-haspopup", "menu");
+  actionsButton.setAttribute("aria-expanded", "false");
+  actionsButton.title = "Capsule actions";
+  actionsButton.innerHTML = iconHtml("ellipsis");
+  toolbar.appendChild(actionsButton);
+  var menu = document.createElement("div");
+  menu.className = "home-capsule-actions-menu";
+  menu.setAttribute("role", "menu");
+  menu.setAttribute("aria-label", definition.manifest.name + " Capsule actions");
+  menu.hidden = true;
+  var sourceItem = document.createElement("button");
+  sourceItem.type = "button";
+  sourceItem.className = "home-capsule-actions-item";
+  sourceItem.setAttribute("role", "menuitem");
+  sourceItem.tabIndex = -1;
+  sourceItem.innerHTML = iconHtml("file-code-2") + "<span>View source</span>";
+  sourceItem.addEventListener("click", function () { openInspector(host); });
+  menu.appendChild(sourceItem);
+  if (definition.manifest.runtime === "worker") {
+    var access = document.createElement("button");
+    access.type = "button";
+    access.className = "home-capsule-actions-item home-capsule-access-item";
+    access.setAttribute("role", "menuitemcheckbox");
+    access.setAttribute("aria-checked", "false");
+    access.setAttribute("aria-disabled", "false");
+    access.tabIndex = -1;
+    var check = document.createElement("span");
+    check.className = "home-capsule-access-check";
+    check.setAttribute("aria-hidden", "true");
+    check.textContent = "✓";
+    access.appendChild(check);
+    var copy = document.createElement("span");
+    copy.className = "home-capsule-access-copy";
+    var name = document.createElement("span");
+    name.className = "home-capsule-access-name";
+    name.textContent = "Allow Mate editing";
+    copy.appendChild(name);
+    var status = document.createElement("span");
+    status.className = "home-capsule-access-status";
+    status.setAttribute("aria-live", "polite");
+    copy.appendChild(status);
+    access.appendChild(copy);
+    menu.appendChild(access);
+    host.access = access;
+    host.accessStatus = status;
+    syncAccess(host, definition.metadata);
+    access.addEventListener("click", function () {
+      if (access.disabled) return;
+      var confirmed = !!(host.definition.metadata && host.definition.metadata.mateEditingAllowed);
+      var requested = !confirmed;
+      access.disabled = true;
+      access.setAttribute("aria-disabled", "true");
+      access.classList.add("is-saving");
+      setAccessStatus(host, "Saving permission…", false);
+      host.accessRequestId = nextRequestId("tool_access");
+      if (!send({ type: "tool_mate_access_set", toolId: toolId, allowed: requested, requestId: host.accessRequestId })) {
+        host.accessRequestId = null;
+        access.disabled = false;
+        access.setAttribute("aria-disabled", "false");
+        access.classList.remove("is-saving");
+        setAccessStatus(host, "Could not save while Clay is disconnected. Try again.", true);
+        focusAccess(host);
+      }
+    });
+  }
+  toolbar.appendChild(menu);
+  host.actionsButton = actionsButton;
+  host.menu = menu;
+  actionsButton.addEventListener("click", function () { toggleActionsMenu(host); });
+  actionsButton.addEventListener("keydown", function (event) {
+    if (event.key !== "ArrowDown") return;
+    event.preventDefault();
+    openActionsMenu(host, true);
+  });
+  menu.addEventListener("keydown", function (event) {
+    var items = menuItems(host);
+    if (!items.length) return;
+    var current = Array.prototype.indexOf.call(items, event.target);
+    var next = current;
+    if (event.key === "ArrowDown") next = (current + 1) % items.length;
+    else if (event.key === "ArrowUp") next = (current + items.length - 1) % items.length;
+    else if (event.key === "Home") next = 0;
+    else if (event.key === "End") next = items.length - 1;
+    else if (event.key === "Escape") {
+      event.preventDefault();
+      event.stopPropagation();
+      closeActionsMenu(host, true);
+      return;
+    } else return;
+    event.preventDefault();
+    items[next].focus({ preventScroll: true });
+  });
+  chromeRoot.appendChild(toolbar);
+  refreshIcons();
+  return toolbar;
+}
+
+export function disposeCapsuleHostControls(toolId) {
+  var host = hosts[toolId];
+  if (!host) return;
+  closeActionsMenu(host, false);
+  if (host.inspector) {
+    host.inspector.remove();
+    host.inspector = null;
+    setRuntimeVisible(host, true);
+  }
+  delete hosts[toolId];
+}
+
+export function handleToolSourceState(msg) {
+  var host = hosts[msg.toolId];
+  if (!host || !host.inspector || host.sourceRequestId !== msg.requestId) return;
+  if (!msg.ok) {
+    host.loading.textContent = msg.error || "Could not read Capsule source.";
+    host.inspector.classList.remove("is-loading");
+    return;
+  }
+  renderSource(host, msg);
+}
+
+export function handleToolMateAccessState(msg) {
+  var host = hosts[msg.toolId];
+  if (!host || !host.access) return;
+  if (!msg.ok) {
+    if (!host.accessRequestId || msg.requestId !== host.accessRequestId) return;
+    host.accessRequestId = null;
+    host.access.disabled = false;
+    host.access.setAttribute("aria-disabled", "false");
+    host.access.classList.remove("is-saving");
+    setAccessStatus(host, msg.error || "Could not update Mate editing permission.", true);
+    focusAccess(host);
+    return;
+  }
+  if (host.accessRequestId && msg.requestId && msg.requestId !== host.accessRequestId) return;
+  syncAccess(host, msg.metadata);
+  focusAccess(host);
+}

package/lib/public/modules/home-chat-identity.js

@@ -0,0 +1,35 @@
+// home-chat-identity.js - Stable speaker identity for ordinary Home conversations.
+import { mateAvatarUrl } from './avatar.js';
+import { createAssistantBubble, createUserBubble } from './chat-bubble-renderer.js';
+
+export function createHomeOrdinaryBubble(message, mate, mateName, time) {
+  var isUser = message && message.role === "user";
+  var name = isUser ? "You" : (mateName || "Mate");
+  var row = isUser ? createUserBubble({
+    text: message.text || "",
+  }) : createAssistantBubble({
+    name: name,
+    avatarUrl: mateAvatarUrl(mate, 34),
+    time: time || "",
+  });
+  row.classList.add("home-chat-message", "home-chat-ordinary-message", isUser ? "home-chat-ordinary-user" : "home-chat-ordinary-mate");
+  row.setAttribute("role", "article");
+  row.setAttribute("aria-label", "Message from " + name);
+  return row;
+}
+
+export function createHomeOrdinaryTyping(mate, mateName) {
+  var row = createHomeOrdinaryBubble({ role: "assistant", text: "" }, mate, mateName, "");
+  row.classList.add("home-chat-ordinary-typing");
+  var content = row.querySelector(".md-content");
+  if (!content) return row;
+  content.className = "home-chat-typing";
+  content.setAttribute("role", "status");
+  content.setAttribute("aria-label", (mateName || "Mate") + " is responding");
+  for (var i = 0; i < 3; i++) {
+    var dot = document.createElement("span");
+    dot.setAttribute("aria-hidden", "true");
+    content.appendChild(dot);
+  }
+  return row;
+}