clay-server 4.0.0-beta.8 → 4.0.0

package/lib/public/modules/home-tool-frame.js

@@ -0,0 +1,182 @@
+// home-tool-frame.js - host side of the sandboxed rich Display frame.
+//
+// A rich element is additive Display: it renders in an iframe on a separate
+// anonymous origin with sandbox="allow-scripts" and a frame CSP that allows
+// no network at all. Its only channel is postMessage, and the only thing it
+// can request is an act, which the host routes through the exact callback the
+// floor buttons use. The floor never depends on the frame: if the frame fails
+// to load or go ready, the host falls back to the floor automatically.
+
+import { getWs } from './ws-ref.js';
+
+var READY_TIMEOUT_MS = 6000;
+var MAX_ACTION_LENGTH = 64;
+var MAX_FRAME_HEIGHT = 4096;
+
+var frames = Object.create(null);
+
+// One listener for every frame. Messages are matched to a frame by the
+// window they came from, never by origin text: a sandboxed frame without
+// allow-same-origin reports the opaque origin "null", so identity comes from
+// the contentWindow reference the host itself created.
+var listenerAttached = false;
+
+function ensureListener() {
+  if (listenerAttached) return;
+  listenerAttached = true;
+  window.addEventListener("message", function (event) {
+    var toolIds = Object.keys(frames);
+    var entry = null;
+    for (var i = 0; i < toolIds.length; i++) {
+      var candidate = frames[toolIds[i]];
+      if (candidate.iframe && candidate.iframe.contentWindow === event.source) {
+        entry = candidate;
+        break;
+      }
+    }
+    if (!entry) return;
+    var data = event.data;
+    if (!data || data.clayCapsuleFrame !== 1 || typeof data.type !== "string") return;
+    if (data.type === "ready") {
+      markReady(entry);
+      return;
+    }
+    if (data.type === "size") {
+      resizeFrame(entry, data.height);
+      return;
+    }
+    if (data.type === "act") {
+      // The frame asks; the host decides. Bounded validation here, then the
+      // same pipeline as a floor button click. Nothing else is accepted.
+      if (typeof data.actionId !== "string" || !data.actionId || data.actionId.length > MAX_ACTION_LENGTH) return;
+      if (!/^[A-Za-z][A-Za-z0-9_-]*$/.test(data.actionId)) return;
+      var args = data.args && typeof data.args === "object" && !Array.isArray(data.args) ? data.args : {};
+      entry.onAct(data.actionId, args);
+    }
+  });
+}
+
+// The separate-origin frame cannot resize its own iframe. It reports the
+// content height after its layout changes and the host applies that bounded
+// value, allowing wrapping content to grow naturally as the capsule narrows.
+function resizeFrame(entry, height) {
+  if (!Number.isFinite(height) || height <= 0 || height > MAX_FRAME_HEIGHT) return;
+  if (!entry.iframe) return;
+  entry.iframe.style.height = Math.ceil(height) + "px";
+}
+
+function markReady(entry) {
+  if (entry.ready) return;
+  entry.ready = true;
+  if (entry.readyTimer) {
+    clearTimeout(entry.readyTimer);
+    entry.readyTimer = null;
+  }
+  for (var i = 0; i < entry.queue.length; i++) {
+    postToFrame(entry, entry.queue[i]);
+  }
+  entry.queue.length = 0;
+  if (entry.onReady) entry.onReady();
+}
+
+function postToFrame(entry, payload) {
+  if (!entry.iframe || !entry.iframe.contentWindow) return;
+  // targetOrigin must be "*": a sandboxed frame without allow-same-origin has
+  // an opaque origin no origin string can name. Delivery is still exact,
+  // because the message goes to the one contentWindow this host created, and
+  // the payload is only the projection already chosen for this element.
+  entry.iframe.contentWindow.postMessage(payload, "*");
+}
+
+function failFrame(toolId, message) {
+  var entry = frames[toolId];
+  if (!entry) return;
+  disposeFrame(toolId);
+  if (entry.onUnavailable) entry.onUnavailable(message);
+}
+
+// Mounts the rich element for one Capsule. The frame URL is requested over
+// the authenticated WebSocket and answered by handleToolFrameUrlState below.
+export function mountRichDisplay(options) {
+  var toolId = options.toolId;
+  disposeFrame(toolId);
+  ensureListener();
+  frames[toolId] = {
+    toolId: toolId,
+    container: options.container,
+    onAct: options.onAct,
+    onReady: options.onReady || null,
+    onUnavailable: options.onUnavailable || null,
+    iframe: null,
+    ready: false,
+    queue: [],
+    readyTimer: null,
+  };
+  var ws = getWs();
+  if (!ws || ws.readyState !== 1) {
+    failFrame(toolId, "The connection to the server is not available.");
+    return;
+  }
+  ws.send(JSON.stringify({ type: "tool_frame_url", toolId: toolId }));
+}
+
+export function handleToolFrameUrlState(msg) {
+  if (!msg || !msg.toolId) return;
+  var entry = frames[msg.toolId];
+  if (!entry || entry.iframe) return;
+  if (msg.ok === false || !msg.frame || !msg.frame.port) {
+    failFrame(msg.toolId, msg.error || "The rich Display is unavailable.");
+    return;
+  }
+  var scheme = msg.frame.secure ? "https" : "http";
+  var url = scheme + "://" + window.location.hostname + ":" + msg.frame.port + msg.frame.path;
+  var iframe = document.createElement("iframe");
+  iframe.className = "home-tool-frame";
+  // allow-scripts only. No allow-same-origin, so the frame's origin is opaque
+  // and nothing of the host origin (DOM, cookies, storage) is reachable.
+  iframe.setAttribute("sandbox", "allow-scripts");
+  iframe.setAttribute("title", "Capsule rich display");
+  // Start collapsed so the frame can measure its content rather than merely
+  // echoing a fixed viewport height back to the host.
+  iframe.style.height = "1px";
+  iframe.src = url;
+  entry.iframe = iframe;
+  entry.container.appendChild(iframe);
+  entry.readyTimer = setTimeout(function () {
+    failFrame(msg.toolId, "The rich Display did not become ready.");
+  }, READY_TIMEOUT_MS);
+}
+
+export function pushFrameState(toolId, state) {
+  var entry = frames[toolId];
+  if (!entry) return;
+  var payload = { clayCapsuleFrame: 1, type: "state", state: state || {} };
+  if (!entry.ready) {
+    entry.queue.push(payload);
+    return;
+  }
+  postToFrame(entry, payload);
+}
+
+export function pushFrameEvent(toolId, event) {
+  var entry = frames[toolId];
+  if (!entry || !event) return;
+  var payload = { clayCapsuleFrame: 1, type: "event", event: event };
+  if (!entry.ready) {
+    entry.queue.push(payload);
+    return;
+  }
+  postToFrame(entry, payload);
+}
+
+export function hasFrame(toolId) {
+  return !!frames[toolId];
+}
+
+export function disposeFrame(toolId) {
+  var entry = frames[toolId];
+  if (!entry) return;
+  if (entry.readyTimer) clearTimeout(entry.readyTimer);
+  if (entry.iframe && entry.iframe.parentNode) entry.iframe.parentNode.removeChild(entry.iframe);
+  delete frames[toolId];
+}

