lavish-axi 0.1.29 → 0.1.31

package/README.md

@@ -130,12 +130,15 @@ pnpm link
 - **File-path identity** - Sessions are keyed by the canonical HTML file path, so agents do not need opaque IDs.
 - **Portable artifacts** - The artifact runs in an iframe while Lavish injects a small SDK for annotations, snapshots, and feedback controls.
   Lavish does not inject any design system, so the saved HTML file renders identically whether you open it through `lavish-axi` or directly in a browser.
-  Before writing HTML, choose a design system in strict priority order: follow a user-requested look first; otherwise inspect the current project for a Tailwind or theme config, CSS variables or design tokens, a component library, brand assets, or existing styled pages and match what you find; only when both come up empty, run `lavish-axi design` for a copy-pasteable Tailwind CSS v4 + DaisyUI v5 CDN fallback.
+  Before writing HTML, choose a design system in strict priority order: follow a user-requested look first; otherwise inspect the project the artifact is about - the subject or product whose content or UI it represents, which may differ from your current working directory - and match that project's Tailwind or theme config, CSS variables or design tokens, component library, brand assets, or existing styled pages.
+  If the artifact previews, proposes, or mocks a specific app's UI, render it in that app's own design system so it faithfully shows the product, even when you are running in a different repo.
+  Only when both come up empty, run `lavish-axi design` for a copy-pasteable Tailwind CSS v4 + DaisyUI v5 CDN fallback.
   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

