lavish-axi 0.1.6 → 0.1.8

package/README.md

@@ -64,9 +64,9 @@ npm install -g lavish-axi
 ```sh
 git clone https://github.com/kunchenguid/lavish-axi.git
 cd lavish-axi
-npm ci
-npm run build
-npm link
+pnpm install --frozen-lockfile
+pnpm run build
+pnpm link
 ```
 
 ## How It Works
@@ -95,7 +95,8 @@ npm link
 ```
 
 - **File-path identity** - Sessions are keyed by the canonical HTML file path, so agents do not need opaque IDs.
-- **Sandboxed artifact** - The artifact runs in an iframe while Lavish injects a small SDK for annotations and snapshots, plus Tailwind CSS v4 and DaisyUI v5 design assets unless the HTML includes `<meta name="lavish-design" content="off">`.
+- **Sandboxed artifact** - The artifact runs in an iframe while Lavish injects a small SDK for annotations, snapshots, and feedback controls, plus Tailwind CSS v4 and DaisyUI v5 design assets unless the HTML includes `<meta name="lavish-design" content="off">`.
+- **Feedback controls** - Mark buttons, choices, and other interactive elements with `data-lavish-action` so Lavish does not annotate them, then call `window.lavish.queuePrompt()` or `window.lavish.sendQueuedPrompts()` from the control handler.
 - **Precise targets** - Text annotations include selected text plus range anchors, so agents are not limited to whole-element selectors.
 - **Local-first state** - Session state stays under `.lavish-axi/` in the workspace.
 
@@ -110,7 +111,7 @@ npm link
 | `lavish-axi playbook [id]`    | List focused artifact guidance or show one playbook.         |
 | `lavish-axi design`           | Show the injected Tailwind CSS and DaisyUI design reference. |
 
-Known playbook IDs: `diagram`, `table`, `comparison`, `plan`, `diff`, `interactive`, `slides`.
+Known playbook IDs: `diagram`, `table`, `comparison`, `plan`, `diff`, `input`, `slides`.
 
 ### Flags
 
@@ -123,10 +124,10 @@ Known playbook IDs: `diagram`, `table`, `comparison`, `plan`, `diff`, `interacti
 ## Development
 
 ```sh
-npm run check          # Run all verification commands
-npm run build          # Bundle the publishable CLI, chrome, and design assets
-npm test               # Run node:test tests
-npm run lint           # Run ESLint
-npm run format:check   # Check Prettier formatting
-npm run typecheck      # Run TypeScript checkJs validation
+pnpm run check          # Run all verification commands
+pnpm run build          # Bundle the publishable CLI, chrome, and design assets
+pnpm test               # Run node:test tests
+pnpm run lint           # Run ESLint
+pnpm run format:check   # Check Prettier formatting
+pnpm run typecheck      # Run TypeScript checkJs validation
 ```

package/dist/cli.mjs