package/lib/public/modules/home-tools.js

@@ -9,6 +9,8 @@ import { showToast } from './utils.js';
 import { createToolLlmStatus, initialToolLlmAlias } from './tool-llm-status.js';
 import { isToolModelAlias, shouldInjectToolLlmStatus } from './tool-ui-tree.js';
 import { mountCapsuleHostControls, disposeCapsuleHostControls, handleToolSourceState as applyToolSourceState, handleToolMateAccessState as applyToolMateAccessState } from './home-capsule-source.js';
+import { mountRichDisplay, pushFrameState, pushFrameEvent, disposeFrame } from './home-tool-frame.js';
+import { openHomeConversation } from './home-mate-chat.js';
 
 var definitions = Object.create(null);
 var runtimes = Object.create(null);
@@ -16,6 +18,8 @@ var registeredIds = Object.create(null);
 var errorSurfaces = Object.create(null);
 var displays = Object.create(null);
 var llmStatuses = Object.create(null);
+var serverStates = Object.create(null);
+var serverEventSeqs = Object.create(null);
 
 export function requestTools() {
   var ws = getWs();
@@ -29,6 +33,7 @@ function stopRuntime(toolId) {
   if (runtimes[toolId]) runtimes[toolId].stop();
   if (llmStatuses[toolId]) llmStatuses[toolId].dispose();
   if (displays[toolId]) disposeToolUi(displays[toolId]);
+  disposeFrame(toolId);
   delete runtimes[toolId];
   delete errorSurfaces[toolId];
   delete displays[toolId];
@@ -52,6 +57,133 @@ function renderRuntimeState(toolId, state) {
   }, display);
 }
 
