lavish-axi 0.1.30 → 0.1.31

package/README.md

@@ -136,8 +136,9 @@ pnpm link
   That fallback guidance recommends DaisyUI's `luxury` theme by default and warns not to `@apply` DaisyUI classes inside Tailwind browser-runtime style blocks.
 - **Local assets** - Copy local images, CSS, fonts, and scripts next to the HTML artifact and reference them with relative paths from that directory; root-prefixed paths such as `/assets/logo.png` will not resolve through Lavish's artifact route.
 - **Live reload** - Lavish watches the HTML artifact file by default and preserves the artifact iframe scroll position across reloads. 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">`.
-- **Feedback controls** - Native form controls (radios, checkboxes, inputs, selects, buttons, labels, contenteditable) are interactive automatically, so they do not need `data-lavish-action`; wire their handlers to `window.lavish.queuePrompt()` or `window.lavish.sendQueuedPrompts()` to send feedback.
-  Mark only custom (non-native) clickable elements with `data-lavish-action` so Lavish does not annotate them.
+- **Feedback controls** - Native form controls (radios, checkboxes, inputs, selects, buttons, labels, contenteditable) are interactive automatically, so they do not need `data-lavish-action`.
+  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()`.
+  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.
   The browser chrome keeps editing actions in the overflow menu (copy path, reload artifact, copy DOM snapshot, end session) and can submit queued prompts with **Send & end session**, which delivers the prompts before ending the session.
 - **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.

package/dist/chrome-client.js

@@ -5,6 +5,7 @@ const sessionData = JSON.parse(sessionDataElement?.textContent || "{}");
 const key = String(sessionData.key || "");
 const filePath = String(sessionData.file || "");
 const queueStorageKey = "lavish-axi:queued:" + key;
+const internalQueueKeyField = "_lavishQueueKey";
 const initialChat = Array.isArray(sessionData.initialChat) ? sessionData.initialChat : [];
 
 const frame = /** @type {HTMLIFrameElement} */ (document.getElementById("artifact"));
@@ -212,6 +213,36 @@ function removeQueuedPrompt(index, event) {
   render();
 }
 
+function promptQueueKey(prompt) {
+  return prompt && typeof prompt[internalQueueKeyField] === "string" ? prompt[internalQueueKeyField].trim() : "";
+}
+
+function enqueuePrompt(prompt) {
+  if (!prompt || typeof prompt !== "object") return;
+
+  const queueKey = promptQueueKey(prompt);
+  if (queueKey) {
+    const index = queued.findIndex((item) => promptQueueKey(item) === queueKey);
+    if (index !== -1) {
+      queued[index] = prompt;
+    } else {
+      queued.push(prompt);
+    }
+  } else {
+    queued.push(prompt);
+  }
+
+  persistQueuedPrompts();
+  render();
+}
+
+function stripInternalPromptFields(prompt) {
+  if (!prompt || typeof prompt !== "object") return prompt;
+  const clean = { ...prompt };
+  delete clean[internalQueueKeyField];
+  return clean;
+}
+
 function postToFrame(message) {
   if (frame.contentWindow) frame.contentWindow.postMessage(message, "*");
 }
@@ -279,7 +310,7 @@ async function submitQueuedOnce() {
   const response = await fetch("/api/" + key + "/prompts", {
     method: "POST",
     headers: { "content-type": "application/json" },
-    body: JSON.stringify({ prompts, domSnapshot: pendingSnapshot }),
+    body: JSON.stringify({ prompts: prompts.map(stripInternalPromptFields), domSnapshot: pendingSnapshot }),
   });
   if (!response.ok) throw new Error("failed to submit queued prompts");
   for (const prompt of prompts) {
@@ -359,9 +390,7 @@ window.addEventListener("message", (event) => {
 
   const msg = event.data || {};
   if (msg.type === "lavish:queuePrompt") {
-    queued.push(msg.prompt);
-    persistQueuedPrompts();
-    render();
+    enqueuePrompt(msg.prompt);
   }
   if (msg.type === "lavish:snapshot") {
     const snapshotAction = snapshotRequests.shift() || "submit";

package/dist/cli.mjs

@@ -691,28 +691,31 @@ var PLAYBOOKS = [
     ],
     structure: [
       "Make each decision surface visible: what is being chosen, what the options mean, and what happens next.",
-      "Pair controls with a readable summary of the prompt they will queue.",
-      "Show queued or selected state clearly so the user trusts what will be sent back."
+      "Keep reversible selection state local in the artifact until the user explicitly submits that question.",
+      "Pair each question with a Submit or Queue answer control that sends exactly one prompt for the final answer.",
+      "Show selected state separately from queued state so the user trusts what will be sent back."
     ],
     design_rules: [
       "Native form controls - radios, checkboxes, text inputs, selects, textareas, buttons, options, labels, 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.",
-      "To turn a native control into agent feedback, wire its own change, click, or submit handler to window.lavish.queuePrompt() (for example a radio group's onchange, or a submit button that reads the selected values) - no marker required.",
+      "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.",
-      "Call window.lavish.queuePrompt(prompt, options) from the control's click, change, or submit handler to queue a precise request for the agent.",
-      "Pass options such as tag, text, selector, target, or data when they help the agent understand exactly what the user chose.",
-      "Call window.lavish.sendQueuedPrompts() when the control should immediately send the queued feedback instead of waiting for the user to press Send to Agent.",
+      "Use data-lavish-question on a question wrapper or pass queueKey when multiple pre-send updates should replace the prior unsent answer for the same question.",
+      "Pass options such as tag, text, selector, target, data, queueKey, or element when they help the agent understand exactly what the user chose.",
+      "Call window.lavish.sendQueuedPrompts() only when the control should immediately send committed feedback instead of waiting for the user to press Send to Agent.",
       "Make queued prompts specific enough that the agent can act without asking a follow-up question.",
       "Keep native browser controls accessible and readable on mobile."
     ],
     pitfalls: [
+      "Do not queue one prompt per radio change, checkbox toggle, dropdown change, or choice-button click when the user can still change their mind.",
       "Do not create controls whose queued prompt is unclear or too vague to execute.",
-      "Do not hide the fact that a click queues feedback for the agent.",
+      "Do not hide the difference between selected locally and queued for the agent.",
       "Do not require interaction for content the user only needs to read."
     ],
     lavish_notes: [
       "Lavish is strongest when the artifact becomes a focused review surface and not just a static page.",
-      `A native choice looks like \`<label><input type="radio" name="plan" onchange="window.lavish.queuePrompt('Use the Pro plan', { tag: 'choice', text: 'Pro' })"> Pro</label>\` - it just works, no marker needed.`,
-      `A custom (non-native) control needs the marker: \`<div role="button" tabindex="0" data-lavish-action onclick="window.lavish.queuePrompt('Choose option A', { tag: 'choice', text: 'Option A' })">Choose option A</div>\`.`,
+      `A native single-choice question should submit the final value: \`<form data-lavish-question="plan" onsubmit="event.preventDefault(); const choice = new FormData(event.currentTarget).get('plan'); if (choice) window.lavish.queuePrompt('Use the ' + choice + ' plan', { tag: 'choice', text: 'Plan: ' + choice, element: event.currentTarget, data: { question: 'plan', answer: choice } });"><label><input type="radio" name="plan" value="Starter"> Starter</label><label><input type="radio" name="plan" value="Pro"> Pro</label><button type="submit">Queue this answer</button></form>\`.`,
+      "A custom choice UI should make option buttons update local state, then use a separate Queue answer button with data-lavish-action to queue the final selected value.",
       "Use window.lavish.queuePrompt for user intent, not internal analytics or UI-only state changes.",
       "End input paths with an obvious way for the user to send feedback back to the agent."
     ]