@@ -616,8 +616,8 @@ var PLAYBOOKS = [
     ]
   },
   {
-    id: "interactive",
-    use_when: "Allow users to express preferences and choices through controls that send feedback from within the artifact",
+    id: "input",
+    use_when: "Must be used when the agent needs to collect user input on decisions, choices, preferences, triage, scope, or other structured feedback from within the artifact",
     choose: [
       "Use this when the user needs to select, tune, triage, annotate, or edit a structured choice.",
       "Use controls for decisions the user can make faster visually than by writing a prompt.",
@@ -629,7 +629,10 @@ var PLAYBOOKS = [
       "Show queued or selected state clearly so the user trusts what will be sent back."
     ],
     design_rules: [
-      "Use window.lavish.queuePrompt(...) for explicit user requests from buttons, forms, and choice controls.",
+      "Put data-lavish-action on any element that should act like a feedback control 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.",
       "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."
     ],
@@ -640,7 +643,9 @@ var PLAYBOOKS = [
     ],
     lavish_notes: [
       "Lavish is strongest when the artifact becomes a focused review surface and not just a static page.",
-      "End interactive paths with an obvious way for the user to send feedback back to the agent."
+      `A minimal control looks like \`<div role="button" tabindex="0" data-lavish-action onclick="window.lavish.queuePrompt('Choose option A', { tag: 'choice', text: 'Option A' })">Choose option A</div>\`.`,
+      "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."
     ]
   },
   {
@@ -761,7 +766,7 @@ function createArtifactSdk() {
     const text = selection.toString().trim().replace(/\s+/g, " ");
     if (range.collapsed || !text) return null;
     const ancestor = closestElement(range.commonAncestorContainer);
-    if (isLavishUi(ancestor)) return null;
+    if (isLavishUi(ancestor) || isLavishAction(ancestor)) return null;
     const commonAncestorSelector = selector(ancestor);
     const target = {
       type: "text-range",
@@ -784,6 +789,9 @@ function createArtifactSdk() {
   function isLavishUi(el) {
     return !!(el && el.closest && el.closest("[data-lavish-ui]"));
   }
+  function isLavishAction(el) {
+    return !!(el && el.closest && el.closest("[data-lavish-action]"));
+  }
   function highlightElement(el) {
     if (!el) return;
     el.style.outline = "var(--lavish-annotate-outline,2px solid #f4c95d)";
@@ -816,7 +824,7 @@ function createArtifactSdk() {
     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}";
+      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}";
       document.head.appendChild(style);
     }
     if (!annotationMode && style) style.remove();
@@ -935,7 +943,7 @@ function createArtifactSdk() {
   document.addEventListener(
     "mouseover",
     (event) => {
-      if (!annotationMode || isLavishUi(event.target)) return;
+      if (!annotationMode || isLavishUi(event.target) || isLavishAction(event.target)) return;
       if (event.target === selected) return;
       if (hovered && hovered !== selected) clearHighlight(hovered);
       hovered = event.target;
@@ -956,7 +964,7 @@ function createArtifactSdk() {
   document.addEventListener(
     "mouseup",
     (event) => {
-      if (!annotationMode || isLavishUi(event.target)) return;
+      if (!annotationMode || isLavishUi(event.target) || isLavishAction(event.target)) return;
       const c = textSelectionContext(document.getSelection());
       if (!c) return;
       ignoreNextClick = true;
@@ -967,7 +975,7 @@ function createArtifactSdk() {
   document.addEventListener(
     "click",
     (event) => {
-      if (!annotationMode || isLavishUi(event.target)) return;
+      if (!annotationMode || isLavishUi(event.target) || isLavishAction(event.target)) return;
       event.preventDefault();
       event.stopPropagation();
       if (ignoreNextClick) {
@@ -1708,8 +1716,8 @@ function normalizePagePath(path5) {
 
 // src/cli.js
 var COMMANDS = /* @__PURE__ */ new Set(["open", "poll", "end", "server", "playbook", "design"]);
-var DESCRIPTION = "Lavish Editor helps agents turn rich HTML artifacts into collaborative human review surfaces. 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.6";
+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.8";
 async function run(argv) {
   await ensureStateDir();
   const normalizedArgv = normalizeArgv(argv);
@@ -1793,7 +1801,7 @@ function createHomeOutput({ bin, sessions, includeSessions = true }) {
       "Use visual hierarchy to make the most important decisions, risks, tradeoffs, and next actions obvious at a glance",
       "Use visual structure such as sections, cards, tables, diagrams, annotated snippets, and side-by-side comparisons instead of long prose",
       "Choose typography, spacing, color, and layout deliberately so the artifact has a clear point of view",
-      "Make the artifact responsive and readable; visual polish should improve comprehension, not distract from review"
+      "Prevent horizontal overflow: design narrow layouts intentionally, use minmax(0, 1fr) and min-width: 0 for grid/flex children, and deliberately wrap or truncate long labels/status text"
     ],
     playbooks: listPlaybooks(),
     help: [
@@ -1826,7 +1834,7 @@ function createPlaybookOutput(args) {
 function createOpenOutput({ file, url, status }) {
   return {
     session: { file, url, status },
-    next_step: `Tell the user to open ${url} to review the artifact in Lavish Editor, then run \`lavish-axi poll ${file}\`. This command long-polls until the user sends feedback or ends the session. Do not pass --timeout-ms during normal agent use. Do not set a short shell timeout; either run it without a timeout or set the shell timeout above 10 minutes. After applying feedback, run \`lavish-axi poll ${file} --agent-reply "<message for the user>"\` without --timeout-ms to show your response in Lavish Editor and wait for more feedback.`
+    next_step: `Run \`lavish-axi poll ${file}\`. This command long-polls until the user sends feedback or ends the session. Do not pass --timeout-ms during normal agent use. Do not set a short shell timeout; either run it without a timeout or set the shell timeout above 10 minutes. After applying feedback, run \`lavish-axi poll ${file} --agent-reply "<message for the user>"\` without --timeout-ms to show your response in Lavish Editor and wait for more feedback.`
   };
 }
 async function openCommand(args) {
@@ -2094,12 +2102,12 @@ End a Lavish Editor session.
 `,
   playbook: `Usage: lavish-axi playbook [playbook_id]
 
-List focused artifact guidance playbooks, or show one playbook by ID. Known IDs: diagram, table, comparison, plan, diff, interactive, slides.
+List focused artifact guidance playbooks, or show one playbook by ID. Known IDs: diagram, table, comparison, plan, diff, input, slides.
 
 Examples:
   lavish-axi playbook
   lavish-axi playbook diagram
-  lavish-axi playbook interactive
+  lavish-axi playbook input
 `,
   design: `Usage: lavish-axi design