lavish-axi 0.1.80 → 0.1.82

package/README.md

@@ -197,18 +197,19 @@ pnpm link
   Unresolved local assets or export notices such as author-set CSP meta tags and redacted file URLs are surfaced in command or browser output.
   Use `--token` or `LAVISH_AXI_HTML_APP_TOKEN` for an optional bearer token when publishing a new page (a republish or `--unpublish` authorizes with the `update_key` instead and rejects `--token`); set `LAVISH_AXI_HTML_APP_API_URL` to override the ht-ml.app API base and point `share` at a backend you control (see [Self-hosting the share backend](docs/self-hosting-share.md) for the contract it must implement).
 - **Live reload** - Lavish watches the HTML artifact file by default and preserves review context across reloads: the artifact iframe scroll position, an open annotation card's unsent text, and answers to `data-lavish-question` controls (application-owned form state is left alone). Unsent annotation text also survives a full reload of the review page itself. While a queued layout-issue batch is outstanding, closely spaced saves coalesce so one batch of fixes costs one refresh. To also reload on sibling asset changes, add `data-lavish-live-reload-root` to the root element or `<meta name="lavish-live-reload" content="root">`.
-  If the element an unsent annotation was attached to is gone from the artifact for good, Lavish cannot reopen that card, so it writes your text into the conversation panel under **Unsent annotation** - selectable, never written over anything you have typed, and kept there across reloads; no note is ever dropped to make room for a newer one, and a note the browser refuses to store says so where it is shown.
-- **Feedback controls** - Native controls (radios, checkboxes, inputs, selects, buttons, labels, disclosure summaries, contenteditable) are interactive automatically, so they do not need `data-lavish-action`.
+  If the element an unsent annotation was attached to is gone from the artifact for good, Lavish cannot reopen that card, and if the artifact replaces a queued note while you are editing it, the replacement is kept as the artifact sent it. Either way, Lavish writes your edited text into the conversation panel under **Unsent annotation** - selectable, never written over anything you have typed, and kept there across reloads; no note is ever dropped to make room for a newer one, and a note the browser refuses to store says so where it is shown.
+- **Feedback controls** - Native controls (radios, checkboxes, inputs, selects, buttons, labels, disclosure summaries, contenteditable) and custom widgets with an interactive ARIA role (`button`, `checkbox`, `combobox`, `menuitem`, `menuitemcheckbox`, `menuitemradio`, `option`, `radio`, `switch`, `tab`, `treeitem`) are interactive automatically, so they do not need `data-lavish-action`. A link (`<a href>`) stays annotatable when it carries one of these roles or sits inside such a widget.
   For reversible choices, let option clicks update local state, then queue exactly one final answer from a per-question submit or Queue answer button with `window.lavish.queuePrompt()`.
   If someone may open a decision artifact as a standalone HTML file, `lavish-axi playbook input` provides an optional Copy all answers control they can use to paste their form answers back into chat.
   Mark only custom (non-native) clickable elements with `data-lavish-action` so Lavish does not annotate them, and use `data-lavish-question` or `queueKey` when pre-send updates for the same question should replace each other.