@@ -765,7 +768,90 @@ import chokidar from "chokidar";
 import express from "express";
 
 // src/artifact-sdk.js
-function createArtifactSdk() {
+function deriveLavishQueueKey(element, options = {}) {
+  function stringValue(value) {
+    return value === null || value === void 0 ? "" : String(value);
+  }
+  function attributeValue(el, name) {
+    if (!el) return "";
+    if (el.getAttribute) {
+      const value = el.getAttribute(name);
+      if (value !== null && value !== void 0) return value;
+    }
+    return el[name] || "";
+  }
+  function tagName(el) {
+    return stringValue(el?.tagName || el?.nodeName).toLowerCase();
+  }
+  function closestElementMatching(el, selector) {
+    return el && el.closest ? el.closest(selector) : null;
+  }
+  function elementPath(el) {
+    const parts = [];
+    let node = el;
+    while (node && node.nodeType === 1 && parts.length < 6) {
+      let part = tagName(node) || "element";
+      const id = stringValue(attributeValue(node, "id") || node.id).trim();
+      if (id) {
+        part += `#${id}`;
+        parts.unshift(part);
+        break;
+      }
+      const parent2 = node.parentElement;
+      if (parent2 && parent2.children) {
+        const siblings = [...parent2.children].filter((child) => tagName(child) === tagName(node));
+        if (siblings.length > 1) part += `:nth-of-type(${siblings.indexOf(node) + 1})`;
+      }
+      parts.unshift(part);
+      node = parent2;
+    }
+    return parts.join(" > ");
+  }
+  function scopeKey(el) {
+    const scope2 = closestElementMatching(el, "form,fieldset") || el?.parentElement || el;
+    const tag2 = tagName(scope2) || "scope";
+    const explicit = stringValue(
+      attributeValue(scope2, "data-lavish-question") || attributeValue(scope2, "id") || attributeValue(scope2, "name")
+    ).trim();
+    if (explicit) return `${tag2}:${explicit}`;
+    return elementPath(scope2) || tag2;
+  }
+  function controlIdentity(el) {
+    const identity = stringValue(attributeValue(el, "name") || attributeValue(el, "id") || el?.name).trim();
+    if (identity) return identity;
+    return elementPath(el);
+  }
+  function isKeyedInputType(type2) {
+    return !(/* @__PURE__ */ new Set(["button", "submit", "reset", "file", "image", "hidden", "radio", "checkbox"])).has(type2);
+  }
+  if (Object.hasOwn(options, "queueKey")) {
+    return stringValue(options.queueKey).trim();
+  }
+  const question = closestElementMatching(element, "[data-lavish-question]");
+  const questionKey = stringValue(attributeValue(question, "data-lavish-question")).trim();
+  if (questionKey) return `question:${questionKey}`;
+  const tag = tagName(element);
+  const type = stringValue(attributeValue(element, "type") || element?.type).toLowerCase();
+  const scope = scopeKey(element);
+  if (tag === "input" && type === "radio") {
+    const name = stringValue(attributeValue(element, "name") || element?.name).trim();
+    if (name) return `radio:${scope}:${name}`;
+    return "";
+  }
+  if (tag === "input" && type === "checkbox") {
+    const identity = controlIdentity(element);
+    const explicitValue = stringValue(element?.getAttribute ? element.getAttribute("value") : "").trim();
+    const option = explicitValue || stringValue(attributeValue(element, "id") || elementPath(element)).trim();
+    if (identity) return `checkbox:${scope}:${identity}:${option}`;
+    return "";
+  }
+  if (tag === "select" || tag === "textarea" || tag === "input" && isKeyedInputType(type)) {
+    const identity = controlIdentity(element);
+    if (identity) return `field:${scope}:${identity}`;
+  }
+  return "";
+}
+function createArtifactSdk(deriveQueueKey) {
   let annotationMode = true;
   let hovered = null;
   let selected = null;
@@ -904,10 +990,13 @@ function createArtifactSdk() {
     if (!annotationMode) closeCard();
   }
   function queuePrompt(prompt, options = {}) {
+    const originElement = options.element || document.activeElement || document.body;
     const item = {
-      ...context(options.element || document.activeElement || document.body),
+      ...context(originElement),
       prompt: String(prompt || "")
     };
+    const queueKey = typeof deriveQueueKey === "function" ? deriveQueueKey(originElement, options) : "";
+    if (queueKey) item._lavishQueueKey = String(queueKey);
     if (options.uid) item.uid = String(options.uid);
     if (options.selector) item.selector = String(options.selector);
     if (options.tag) item.tag = String(options.tag);
@@ -993,7 +1082,7 @@ function createArtifactSdk() {
     cancelButton.onclick = closeCard;
     sendButton.onclick = () => {
       const prompt = textarea.value.trim();
-      if (prompt) queuePrompt(prompt, c);
+      if (prompt) queuePrompt(prompt, { ...c, queueKey: "" });
       closeCard();
     };
     textarea.addEventListener("keydown", (event) => {
@@ -1819,7 +1908,8 @@ function createSdkJs(key) {
   return `(() => {
 const key=${JSON.stringify(key)};
 void key;
-(${createArtifactSdk.toString()})();
+const deriveQueueKey=${deriveLavishQueueKey.toString()};
+(${createArtifactSdk.toString()})(deriveQueueKey);
 })();`;
 }
 function escapeHtml(value) {
@@ -2004,7 +2094,7 @@ function normalizePagePath(path5) {
 // src/cli.js
 var COMMANDS = /* @__PURE__ */ new Set(["open", "poll", "end", "stop", "server", "playbook", "design", "setup"]);
 var DESCRIPTION = "Lavish Editor helps agents turn rich HTML artifacts into collaborative human review surfaces. Whenever you are about to give user a complex response that will be easier to understand via a rich / interactive page, consider using Lavish Editor. First generate an interactive HTML artifact according to user request, then run `lavish-axi <html-file>` so the user can visually review it, annotate elements or selected text, queue prompts, and send feedback back through `lavish-axi poll`.";
-var VERSION = "0.1.30";
+var VERSION = "0.1.31";
 async function run(argv) {
   await ensureStateDir();
   const normalizedArgv = normalizeArgv(argv);

package/package.json

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