lavish-axi 0.1.19 → 0.1.21

package/README.md

@@ -73,9 +73,13 @@ pnpm run build
 pnpm link
 ```
 
-## Set Up Agent Hooks (recommended)
+## Teach Your Agent About Lavish (recommended)
 
-Lavish does not install agent hooks automatically, which means your agent would not know to use it in a fresh session.
+Lavish does not wire itself into your agent automatically, so in a fresh session your agent would not know to use it.
+There are two ways to fix that - **you only need one.**
+We recommend the hook.
+
+### Option A: Session hook (recommended)
 
 Run this once to opt in:
 
@@ -88,7 +92,22 @@ With the hook installed, your agent learns to turn complex responses into rich,
 
 **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.
+### Option B: Install as a skill
+
+Prefer the [Agent Skills](https://agentskills.io) format, or use an agent that supports it?
+Install Lavish as a skill with [`npx skills`](https://github.com/vercel-labs/skills):
+
+```sh
+npx skills add kunchenguid/lavish-axi --skill lavish-axi
+```
+
+This drops a `lavish-axi` skill into your agent's skills directory (`.claude/skills/` for example; add `-g` for `~/.claude/skills/`).
+The skill carries the same guidance the hook delivers, but it loads on demand when the agent recognizes a task that calls for a visual artifact, rather than every session.
+It does not surface your live open sessions - run `lavish-axi setup hooks` if you want that ambient context too.
+
+### No setup at all
+
+Lavish also 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
 
@@ -119,7 +138,9 @@ Prefer not to install hooks? Lavish still works fully as a plain CLI - just tell
 - **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** - 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`; 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.
+  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.
 - **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.
@@ -157,6 +178,7 @@ Known playbook IDs: `diagram`, `table`, `comparison`, `plan`, `diff`, `input`, `
 ```sh
 pnpm run check          # Run all verification commands
 pnpm run build          # Bundle the publishable CLI, chrome, and design assets
+pnpm run build:skill    # Regenerate the installable lavish-axi skill
 pnpm test               # Run node:test tests
 pnpm run lint           # Run ESLint
 pnpm run format:check   # Check Prettier formatting

package/dist/chrome-client.js

@@ -3,6 +3,7 @@
 const sessionDataElement = document.getElementById("lavish-session");
 const sessionData = JSON.parse(sessionDataElement?.textContent || "{}");
 const key = String(sessionData.key || "");
+const filePath = String(sessionData.file || "");
 const queueStorageKey = "lavish-axi:queued:" + key;
 const initialChat = Array.isArray(sessionData.initialChat) ? sessionData.initialChat : [];
 
