lavish-axi 0.1.20 → 0.1.22

package/README.md

@@ -138,7 +138,9 @@ Lavish also works fully as a plain CLI - just tell your agent to `npx lavish-axi
 - **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.

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,34 +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();
+    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";
@@ -1107,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",
@@ -1122,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;
@@ -1697,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>
@@ -1709,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>
@@ -1905,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.20";
+var VERSION = "0.1.22";
 async function run(argv) {
   await ensureStateDir();
   const normalizedArgv = normalizeArgv(argv);

package/package.json

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