lavish-axi 0.1.17 → 0.1.19

package/README.md

@@ -51,6 +51,10 @@ Just tell your agent:
 Use `npx lavish-axi` to write a product or technical plan for what we discussed.
 ```
 
+That works with zero setup - Lavish is an AXI, so any capable agent can run the CLI directly.
+
+To make your agent reach for Lavish on its own (without you naming it every time), install the agent hooks as instructed below.
+
 ## Install
 
 **npm**
@@ -69,6 +73,23 @@ pnpm run build
 pnpm link
 ```
 
+## Set Up Agent Hooks (recommended)
+
+Lavish does not install agent hooks automatically, which means your agent would not know to use it in a fresh session.
+
+Run this once to opt in:
+
+```sh
+lavish-axi setup hooks
+```
+
+This installs a `SessionStart` hook for **Claude Code**, **Codex**, and **OpenCode** that feeds Lavish's ambient context (open sessions, visualization playbooks, and usage guidance) into your agent at the start of each session.
+With the hook installed, your agent learns to turn complex responses into rich, reviewable HTML artifacts proactively - no need to mention `lavish-axi` by name.
+
+**Restart your agent session after running this** so the new hook takes effect.
+
+Prefer not to install hooks? Lavish still works fully as a plain CLI - just tell your agent to `npx lavish-axi <file.html>` as shown in the Quick Start.
+
 ## How It Works
 
 ```
@@ -98,9 +119,11 @@ pnpm link
 - **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. Choose a design system in priority order: follow a user-requested look first, match the current project's design system or conventions next, and otherwise run `lavish-axi design` for a copy-pasteable Tailwind CSS v4 + DaisyUI v5 CDN fallback.
 - **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** - 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.
+- **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.
 - **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 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.
+- **Server cleanup** - The detached server stops after the last session ends when nothing is connected, or after `LAVISH_AXI_IDLE_TIMEOUT_MS` (default 30 minutes) with no browser or poll connections.
+  Set `LAVISH_AXI_IDLE_TIMEOUT_MS=0` or `off` to disable idle self-shutdown.
 - **Local-first state** - Session state stays under `.lavish-axi/` in the workspace.
 
 ## CLI Reference
@@ -111,6 +134,7 @@ pnpm link
 | `lavish-axi <html-file>`      | Open or resume a Lavish Editor session.                                                                                  |
 | `lavish-axi poll <html-file>` | Long-poll until the user sends feedback or ends the session.                                                             |
 | `lavish-axi end <html-file>`  | End a session.                                                                                                           |
+| `lavish-axi stop`             | Shut down the background server.                                                                                         |
 | `lavish-axi playbook [id]`    | List focused artifact guidance or show one playbook.                                                                     |
 | `lavish-axi design`           | Show CDN snippet + DaisyUI component reference (opt-in).                                                                 |
 | `lavish-axi setup hooks`      | Install or repair optional SessionStart hooks for Claude Code, Codex, and OpenCode; restart the agent session afterward. |
@@ -125,6 +149,7 @@ Known playbook IDs: `diagram`, `table`, `comparison`, `plan`, `diff`, `input`, `
 | `lavish-axi <html-file>` | `--no-open`           | Ensure the server/session exists without opening another browser window.                                                                                                                                                            |
 | `lavish-axi poll`        | `--agent-reply "..."` | Show the agent's reply in the existing browser chat before polling again.                                                                                                                                                           |
 | `lavish-axi poll`        | `--timeout-ms <ms>`   | Test/debug escape hatch only; agents should normally omit it.                                                                                                                                                                       |
+| `lavish-axi stop`        | `--port <port>`       | Shut down a server running on a non-default port.                                                                                                                                                                                   |
 | `lavish-axi server`      | `--verbose`           | Log session and watcher events to stderr; can also be enabled with `LAVISH_AXI_DEBUG=1`. Detached server output is appended to `~/.lavish-axi/server.log` (or `LAVISH_AXI_STATE_DIR/server.log`) for startup and crash diagnostics. |
 
 ## Development

package/dist/cli.mjs

