lavish-axi 0.1.8 → 0.1.10

package/README.md

@@ -97,6 +97,7 @@ pnpm 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, 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.
+- **Agent presence** - The browser shows when no agent is listening, still queues feedback for the next `lavish-axi poll`, and only blocks sending while the agent is working on delivered feedback.
 - **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.
 

package/dist/chrome-client.js

@@ -14,10 +14,11 @@ const annotationButton = /** @type {HTMLButtonElement} */ (document.getElementBy
 const endButton = /** @type {HTMLButtonElement} */ (document.getElementById("end"));
 const filePathInput = /** @type {HTMLInputElement} */ (document.getElementById("filePath"));
 const copyPathButton = /** @type {HTMLButtonElement} */ (document.getElementById("copyPath"));
+const presenceBanner = /** @type {HTMLDivElement} */ (document.getElementById("presenceBanner"));
 
 const queued = [];
 let annotation = true;
-let agentPolling = false;
+let agentPresence = "waiting";
 let pendingSnapshot = "";
 let workingBubble = null;
 
@@ -81,11 +82,12 @@ function syncChat(chat) {
   chatLog.scrollTop = chatLog.scrollHeight;
 }
 
-function setAgentPolling(active) {
-  agentPolling = !!active;
-  sendButton.disabled = !agentPolling;
+function setAgentPresence(state) {
+  agentPresence = state === "listening" || state === "working" ? state : "waiting";
+  sendButton.disabled = agentPresence === "working";
+  if (presenceBanner) presenceBanner.hidden = agentPresence !== "waiting";
 
-  if (agentPolling) {
+  if (agentPresence !== "working") {
     if (workingBubble) workingBubble.remove();
     workingBubble = null;
     return;
@@ -111,7 +113,7 @@ function postToFrame(message) {
 }
 
 function sendQueued() {
-  if (!agentPolling) return;
+  if (agentPresence === "working") return;
 
   const text = chatInput.value.trim();
   if (text) {
@@ -128,7 +130,7 @@ function sendQueued() {
 async function submitQueued() {
   const prompts = queued.splice(0, queued.length);
   render();
-  setAgentPolling(false);
+  if (agentPresence === "listening") setAgentPresence("working");
   await fetch("/api/" + key + "/prompts", {
     method: "POST",
     headers: { "content-type": "application/json" },
@@ -214,8 +216,8 @@ events.addEventListener("reload", () => {
 events.addEventListener("chrome-reload", () => reloadAfterServerRestart());
 events.addEventListener("agent-reply", (event) => addChat("agent", JSON.parse(event.data).text));
 events.addEventListener("chat-sync", (event) => syncChat(JSON.parse(event.data).chat || []));
-events.addEventListener("agent-working", (event) => setAgentPolling(!JSON.parse(event.data).working));
+events.addEventListener("agent-presence", (event) => setAgentPresence(JSON.parse(event.data).state));
 
 render();
 initialChat.forEach((item) => addChat(item.role, item.text));
-setAgentPolling(false);
+setAgentPresence("waiting");

package/dist/chrome.css

@@ -359,6 +359,19 @@ body.lavish {
   flex-shrink: 0;
   box-sizing: border-box;
 }
+.presence-banner {
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--bg-elevated);
+  color: var(--fg-muted);
+  font-size: 11px;
+  font-weight: var(--w-medium);
+  line-height: 1.4;
+  padding: 8px 10px;
+}
+.presence-banner[hidden] {
+  display: none;
+}
 .annotation-pills {
   display: flex;
   flex-wrap: wrap;

package/dist/cli.mjs

@@ -1187,6 +1187,7 @@ async function serve({ port, stateFile: stateFile2, version = "" }) {
   const events = new EventEmitter();
   const watchers = /* @__PURE__ */ new Map();
   const activePolls = /* @__PURE__ */ new Map();
+  const deliveredFeedback = /* @__PURE__ */ new Set();
   const sseClients = /* @__PURE__ */ new Set();
   app.use(express.json({ limit: "2mb" }));
   app.get("/health", (req, res) => {
@@ -1205,7 +1206,11 @@ async function serve({ port, stateFile: stateFile2, version = "" }) {
       const file = await canonicalFile(req.body.file);
       const key = sessionKey(file);
       const url = `http://localhost:${port}/session/${key}`;
+      const existing = await store.findByKey(key);
       const session = await store.upsertSession(file, url);
+      if (existing?.status === "ended") {
+        clearFeedbackDelivery(key, activePolls, deliveredFeedback, events);
+      }
       watchSession(session, watchers, events);
       res.json({ key, file, url, status: "opened" });
     } catch (error) {
@@ -1219,29 +1224,38 @@ async function serve({ port, stateFile: stateFile2, version = "" }) {
       const timeoutMs = req.query.timeoutMs === void 0 ? null : Math.max(0, Math.min(Number(req.query.timeoutMs || 0), 2147483647));
       const immediate = await store.takeFeedback(key);
       if (immediate.status !== "waiting") {
+        if (immediate.status === "feedback") markFeedbackDelivered(key, activePolls, deliveredFeedback, events);
         res.json(immediate);
         return;
       }
-      setPollActive(key, activePolls, events, true);
-      const timer = timeoutMs === null ? null : setTimeout(async () => {
-        cleanup();
-        res.json(await store.takeFeedback(key));
-      }, timeoutMs);
-      const onFeedback = async (changedKey) => {
-        if (changedKey !== key || res.headersSent) {
-          return;
-        }
-        cleanup();
-        res.json(await store.takeFeedback(key));
-      };
+      setPollActive(key, activePolls, deliveredFeedback, events, true);
+      const timer = timeoutMs === null ? null : setTimeout(() => respond().catch(next), timeoutMs);
       let cleaned = false;
+      let responding = false;
       const cleanup = () => {
         if (cleaned) return;
         cleaned = true;
         if (timer) clearTimeout(timer);
         events.off("feedback", onFeedback);
         events.off("ended", onFeedback);
-        setPollActive(key, activePolls, events, false);
+        setPollActive(key, activePolls, deliveredFeedback, events, false);
+      };
+      const respond = async () => {
+        if (responding || res.headersSent) return;
+        responding = true;
+        try {
+          const result = await store.takeFeedback(key);
+          if (result.status === "feedback") markFeedbackDelivered(key, activePolls, deliveredFeedback, events);
+          res.json(result);
+        } finally {
+          cleanup();
+        }
+      };
+      const onFeedback = (changedKey) => {
+        if (changedKey !== key || res.headersSent) {
+          return;
+        }
+        respond().catch(next);
       };
       events.on("feedback", onFeedback);
       events.on("ended", onFeedback);
@@ -1266,6 +1280,7 @@ async function serve({ port, stateFile: stateFile2, version = "" }) {
   app.post("/api/:key/end", async (req, res, next) => {
     try {
       await store.endSession(req.params.key);
+      clearFeedbackDelivery(req.params.key, activePolls, deliveredFeedback, events);
       events.emit("ended", req.params.key);
       res.json({ status: "ended" });
     } catch (error) {
@@ -1291,6 +1306,7 @@ async function serve({ port, stateFile: stateFile2, version = "" }) {
       const file = await canonicalFile(req.body.file);
       const key = sessionKey(file);
       await store.endSession(key);
+      clearFeedbackDelivery(key, activePolls, deliveredFeedback, events);
       events.emit("ended", key);
       res.json({ status: "ended" });
     } catch (error) {
@@ -1369,10 +1385,10 @@ data: ${JSON.stringify({ text })}
 `);
         }
       };
-      const sendWorking = (key, working) => {
+      const sendPresence = (key, state) => {
         if (key === req.params.key) {
-          res.write(`event: agent-working
-data: ${JSON.stringify({ working })}
+          res.write(`event: agent-presence
+data: ${JSON.stringify({ state })}
 
 `);
         }
@@ -1381,18 +1397,20 @@ data: ${JSON.stringify({ working })}
 data: ${JSON.stringify({ chat: session?.chat || [] })}
 
 `);
-      res.write(`event: agent-working
-data: ${JSON.stringify({ working: !activePolls.has(req.params.key) })}
+      res.write(
+        `event: agent-presence
+data: ${JSON.stringify({ state: computePresence(req.params.key, activePolls, deliveredFeedback) })}
 
-`);
+`
+      );
       events.on("reload", sendReload);
       events.on("agent-reply", sendAgentReply);
-      events.on("agent-working", sendWorking);
+      events.on("agent-presence", sendPresence);
       req.on("close", () => {
         sseClients.delete(res);
         events.off("reload", sendReload);
         events.off("agent-reply", sendAgentReply);
-        events.off("agent-working", sendWorking);
+        events.off("agent-presence", sendPresence);
       });
     } catch (error) {
       next(error);
@@ -1497,7 +1515,8 @@ function watchSession(session, watchers, events) {
   });
   watchers.set(session.key, watcher);
 }
-function setPollActive(key, activePolls, events, active) {
+function setPollActive(key, activePolls, deliveredFeedback, events, active) {
+  const previousPresence = computePresence(key, activePolls, deliveredFeedback);
   const count = activePolls.get(key) || 0;
   const nextCount = active ? count + 1 : Math.max(0, count - 1);
   if (nextCount === count) return;
@@ -1505,9 +1524,31 @@ function setPollActive(key, activePolls, events, active) {
     activePolls.delete(key);
   } else {
     activePolls.set(key, nextCount);
+    deliveredFeedback.delete(key);
   }
-  if (count > 0 === nextCount > 0) return;
-  events.emit("agent-working", key, nextCount === 0);
+  const nextPresence = computePresence(key, activePolls, deliveredFeedback);
+  if (nextPresence !== previousPresence) events.emit("agent-presence", key, nextPresence);
+}
+function markFeedbackDelivered(key, activePolls, deliveredFeedback, events) {
+  const previousPresence = computePresence(key, activePolls, deliveredFeedback);
+  deliveredFeedback.add(key);
+  const nextPresence = computePresence(key, activePolls, deliveredFeedback);
+  if (nextPresence !== previousPresence) {
+    events.emit("agent-presence", key, nextPresence);
+  }
+}
+function clearFeedbackDelivery(key, activePolls, deliveredFeedback, events) {
+  const previousPresence = computePresence(key, activePolls, deliveredFeedback);
+  deliveredFeedback.delete(key);
+  const nextPresence = computePresence(key, activePolls, deliveredFeedback);
+  if (nextPresence !== previousPresence) {
+    events.emit("agent-presence", key, nextPresence);
+  }
+}
+function computePresence(key, activePolls, deliveredFeedback) {
+  if (activePolls.has(key)) return "listening";
+  if (deliveredFeedback.has(key)) return "working";
+  return "waiting";
 }
 function createChromeHtml(session) {
   const fileInputSize = Math.max(1, session.file.length);
@@ -1522,7 +1563,7 @@ function createChromeHtml(session) {
 </head>
 <body class="lavish">
 <div class="bar"><div class="brand"><span class="brand-mark">Lavish</span><span class="brand-support">Editor</span></div><div class="divider" aria-hidden="true"></div><div class="file-wrap" title="${escapeHtml(session.file)}"><input class="file-input" id="filePath" readonly size="${fileInputSize}" value="${escapeHtml(session.file)}"><button class="copy-button" id="copyPath" type="button">Copy Path</button></div><button class="button secondary annotation-on" id="annotation">Annotation: On</button><button class="button danger" id="end">End Session</button></div>
-<div class="layout"><div class="frame"><iframe id="artifact" sandbox="allow-scripts allow-forms allow-popups allow-downloads" src="/artifact/${session.key}/index.html"></iframe></div><aside class="panel"><h2>Conversation</h2><div class="chat" id="chatLog"></div><div class="composer"><div class="annotation-pills" id="annotationPills"></div><textarea id="chatInput" placeholder="Write a message for the agent..."></textarea><div class="actions"><button class="button" id="send">Send to Agent</button></div></div></aside></div>
+<div class="layout"><div class="frame"><iframe id="artifact" sandbox="allow-scripts allow-forms allow-popups allow-downloads" src="/artifact/${session.key}/index.html"></iframe></div><aside class="panel"><h2>Conversation</h2><div class="chat" id="chatLog"></div><div class="composer"><div class="presence-banner" id="presenceBanner" hidden>Your agent is not listening. If this persists, ask your agent to poll for updates from Lavish.</div><div class="annotation-pills" id="annotationPills"></div><textarea id="chatInput" placeholder="Write a message for the agent..."></textarea><div class="actions"><button class="button" id="send">Send to Agent</button></div></div></aside></div>
 <script id="lavish-session" type="application/json">${sessionJson}</script>
 <script src="/chrome-client.js"></script>
 </body>
@@ -1717,7 +1758,7 @@ 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. 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";
+var VERSION = "0.1.10";
 async function run(argv) {
   await ensureStateDir();
   const normalizedArgv = normalizeArgv(argv);
@@ -1834,7 +1875,7 @@ function createPlaybookOutput(args) {
 function createOpenOutput({ file, url, status }) {
   return {
     session: { file, url, status },
-    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.`
+    next_step: `Do not respond to the user just yet. Now you must 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) {
@@ -1886,7 +1927,7 @@ function createPollOutput({ file, response }) {
       session: { file, status: "feedback" },
       dom_snapshot: response.dom_snapshot || "",
       prompts: response.prompts || [],
-      next_step: `Apply the requested changes to ${file}, then run \`lavish-axi poll ${file} --agent-reply "<message for the user>"\` without --timeout-ms unless the user ended the session. The poll command waits until the user sends more feedback or ends the session; do not set a short shell timeout, or set the shell timeout above 10 minutes.`
+      next_step: `Apply the requested changes to ${file}. Do not respond to the user just yet. Now you must run \`lavish-axi poll ${file} --agent-reply "<message for the user>"\` without --timeout-ms unless the user ended the session. The poll command waits until the user sends more feedback or ends the session; do not set a short shell timeout, or set the shell timeout above 10 minutes.`
     };
   }
   if (response.status === "ended") {

package/package.json

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