@@ -20,7 +20,7 @@ var DESIGN_CDN_URLS = {
 var DESIGN_CDN_SNIPPET = `<link rel="stylesheet" href="${DESIGN_CDN_URLS.daisyui}">
 <link rel="stylesheet" href="${DESIGN_CDN_URLS.daisyuiThemes}">
 <script src="${DESIGN_CDN_URLS.tailwind}"></script>`;
-var DESIGN_SYSTEM_HINT = "Lavish does not auto-inject any design system - artifacts stay portable so they render identically when opened directly without lavish-axi running. Before writing any HTML, decide the design direction in this strict priority order, and only move to the next step when the current one truly yields nothing: (1) if the user asked for a specific look or named design system, use that; (2) otherwise you must first inspect the current project for design conventions - look for a Tailwind or theme config, shared CSS variables or design tokens, a component library, brand assets, or existing styled pages - and match what you find so the artifact fits in; (3) only when both steps come up empty, use the Lavish-recommended Tailwind CSS browser runtime v4 + DaisyUI v5, available via CDN - run `lavish-axi design` for a copy-pasteable CDN snippet plus component reference, and prefer that CDN snippet over hand-writing styles unless explicitly instructed otherwise by the user. When you deliver the artifact, state which of the three design sources you used and why.";
+var DESIGN_SYSTEM_HINT = "Lavish does not auto-inject any design system - artifacts stay portable so they render identically when opened directly without lavish-axi running. Before writing any HTML, decide the design direction in this strict priority order, and only move to the next step when the current one truly yields nothing: (1) if the user asked for a specific look or named design system, use that; (2) otherwise you must first inspect the project the artifact is about - the subject or product whose content or UI it represents, which may differ from your current working directory - and match that project's design system: Tailwind or theme config, shared CSS variables or design tokens, component library, brand assets, or existing styled pages. If the artifact previews, proposes, or mocks a specific app's UI, render it in that app's own design system so it faithfully shows the product, even when you are running in a different repo; (3) only when both steps come up empty, use the Lavish-recommended Tailwind CSS browser runtime v4 + DaisyUI v5, available via CDN - run `lavish-axi design` for a copy-pasteable CDN snippet plus component reference, and prefer that CDN snippet over hand-writing styles unless explicitly instructed otherwise by the user. When you deliver the artifact, state which of the three design sources you used and why.";
 var DAISYUI_THEMES = [
   "light",
   "dark",
@@ -61,7 +61,7 @@ var DAISYUI_THEMES = [
 function createDesignOutput() {
   return {
     design: {
-      summary: "Use this Lavish CDN fallback only if (1) the user gave no design direction and (2) you already inspected the current project and found no design system or style conventions to match. If you have not checked the project yet, check first. Lavish does not auto-inject any design system; artifacts stay portable HTML. The strict priority order is: (1) a look or named design system the user asked for; (2) the current project's design system or style conventions - look for a Tailwind or theme config, shared CSS variables or design tokens, a component library, brand assets, or existing styled pages; (3) this Tailwind CSS browser runtime v4 + DaisyUI v5 + themes snippet - paste the CDN snippet below into your `<head>` and prefer the CDN snippet over hand-writing styles unless explicitly instructed otherwise by the user.",
+      summary: "Use this Lavish CDN fallback only if (1) the user gave no design direction and (2) you already inspected the project the artifact is about - the subject or product whose content or UI it represents, which may differ from your current working directory - and found no design system or style conventions to match. If you have not checked the subject project yet, check first. Lavish does not auto-inject any design system; artifacts stay portable HTML. The strict priority order is: (1) a look or named design system the user asked for; (2) the subject project's design system or style conventions - look for a Tailwind or theme config, shared CSS variables or design tokens, a component library, brand assets, or existing styled pages. If the artifact previews, proposes, or mocks a specific app's UI, render it in that app's own design system so it faithfully shows the product, even when you are running in a different repo; (3) this Tailwind CSS browser runtime v4 + DaisyUI v5 + themes snippet - paste the CDN snippet below into your `<head>` and prefer the CDN snippet over hand-writing styles unless explicitly instructed otherwise by the user.",
       cdn_snippet: DESIGN_CDN_SNIPPET,
       cdn_urls: DESIGN_CDN_URLS,
       versions: { tailwind: TAILWIND_BROWSER_VERSION, daisyui: DAISYUI_VERSION },
@@ -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.29";
+var VERSION = "0.1.31";
 async function run(argv) {
   await ensureStateDir();
   const normalizedArgv = normalizeArgv(argv);
@@ -2591,7 +2681,7 @@ Examples:
 `,
   design: `Usage: lavish-axi design
 
-Show a copy-pasteable CDN snippet for Tailwind CSS browser runtime v4 + DaisyUI v5 + themes, plus technical reference for DaisyUI components. Lavish artifacts stay portable HTML. This CDN snippet is the design fallback, not the default: inspect the project before falling back. The strict priority order is: (1) if the user asked for a specific look or named design system, follow that; (2) otherwise, if the current project already has a design system or style conventions, match those; (3) only when both come up empty, prefer the Lavish-recommended Tailwind + DaisyUI CDN snippet over hand-writing styles unless explicitly instructed otherwise by the user.
+Show a copy-pasteable CDN snippet for Tailwind CSS browser runtime v4 + DaisyUI v5 + themes, plus technical reference for DaisyUI components. Lavish artifacts stay portable HTML. This CDN snippet is the design fallback, not the default: inspect the subject project before falling back. The strict priority order is: (1) if the user asked for a specific look or named design system, follow that; (2) otherwise, match the design system of the project the artifact is about, not necessarily your current working directory. If the artifact previews, proposes, or mocks a specific app's UI, use that app's own design system; (3) only when both come up empty, prefer the Lavish-recommended Tailwind + DaisyUI CDN snippet over hand-writing styles unless explicitly instructed otherwise by the user.
 `,
   setup: `Usage: lavish-axi setup hooks
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lavish-axi",
-  "version": "0.1.29",
+  "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",

package/skills/lavish/SKILL.md

@@ -66,5 +66,5 @@ One artifact often combines several playbooks (for example a plan that includes
 - Run `npx -y lavish-axi end <html-file>` to end a session
 - Run `npx -y lavish-axi stop` to shut down the background server (it also self-stops when idle or after the last session ends with nothing connected)
 - Run `npx -y lavish-axi playbook <playbook_id>` for focused artifact guidance. One artifact often combines several playbooks (for example a plan that includes a comparison and a diagram), so read every playbook relevant to the artifact, not just one, for the best quality
-- Lavish does not auto-inject any design system - artifacts stay portable so they render identically when opened directly without lavish-axi running. Before writing any HTML, decide the design direction in this strict priority order, and only move to the next step when the current one truly yields nothing: (1) if the user asked for a specific look or named design system, use that; (2) otherwise you must first inspect the current project for design conventions - look for a Tailwind or theme config, shared CSS variables or design tokens, a component library, brand assets, or existing styled pages - and match what you find so the artifact fits in; (3) only when both steps come up empty, use the Lavish-recommended Tailwind CSS browser runtime v4 + DaisyUI v5, available via CDN - run `npx -y lavish-axi design` for a copy-pasteable CDN snippet plus component reference, and prefer that CDN snippet over hand-writing styles unless explicitly instructed otherwise by the user. When you deliver the artifact, state which of the three design sources you used and why.
+- Lavish does not auto-inject any design system - artifacts stay portable so they render identically when opened directly without lavish-axi running. Before writing any HTML, decide the design direction in this strict priority order, and only move to the next step when the current one truly yields nothing: (1) if the user asked for a specific look or named design system, use that; (2) otherwise you must first inspect the project the artifact is about - the subject or product whose content or UI it represents, which may differ from your current working directory - and match that project's design system: Tailwind or theme config, shared CSS variables or design tokens, component library, brand assets, or existing styled pages. If the artifact previews, proposes, or mocks a specific app's UI, render it in that app's own design system so it faithfully shows the product, even when you are running in a different repo; (3) only when both steps come up empty, use the Lavish-recommended Tailwind CSS browser runtime v4 + DaisyUI v5, available via CDN - run `npx -y lavish-axi design` for a copy-pasteable CDN snippet plus component reference, and prefer that CDN snippet over hand-writing styles unless explicitly instructed otherwise by the user. When you deliver the artifact, state which of the three design sources you used and why.
 - Use lavish-axi when the user asks for a visual artifact, HTML explainer, interactive prototype, review surface, product or technical plan, comparison, report, or browser-based feedback loop