@@ -642,7 +642,9 @@ var PLAYBOOKS = [
       "Show queued or selected state clearly so the user trusts what will be sent back."
     ],
     design_rules: [
-      "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.",
+      "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.",
+      "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.",
@@ -656,7 +658,8 @@ var PLAYBOOKS = [
     ],
     lavish_notes: [
       "Lavish is strongest when the artifact becomes a focused review surface and not just a static page.",
-      `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>\`.`,
+      `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>\`.`,
       "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."
     ]
@@ -779,7 +782,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) || isLavishAction(ancestor)) return null;
+    if (isLavishUi(ancestor) || isLavishAction(ancestor) || isInteractiveControl(ancestor)) return null;
     const commonAncestorSelector = selector(ancestor);
     const target = {
       type: "text-range",
@@ -805,6 +808,9 @@ function createArtifactSdk() {
   function isLavishAction(el) {
     return !!(el && el.closest && el.closest("[data-lavish-action]"));
   }
+  function isInteractiveControl(el) {
+    return !!(el && el.closest && el.closest("button,input,select,textarea,option,optgroup,label,[contenteditable]:not([contenteditable='false'])"));
+  }
   function highlightElement(el) {
     if (!el) return;
     el.style.outline = "var(--lavish-annotate-outline,2px solid #f4c95d)";
@@ -837,7 +843,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}[data-lavish-action],[data-lavish-action] *{cursor:pointer!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}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();
@@ -971,7 +977,8 @@ function createArtifactSdk() {
   document.addEventListener(
     "mouseover",
     (event) => {
-      if (!annotationMode || isLavishUi(event.target) || isLavishAction(event.target)) return;
+      if (!annotationMode || isLavishUi(event.target) || isLavishAction(event.target) || isInteractiveControl(event.target))
+        return;
       if (event.target === selected) return;
       if (hovered && hovered !== selected) clearHighlight(hovered);
       hovered = event.target;
@@ -992,7 +999,8 @@ function createArtifactSdk() {
   document.addEventListener(
     "mouseup",
     (event) => {
-      if (!annotationMode || isLavishUi(event.target) || isLavishAction(event.target)) return;
+      if (!annotationMode || isLavishUi(event.target) || isLavishAction(event.target) || isInteractiveControl(event.target))
+        return;
       const c = textSelectionContext(document.getSelection());
       if (!c) return;
       ignoreNextClick = true;
@@ -1003,7 +1011,8 @@ function createArtifactSdk() {
   document.addEventListener(
     "click",
     (event) => {
-      if (!annotationMode || isLavishUi(event.target) || isLavishAction(event.target)) return;
+      if (!annotationMode || isLavishUi(event.target) || isLavishAction(event.target) || isInteractiveControl(event.target))
+        return;
       event.preventDefault();
       event.stopPropagation();
       if (ignoreNextClick) {
@@ -1195,7 +1204,24 @@ var designAssetUrls = {
     type: "application/javascript"
   }
 };
-async function serve({ port, stateFile: stateFile2, version = "", debug = false, log = null, pollHeartbeatMs = 15e3 }) {
+var DEFAULT_IDLE_TIMEOUT_MS = 30 * 6e4;
+function resolveIdleTimeoutMs(env = process.env) {
+  const raw = env.LAVISH_AXI_IDLE_TIMEOUT_MS?.trim();
+  if (raw === void 0 || raw === "") return DEFAULT_IDLE_TIMEOUT_MS;
+  if (raw === "0" || raw.toLowerCase() === "off") return null;
+  const value = Number(raw);
+  if (!Number.isFinite(value) || value <= 0) return DEFAULT_IDLE_TIMEOUT_MS;
+  return value;
+}
+async function serve({
+  port,
+  stateFile: stateFile2,
+  version = "",
+  debug = false,
+  log = null,
+  pollHeartbeatMs = 15e3,
+  idleTimeoutMs = resolveIdleTimeoutMs()
+}) {
   const app = express();
   const store = new SessionStore(stateFile2);
   const events = new EventEmitter();
@@ -1267,6 +1293,7 @@ async function serve({ port, stateFile: stateFile2, version = "", debug = false,
         heartbeat.unref?.();
       }
       setPollActive(key, activePolls, deliveredFeedback, events, true);
+      refreshIdleTimer();
       const timer = timeoutMs === null ? null : setTimeout(() => respond().catch(handleRespondError), timeoutMs);
       let cleaned = false;
       let responding = false;
@@ -1278,6 +1305,7 @@ async function serve({ port, stateFile: stateFile2, version = "", debug = false,
         events.off("feedback", onFeedback);
         events.off("ended", onFeedback);
         setPollActive(key, activePolls, deliveredFeedback, events, false);
+        refreshIdleTimer();
       };
       const respond = async () => {
         if (responding || res.writableEnded) return;
@@ -1326,6 +1354,7 @@ async function serve({ port, stateFile: stateFile2, version = "", debug = false,
       clearFeedbackDelivery(req.params.key, activePolls, deliveredFeedback, events);
       events.emit("ended", req.params.key);
       res.json({ status: "ended" });
+      await shutdownIfNoLiveSessions();
     } catch (error) {
       next(error);
     }
@@ -1352,6 +1381,7 @@ async function serve({ port, stateFile: stateFile2, version = "", debug = false,
       clearFeedbackDelivery(key, activePolls, deliveredFeedback, events);
       events.emit("ended", key);
       res.json({ status: "ended" });
+      await shutdownIfNoLiveSessions();
     } catch (error) {
       next(error);
     }
@@ -1414,6 +1444,7 @@ async function serve({ port, stateFile: stateFile2, version = "", debug = false,
         connection: "keep-alive"
       });
       sseClients.add(res);
+      refreshIdleTimer();
       const session = await store.findByKey(req.params.key);
       const sendReload = (key) => {
         if (key === req.params.key) {
@@ -1454,6 +1485,7 @@ data: ${JSON.stringify({ state: computePresence(req.params.key, activePolls, del
         events.off("reload", sendReload);
         events.off("agent-reply", sendAgentReply);
         events.off("agent-presence", sendPresence);
+        refreshIdleTimer();
       });
     } catch (error) {
       next(error);
@@ -1499,6 +1531,10 @@ data: ${JSON.stringify({ state: computePresence(req.params.key, activePolls, del
   function shutdown() {
     if (shuttingDown) return;
     shuttingDown = true;
+    if (idleTimer) {
+      clearTimeout(idleTimer);
+      idleTimer = null;
+    }
     for (const res of sseClients) {
       try {
         res.write("event: chrome-reload\ndata: {}\n\n");
@@ -1517,6 +1553,35 @@ data: ${JSON.stringify({ state: computePresence(req.params.key, activePolls, del
       httpServer.closeAllConnections();
     }
   }
+  let idleTimer = null;
+  function refreshIdleTimer() {
+    if (idleTimer) {
+      clearTimeout(idleTimer);
+      idleTimer = null;
+    }
+    if (shuttingDown || idleTimeoutMs == null) return;
+    if (sseClients.size > 0 || activePolls.size > 0) return;
+    idleTimer = setTimeout(() => {
+      idleTimer = null;
+      if (!shuttingDown && sseClients.size === 0 && activePolls.size === 0) {
+        logEvent?.(`idle for ${idleTimeoutMs}ms with no connections, shutting down`);
+        shutdown();
+      }
+    }, idleTimeoutMs);
+    idleTimer.unref?.();
+  }
+  async function shutdownIfNoLiveSessions() {
+    if (sseClients.size > 0 || activePolls.size > 0) return;
+    try {
+      const sessions = await store.listSessions();
+      if (sessions.every((session) => session.status === "ended")) {
+        logEvent?.("last open session ended with no live connections, shutting down");
+        setImmediate(shutdown);
+      }
+    } catch {
+    }
+  }
+  refreshIdleTimer();
   return {
     port: httpServer.address().port,
     close: async () => {
@@ -1832,9 +1897,9 @@ function normalizePagePath(path5) {
 }
 
 // src/cli.js
-var COMMANDS = /* @__PURE__ */ new Set(["open", "poll", "end", "server", "playbook", "design", "setup"]);
+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.17";
+var VERSION = "0.1.19";
 async function run(argv) {
   await ensureStateDir();
   const normalizedArgv = normalizeArgv(argv);
@@ -1862,6 +1927,7 @@ async function run(argv) {
         open: openCommand,
         poll: pollCommand,
         end: endCommand,
+        stop: stopCommand,
         playbook: playbookCommand,
         design: designCommand,
         setup: setupCommand,
@@ -1927,6 +1993,7 @@ function createHomeOutput({ bin, sessions, includeSessions = true }) {
       "Lavish serves the html file through a local express.js server. If your html needs to reference other filesystem assets such as images, CSS, fonts, and local scripts, copy them into the same directory as the HTML file, then reference them with relative paths from that directory. Never prepend `/` to those asset paths - root paths won't work",
       "Run `lavish-axi poll <html-file>` to wait for user feedback",
       "Run `lavish-axi end <html-file>` to end a session",
+      "Run `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 `lavish-axi playbook <playbook_id>` for focused artifact guidance",
       DESIGN_SYSTEM_HINT,
       "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"
@@ -2028,6 +2095,35 @@ async function endCommand(args) {
   const response = await postJson(`${baseUrl}/api/end`, { file: absolute });
   return { session: { file: absolute, status: response.status || "ended" } };
 }
+async function stopCommand(args) {
+  const port = Number(flagValue(args, "--port") || defaultPort());
+  const baseUrl = `http://${LOOPBACK_HOST}:${port}`;
+  return shutdownServerOnPort(port, { baseUrl, currentVersion: VERSION });
+}
+async function shutdownServerOnPort(port, {
+  baseUrl = `http://${LOOPBACK_HOST}:${port}`,
+  currentVersion = VERSION,
+  fetchHealth: healthFetcher = fetchHealth,
+  requestShutdown: shutdownRequester = requestShutdown,
+  waitForPortFree: portFreeWaiter = waitForPortFree,
+  killProcessOnPort: portKiller = killProcessOnPort,
+  processMatchesLavish = processOnPortMatchesLavish
+} = {}) {
+  const health = await healthFetcher(baseUrl);
+  if (!health) {
+    return { server: { status: "not-running", port } };
+  }
+  if (!await canControlServerOnPort(port, health, processMatchesLavish)) {
+    return { server: { status: "not-lavish", port } };
+  }
+  await shutdownRequester(baseUrl);
+  let freed = await portFreeWaiter(baseUrl, 3e3);
+  if (!freed && shouldKillProcessOnPort(currentVersion, health)) {
+    portKiller(port);
+    freed = await portFreeWaiter(baseUrl, 3e3);
+  }
+  return { server: { status: freed ? "stopped" : "stopping", port } };
+}
 async function playbookCommand(args) {
   return createPlaybookOutput(args);
 }
@@ -2091,6 +2187,11 @@ async function ensureServer({ forceRestart = false } = {}) {
     return baseUrl;
   }
   if (existing) {
+    if (!await canControlServerOnPort(port, existing, processOnPortMatchesLavish)) {
+      throw new AxiError(`Port ${port} is occupied by a non-Lavish server`, "SERVER_ERROR", [
+        `Stop the process using port ${port}, or set LAVISH_AXI_PORT to another port`
+      ]);
+    }
     await requestShutdown(baseUrl);
     const freed = await waitForPortFree(baseUrl, 2e3);
     if (!freed) {
@@ -2132,6 +2233,12 @@ function shouldKillProcessOnPort(currentVersion, healthBody) {
   if (healthBody.app !== "lavish-axi") return false;
   return healthBody.version !== currentVersion;
 }
+async function canControlServerOnPort(port, healthBody, processMatchesLavish) {
+  if (!healthBody || typeof healthBody !== "object") return false;
+  if (healthBody.app === "lavish-axi") return true;
+  if (typeof healthBody.version === "string" && healthBody.version !== "") return false;
+  return processMatchesLavish(port);
+}
 async function fetchHealth(baseUrl) {
   try {
     const response = await fetch(`${baseUrl}/health`);
@@ -2171,6 +2278,23 @@ function killProcessOnPort(port) {
   } catch {
   }
 }
+function processOnPortMatchesLavish(port) {
+  try {
+    const pids = spawnSync("lsof", ["-t", `-iTCP:${port}`, "-sTCP:LISTEN"], { encoding: "utf8" });
+    if (pids.status !== 0) return false;
+    for (const line of pids.stdout.split("\n")) {
+      const pid = Number(line.trim());
+      if (!Number.isInteger(pid) || pid <= 0 || pid === process.pid) continue;
+      const command = spawnSync("ps", ["-p", String(pid), "-o", "command="], { encoding: "utf8" });
+      if (command.status === 0 && /lavish-axi/.test(command.stdout)) {
+        return true;
+      }
+    }
+  } catch {
+    return false;
+  }
+  return false;
+}
 async function startServer(port) {
   await ensureStateDir();
   const entry = resolveServerEntry();
@@ -2272,6 +2396,7 @@ Usage:
   lavish-axi <html-file>
   lavish-axi poll <html-file> [--agent-reply "..."]
   lavish-axi end <html-file>
+  lavish-axi stop
   lavish-axi playbook [playbook_id]
   lavish-axi design
   lavish-axi setup hooks
@@ -2293,6 +2418,10 @@ This command long-polls indefinitely for queued user prompts, then returns them
   end: `Usage: lavish-axi end <html-file>
 
 End a Lavish Editor session.
+`,
+  stop: `Usage: lavish-axi stop [--port <port>]
+
+Shut down the background Lavish Editor server. The server also stops itself when no browser or poll has been connected for a while (LAVISH_AXI_IDLE_TIMEOUT_MS, default 30m) and immediately when the last session ends with nothing connected.
 `,
   playbook: `Usage: lavish-axi playbook [playbook_id]
 

package/package.json

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