-  Everything you send is part of the conversation: a note on an element, a text selection, a table cell, a diagram node, a whiteboard, a layout-issue batch, or a composer message each becomes a bubble on your side of the Conversation panel, with an anchor line naming what it was attached to (the element tag, text selection, table cell, diagram node, whiteboard, or layout issues), a quoted excerpt, and, when available, the selector on hover. A note you have queued but not sent sits at the end of the conversation as a dashed bubble labelled **Queued** with a remove control; while its batch is in flight it reads **Sending**, and once the server accepts it, it settles in place as a sent bubble in every tab of the session. The panel keeps the newest stored transcript up to 5 MiB; older bubbles drop from view, but an accepted note still settles and is not sent twice. Agent replies render a small Markdown subset - paragraphs, line breaks, headings as bold lead lines, bullet and numbered lists, fenced and inline code, bold, italic, and http(s) links - while tables, images, and raw HTML stay as the text the agent wrote; your own messages keep their line breaks and are never parsed.
+  Everything you send is part of the conversation: a note on an element, a text selection, a table cell, a diagram node, a whiteboard, a layout-issue batch, or a composer message each becomes a bubble on your side of the Conversation panel, with an anchor line naming what it was attached to (the element tag, text selection, table cell, diagram node, whiteboard, or layout issues), a quoted excerpt, and, when available, the selector on hover. A note you have queued but not sent sits at the end of the conversation as a dashed bubble labelled **Queued** with edit and remove controls. Clicking the bubble or its edit control opens its words for editing in place and scrolls the artifact to the element it points at; clicking that element again in annotate mode opens the same note rather than a fresh card. Saving a note with no words and no images removes it, and **Send** delivers an open edit as typed. While its batch is in flight it reads **Sending** and can no longer be edited, and once the server accepts it, it settles in place as a sent bubble in every tab of the session. The panel keeps the newest stored transcript up to 5 MiB; older bubbles drop from view, but an accepted note still settles and is not sent twice. Agent replies render a small Markdown subset - paragraphs, line breaks, headings as bold lead lines, bullet and numbered lists, fenced and inline code, bold, italic, and http(s) links - while tables, images, and raw HTML stay as the text the agent wrote; your own messages keep their line breaks and are never parsed.
   On wider screens, the conversation and the queued notes share one scrollable Conversation panel above a sticky composer, so long feedback queues do not push the text box or send controls off screen.
   The browser chrome keeps editing actions in the overflow menu (copy path, reload artifact, copy DOM snapshot, export standalone HTML, publish link, end session), while the composer exposes **Send & End** beside **Send to Agent** to submit queued prompts and user-ended attribution together. Once **Send & End** starts, Lavish pauses new feedback, waits up to 5 seconds for feedback preparation already underway, keeps any open annotation draft intact until delivery succeeds, then holds that exact terminal batch. A completed reservation survives a page reload, including when its prompts were already delivered and only the pending end remains; incomplete preparation is not restored. If preparation times out, Lavish keeps the review open and its existing queue editable with a visible error. A transient delivery failure permits only retrying the same terminal batch through **Send & End** until it succeeds. If a snapshot makes the request too large (HTTP 413), Lavish retries that exact batch once without the optional snapshot. An actionable attachment rejection (HTTP 400), recoverable layout-selection conflict (HTTP 409), or unrecoverable 413 instead cancels the terminal reservation without ending the session, keeps the prompts queued, and restores editing, removal, **Send to Agent**, **Send & End**, and **End session** so the reviewer can revise or remove stale feedback before submitting again.
   Composer feedback is visibly queued before the text box clears and stays queued until acknowledged. Send waits up to 5 seconds for the artifact's DOM snapshot, then delivers without that optional context if the frame no longer answers; a late snapshot cannot submit the batch twice. A failed or still-unacknowledged POST keeps the queue and shows persistent recovery guidance unless a transcript sync proves the server already accepted that feedback.
 - **Reviewing on a phone** - Below 860px wide, the artifact takes the whole screen above a **Conversation** dock, and the conversation opens as a bottom sheet over it: tap the dock, swipe it up, or press the chevron to raise it; tap the dimmed artifact, swipe the sheet down, press the chevron, or press Escape to lower it. The dock reports what matters while the sheet is down - how many prompts are queued, a reply that arrived while you were reading, or whether the agent is listening - and the sheet stays open across a reload of the review page. The sheet sizes itself to the visible viewport and respects safe-area insets; if the keyboard or attachments leave little room, conversation content yields or scrolls while the send actions remain pinned above the bottom edge. In landscape the sheet covers the top bar as well. Wider screens keep the side-by-side layout.
 - **Keyboard shortcuts** - In the chrome composer, Enter sends queued prompts and Shift+Enter inserts a newline.
   In the annotation card, Enter queues the annotation, Shift+Enter inserts a newline, and Ctrl+Enter (Cmd+Enter on macOS) queues it and sends all queued prompts immediately. Escape closes the card, same as Cancel, but only while it is empty (no text, no attachment); with unsent text or an attachment present, Escape does nothing rather than risk discarding it.
+  While editing a queued note, Enter saves it, Shift+Enter inserts a newline, and Escape discards the edit.
   Cmd+I or Ctrl+I toggles between annotate and explore mode from either the browser chrome or the artifact iframe, including while focus is in a textarea or control.
 - **Agent presence** - The browser shows when no agent is listening, keeps queued feedback for the next successful `lavish-axi poll` send even across reloads, and keeps human feedback actions available while the agent is working because the server queues them for the next poll. An agent reply concludes delivered work and returns presence to waiting (see the CLI Reference for reply and poll commands). A supervisor-owned process listener is shown as an external listener rather than an idle captain turn.
   In a Herdr-managed pane, set `LAVISH_AXI_HERDR_CHIME=1` to show a Herdr request notification and play its chime once an indefinite poll enters the waiting state. Immediate queued feedback and timed debug polls do not trigger a notification. The integration is off unless both `LAVISH_AXI_HERDR_CHIME` and Herdr's `HERDR_ENV` session marker equal `1`; leaving either unset or using any other value opts out. Notification delivery runs without blocking feedback: if Herdr is unavailable, rejects the notification, stalls, or fails, the poll continues unchanged.