+// Server-runtime Capsules hold their Logic on the server, so the human's click
+// travels the same act pipeline a Mate's clay_tool_act call travels. The
+// browser only renders the state Logic hands back.
+function sendServerControl(toolId, request) {
+  var ws = getWs();
+  if (!ws || ws.readyState !== 1) {
+    showRuntimeError(toolId, "The connection to the server is not available.");
+    return;
+  }
+  ws.send(JSON.stringify({
+    type: "tool_server_control",
+    toolId: toolId,
+    kind: request.kind,
+    actionId: request.actionId || null,
+    args: request.args || {},
+  }));
+}
+
+function renderServerState(toolId, state) {
+  var definition = definitions[toolId];
+  var display = displays[toolId];
+  if (!definition || !display) return;
+  renderToolUi(toolId, definition.uiTree, state || {}, function (actionName, args) {
+    sendServerControl(toolId, { kind: "act", actionId: actionName, args: args });
+  }, display);
+}
+
+// Applies a server-runtime Capsule state if it is not older than what is
+// already rendered. States carry the Logic's monotonic eventSeq, so a slow
+// snapshot response can never roll the Display back behind a pushed event.
+function applyServerState(toolId, state) {
+  state = state || {};
+  // A successful read or event clears any stale refusal either way.
+  var surface = errorSurfaces[toolId];
+  if (surface) surface.classList.add("hidden");
+  var seq = Number.isInteger(state.eventSeq) ? state.eventSeq : null;
+  var lastSeq = serverEventSeqs[toolId];
+  if (seq !== null && lastSeq !== undefined && seq <= lastSeq) return false;
+  if (seq !== null) serverEventSeqs[toolId] = seq;
+  serverStates[toolId] = state;
+  renderServerState(toolId, state);
+  return true;
+}
+
+// Brief host-side attribution when the other seat acts: the Display flashes
+// and the dock icon pulses, so a watching human can tell the change was the
+// Mate operating the same interface. The meaning itself stays in state; this
+// is only the host pointing at it.
+function flashRemoteAct(toolId) {
+  pulseDockTool(toolId);
+  var display = displays[toolId];
+  if (!display) return;
+  display.classList.remove("capsule-remote-act");
+  void display.offsetWidth;
+  display.classList.add("capsule-remote-act");
+  setTimeout(function () { display.classList.remove("capsule-remote-act"); }, 900);
+}
+
+// A Capsule game session push. An explicit game start ("start") navigates the
+// home board into the Mate's game session so starting a game visibly opens
+// the table; ordinary turn engagements never yank the user away from the board.
+export function handleCapsuleGameSession(msg) {
+  if (!msg || msg.kind !== "start" || !msg.mateId || !msg.sessionId) return;
+  openHomeConversation(msg.mateId, msg.sessionId);
+}
+
+export function handleToolServerState(msg) {
+  if (!msg || !msg.toolId) return;
+  if (msg.ok === false) {
+    showRuntimeError(msg.toolId, msg.error || "The Capsule action failed.");
+    return;
+  }
+  if (applyServerState(msg.toolId, msg.state)) pushFrameState(msg.toolId, msg.state || {});
+}
+
+// The push half of the shared-interface effect: Logic changed, no matter whose
+// act changed it, so every open Display for this user re-renders. Events are
+// applied one by one in seq order, so consecutive acts replay as steps rather
+// than collapsing into a final state. The rich frame receives the full causal
+// event so it can animate and attribute the transition.
+export function handleToolServerEvent(msg) {
+  if (!msg || !msg.toolId || !msg.event || !msg.event.next) return;
+  if (!applyServerState(msg.toolId, msg.event.next)) return;
+  pushFrameEvent(msg.toolId, msg.event);
+  if (msg.event.actor && msg.event.actor !== "user") flashRemoteAct(msg.toolId);
+}
+
+// Mounts the additive rich element above the floor. The floor is rendered
+// first and stays a click away behind the toggle, and any frame failure
+// (no URL, load error, never ready) falls back to the floor silently: the
+// rich element may enrich the Capsule, never gate it.
+function mountServerFrame(toolId, root, floorEl) {
+  var frameWrap = document.createElement("div");
+  frameWrap.className = "home-tool-frame-wrap hidden";
+  frameWrap.dataset.capsuleRuntimeSurface = "true";
+  var toggle = document.createElement("button");
+  toggle.type = "button";
+  toggle.className = "home-tool-frame-toggle hidden";
+  toggle.dataset.capsuleRuntimeSurface = "true";
+  var showingFrame = false;
+  function setView(rich) {
+    showingFrame = rich;
+    frameWrap.classList.toggle("hidden", !rich);
+    floorEl.classList.toggle("hidden", rich);
+    toggle.textContent = rich ? "Standard controls" : "Rich view";
+  }
+  toggle.addEventListener("click", function () { setView(!showingFrame); });
+  root.appendChild(frameWrap);
+  root.appendChild(toggle);
+  mountRichDisplay({
+    toolId: toolId,
+    container: frameWrap,
+    onAct: function (actionId, args) {
+      sendServerControl(toolId, { kind: "act", actionId: actionId, args: args });
+    },
+    onReady: function () {
+      toggle.classList.remove("hidden");
+      setView(true);
+    },
+    onUnavailable: function () {
+      toggle.classList.add("hidden");
+      setView(false);
+    },
+  });
+  pushFrameState(toolId, serverStates[toolId] || {});
+}
+
 function ensureRuntime(toolId) {
   if (runtimes[toolId]) return runtimes[toolId];
   var definition = definitions[toolId];
@@ -102,8 +234,11 @@ function mountTool(toolId, contentEl, chromeEl) {
     var serverDisplay = document.createElement("div");
     serverDisplay.className = "home-tool-display";
     serverDisplay.dataset.capsuleRuntimeSurface = "true";
+    if (definition.hasRichDisplay) mountServerFrame(toolId, root, serverDisplay);
     root.appendChild(serverDisplay);
-    renderToolUi(toolId, definition.uiTree, {}, function () {}, serverDisplay);
+    displays[toolId] = serverDisplay;
+    renderServerState(toolId, serverStates[toolId] || {});
+    sendServerControl(toolId, { kind: "snapshot" });
     return;
   }
   var runtime = ensureRuntime(toolId);
@@ -189,6 +324,8 @@ export function handleToolMateAccessState(msg) {
 export function handleToolRemoved(msg) {
   stopRuntime(msg.toolId);
   delete definitions[msg.toolId];
+  delete serverStates[msg.toolId];
+  delete serverEventSeqs[msg.toolId];
   delete registeredIds[msg.toolId];
   unregisterDockTool(msg.toolId);
   syncStore();

package/lib/public/modules/input.js

@@ -3,11 +3,13 @@ import { setRewindMode, isRewindMode } from './rewind.js';
 import { renderPicker as renderContextPicker } from './context-sources.js';
 import { checkForMention, showMentionMenu, hideMentionMenu, isMentionMenuVisible, mentionMenuKeydown, setMentionAtIdx, parseMentionFromInput, clearMentionState, stickyReapplyMention, sendMention, sendUserMention, renderMentionUser, renderUserMention, removeMentionChip } from './mention.js';
 import { store } from './store.js';
+import { sendAcknowledgedMessage } from './message-delivery.js';
 import { mateAvatarUrl } from './avatar.js';
 import { tuiIsActive, tuiSubmitText } from './session-tui-view.js';
 import { VENDOR_AVATARS, VENDOR_NAMES } from './app-rendering.js';
 import { showToast } from './utils.js';
 import { isShellCommandMode, submitShellCommand } from './shell-command.js';
+import { showPasteModal } from './paste-modal.js';
 
 var ctx;
 
@@ -315,7 +317,11 @@ export function sendMessage() {
   // Include selected vendor for session binding (server uses on first message)
   var _selVendor = store.get("currentVendor") || null;
   if (_selVendor) payload.vendor = _selVendor;
-  ctx.ws.send(JSON.stringify(payload));
+  var clientMessageId = sendAcknowledgedMessage(payload);
+  var optimisticUsers = ctx.messagesEl.querySelectorAll(".msg-user");
+  if (optimisticUsers.length > 0) {
+    optimisticUsers[optimisticUsers.length - 1].dataset.clientMessageId = clientMessageId;
+  }
 
   // A turn blocked on an unanswered tool-permission request looks like a
   // black hole: the new message queues silently while the dots keep
@@ -474,6 +480,23 @@ function removePendingPaste(idx) {
   renderInputPreviews();
 }
 
+function pastePreview(text) {
+  var preview = text.substring(0, 50).replace(/\n/g, " ");
+  if (text.length > 50) preview += "...";
+  return preview;
+}
+
+function editPendingPaste(idx) {
+  showPasteModal(pendingPastes[idx].text, function (text) {
+    if (!text) {
+      removePendingPaste(idx);
+      return;
+    }
+    pendingPastes[idx] = { text: text, preview: pastePreview(text) };
+    renderInputPreviews();
+  });
+}
+
 function removePendingFile(idx) {
   pendingFiles.splice(idx, 1);
   renderInputPreviews();
@@ -557,6 +580,10 @@ function renderInputPreviews() {
     (function (idx) {
       var chip = document.createElement("div");
       chip.className = "pasted-chip";
+      var openBtn = document.createElement("button");
+      openBtn.type = "button";
+      openBtn.className = "pasted-chip-open";
+      openBtn.setAttribute("aria-label", "Edit pasted content");
       var preview = document.createElement("span");
       preview.className = "pasted-chip-preview";
       preview.textContent = pendingPastes[idx].preview;
@@ -564,14 +591,20 @@ function renderInputPreviews() {
       label.className = "pasted-chip-label";
       label.textContent = "PASTED";
       var removeBtn = document.createElement("button");
+      removeBtn.type = "button";
       removeBtn.className = "pasted-chip-remove";
+      removeBtn.setAttribute("aria-label", "Remove pasted content");
       removeBtn.innerHTML = iconHtml("x");
       removeBtn.addEventListener("click", function (e) {
         e.stopPropagation();
         removePendingPaste(idx);
       });
-      chip.appendChild(preview);
-      chip.appendChild(label);
+      openBtn.addEventListener("click", function () {
+        editPendingPaste(idx);
+      });
+      openBtn.appendChild(preview);
+      openBtn.appendChild(label);
+      chip.appendChild(openBtn);
       chip.appendChild(removeBtn);
       bar.appendChild(chip);
     })(j);
@@ -1026,7 +1059,7 @@ export function initInput(_ctx) {
   document.addEventListener("paste", function (e) {
     // Don't intercept paste when typing in modals or other non-chat inputs
     var target = e.target;
-    if (target && target.closest && target.closest(".sticky-note, #notes-archive, #ralph-wizard, .confirm-modal, .scheduler-detail, #debate-modal, .us-modal")) return;
+    if (target && target.closest && target.closest(".sticky-note, #notes-archive, #ralph-wizard, .confirm-modal, #paste-modal, .scheduler-detail, #debate-modal, .us-modal")) return;
 
     var cd = e.clipboardData;
     if (!cd) return;
@@ -1080,9 +1113,7 @@ export function initInput(_ctx) {
       var pastedText = cd.getData("text/plain");
       if (pastedText && pastedText.length >= 500) {
         e.preventDefault();
-        var preview = pastedText.substring(0, 50).replace(/\n/g, " ");
-        if (pastedText.length > 50) preview += "...";
-        pendingPastes.push({ text: pastedText, preview: preview });
+        pendingPastes.push({ text: pastedText, preview: pastePreview(pastedText) });
         renderInputPreviews();
         found = true;
       }

package/lib/public/modules/markdown.js

@@ -2,6 +2,7 @@ import { copyToClipboard, escapeHtml } from './utils.js';
 import { refreshIcons } from './icons.js';
 import { getMermaidThemeVars } from './theme.js';
 import { store } from './store.js';
+import { enhanceClayLogLinks } from './clay-log-links.js';
 
 // Initialize markdown parser
 marked.use({ gfm: true, breaks: false });
@@ -89,6 +90,7 @@ export function enhanceClaySessionLinks(root) {
     fragment.appendChild(document.createTextNode(text.slice(offset)));
     nodes[i].parentNode.replaceChild(fragment, nodes[i]);
   }
+  enhanceClayLogLinks(root);
 }
 
 /**

package/lib/public/modules/mate-sidebar.js

@@ -117,14 +117,6 @@ export function initMateSidebar(wsGetter) {
       if (origBtn) origBtn.click();
     });
   }
-  var mateSchedulerBtn = document.getElementById("mate-scheduler-btn");
-  if (mateSchedulerBtn) {
-    mateSchedulerBtn.addEventListener("click", function () {
-      hideKnowledge();
-      var origBtn = document.getElementById("scheduler-btn");
-      if (origBtn) origBtn.click();
-    });
-  }
 }
 
 export function showMateSidebar(mateId, mateData) {

package/lib/public/modules/message-delivery.js

@@ -0,0 +1,97 @@
+// Reliable delivery for ordinary project chat messages within a page lifetime.
+
+import { store } from './store.js';
+import { getWs } from './ws-ref.js';
+
+var ACK_TIMEOUT_MS = 5000;
+var ackTimers = {};
+
+function createClientMessageId() {
+  if (window.crypto && typeof window.crypto.randomUUID === "function") {
+    return "cm-" + window.crypto.randomUUID();
+  }
+  return "cm-" + Date.now().toString(36) + "-" + Math.random().toString(36).slice(2);
+}
+
+function pendingMessages() {
+  return store.get('pendingOutboundMessages') || [];
+}
+
+function replacePending(messages) {
+  store.set({ pendingOutboundMessages: messages });
+}
+
+function clearAckTimer(clientMessageId) {
+  if (!ackTimers[clientMessageId]) return;
+  clearTimeout(ackTimers[clientMessageId]);
+  delete ackTimers[clientMessageId];
+}
+
+function isPending(clientMessageId) {
+  var pending = pendingMessages();
+  for (var i = 0; i < pending.length; i++) {
+    if (pending[i].payload.clientMessageId === clientMessageId) return true;
+  }
+  return false;
+}
+
+function armAckTimer(clientMessageId, socket) {
+  clearAckTimer(clientMessageId);
+  ackTimers[clientMessageId] = setTimeout(function () {
+    delete ackTimers[clientMessageId];
+    if (!isPending(clientMessageId) || getWs() !== socket) return;
+    window.dispatchEvent(new CustomEvent("clay-message-delivery-timeout", {
+      detail: { socket: socket, clientMessageId: clientMessageId },
+    }));
+  }, ACK_TIMEOUT_MS);
+}
+
+function transmit(entry) {
+  var socket = getWs();
+  if (!socket || socket.readyState !== 1) return false;
+  try {
+    socket.send(JSON.stringify(entry.payload));
+    armAckTimer(entry.payload.clientMessageId, socket);
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+
+export function sendAcknowledgedMessage(payload) {
+  var nextPayload = Object.assign({}, payload, { clientMessageId: createClientMessageId() });
+  var entry = {
+    projectSlug: store.get('currentSlug'),
+    sessionId: store.get('activeSessionId'),
+    payload: nextPayload,
+  };
+  replacePending(pendingMessages().concat([entry]));
+  if (!transmit(entry)) {
+    window.dispatchEvent(new CustomEvent("clay-message-delivery-timeout", {
+      detail: { socket: getWs(), clientMessageId: nextPayload.clientMessageId },
+    }));
+  }
+  return nextPayload.clientMessageId;
+}
+
+export function acknowledgeMessage(clientMessageId) {
+  if (typeof clientMessageId !== "string") return false;
+  var pending = pendingMessages();
+  var next = pending.filter(function (entry) {
+    return entry.payload.clientMessageId !== clientMessageId;
+  });
+  if (next.length === pending.length) return false;
+  clearAckTimer(clientMessageId);
+  replacePending(next);
+  return true;
+}
+
+export function replayPendingMessages(sessionId) {
+  var pending = pendingMessages();
+  var projectSlug = store.get('currentSlug');
+  for (var i = 0; i < pending.length; i++) {
+    if (pending[i].projectSlug === projectSlug && pending[i].sessionId === sessionId) {
+      transmit(pending[i]);
+    }
+  }
+}

package/lib/public/modules/paste-modal.js

@@ -0,0 +1,84 @@
+// paste-modal.js - Shared read-only and composer-editable pasted-content dialog.
+
+import { refreshIcons } from './icons.js';
+import { copyToClipboard } from './utils.js';
+
+var saveCallback = null;
+var previousFocus = null;
+var initialized = false;
+
+function getElements() {
+  return {
+    modal: document.getElementById("paste-modal"),
+    title: document.getElementById("paste-modal-title"),
+    body: document.getElementById("paste-modal-body"),
+    editor: document.getElementById("paste-modal-editor"),
+    footer: document.getElementById("paste-modal-footer"),
+    save: document.getElementById("paste-modal-save")
+  };
+}
+
+function currentText(elements) {
+  if (saveCallback && elements.editor) return elements.editor.value;
+  return elements.body ? elements.body.textContent : "";
+}
+
+export function closePasteModal() {
+  var elements = getElements();
+  if (!elements.modal || elements.modal.classList.contains("hidden")) return;
+  elements.modal.classList.add("hidden");
+  elements.modal.classList.remove("paste-modal-editing");
+  saveCallback = null;
+  if (previousFocus && previousFocus.isConnected && previousFocus.focus) previousFocus.focus();
+  previousFocus = null;
+}
+
+export function showPasteModal(text, onSave) {
+  var elements = getElements();
+  if (!elements.modal || !elements.body || !elements.editor) return;
+  var editing = typeof onSave === "function";
+  previousFocus = document.activeElement;
+  saveCallback = editing ? onSave : null;
+  elements.body.textContent = text || "";
+  elements.editor.value = text || "";
+  elements.title.textContent = editing ? "Edit pasted content" : "Pasted content";
+  elements.modal.classList.toggle("paste-modal-editing", editing);
+  elements.modal.classList.remove("hidden");
+  refreshIcons(elements.modal);
+  requestAnimationFrame(function () {
+    if (editing) {
+      elements.editor.focus();
+      elements.editor.setSelectionRange(elements.editor.value.length, elements.editor.value.length);
+    } else {
+      var close = elements.modal.querySelector(".paste-modal-close");
+      if (close) close.focus();
+    }
+  });
+}
+
+export function initPasteModal() {
+  if (initialized) return;
+  var elements = getElements();
+  if (!elements.modal) return;
+  initialized = true;
+
+  elements.modal.querySelector(".confirm-backdrop").addEventListener("click", closePasteModal);
+  elements.modal.querySelector(".paste-modal-close").addEventListener("click", closePasteModal);
+  elements.modal.querySelector(".paste-modal-cancel").addEventListener("click", closePasteModal);
+  elements.modal.querySelector(".paste-modal-copy").addEventListener("click", function () {
+    copyToClipboard(currentText(elements), "Copied to clipboard");
+  });
+  elements.save.addEventListener("click", function () {
+    if (!saveCallback) return;
+    var callback = saveCallback;
+    var value = elements.editor.value;
+    closePasteModal();
+    callback(value);
+  });
+  elements.modal.addEventListener("keydown", function (event) {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      closePasteModal();
+    }
+  });
+}