lavish-axi 0.1.9 → 0.1.11

package/README.md

@@ -95,7 +95,8 @@ 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">`.
+- **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. Run `lavish-axi design` for a copy-pasteable CDN snippet to opt in to Tailwind CSS v4 + DaisyUI v5, or use any other design system (or none).
+- **Live reload** - Lavish watches the HTML artifact file by default. 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.
 - **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.
@@ -110,17 +111,19 @@ pnpm link
 | `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 playbook [id]`    | List focused artifact guidance or show one playbook.         |
-| `lavish-axi design`           | Show the injected Tailwind CSS and DaisyUI design reference. |
+| `lavish-axi design`           | Show CDN snippet + DaisyUI component reference (opt-in).     |
+| `lavish-axi server`           | Run the local Lavish Editor server.                          |
 
 Known playbook IDs: `diagram`, `table`, `comparison`, `plan`, `diff`, `input`, `slides`.
 
 ### Flags
 
-| Command                  | Flag                  | Description                                                               |
-| ------------------------ | --------------------- | ------------------------------------------------------------------------- |
-| `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.             |
+| Command                  | Flag                  | Description                                                                              |
+| ------------------------ | --------------------- | ---------------------------------------------------------------------------------------- |
+| `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 server`      | `--verbose`           | Log session and watcher events to stderr; can also be enabled with `LAVISH_AXI_DEBUG=1`. |
 
 ## Development
 

package/dist/cli.mjs

@@ -10,7 +10,17 @@ import { fileURLToPath } from "node:url";
 import { AxiError, runAxiCli } from "axi-sdk-js";
 
 // src/design-reference.js
-var DESIGN_SYSTEM_HINT = 'Lavish auto-injects Tailwind CSS browser runtime v4, DaisyUI v5, and DaisyUI themes into artifacts. Do not add these libraries separately. Set <html data-theme="luxury"> or another DaisyUI theme as appropriate, then use DaisyUI/Tailwind classes directly. Prefer using DaisyUI/Tailwind for styling to avoid having to spend tokens on writing a custom stylesheet, but in cases where you need precise control on the artifact, you can opt out of the auto-injected styles by adding <meta name="lavish-design" content="off">. Run `lavish-axi design` for technical reference.';
+var TAILWIND_BROWSER_VERSION = "4.2.4";
+var DAISYUI_VERSION = "5.5.19";
+var DESIGN_CDN_URLS = {
+  tailwind: `https://cdn.jsdelivr.net/npm/@tailwindcss/browser@${TAILWIND_BROWSER_VERSION}/dist/index.global.js`,
+  daisyui: `https://cdn.jsdelivr.net/npm/daisyui@${DAISYUI_VERSION}/daisyui.css`,
+  daisyuiThemes: `https://cdn.jsdelivr.net/npm/daisyui@${DAISYUI_VERSION}/themes.css`
+};
+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. Tailwind CSS browser runtime v4 and DaisyUI v5 are available via CDN; run `lavish-axi design` for a copy-pasteable CDN snippet plus component reference. Prefer that CDN snippet over hand-writing styles unless explicitly instructed otherwise by the user. If the user asks for any other design system or plain HTML, follow that request.";
 var DAISYUI_THEMES = [
   "light",
   "dark",
@@ -51,11 +61,13 @@ var DAISYUI_THEMES = [
 function createDesignOutput() {
   return {
     design: {
-      summary: "Lavish artifacts already have Tailwind CSS browser runtime v4, DaisyUI v5, and DaisyUI themes available.",
-      rule: "Do not add Tailwind or DaisyUI script/link tags yourself.",
-      opt_out: 'Add `<meta name="lavish-design" content="off">` to disable injection for exact-fidelity artifacts.',
+      summary: "Lavish does not auto-inject any design system. Artifacts stay portable HTML. Paste the CDN snippet below into your `<head>` to use Tailwind CSS browser runtime v4 + DaisyUI v5 + themes. Prefer this 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 },
       latest_docs: "https://daisyui.com/components/",
-      docs_note: "Use this command for common syntax. Read the latest DaisyUI docs for full details when using advanced or unfamiliar components."
+      docs_note: "Use this command for common syntax. Read the latest DaisyUI docs for full details when using advanced or unfamiliar components.",
+      other_design_systems: "If the user asks for a different design system (Bootstrap, custom CSS, plain HTML, etc.), use that instead - Lavish does not require DaisyUI."
     },
     theme_usage: [
       'Set the page theme with `<html data-theme="luxury">`.',
@@ -992,25 +1004,11 @@ function createArtifactSdk() {
 // src/html-transform.js
 function injectLavishSdk(html, key) {
   const script = `<script src="/sdk.js?key=${encodeURIComponent(key)}"></script>`;
-  const design = shouldInjectDesign(html) ? '<link rel="stylesheet" href="/design/daisyui.css" data-lavish-design><script src="/design/tailwindcss-browser.js" data-lavish-design></script><link rel="stylesheet" href="/design/daisyui-themes.css" data-lavish-design>' : "";
-  const withDesign = injectDesignAssets(html, design);
-  if (/<\/body\s*>/i.test(withDesign)) {
-    return withDesign.replace(/<\/body\s*>/i, `${script}</body>`);
-  }
-  return `${withDesign}
-${script}`;
-}
-function shouldInjectDesign(html) {
-  if (/data-lavish-design/i.test(html)) return false;
-  return !/<meta\b(?=[^>]*name=["']lavish-design["'])(?=[^>]*content=["']off["'])[^>]*>/i.test(html);
-}
-function injectDesignAssets(html, design) {
-  if (!design) return html;
-  if (/<head\b[^>]*>/i.test(html)) {
-    return html.replace(/<head\b[^>]*>/i, (match) => `${match}${design}`);
+  if (/<\/body\s*>/i.test(html)) {
+    return html.replace(/<\/body\s*>/i, `${script}</body>`);
   }
   return `${html}
-${design}`;
+${script}`;
 }
 
 // src/session-store.js
@@ -1181,7 +1179,7 @@ var designAssetUrls = {
     type: "application/javascript"
   }
 };
-async function serve({ port, stateFile: stateFile2, version = "" }) {
+async function serve({ port, stateFile: stateFile2, version = "", debug = false, log = null }) {
   const app = express();
   const store = new SessionStore(stateFile2);
   const events = new EventEmitter();
@@ -1189,6 +1187,10 @@ async function serve({ port, stateFile: stateFile2, version = "" }) {
   const activePolls = /* @__PURE__ */ new Map();
   const deliveredFeedback = /* @__PURE__ */ new Set();
   const sseClients = /* @__PURE__ */ new Set();
+  const verbose = debug || process.env.LAVISH_AXI_DEBUG === "1";
+  const writeLog = typeof log === "function" ? log : (line) => process.stderr.write(`${line}
+`);
+  const logEvent = verbose ? (line) => writeLog(`[lavish] ${line}`) : null;
   app.use(express.json({ limit: "2mb" }));
   app.get("/health", (req, res) => {
     res.json({ ok: true, app: "lavish-axi", version });
@@ -1211,7 +1213,8 @@ async function serve({ port, stateFile: stateFile2, version = "" }) {
       if (existing?.status === "ended") {
         clearFeedbackDelivery(key, activePolls, deliveredFeedback, events);
       }
-      watchSession(session, watchers, events);
+      logEvent?.(`session opened key=${key} file=${file}`);
+      await watchSession(session, watchers, events, logEvent);
       res.json({ key, file, url, status: "opened" });
     } catch (error) {
       next(error);
@@ -1320,7 +1323,7 @@ async function serve({ port, stateFile: stateFile2, version = "" }) {
         res.status(404).send("Session not found");
         return;
       }
-      watchSession(session, watchers, events);
+      await watchSession(session, watchers, events, logEvent);
       res.type("html").send(createChromeHtml(session));
     } catch (error) {
       next(error);
@@ -1498,23 +1501,55 @@ function resolveArtifactAsset(root, assetPath) {
   }
   return file;
 }
-function watchSession(session, watchers, events) {
+async function watchSession(session, watchers, events, logEvent) {
   if (watchers.has(session.key)) {
     return;
   }
-  const root = path3.dirname(session.file);
-  const watcher = chokidar.watch(root, {
-    ignored: /(^|[/\\])(\.git|node_modules|dist|build|\.lavish-axi)([/\\]|$)/,
-    ignoreInitial: true,
-    awaitWriteFinish: { stabilityThreshold: 100, pollInterval: 50 }
-  });
+  const target = await resolveWatchTarget(session);
+  if (watchers.has(session.key)) {
+    return;
+  }
+  logEvent?.(`watch session=${session.key} scope=${target.scope} path=${target.path}`);
+  const watcher = chokidar.watch(target.path, target.options);
   let timer = null;
-  watcher.on("all", () => {
+  watcher.on("all", (event, file) => {
+    logEvent?.(`watch event=${event} session=${session.key} file=${file ?? ""}`);
     clearTimeout(timer);
     timer = setTimeout(() => events.emit("reload", session.key), 100);
   });
+  watcher.on("error", (error) => {
+    const message = error instanceof Error ? error.message : String(error);
+    logEvent?.(`watch error session=${session.key} message=${message}`);
+  });
   watchers.set(session.key, watcher);
 }
+async function resolveWatchTarget(session) {
+  const baseOptions = {
+    ignoreInitial: true,
+    awaitWriteFinish: { stabilityThreshold: 100, pollInterval: 50 }
+  };
+  try {
+    const html = await readFile2(session.file, "utf8");
+    if (hasLiveReloadRootOptIn(html)) {
+      return {
+        path: path3.dirname(session.file),
+        scope: "directory",
+        options: {
+          ...baseOptions,
+          ignored: /(^|[/\\])(\.git|node_modules|dist|build|\.lavish-axi)([/\\]|$)/
+        }
+      };
+    }
+  } catch {
+  }
+  return { path: session.file, scope: "file", options: baseOptions };
+}
+function hasLiveReloadRootOptIn(html) {
+  if (typeof html !== "string") return false;
+  const searchableHtml = html.replace(/<!--[\s\S]*?-->/g, "");
+  if (/<html\b[^>]*\sdata-lavish-live-reload-root(?:[\s=>/]|$)[^>]*>/i.test(searchableHtml)) return true;
+  return /<meta\b(?=[^>]*name=["']lavish-live-reload["'])(?=[^>]*content=["']root["'])[^>]*>/i.test(searchableHtml);
+}
 function setPollActive(key, activePolls, deliveredFeedback, events, active) {
   const previousPresence = computePresence(key, activePolls, deliveredFeedback);
   const count = activePolls.get(key) || 0;
@@ -1758,7 +1793,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.9";
+var VERSION = "0.1.11";
 async function run(argv) {
   await ensureStateDir();
   const normalizedArgv = normalizeArgv(argv);
@@ -1875,7 +1910,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) {
@@ -1927,7 +1962,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") {
@@ -1956,7 +1991,8 @@ async function designCommand() {
 }
 async function serverCommand(args) {
   const port = Number(flagValue(args, "--port") || defaultPort());
-  const server = await serve({ port, stateFile: stateFile(), version: VERSION });
+  const debug = args.includes("--verbose") || process.env.LAVISH_AXI_DEBUG === "1";
+  const server = await serve({ port, stateFile: stateFile(), version: VERSION, debug });
   await server.done;
   return "";
 }
@@ -2152,11 +2188,11 @@ Examples:
 `,
   design: `Usage: lavish-axi design
 
-Show technical reference for the Tailwind CSS browser runtime v4, DaisyUI v5 components, and DaisyUI themes that Lavish auto-injects into artifacts. Do not add these libraries separately.
+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. Prefer the CDN snippet over hand-writing styles unless explicitly instructed otherwise by the user. If the user asks for another design system or plain HTML, follow that request.
 `,
-  server: `Usage: lavish-axi server [--port 4387]
+  server: `Usage: lavish-axi server [--port 4387] [--verbose]
 
-Run the local Lavish Editor server.
+Run the local Lavish Editor server. Pass --verbose (or set LAVISH_AXI_DEBUG=1) to log session and watcher events to stderr.
 `
 };
 

package/package.json

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