package/dist/chrome-client.js

@@ -261,6 +261,12 @@ let terminalSubmission =
 /** @type {ReturnType<typeof setTimeout> | undefined} */
 let sendAcknowledgementTimer;
 let lastScroll = { x: 0, y: 0 };
+// The queued note open for editing in the panel, by prompt identity, and its unsaved words.
+let editingPromptId = "";
+let editingDraft = "";
+let editFocusPending = false;
+// The selector list last told to the artifact, so a render that changes nothing stays quiet.
+let postedQueuedAnchors = "[]";
 // In-iframe review context (an open annotation card's unsent text, Lavish-owned question
 // answers). The sandbox means the chrome cannot read it back after a reload, so the SDK reports
 // it as it changes and the chrome replays it once the new document is up. It is persisted per
@@ -486,6 +492,8 @@ function persistTerminalReservation(reserved) {
 
 const REMOVE_ICON_SVG =
   '<svg width="10" height="10" viewBox="0 0 10 10" fill="none" aria-hidden="true" focusable="false"><path d="M1 1L9 9M9 1L1 9" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>';
+const EDIT_ICON_SVG =
+  '<svg width="10" height="10" viewBox="0 0 10 10" fill="none" aria-hidden="true" focusable="false"><path d="M6.5 1.5L8.5 3.5L3.5 8.5H1.5V6.5L6.5 1.5Z" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round"/></svg>';
 const ANCHOR_EXCERPT_MAX = 120;
 const ANCHOR_SELECTOR_MAX = 512;
 const ANCHOR_LABEL_MAX = 40;
@@ -587,14 +595,23 @@ function userBubbleTextHtml(entry, text) {
 }
 
 // A queued note is the user bubble in its not-yet-sent state: dashed, labelled Queued (Sending
-// while its batch is in flight), and removable until then. It settles in place as a sent bubble
-// once the server's transcript carries it, so nothing moves between regions.
+// while its batch is in flight), and editable and removable until then. It settles in place as a
+// sent bubble once the server's transcript carries it, so nothing moves between regions.
 function queuedBubbleHtml(prompt, index) {
   const sending = isPromptSending(prompt);
+  if (!sending && editingPromptId && promptIdentity(prompt) === editingPromptId) {
+    return queuedEditorHtml(prompt, index);
+  }
   return (
-    '<div class="bubble user queued"><small>' +
+    '<div class="bubble user queued" data-index="' +
+    index +
+    '"><small>' +
     (sending ? "Sending\u2026" : "Queued") +
-    ' <button class="queued-remove" type="button" aria-label="Remove queued prompt" data-index="' +
+    ' <button class="queued-edit" type="button" aria-label="Edit queued prompt" data-index="' +
+    index +
+    '">' +
+    EDIT_ICON_SVG +
+    '</button><button class="queued-remove" type="button" aria-label="Remove queued prompt" data-index="' +
     index +
     '">' +
     REMOVE_ICON_SVG +
@@ -606,6 +623,25 @@ function queuedBubbleHtml(prompt, index) {
   );
 }
 
+// The same bubble while its words are being revised. The anchor and images stay as they were:
+// an edit changes what the note says, not what it points at.
+function queuedEditorHtml(prompt, index) {
+  return (
+    '<div class="bubble user queued editing" data-index="' +
+    index +
+    '"><small>Editing</small>' +
+    anchorHtml(promptAnchor(prompt)) +
+    '<textarea class="queued-edit-input" aria-label="Edit queued prompt" data-index="' +
+    index +
+    '">' +
+    escapeHtml(editingDraft) +
+    '</textarea><div class="queued-edit-actions"><button class="queued-edit-cancel" type="button">Cancel</button>' +
+    '<button class="queued-edit-save" type="button">Save</button></div>' +
+    bubbleAttachmentsHtml(prompt) +
+    "</div>"
+  );
+}
+
 // Whether a queued prompt is committed to a send that has not been answered yet: waiting for its
 // snapshot, queued behind another submission, in flight, or held by the terminal reservation.
 // Derived from the existing send bookkeeping rather than tracked separately, so no failure path
@@ -624,6 +660,23 @@ function isPromptSending(prompt) {
 }
 
 function render() {
+  const editing = editingPromptId ? queued.find((prompt) => promptIdentity(prompt) === editingPromptId) : null;
+  // A note that left the queue or started sending takes its editor with it.
+  if (editingPromptId && (!editing || !isPromptEditable(editing))) endQueuedEdit();
+  const keepEditFocus = editFocusPending || queuedLog.contains(document.activeElement);
+  // A re-render while the reviewer is typing keeps their caret and scroll; only a freshly opened
+  // edit starts at the end of its words.
+  const previousInput = /** @type {HTMLTextAreaElement | null} */ (queuedLog.querySelector(".queued-edit-input"));
+  const caret =
+    !editFocusPending && previousInput && previousInput === document.activeElement
+      ? {
+          start: previousInput.selectionStart,
+          end: previousInput.selectionEnd,
+          direction: previousInput.selectionDirection,
+          scrollTop: previousInput.scrollTop,
+        }
+      : null;
+  editFocusPending = false;
   queuedLog.innerHTML = queued.map((prompt, index) => queuedBubbleHtml(prompt, index)).join("");
 
   for (const button of queuedLog.querySelectorAll(".queued-remove")) {
@@ -632,6 +685,23 @@ function render() {
     removeButton.disabled = terminalSubmission !== null || isPromptSending(prompt);
     removeButton.addEventListener("click", (event) => removeQueuedPrompt(Number(removeButton.dataset.index), event));
   }
+  for (const button of queuedLog.querySelectorAll(".queued-edit")) {
+    const editButton = /** @type {HTMLButtonElement} */ (button);
+    editButton.disabled = !isPromptEditable(queued[Number(editButton.dataset.index)]);
+  }
+  if (editingPromptId && keepEditFocus) {
+    const input = /** @type {HTMLTextAreaElement | null} */ (queuedLog.querySelector(".queued-edit-input"));
+    if (input) {
+      input.focus();
+      if (caret) {
+        input.setSelectionRange?.(caret.start, caret.end, caret.direction);
+        input.scrollTop = caret.scrollTop;
+      } else {
+        input.setSelectionRange?.(input.value.length, input.value.length);
+      }
+    }
+  }
+  postQueuedAnchors();
   updateSendState();
   scrollPanelToBottom();
   renderSheetSummary();
@@ -1060,6 +1130,7 @@ function setReviewState(state) {
 }
 
 function hasUnsentDraft() {
+  if (editingPromptId) return true;
   return Boolean(lastReviewState && lastReviewState.card && String(lastReviewState.card.text || "").trim());
 }
 
@@ -1108,7 +1179,7 @@ function renderRetiredDraft(text, stored = true) {
   const el = document.createElement("div");
   el.className = "bubble note";
   el.innerHTML =
-    "<small>Unsent annotation</small><div>The element this note was attached to is no longer in the artifact, so Lavish could not reopen the card. Your text is kept here:</div>" +
+    "<small>Unsent annotation</small><div>The artifact removed or replaced what this note was attached to, so Lavish could not keep it open. Your text is kept here:</div>" +
     '<div class="note-draft">' +
     escapeHtml(text) +
     "</div>" +
@@ -1338,16 +1409,149 @@ function scrollElementIntoView(el) {
   el.scrollIntoView({ block: "nearest", inline: "nearest" });
 }
 
+function isPromptEditable(prompt) {
+  return Boolean(prompt) && !terminalSubmission && !isPromptSending(prompt);
+}
+
+function editQueuedPrompt(index, { reveal = true } = {}) {
+  const prompt = queued[index];
+  if (ended || !isPromptEditable(prompt)) return;
+  const id = promptIdentity(prompt);
+  if (!id || id === editingPromptId) return;
+  // Moving to another note keeps what was typed into the first, the way leaving a field does.
+  commitQueuedEdit();
+  editingPromptId = id;
+  editingDraft = String(prompt.prompt || "");
+  editFocusPending = true;
+  if (isMobileSheet()) setSheetOpen(true);
+  render();
+  if (reveal && prompt.selector) postToFrame({ type: "lavish:revealElement", selector: String(prompt.selector) });
+}
+
+function endQueuedEdit() {
+  editingPromptId = "";
+  editingDraft = "";
+}
+
+// Writes the open edit into its note without rendering. Returns whether the queue changed. A note
+// cleared of words and images is removed, as if its remove control had been used.
+function commitQueuedEdit() {
+  if (!editingPromptId) return false;
+  const index = queued.findIndex((prompt) => promptIdentity(prompt) === editingPromptId);
+  const text = editingDraft.trim();
+  endQueuedEdit();
+  const prompt = queued[index];
+  if (!isPromptEditable(prompt)) return false;
+  if (!text && !attachmentCount(prompt)) {
+    queued.splice(index, 1);
+    afterQueuedPromptRemoved();
+  } else {
+    // In place, not replaced: the send bookkeeping tracks notes by object identity.
+    prompt.prompt = text;
+    persistQueuedPrompts();
+  }
+  return true;
+}
+
+function saveQueuedEdit() {
+  commitQueuedEdit();
+  render();
+}
+
+function cancelQueuedEdit() {
+  endQueuedEdit();
+  render();
+}
+
+// A click on an element the artifact knows carries a queued note. The artifact names only the
+// selector, so the most a forged message can do is open one of the user's own notes for editing.
+function editQueuedAnchor(selector) {
+  if (!selector) return;
+  for (let index = queued.length - 1; index >= 0; index--) {
+    if (isElementAnchoredPrompt(queued[index]) && queuedAnchorSelectorsOf(queued[index]).includes(selector)) {
+      if (isPromptEditable(queued[index])) {
+        editQueuedPrompt(index, { reveal: false });
+        return;
+      }
+      break;
+    }
+  }
+  // The note is already on its way, or gone: the click still deserves the card it would have had.
+  postToFrame({ type: "lavish:annotateElement", selector });
+}
+
+// Notes that point at a whole element, cell, or diagram node, which a later click on that same
+// target can find again. A text selection's note is about the words, not the element around them.
+function isElementAnchoredPrompt(prompt) {
+  const kind = promptAnchor(prompt)?.kind;
+  return Boolean(prompt.selector) && (kind === "element" || kind === "cell" || kind === "node");
+}
+
+// A diagram node is one target however deep the click lands, so its note answers to the node's
+// own selector as well as the clicked element's. Other notes name only the exact element.
+function queuedAnchorSelectorsOf(prompt) {
+  const target = prompt.target && typeof prompt.target === "object" ? prompt.target : null;
+  const whole = target?.type === "mermaid-node" ? String(target.selector || "") : "";
+  return whole ? [String(prompt.selector), whole] : [String(prompt.selector)];
+}
+
+// Tells the artifact which element selectors carry a queued note. Only selectors cross into the
+// frame: the artifact is agent-authored, and the note text stays in the chrome.
+function postQueuedAnchors(force = false) {
+  const selectors = [
+    ...new Set(queued.filter((prompt) => isElementAnchoredPrompt(prompt)).flatMap(queuedAnchorSelectorsOf)),
+  ];
+  const signature = JSON.stringify(selectors);
+  if (!force && signature === postedQueuedAnchors) return;
+  postedQueuedAnchors = signature;
+  postToFrame({ type: "lavish:queuedAnchors", selectors });
+}
+
+queuedLog.addEventListener("click", (event) => {
+  const target = /** @type {Element | null} */ (event.target);
+  if (!target || typeof target.closest !== "function") return;
+  // The remove control owns its own click, and an editor's textarea is for typing.
+  if (target.closest(".queued-remove") || target.closest(".queued-edit-input")) return;
+  if (target.closest(".queued-edit-save")) return saveQueuedEdit();
+  if (target.closest(".queued-edit-cancel")) return cancelQueuedEdit();
+  const bubble = /** @type {HTMLElement | null} */ (target.closest(".queued-edit") || target.closest(".bubble.queued"));
+  if (bubble) editQueuedPrompt(Number(bubble.dataset.index));
+});
+queuedLog.addEventListener("input", (event) => {
+  const target = /** @type {HTMLTextAreaElement | null} */ (event.target);
+  if (target && typeof target.closest === "function" && target.closest(".queued-edit-input")) {
+    editingDraft = String(target.value || "");
+  }
+});
+queuedLog.addEventListener("keydown", (event) => {
+  const target = /** @type {Element | null} */ (event.target);
+  if (!target || typeof target.closest !== "function" || !target.closest(".queued-edit-input")) return;
+  // The annotation card's keys: Enter keeps the words, Shift+Enter breaks the line.
+  if (event.key === "Enter" && !event.shiftKey && !event.isComposing) {
+    event.preventDefault();
+    event.stopPropagation();
+    saveQueuedEdit();
+  } else if (event.key === "Escape" && !event.isComposing) {
+    event.preventDefault();
+    event.stopPropagation();
+    cancelQueuedEdit();
+  }
+});
+
 function removeQueuedPrompt(index, event) {
   if (event) event.stopPropagation();
   if (terminalSubmission || isPromptSending(queued[index])) return;
   queued.splice(index, 1);
+  afterQueuedPromptRemoved();
+  render();
+}
+
+function afterQueuedPromptRemoved() {
   persistQueuedPrompts();
   if (!queued.length) {
     clearSendAcknowledgementWarning();
     if (sendFailureOwner?.kind !== "preparation") clearPersistentSendFailure();
   }
-  render();
 }
 
 function promptQueueKey(prompt) {
@@ -1382,6 +1586,13 @@ function enqueuePrompt(rawPrompt, /** @type {FeedbackPreparation | null} */ prep
   if (queueKey) {
     const index = queued.findIndex((item) => promptQueueKey(item) === queueKey);
     if (index !== -1) {
+      // The replacement is the artifact's newer answer. Words typed against the old answer never
+      // move onto it; they are handed back to the reviewer instead.
+      if (editingPromptId && promptIdentity(queued[index]) === editingPromptId) {
+        const draft = editingDraft.trim();
+        endQueuedEdit();
+        if (draft !== String(queued[index].prompt || "").trim()) keepRetiredDraft(draft);
+      }
       queued[index] = prompt;
     } else {
       queued.push(prompt);
@@ -1660,6 +1871,8 @@ function sendQueued(endAfter) {
     return;
   }
   closeMenus();
+  // Send delivers what the panel shows, so an open edit is kept rather than sent stale.
+  if (commitQueuedEdit()) render();
 
   // A pending or failed chip holds back only the COMPOSER message (and an
   // explicit end, which would strand the chips) - queued annotation prompts
@@ -3965,6 +4178,7 @@ window.addEventListener("message", (event) => {
   if (msg.type === "lavish:endSession") endSession();
   if (msg.type === "lavish:revisions") applyRevisionMessage(msg);
   if (msg.type === "lavish:toggleAnnotationMode") toggleAnnotationMode();
+  if (msg.type === "lavish:editQueuedAnchor") editQueuedAnchor(String(msg.selector || ""));
 });
 
 // The sandboxed artifact iframe can't reach the loopback server (opaque origin),
@@ -4293,6 +4507,7 @@ frame.addEventListener("load", () => {
   // Replay the pre-reload scroll position so hot reloads don't jump the artifact to the top.
   postToFrame({ type: "lavish:restoreScroll", x: lastScroll.x, y: lastScroll.y });
   if (lastReviewState) postToFrame({ type: "lavish:restoreReviewState", state: lastReviewState });
+  postQueuedAnchors(true);
   if (overlayIndex !== null) {
     inlineWhiteboardChannels.delete(overlayIndex);
     postToFrame({ type: "lavish:suspendWhiteboard", diagramIndex: overlayIndex });

package/dist/chrome.css

@@ -1199,6 +1199,15 @@ body.lavish {
   align-items: center;
   gap: 8px;
 }
+.bubble.queued:not(.editing) {
+  cursor: pointer;
+}
+.bubble.queued.editing {
+  align-self: stretch;
+  max-width: 100%;
+  border-color: var(--accent);
+}
+.queued-edit,
 .queued-remove {
   display: flex;
   align-items: center;
@@ -1212,13 +1221,51 @@ body.lavish {
   color: var(--fg-muted);
   cursor: pointer;
 }
+.queued-edit:disabled,
 .queued-remove:disabled {
   opacity: 0.55;
   cursor: not-allowed;
 }
+.queued-edit svg,
 .queued-remove svg {
   display: block;
 }
+.queued-edit-input {
+  display: block;
+  width: 100%;
+  min-height: 64px;
+  resize: vertical;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--border);
+  background: var(--bg);
+  color: var(--fg);
+  padding: 8px;
+  font: inherit;
+  box-sizing: border-box;
+}
+.queued-edit-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 8px;
+}
+.queued-edit-actions button {
+  border: 0;
+  border-radius: var(--radius-md);
+  padding: 6px 10px;
+  font-family: inherit;
+  font-size: 12px;
+  font-weight: var(--w-bold);
+  cursor: pointer;
+}
+.queued-edit-cancel {
+  background: var(--border);
+  color: var(--fg);
+}
+.queued-edit-save {
+  background: var(--accent);
+  color: var(--accent-ink);
+}
 /* The anchor line names what a note is attached to, in the annotation card's words. */
 .anchor {
   display: flex;

package/dist/cli.mjs

@@ -224,7 +224,7 @@ var PLAYBOOKS = [
       "Show selected state separately from queued state so the user trusts what will be sent back."
     ],
     design_rules: [
-      "Native controls - radios, checkboxes, text inputs, selects, textareas, buttons, options, labels, disclosure summaries, and contenteditable regions - are interactive automatically: clicks toggle, focus, and type instead of annotating, so they do not need data-lavish-action. Build choice and option UIs from these whenever you can.",
+      "Native controls - radios, checkboxes, text inputs, selects, textareas, buttons, options, labels, disclosure summaries, and contenteditable regions - and custom widgets with an interactive ARIA role (button, checkbox, combobox, menuitem, option, radio, switch, tab, treeitem, and the menuitem variants) are interactive automatically: clicks toggle, focus, and type instead of annotating, so they do not need data-lavish-action. An <a href> stays annotatable when it carries one of these roles or sits inside such a widget. Build choice and option UIs from these whenever you can.",
       "For reversible choices, do not call window.lavish.queuePrompt() from radio change handlers or option click handlers. Those handlers should only update local selected state.",
       "Use a per-question form submit or explicit Queue answer button to read the current values and call window.lavish.queuePrompt() exactly once for the final answer.",
       "Put data-lavish-action only on custom (non-native) elements that should act like a feedback control - typically a styled div or span you made clickable - so Lavish does not annotate it and shows a pointer cursor instead.",
@@ -5284,9 +5284,18 @@ function deriveLavishQueueKey(element, options = {}) {
   return "";
 }
 function isNativeInteractiveControl(el) {
-  return !!(el && el.closest && el.closest(
+  if (!el || !el.closest) return false;
+  if (el.closest(
     "button,input,select,textarea,option,optgroup,label,summary,[contenteditable]:not([contenteditable='false'])"
-  ));
+  )) {
+    return true;
+  }
+  const widget = el.closest(
+    "[role='button'],[role='checkbox'],[role='combobox'],[role='menuitem'],[role='menuitemcheckbox'],[role='menuitemradio'],[role='option'],[role='radio'],[role='switch'],[role='tab'],[role='treeitem']"
+  );
+  if (!widget) return false;
+  const link = el.closest("a[href]");
+  return !(link && widget.contains(link));
 }
 function classifySevereTextOverflow({
   fragments,
@@ -5487,6 +5496,7 @@ function createArtifactSdk(deriveQueueKey, isNativeInteractive = isNativeInterac
   let hovered = null;
   let selected = null;
   let ignoreNextClick = false;
+  let queuedAnchorSelectors = /* @__PURE__ */ new Set();
   let shadow = null;
   let counter = 0;
   const ids = /* @__PURE__ */ new WeakMap();
@@ -6000,7 +6010,7 @@ function createArtifactSdk(deriveQueueKey, isNativeInteractive = isNativeInterac
     if (annotationMode && !style) {
       style = document.createElement("style");
       style.id = "lavish-cursor-style";
-      style.textContent = ":root{--lavish-accent:#f4c95d;--lavish-annotate-outline:2px solid var(--lavish-accent);--lavish-annotate-offset:2px}*{cursor:default!important}[data-lavish-action],[data-lavish-action] *{cursor:pointer!important}input,textarea,[contenteditable]:not([contenteditable='false']){cursor:text!important}button,select,label,option,input[type='button'],input[type='submit'],input[type='reset'],input[type='checkbox'],input[type='radio'],input[type='file'],input[type='color'],input[type='range'],input[type='image']{cursor:pointer!important}";
+      style.textContent = ":root{--lavish-accent:#f4c95d;--lavish-annotate-outline:2px solid var(--lavish-accent);--lavish-annotate-offset:2px}*{cursor:default!important}:where(:is([role='button'],[role='checkbox'],[role='combobox'],[role='menuitem'],[role='menuitemcheckbox'],[role='menuitemradio'],[role='option'],[role='radio'],[role='switch'],[role='tab'],[role='treeitem']):not(a[href])),:where(:is([role='button'],[role='checkbox'],[role='combobox'],[role='menuitem'],[role='menuitemcheckbox'],[role='menuitemradio'],[role='option'],[role='radio'],[role='switch'],[role='tab'],[role='treeitem']):not(a[href])) *{cursor:pointer!important}:where(:is([role='button'],[role='checkbox'],[role='combobox'],[role='menuitem'],[role='menuitemcheckbox'],[role='menuitemradio'],[role='option'],[role='radio'],[role='switch'],[role='tab'],[role='treeitem']) a[href]),:where(:is([role='button'],[role='checkbox'],[role='combobox'],[role='menuitem'],[role='menuitemcheckbox'],[role='menuitemradio'],[role='option'],[role='radio'],[role='switch'],[role='tab'],[role='treeitem']) a[href]) *{cursor:default!important}[data-lavish-action],[data-lavish-action] *{cursor:pointer!important}input,textarea,[contenteditable]:not([contenteditable='false']){cursor:text!important}button,select,label,option,input[type='button'],input[type='submit'],input[type='reset'],input[type='checkbox'],input[type='radio'],input[type='file'],input[type='color'],input[type='range'],input[type='image']{cursor:pointer!important}";
       document.head.appendChild(style);
     }
     if (!annotationMode && style) style.remove();
@@ -7051,6 +7061,13 @@ function createArtifactSdk(deriveQueueKey, isNativeInteractive = isNativeInterac
     }
     if (msg.type === "lavish:restoreReviewState") restoreReviewState(msg.state);
     if (msg.type === "lavish:revealElement") revealElement(msg.selector);
+    if (msg.type === "lavish:queuedAnchors") {
+      queuedAnchorSelectors = new Set(Array.isArray(msg.selectors) ? msg.selectors.map(String) : []);
+    }
+    if (msg.type === "lavish:annotateElement" && annotationMode) {
+      const target = safeQuerySelector(msg.selector);
+      if (target) showAnnotationCard(target);
+    }
   });
   function revealElement(selector2) {
     const target = selector2 === "html" ? document.documentElement : safeQuerySelector(selector2);
@@ -7135,6 +7152,14 @@ function createArtifactSdk(deriveQueueKey, isNativeInteractive = isNativeInterac
         ignoreNextClick = false;
         return;
       }
+      const clicked = queuedAnchorSelectors.size ? context(event.target) : null;
+      const node = clicked?.target?.type === "mermaid-node" ? clicked.target.selector : "";
+      const selector2 = [clicked?.selector, node].find((candidate) => candidate && queuedAnchorSelectors.has(candidate));
+      if (selector2) {
+        closeCard();
+        postArtifactMessage("lavish:editQueuedAnchor", { selector: selector2 });
+        return;
+      }
       showAnnotationCard(event.target);
     },
     true
@@ -12315,7 +12340,7 @@ var AGENT_REPLY_INPUT_LIMIT_BYTES = AGENT_REPLY_JSON_LIMIT_BYTES - AGENT_REPLY_J
 var AGENT_REPLY_LIMIT_LABEL = "2 MB JSON request limit";
 var POLL_STATE_HEADER = "lavish-poll-state";
 var CODEX_POLL_WAKE_PATH_GUIDANCE = "Codex detected: completed background tasks may not resume Codex automatically, so keep the poll attached to the active turn.";
-var VERSION = "0.1.80";
+var VERSION = "0.1.82";
 function detectInvokingAgent(env = process.env) {
   return ["CODEX_SANDBOX", "CODEX_THREAD_ID"].some((key) => Object.hasOwn(env, key)) ? "codex" : "generic";
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lavish-axi",
-  "version": "0.1.80",
+  "version": "0.1.82",
   "packageManager": "pnpm@11.1.1",
   "description": "HTML is the new markdown. Lavish is the new editor for your HTML artifacts.",
   "type": "module",

package/plugin.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://agent-plugins.org/schemas/1.0.0/plugin.schema.json",
   "name": "lavish-axi",
-  "version": "0.1.80",
+  "version": "0.1.82",
   "description": "HTML is the new markdown. Lavish is the new editor for your HTML artifacts.",
   "author": {
     "name": "Kun Chen",