@@ -11,20 +12,40 @@ const annotationPills = /** @type {HTMLDivElement} */ (document.getElementById("
 const chatLog = /** @type {HTMLDivElement} */ (document.getElementById("chatLog"));
 const chatInput = /** @type {HTMLTextAreaElement} */ (document.getElementById("chatInput"));
 const sendButton = /** @type {HTMLButtonElement} */ (document.getElementById("send"));
-const annotationButton = /** @type {HTMLButtonElement} */ (document.getElementById("annotation"));
+const sendCaret = /** @type {HTMLButtonElement} */ (document.getElementById("sendCaret"));
+const sendActions = /** @type {HTMLDivElement} */ (document.getElementById("sendActions"));
+const sendMenu = /** @type {HTMLDivElement} */ (document.getElementById("sendMenu"));
+const sendFromMenuButton = /** @type {HTMLButtonElement} */ (document.getElementById("sendFromMenu"));
+const sendAndEndButton = /** @type {HTMLButtonElement} */ (document.getElementById("sendAndEnd"));
+const annotationSwitch = /** @type {HTMLButtonElement} */ (document.getElementById("annotation"));
+const moreWrap = /** @type {HTMLDivElement} */ (document.getElementById("moreWrap"));
+const moreButton = /** @type {HTMLButtonElement} */ (document.getElementById("moreButton"));
+const moreMenu = /** @type {HTMLDivElement} */ (document.getElementById("moreMenu"));
+const reloadArtifactButton = /** @type {HTMLButtonElement} */ (document.getElementById("reloadArtifact"));
+const copySnapshotButton = /** @type {HTMLButtonElement} */ (document.getElementById("copySnapshot"));
 const endButton = /** @type {HTMLButtonElement} */ (document.getElementById("end"));
-const filePathInput = /** @type {HTMLInputElement} */ (document.getElementById("filePath"));
 const copyPathButton = /** @type {HTMLButtonElement} */ (document.getElementById("copyPath"));
+const copyHint = /** @type {HTMLSpanElement} */ (document.getElementById("copyHint"));
+const copyHintText = /** @type {HTMLSpanElement} */ (document.getElementById("copyHintText"));
 const presenceBanner = /** @type {HTMLDivElement} */ (document.getElementById("presenceBanner"));
+const endedOverlay = /** @type {HTMLDivElement} */ (document.getElementById("endedOverlay"));
+const sendHint = /** @type {HTMLSpanElement} */ (document.getElementById("sendHint"));
 
 const queued = loadQueuedPrompts();
 let annotation = true;
+let ended = false;
 let agentPresence = "waiting";
 let pendingSnapshot = "";
+const snapshotRequests = [];
+let endAfterSubmit = false;
 let workingBubble = null;
 let submitQueuedPromise = null;
 let submitQueuedAgain = false;
 let lastScroll = { x: 0, y: 0 };
+/** @type {ReturnType<typeof setTimeout> | undefined} */
+let copyHintTimer;
+/** @type {ReturnType<typeof setTimeout> | undefined} */
+let sendHintTimer;
 
 function escapeHtml(value) {
   return String(value).replace(
@@ -85,6 +106,63 @@ function render() {
     const closeButton = /** @type {HTMLButtonElement} */ (button);
     closeButton.addEventListener("click", (event) => removeQueuedPrompt(Number(closeButton.dataset.index), event));
   }
+  updateSendState();
+}
+
+function updateSendState() {
+  sendButton.disabled = ended || agentPresence === "working";
+  sendCaret.disabled = ended || agentPresence === "working";
+  sendFromMenuButton.disabled = sendButton.disabled;
+}
+
+function showSendHint() {
+  sendHint.hidden = false;
+  clearTimeout(sendHintTimer);
+  sendHintTimer = setTimeout(() => {
+    sendHint.hidden = true;
+  }, 2600);
+  chatInput.focus();
+}
+
+function hideSendHint() {
+  clearTimeout(sendHintTimer);
+  sendHint.hidden = true;
+}
+
+function setMenuOpen(button, menu, open) {
+  menu.hidden = !open;
+  button.setAttribute("aria-expanded", String(open));
+}
+
+function closeMenus() {
+  setMenuOpen(moreButton, moreMenu, false);
+  setMenuOpen(sendCaret, sendMenu, false);
+}
+
+function toggleMenu(button, menu) {
+  const open = menu.hidden;
+  closeMenus();
+  setMenuOpen(button, menu, open);
+}
+
+async function copyText(text) {
+  try {
+    if (navigator.clipboard && navigator.clipboard.writeText) {
+      await navigator.clipboard.writeText(text);
+      return true;
+    }
+  } catch {
+    // Fall through to the textarea-based fallback below.
+  }
+  const helper = document.createElement("textarea");
+  helper.value = text;
+  helper.style.position = "fixed";
+  helper.style.opacity = "0";
+  document.body.appendChild(helper);
+  helper.select();
+  document.execCommand("copy");
+  helper.remove();
+  return true;
 }
 
 function addChat(role, text) {
@@ -109,8 +187,8 @@ function syncChat(chat) {
 
 function setAgentPresence(state) {
   agentPresence = state === "listening" || state === "working" ? state : "waiting";
-  sendButton.disabled = agentPresence === "working";
-  if (presenceBanner) presenceBanner.hidden = agentPresence !== "waiting";
+  updateSendState();
+  if (presenceBanner) presenceBanner.hidden = ended || agentPresence !== "waiting";
 
   if (agentPresence !== "working") {
     if (workingBubble) workingBubble.remove();
@@ -138,8 +216,14 @@ function postToFrame(message) {
   if (frame.contentWindow) frame.contentWindow.postMessage(message, "*");
 }
 
-function sendQueued() {
-  if (agentPresence === "working") return;
+function requestSnapshot(action) {
+  snapshotRequests.push(action);
+  postToFrame({ type: "lavish:requestSnapshot" });
+}
+
+function sendQueued(endAfter) {
+  if (ended || agentPresence === "working") return;
+  closeMenus();
 
   const text = chatInput.value.trim();
   if (text) {
@@ -149,9 +233,18 @@ function sendQueued() {
     chatInput.value = "";
     render();
   }
-  if (!queued.length) return;
+  if (!queued.length) {
+    if (endAfter) {
+      endSession();
+    } else {
+      showSendHint();
+    }
+    return;
+  }
+  hideSendHint();
 
-  postToFrame({ type: "lavish:requestSnapshot" });
+  if (endAfter) endAfterSubmit = true;
+  requestSnapshot("submit");
 }
 
 async function submitQueued() {
@@ -170,7 +263,14 @@ async function submitQueued() {
     submitQueuedPromise = null;
     const shouldSubmitAgain = submitQueuedAgain;
     submitQueuedAgain = false;
-    if (succeeded && shouldSubmitAgain && queued.length) submitQueued();
+    if (!succeeded) {
+      endAfterSubmit = false;
+    } else if (shouldSubmitAgain && queued.length) {
+      submitQueued();
+    } else if (endAfterSubmit) {
+      endAfterSubmit = false;
+      await endSession();
+    }
   }
 }
 
@@ -192,23 +292,45 @@ async function submitQueuedOnce() {
 }
 
 async function endSession() {
-  await fetch("/api/" + key + "/end", { method: "POST" });
-  document.body.innerHTML =
-    '<div class="bar"><div class="brand"><span class="brand-mark">Lavish</span><span class="brand-support">Editor</span></div></div><main class="ended-view"><section class="ended-card"><div class="ended-title">Session ended.</div><p class="ended-copy">Return to your agent to continue.</p></section></main>';
+  if (ended) return;
+  const response = await fetch("/api/" + key + "/end", { method: "POST" });
+  if (!response.ok) throw new Error("failed to end session");
+  ended = true;
+  closeMenus();
+  annotationSwitch.disabled = true;
+  moreButton.disabled = true;
+  chatInput.disabled = true;
+  updateSendState();
+  if (presenceBanner) presenceBanner.hidden = true;
+  postToFrame({ type: "lavish:setAnnotationMode", enabled: false });
+  endedOverlay.hidden = false;
 }
 
-async function copyFilePath() {
-  try {
-    await navigator.clipboard.writeText(filePathInput.value);
-  } catch {
-    filePathInput.select();
-    document.execCommand("copy");
-  }
+function copyFilePath() {
+  copyText(filePath);
+  copyHint.classList.add("copied");
+  copyHintText.textContent = "Copied";
+  clearTimeout(copyHintTimer);
+  copyHintTimer = setTimeout(() => {
+    copyHint.classList.remove("copied");
+    copyHintText.textContent = "Copy";
+  }, 1600);
+}
+
+function copyDomSnapshot() {
+  closeMenus();
+  requestSnapshot("copy");
+}
+
+function resetFrame() {
+  // The iframe is sandboxed, so reload by resetting the iframe URL from chrome.
+  // eslint-disable-next-line no-self-assign
+  frame.src = frame.src;
+}
 
-  copyPathButton.textContent = "Copied";
-  setTimeout(() => {
-    copyPathButton.textContent = "Copy Path";
-  }, 1200);
+function reloadArtifact() {
+  closeMenus();
+  resetFrame();
 }
 
 async function reloadAfterServerRestart() {
@@ -242,8 +364,13 @@ window.addEventListener("message", (event) => {
     render();
   }
   if (msg.type === "lavish:snapshot") {
-    pendingSnapshot = msg.snapshot || "";
-    submitQueued();
+    const snapshotAction = snapshotRequests.shift() || "submit";
+    if (snapshotAction === "copy") {
+      copyText(msg.snapshot || "");
+    } else {
+      pendingSnapshot = msg.snapshot || "";
+      submitQueued();
+    }
   }
   if (msg.type === "lavish:scroll") {
     lastScroll = { x: Number(msg.x) || 0, y: Number(msg.y) || 0 };
@@ -252,28 +379,47 @@ window.addEventListener("message", (event) => {
   if (msg.type === "lavish:endSession") endSession();
 });
 
-annotationButton.onclick = () => {
+annotationSwitch.onclick = () => {
   annotation = !annotation;
-  annotationButton.textContent = "Annotation: " + (annotation ? "On" : "Off");
-  annotationButton.classList.toggle("annotation-on", annotation);
+  annotationSwitch.setAttribute("aria-pressed", String(annotation));
   postToFrame({ type: "lavish:setAnnotationMode", enabled: annotation });
 };
 
-sendButton.onclick = sendQueued;
+sendButton.onclick = () => sendQueued(false);
+sendFromMenuButton.onclick = () => sendQueued(false);
+sendAndEndButton.onclick = () => sendQueued(true);
+sendCaret.onclick = () => toggleMenu(sendCaret, sendMenu);
+moreButton.onclick = () => toggleMenu(moreButton, moreMenu);
+chatInput.addEventListener("keydown", (event) => {
+  if (event.key === "Enter" && !event.shiftKey && !event.isComposing) {
+    event.preventDefault();
+    sendQueued(false);
+  }
+});
+chatInput.addEventListener("input", hideSendHint);
 copyPathButton.onclick = copyFilePath;
-endButton.onclick = endSession;
+reloadArtifactButton.onclick = reloadArtifact;
+copySnapshotButton.onclick = copyDomSnapshot;
+endButton.onclick = () => {
+  closeMenus();
+  endSession();
+};
+document.addEventListener("mousedown", (event) => {
+  const target = /** @type {Node} */ (event.target);
+  if (!moreMenu.hidden && !moreWrap.contains(target)) setMenuOpen(moreButton, moreMenu, false);
+  if (!sendMenu.hidden && !sendActions.contains(target)) setMenuOpen(sendCaret, sendMenu, false);
+});
+document.addEventListener("keydown", (event) => {
+  if (event.key === "Escape") closeMenus();
+});
 frame.addEventListener("load", () => {
-  postToFrame({ type: "lavish:setAnnotationMode", enabled: annotation });
+  postToFrame({ type: "lavish:setAnnotationMode", enabled: annotation && !ended });
   // Replay the pre-reload scroll position so hot reloads don't jump the artifact to the top.
   postToFrame({ type: "lavish:restoreScroll", x: lastScroll.x, y: lastScroll.y });
 });
 
 const events = new EventSource("/events/" + key);
-events.addEventListener("reload", () => {
-  // The iframe is sandboxed, so reload by resetting the iframe URL from chrome.
-  // eslint-disable-next-line no-self-assign
-  frame.src = frame.src;
-});
+events.addEventListener("reload", () => resetFrame());
 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 || []));

package/dist/chrome.css

@@ -165,56 +165,217 @@ body.lavish {
   position: relative;
   top: 1px;
 }
-.divider {
-  width: 1px;
-  height: 22px;
-  background: var(--border);
-  flex: 0 0 auto;
+.spacer {
+  flex: 1;
 }
-.file-wrap {
-  display: flex;
+.annotate-switch {
+  display: inline-flex;
   align-items: center;
-  height: 22px;
   gap: 8px;
-  flex: 1 1 auto;
-  min-width: 0;
   color: var(--fg-muted);
-  font-family: var(--font-mono);
-  font-size: 12px;
+  font-family: inherit;
+  font-size: var(--text-sm);
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+  background: none;
+  border: 0;
+  padding: 0;
+  flex-shrink: 0;
 }
-.file-input {
-  display: block;
-  min-width: 0;
-  width: auto;
-  max-width: 100%;
+.annotate-switch:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+.switch-track {
+  width: 34px;
+  height: 20px;
+  border-radius: var(--radius-pill);
+  background: var(--border);
+  position: relative;
+  flex-shrink: 0;
+  transition: background 150ms var(--ease);
+}
+.switch-knob {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 16px;
+  height: 16px;
+  border-radius: var(--radius-pill);
+  background: var(--fg-faint);
+  transition:
+    left 150ms var(--ease),
+    background 150ms var(--ease);
+}
+.annotate-switch[aria-pressed="true"] .switch-track {
+  background: var(--accent);
+}
+.annotate-switch[aria-pressed="true"] .switch-knob {
+  left: 16px;
+  background: var(--accent-ink);
+}
+.more-wrap {
+  position: relative;
+  flex-shrink: 0;
+}
+.more-button {
+  width: 34px;
+  height: 34px;
+  display: grid;
+  place-items: center;
   border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-sm);
   background: transparent;
-  color: var(--fg-muted);
-  font: inherit;
+  color: var(--fg-dim);
+  border-radius: 9px;
+  cursor: pointer;
+  padding: 0;
+}
+.more-button:hover:not(:disabled),
+.more-button[aria-expanded="true"] {
+  border-color: var(--border-strong);
+  background: var(--steel-700);
+  color: var(--fg);
+}
+.more-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+.menu {
+  position: absolute;
+  background: var(--bg-bar);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-tooltip);
+  padding: 6px;
+  z-index: 70;
+}
+.menu[hidden] {
+  display: none;
+}
+.more-menu {
+  right: 0;
+  top: 42px;
+  width: min(300px, calc(100vw - 24px));
+}
+.menu-head {
+  padding: 7px 10px 9px;
+}
+.menu-label {
+  font-size: 9px;
+  font-weight: var(--w-bold);
+  letter-spacing: var(--track-label);
+  text-transform: uppercase;
+  color: var(--fg-faint);
+  margin-bottom: 5px;
+}
+.menu-file {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  width: calc(100% + 8px);
+  text-align: left;
+  border: 0;
+  background: transparent;
+  padding: 3px 4px;
+  margin: 0 -4px;
+  border-radius: 7px;
+  cursor: pointer;
   font-family: var(--font-mono);
   font-size: 12px;
-  line-height: 1;
-  padding: 4px 7px;
+  color: var(--fg-muted);
+}
+.menu-file:hover {
+  background: var(--steel-700);
+}
+.menu-file > svg {
+  opacity: 0.7;
+  flex-shrink: 0;
+}
+.menu-file-text {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+}
+.path-head {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 0 1 auto;
+  min-width: 0;
+}
+.path-tail {
+  flex: 0 0 auto;
+  max-width: 100%;
+  overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
 }
-.copy-button {
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  background: transparent;
-  color: var(--fg-faint);
-  font: inherit;
+.copy-hint {
   font-family: var(--font-sans);
-  font-size: 11px;
-  font-weight: 600;
-  line-height: 1;
-  padding: 4px 7px;
-  white-space: nowrap;
-  cursor: pointer;
+  font-size: 10px;
+  font-weight: var(--w-semi);
+  color: var(--fg-faint);
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 4px;
 }
-.copy-button:hover {
+.copy-hint .icon-copy,
+.copy-hint .icon-check {
+  display: flex;
+}
+.copy-hint .icon-check {
+  display: none;
+}
+.copy-hint.copied {
+  color: var(--accent-hover);
+}
+.copy-hint.copied .icon-copy {
+  display: none;
+}
+.copy-hint.copied .icon-check {
+  display: flex;
+}
+.menu-rule {
+  height: 1px;
+  background: var(--border);
+  margin: 4px 0;
+}
+.menu-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  text-align: left;
+  padding: 9px 10px;
+  border-radius: var(--radius-sm);
+  font-family: inherit;
+  font-size: var(--text-sm);
+  border: 0;
+  cursor: pointer;
+  background: transparent;
   color: var(--fg);
-  border-color: var(--border-strong);
+}
+.menu-item:hover:not(:disabled) {
+  background: var(--steel-700);
+}
+.menu-item:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.menu-item > svg {
+  opacity: 0.8;
+  flex-shrink: 0;
+}
+.menu-item.danger {
+  color: var(--danger);
+}
+.menu-item.danger > svg {
+  opacity: 1;
+}
+.menu-item.danger:hover:not(:disabled) {
+  background: rgba(240, 100, 100, 0.1);
 }
 .button {
   border: 0;
@@ -243,26 +404,25 @@ body.lavish {
   opacity: 0.55;
   cursor: not-allowed;
 }
-.button.secondary {
-  background: var(--border-subtle);
-  color: var(--fg);
-  border: 1px solid transparent;
-  font-weight: var(--w-semi);
+.split {
+  display: inline-flex;
+  align-items: stretch;
 }
-.button.secondary:hover:not(:disabled) {
-  background: var(--border);
+.send-main {
+  border-radius: var(--radius-md) 0 0 var(--radius-md);
 }
-.button.annotation-on {
-  border: 1px solid var(--accent);
-}
-.button.danger {
-  background: transparent;
-  color: var(--danger);
-  border: 1px solid var(--danger);
-  font-weight: var(--w-semi);
+.send-caret {
+  border-radius: 0 var(--radius-md) var(--radius-md) 0;
+  padding: 9px;
+  border-left: 1px solid rgba(23, 19, 10, 0.22);
+  display: grid;
+  place-items: center;
 }
-.button.danger:hover:not(:disabled) {
-  background: rgba(240, 100, 100, 0.1);
+.send-menu {
+  right: 0;
+  bottom: 44px;
+  width: 208px;
+  border-radius: 11px;
 }
 .layout {
   height: calc(100vh - var(--bar-h));
@@ -475,18 +635,34 @@ body.lavish {
 }
 .actions {
   display: flex;
+  align-items: center;
   gap: 8px;
   justify-content: flex-end;
+  position: relative;
 }
-.ended-view {
-  height: calc(100vh - var(--bar-h));
-  display: grid;
-  place-items: center;
-  padding: 24px;
-  background: var(--bg);
+.send-hint {
+  margin-right: auto;
+  color: var(--fg-faint);
+  font-size: 11px;
+  line-height: 1.35;
+}
+.send-hint[hidden] {
+  display: none;
+}
+.ended-overlay {
+  position: fixed;
+  inset: var(--bar-h) 0 0 0;
+  background: rgba(15, 17, 21, 0.86);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 60;
+}
+.ended-overlay[hidden] {
+  display: none;
 }
 .ended-card {
-  width: min(360px, 100%);
+  width: min(360px, calc(100vw - 48px));
   border: 1px solid var(--border);
   border-radius: var(--radius-xl);
   background: var(--bg-panel);
@@ -496,8 +672,8 @@ body.lavish {
 .ended-title {
   font-family: var(--font-serif);
   font-style: italic;
-  font-size: 26px;
-  line-height: 1.2;
+  font-size: 22px;
+  line-height: 1.3;
   color: var(--fg);
   margin-bottom: 8px;
 }
@@ -507,6 +683,7 @@ body.lavish {
   font-family: var(--font-mono);
   font-size: 12px;
   line-height: 1.45;
+  overflow-wrap: anywhere;
 }
 iframe {
   width: 100%;
@@ -518,21 +695,6 @@ iframe {
   body {
     overflow: auto;
   }
-  .bar {
-    min-height: var(--bar-h);
-    height: auto;
-    align-items: flex-start;
-    flex-wrap: wrap;
-    padding: 10px 12px;
-  }
-  .divider {
-    display: none;
-  }
-  .file-wrap {
-    order: 3;
-    flex-basis: 100%;
-    font-size: 11px;
-  }
   .layout {
     height: calc(100vh - var(--bar-h));
     grid-template-columns: 1fr;

package/dist/cli.mjs

@@ -706,6 +706,7 @@ function playbookIds() {
 // src/server.js
 import { EventEmitter } from "node:events";
 import { readFile as readFile2 } from "node:fs/promises";
+import { homedir } from "node:os";
 import path3 from "node:path";
 import chokidar from "chokidar";
 import express from "express";
@@ -942,6 +943,12 @@ function createArtifactSdk() {
       if (prompt) queuePrompt(prompt, c);
       closeCard();
     };
+    textarea.addEventListener("keydown", (event) => {
+      if (event.key === "Enter" && !event.shiftKey && !event.isComposing) {
+        event.preventDefault();
+        sendButton.click();
+      }
+    });
     setTimeout(() => textarea.focus(), 0);
   }
   window.lavish = {
@@ -1101,12 +1108,9 @@ var SessionStore = class {
     if (!session) {
       return { status: "missing" };
     }
-    if (session.status === "ended") {
-      return { status: "ended" };
-    }
     const prompts = session.prompts || [];
     if (prompts.length === 0) {
-      return { status: "waiting" };
+      return session.status === "ended" ? { status: "ended" } : { status: "waiting" };
     }
     const result = {
       status: "feedback",
@@ -1116,7 +1120,9 @@ var SessionStore = class {
     session.prompts = [];
     session.pending_prompts = 0;
     session.dom_snapshot = "";
-    session.status = "open";
+    if (session.status !== "ended") {
+      session.status = "open";
+    }
     session.updated_at = (/* @__PURE__ */ new Date()).toISOString();
     await this.writeState(state);
     return result;
@@ -1691,9 +1697,47 @@ function computePresence(key, activePolls, deliveredFeedback) {
   if (deliveredFeedback.has(key)) return "working";
   return "waiting";
 }
+function chromeIcon(paths, size = 16, strokeWidth = 1.7) {
+  return `<svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="${strokeWidth}" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${paths}</svg>`;
+}
+var chromeIcons = {
+  more: chromeIcon(
+    '<circle cx="12" cy="5" r="1.4"/><circle cx="12" cy="12" r="1.4"/><circle cx="12" cy="19" r="1.4"/>'
+  ),
+  file: chromeIcon(
+    '<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/>',
+    13
+  ),
+  copy: chromeIcon(
+    '<rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>',
+    12
+  ),
+  check: chromeIcon('<polyline points="20 6 9 17 4 12"/>', 12),
+  refresh: chromeIcon(
+    '<path d="M3 12a9 9 0 0 1 15-6.7L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-15 6.7L3 16"/><path d="M3 21v-5h5"/>',
+    15
+  ),
+  camera: chromeIcon(
+    '<path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3z"/><circle cx="12" cy="13" r="3"/>',
+    15
+  ),
+  exit: chromeIcon(
+    '<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/>',
+    15
+  ),
+  send: chromeIcon('<path d="M22 2 11 13"/><path d="M22 2 15 22l-4-9-9-4Z"/>', 14),
+  caret: chromeIcon('<path d="m6 9 6 6 6-6"/>', 13, 2)
+};
+function displayPathParts(file, home = homedir()) {
+  const normalizedFile = file.replaceAll("\\", "/");
+  const normalizedHome = home.replaceAll("\\", "/");
+  const display = normalizedHome && normalizedFile.startsWith(`${normalizedHome}/`) ? `~/${normalizedFile.slice(normalizedHome.length + 1)}` : normalizedFile;
+  const tailStart = display.lastIndexOf("/") + 1;
+  return { head: display.slice(0, tailStart), tail: display.slice(tailStart) };
+}
 function createChromeHtml(session) {
-  const fileInputSize = Math.max(1, session.file.length);
-  const sessionJson = jsonScript({ key: session.key, initialChat: session.chat || [] });
+  const sessionJson = jsonScript({ key: session.key, file: session.file, initialChat: session.chat || [] });
+  const { head: pathHead, tail: pathTail } = displayPathParts(session.file);
   return `<!doctype html>
 <html>
 <head>
@@ -1703,8 +1747,9 @@ function createChromeHtml(session) {
 <link rel="stylesheet" href="/chrome.css">
 </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="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>
+<div class="bar"><div class="brand"><span class="brand-mark">Lavish</span><span class="brand-support">Editor</span></div><div class="spacer" aria-hidden="true"></div><button class="annotate-switch" id="annotation" type="button" aria-pressed="true"><span class="switch-track" aria-hidden="true"><span class="switch-knob"></span></span><span>Annotate</span></button><div class="more-wrap" id="moreWrap"><button class="more-button" id="moreButton" type="button" title="More" aria-haspopup="menu" aria-expanded="false">${chromeIcons.more}</button><div class="menu more-menu" id="moreMenu" hidden><div class="menu-head"><div class="menu-label">Editing</div><button class="menu-file" id="copyPath" type="button" title="Copy path \xB7 ${escapeHtml(session.file)}">${chromeIcons.file}<span class="menu-file-text"><span class="path-head">${escapeHtml(pathHead)}</span><span class="path-tail">${escapeHtml(pathTail)}</span></span><span class="copy-hint" id="copyHint"><span class="icon-copy">${chromeIcons.copy}</span><span class="icon-check">${chromeIcons.check}</span><span id="copyHintText">Copy</span></span></button></div><div class="menu-rule"></div><button class="menu-item" id="reloadArtifact" type="button">${chromeIcons.refresh}<span>Reload artifact</span></button><button class="menu-item" id="copySnapshot" type="button">${chromeIcons.camera}<span>Copy DOM snapshot</span></button><div class="menu-rule"></div><button class="menu-item danger" id="end" type="button">${chromeIcons.exit}<span>End session</span></button></div></div></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" id="sendActions"><span class="send-hint" id="sendHint" hidden>Write a message or annotate an element first.</span><div class="split"><button class="button send-main" id="send">Send to Agent</button><button class="button send-caret" id="sendCaret" type="button" title="Send options" aria-haspopup="menu" aria-expanded="false">${chromeIcons.caret}</button></div><div class="menu send-menu" id="sendMenu" hidden><button class="menu-item" id="sendFromMenu" type="button">${chromeIcons.send}<span>Send to Agent</span></button><button class="menu-item danger" id="sendAndEnd" type="button">${chromeIcons.exit}<span>Send &amp; end session</span></button></div></div></div></aside></div>
+<div class="ended-overlay" id="endedOverlay" hidden><div class="ended-card"><div class="ended-title">Session ended.<br>Return to your agent to continue.</div><p class="ended-copy">${escapeHtml(session.file)}</p></div></div>
 <script id="lavish-session" type="application/json">${sessionJson}</script>
 <script src="/chrome-client.js"></script>
 </body>
@@ -1899,7 +1944,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.19";
+var VERSION = "0.1.21";
 async function run(argv) {
   await ensureStateDir();
   const normalizedArgv = normalizeArgv(argv);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lavish-axi",
-  "version": "0.1.19",
+  "version": "0.1.21",
   "packageManager": "pnpm@11.1.1",
   "description": "HTML is the new markdown. Lavish is the new editor for your HTML artifacts.",
   "type": "module",
@@ -9,13 +9,15 @@
   },
   "files": [
     "dist",
+    "skills/lavish-axi",
     "lavish-editor-marketing/renders/lavish-editor-marketing.gif",
     "LICENSE",
     "README.md"
   ],
   "scripts": {
     "build": "node scripts/build.js",
-    "check": "npm run build && npm run lint && npm run format:check && npm run typecheck && npm test",
+    "build:skill": "node scripts/build-skill.js",
+    "check": "npm run build && npm run lint && npm run format:check && npm run typecheck && npm test && node scripts/build-skill.js --check",
     "start": "node dist/cli.mjs",
     "lint": "eslint bin src test scripts",
     "format": "prettier --write .",

package/skills/lavish-axi/SKILL.md

@@ -0,0 +1,54 @@
+---
+name: lavish-axi
+description: Turn complex or visual agent responses into rich, reviewable HTML artifacts the user can annotate and send feedback on, using the lavish-axi CLI. Use when about to give a plan, comparison, diagram, table, code diff, report, or anything easier to grasp visually than as prose.
+---
+
+# Lavish Editor
+
+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 `npx -y lavish-axi <html-file>` so the user can visually review it, annotate elements or selected text, queue prompts, and send feedback back through `npx -y lavish-axi poll`.
+
+You do not need lavish-axi installed globally - invoke it with `npx -y lavish-axi <html-file>`.
+If lavish-axi output shows a follow-up command starting with `lavish-axi`, run it as `npx -y lavish-axi ...` instead.
+
+## When to use
+
+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
+
+## Workflow
+
+1. Create the HTML artifact (default location `.lavish/<name>.html` in the working directory).
+2. Run `npx -y lavish-axi <html-file>` to open or resume a review session in the browser.
+3. Run `npx -y lavish-axi poll <html-file>` to long-poll for the user's annotations and queued prompts.
+4. Apply the feedback, then poll again with `--agent-reply "<message>"` to reply in the browser and keep the loop going.
+5. Run `npx -y lavish-axi end <html-file>` when the review is finished.
+
+## Visual guidance
+
+- 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
+- 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
+
+Run `npx -y lavish-axi playbook <id>` for focused, detailed guidance on any of these:
+
+- `diagram` - Map relationships, flows, state, and architecture
+- `table` - Turn dense records into scan-friendly review surfaces
+- `comparison` - Show options, tradeoffs, and current vs target behavior
+- `plan` - Explain a product or technical plan before implementation
+- `diff` - Present code or PR changes with evidence and findings
+- `input` - 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
+- `slides` - Create a deliberate presentation when slides are requested
+
+## Commands & rules
+
+- Run `npx -y lavish-axi <html-file>` to open or resume a Lavish Editor session
+- Unless the user specifies another location, create HTML artifacts in the current working directory under `.lavish/`
+- 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 `npx -y lavish-axi poll <html-file>` to wait for user feedback
+- 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
+- Lavish does not auto-inject any design system - artifacts stay portable so they render identically when opened directly without lavish-axi running. Choose a design system in this priority order: (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 so the artifact fits in; (3) otherwise, prefer 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. Prefer that CDN snippet over hand-writing styles unless explicitly instructed otherwise by the user.
+- 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