lavish-axi 0.1.35 → 0.1.37

package/README.md

@@ -31,10 +31,10 @@ HTML is the new markdown. Lavish is the new editor for your HTML artifacts.
 Agents are good at producing rich HTML artifacts, but the human-agent collaboration loop on such artifacts is lacking and falls back into screenshots and long responses for “tell me what to change.”
 That loses the thing HTML is best at: interactivity.
 
-Lavish Editor opens agent-generated HTML files in a local browser, lets you pinpoint elements or selected text and send feedback to the agent to address.
+Lavish Editor opens agent-generated HTML files in a local browser, lets you pinpoint elements, selected text, or Mermaid diagram nodes and send feedback to the agent to address.
 
 - **Local-first** - Review local HTML artifacts with a local CLI and no cloud dependency in the core feedback loop; hosted sharing through third-party ht-ml.app is explicit and opt-in.
-- **Human-AI collaboration** - Annotate elements, selected text ranges, and send messages to the agent without leaving Lavish Editor.
+- **Human-AI collaboration** - Annotate elements, selected text ranges, and Mermaid diagram nodes, and send messages to the agent without leaving Lavish Editor.
 - **Battery included** - Lavish Editor teaches your agent good visualization for common use cases such as product or technical plans, design explorations and more out of the box.
 
 Lavish Editor is an [AXI](https://axi.md), which means -
@@ -54,6 +54,8 @@ npx skills add kunchenguid/lavish-axi --skill lavish
 That is the entire setup - no npm install needed.
 The skill teaches your agent to run Lavish through `npx -y lavish-axi`, so the CLI comes along on demand.
 Its frontmatter also includes Hermes Agent metadata, so Hermes-compatible harnesses can categorize and surface it as a first-class productivity skill.
+This installs the public `lavish` skill.
+The repository also contains an internal `lavish-design` brand skill for maintainers; default `npx skills add ... --list` and skills.sh discovery hide it unless `INSTALL_INTERNAL_SKILLS=1` is set.
 
 Then, in agents that expose skills as slash commands (Claude Code, for example), invoke it directly:
 
@@ -155,15 +157,18 @@ pnpm link
 - **Feedback controls** - Native controls (radios, checkboxes, inputs, selects, buttons, labels, disclosure summaries, contenteditable) are interactive automatically, so they do not need `data-lavish-action`.
   For reversible choices, let option clicks update local state, then queue exactly one final answer from a per-question submit or Queue answer button with `window.lavish.queuePrompt()`.
   Mark only custom (non-native) clickable elements with `data-lavish-action` so Lavish does not annotate them, and use `data-lavish-question` or `queueKey` when pre-send updates for the same question should replace each other.
+  Queued annotation preview pills and chat history share a scrollable Conversation panel above a sticky composer, so long feedback queues do not push the text box or send controls off screen.
   The browser chrome keeps editing actions in the overflow menu (copy path, reload artifact, copy DOM snapshot, export standalone HTML, publish link, end session) and can submit queued prompts with **Send & end session**, which sends the prompts and user-ended attribution together.
 - **Keyboard shortcuts** - In the chrome composer, Enter sends queued prompts and Shift+Enter inserts a newline.
   In the annotation card, Enter queues the annotation, Shift+Enter inserts a newline, and Ctrl+Enter (Cmd+Enter on macOS) queues it and sends all queued prompts immediately.
+  Cmd+I or Ctrl+I toggles between annotate and explore mode from either the browser chrome or the artifact iframe, including while focus is in a textarea or control.
 - **Agent presence** - The browser shows when no agent is listening, keeps queued feedback and fresh layout warnings for the next successful `lavish-axi poll` send even across reloads, and only blocks human sends while the agent is working on delivered feedback. The no-timeout poll writes an immediate stderr banner and periodic stderr heartbeats while stdout stays reserved for the final response; if the poll is interrupted or times out, re-run it because queued feedback is never lost.
 - **Session end etiquette** - Lavish tracks who ended a session: a human clicking **End session** (or **Send & end session**) in the browser is a user-initiated end, while `lavish-axi end <html-file>` is agent-initiated.
   A plain `lavish-axi <html-file>` after a user-initiated end refuses to reopen the browser and returns guidance instead; pass `--reopen` only when the user asks for further review or something important needs their visual attention.
   Agent-initiated ends keep reopening normally, same as before.
   `lavish-axi poll`'s `ended` response and the `feedback` response for the final batch before an end both carry `next_step` guidance telling the agent to stop polling and deliver remaining updates in chat instead of reopening.
 - **Precise targets** - Text annotations include selected text plus range anchors, so agents are not limited to whole-element selectors.
+- **Mermaid diagrams** - Rendered Mermaid diagrams become pannable and zoomable while you explore (drag to pan, scroll to zoom) and freeze when you turn on annotation so a click lands on a single node. Clicking a node annotates the whole node and sends the agent its diagram id, node id, and rendered label instead of just a CSS selector. Lavish only enhances the live render, so the saved HTML still opens identically anywhere.
 - **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/` by default, or `LAVISH_AXI_STATE_DIR` when set.

package/dist/chrome-client.js

@@ -7,8 +7,15 @@ const filePath = String(sessionData.file || "");
 const queueStorageKey = "lavish-axi:queued:" + key;
 const internalQueueKeyField = "_lavishQueueKey";
 const initialChat = Array.isArray(sessionData.initialChat) ? sessionData.initialChat : [];
+const MODE_TOGGLE_HOTKEY_KEY = String(sessionData.modeToggleHotkeyKey || "").toLowerCase();
+
+function isModeToggleHotkeyEvent(event) {
+  if (event.shiftKey || event.altKey) return false;
+  return Boolean(event.metaKey || event.ctrlKey) && String(event.key || "").toLowerCase() === MODE_TOGGLE_HOTKEY_KEY;
+}
 
 const frame = /** @type {HTMLIFrameElement} */ (document.getElementById("artifact"));
+const panelScroll = /** @type {HTMLDivElement} */ (document.getElementById("panelScroll"));
 const annotationPills = /** @type {HTMLDivElement} */ (document.getElementById("annotationPills"));
 const chatLog = /** @type {HTMLDivElement} */ (document.getElementById("chatLog"));
 const chatInput = /** @type {HTMLTextAreaElement} */ (document.getElementById("chatInput"));
@@ -140,6 +147,7 @@ function render() {
     closeButton.addEventListener("click", (event) => removeQueuedPrompt(Number(closeButton.dataset.index), event));
   }
   updateSendState();
+  scrollPanelToBottom();
 }
 
 function updateSendState() {
@@ -198,14 +206,15 @@ async function copyText(text) {
   return true;
 }
 
-function addChat(role, text) {
+function addChat(role, text, shouldScroll = true) {
   if (!text) return;
 
   const el = document.createElement("div");
   el.className = "bubble " + role;
   el.innerHTML = "<small>" + (role === "agent" ? "Agent" : "You") + "</small><div>" + escapeHtml(text) + "</div>";
   chatLog.appendChild(el);
-  chatLog.scrollTop = chatLog.scrollHeight;
+  if (shouldScroll) scrollElementIntoView(el);
+  return el;
 }
 
 function syncChat(chat) {
@@ -213,9 +222,14 @@ function syncChat(chat) {
     el.remove();
   }
 
-  for (const item of chat) addChat(item.role, item.text);
-  if (workingBubble) chatLog.appendChild(workingBubble);
-  chatLog.scrollTop = chatLog.scrollHeight;
+  let lastChatBubble = null;
+  for (const item of chat) lastChatBubble = addChat(item.role, item.text, false) || lastChatBubble;
+  if (workingBubble) {
+    chatLog.appendChild(workingBubble);
+    scrollElementIntoView(workingBubble);
+  } else if (lastChatBubble) {
+    scrollElementIntoView(lastChatBubble);
+  }
 }
 
 function setAgentPresence(state) {
@@ -235,7 +249,15 @@ function setAgentPresence(state) {
     workingBubble.innerHTML = '<span class="spinner"></span><span>Working...</span>';
     chatLog.appendChild(workingBubble);
   }
-  chatLog.scrollTop = chatLog.scrollHeight;
+  scrollElementIntoView(workingBubble);
+}
+
+function scrollPanelToBottom() {
+  panelScroll.scrollTop = panelScroll.scrollHeight;
+}
+
+function scrollElementIntoView(el) {
+  el.scrollIntoView({ block: "nearest", inline: "nearest" });
 }
 
 function removeQueuedPrompt(index, event) {
@@ -701,15 +723,19 @@ window.addEventListener("message", (event) => {
   }
   if (msg.type === "lavish:sendQueuedPrompts") sendQueued();
   if (msg.type === "lavish:endSession") endSession();
+  if (msg.type === "lavish:toggleAnnotationMode") toggleAnnotationMode();
 });
 
 loadFrame();
 
-annotationSwitch.onclick = () => {
+function toggleAnnotationMode() {
+  if (ended) return;
   annotation = !annotation;
   annotationSwitch.setAttribute("aria-pressed", String(annotation));
   postToFrame({ type: "lavish:setAnnotationMode", enabled: annotation });
-};
+}
+
+annotationSwitch.onclick = toggleAnnotationMode;
 
 sendButton.onclick = () => sendQueued(false);
 sendFromMenuButton.onclick = () => sendQueued(false);
@@ -754,6 +780,17 @@ document.addEventListener("keydown", (event) => {
     }
   }
 });
+// Capture phase so the mode hotkey fires no matter where focus is in the chrome - including
+// mid-keystroke in chatInput or an annotation-card textarea - without disturbing normal typing.
+document.addEventListener(
+  "keydown",
+  (event) => {
+    if (!isModeToggleHotkeyEvent(event)) return;
+    event.preventDefault();
+    toggleAnnotationMode();
+  },
+  true,
+);
 frame.addEventListener("load", () => {
   postToFrame({ type: "lavish:setAnnotationMode", enabled: annotation && !ended });
   // Replay the pre-reload scroll position so hot reloads don't jump the artifact to the top.

package/dist/chrome.css

@@ -639,11 +639,21 @@ body.lavish {
   margin: 16px 16px 8px;
   font-weight: var(--w-semi);
   letter-spacing: 0;
+  flex: 0 0 auto;
+}
+.panel-scroll {
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  display: flex;
+  flex-direction: column;
 }
 .chat {
-  flex: 1;
+  flex: 0 0 auto;
   min-height: 0;
-  overflow: auto;
+  overflow: visible;
   padding: 0 16px 12px;
   display: flex;
   flex-direction: column;
@@ -704,9 +714,13 @@ body.lavish {
   gap: 8px;
   padding: 12px 16px;
   border-top: var(--hairline-subtle);
+  background: var(--bg-panel);
   min-width: 0;
   flex-shrink: 0;
   box-sizing: border-box;
+  position: sticky;
+  bottom: 0;
+  z-index: 4;
 }
 .presence-banner {
   border: 1px solid var(--border);
@@ -726,9 +740,17 @@ body.lavish {
   flex-wrap: wrap;
   gap: 6px;
   min-width: 0;
+  padding: 0 16px 12px;
+  flex: 0 0 auto;
+}
+.annotation-pills:empty {
+  display: none;
 }
 .pill-wrap {
-  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: min(320px, 100%);
   max-width: 100%;
 }
 .pill {
@@ -769,11 +791,10 @@ body.lavish {
 }
 .pill-tooltip {
   display: none;
-  position: absolute;
+  position: static;
   z-index: 5;
-  left: 0;
-  bottom: calc(100% + 8px);
-  width: min(320px, 80vw);
+  width: 100%;
+  margin-top: 8px;
   border: 1px solid var(--border-strong);
   border-radius: var(--radius-lg);
   background: var(--bg-bar);

package/dist/cli.mjs

@@ -1,4 +1,9 @@
 #!/usr/bin/env node
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
 
 // src/cli.js
 import { spawn, spawnSync } from "node:child_process";
@@ -4188,7 +4193,67 @@ import { fileURLToPath as fileURLToPath2 } from "node:url";
 import chokidar from "chokidar";
 import express from "express";
 
+// src/mermaid-node.js
+var mermaid_node_exports = {};
+__export(mermaid_node_exports, {
+  isMermaidSvg: () => isMermaidSvg,
+  mermaidNodeElement: () => mermaidNodeElement,
+  mermaidNodeFrom: () => mermaidNodeFrom,
+  normalizeMermaidNodeTarget: () => normalizeMermaidNodeTarget,
+  readNodeLabel: () => readNodeLabel
+});
+function isMermaidSvg(svg) {
+  if (!svg) return false;
+  const id = svg.id || "";
+  if (id.startsWith("mermaid-") || id.startsWith("mermaid_")) return true;
+  if (svg.getAttribute?.("aria-roledescription")) return true;
+  return !!(svg.closest && svg.closest(".mermaid, [data-lavish-mermaid]"));
+}
+function readNodeLabel(labelEl) {
+  if (!labelEl) return "";
+  let source = labelEl;
+  if (labelEl.querySelector?.("br") && labelEl.cloneNode) {
+    source = labelEl.cloneNode(true);
+    for (const br of source.querySelectorAll("br")) br.replaceWith(document.createTextNode(" "));
+  }
+  return (source.textContent || "").trim().replace(/\s+/g, " ").slice(0, 120);
+}
+function mermaidNodeElement(el) {
+  if (!el || !el.closest) return null;
+  const node = el.closest("g.node, g.nodes > g");
+  if (!node) return null;
+  const svg = node.closest("svg");
+  return svg && isMermaidSvg(svg) ? node : null;
+}
+function mermaidNodeFrom(el, selector) {
+  const node = mermaidNodeElement(el);
+  if (!node) return null;
+  const svg = node.closest("svg");
+  const labelEl = node.querySelector(".nodeLabel, .label, foreignObject span, text");
+  return {
+    type: "mermaid-node",
+    diagramId: svg.id || "",
+    nodeId: node.id || "",
+    label: readNodeLabel(labelEl),
+    selector: typeof selector === "function" ? selector(node) : ""
+  };
+}
+function normalizeMermaidNodeTarget(target) {
+  return {
+    type: "mermaid-node",
+    diagramId: String(target.diagramId || ""),
+    nodeId: String(target.nodeId || ""),
+    label: String(target.label || ""),
+    selector: String(target.selector || "")
+  };
+}
+
 // src/artifact-sdk.js
+var MODE_TOGGLE_HOTKEY_KEY = "i";
+function isModeToggleHotkeyEvent(event) {
+  if (event.shiftKey || event.altKey) return false;
+  return Boolean(event.metaKey || event.ctrlKey) && String(event.key || "").toLowerCase() === MODE_TOGGLE_HOTKEY_KEY;
+}
 function deriveLavishQueueKey(element, options = {}) {
   function stringValue(value) {
     return value === null || value === void 0 ? "" : String(value);
@@ -4328,7 +4393,8 @@ function resolveVisibleSpillCandidates(spillCandidates, { epsilon = 1 } = {}) {
     )
   );
 }
-function createArtifactSdk(deriveQueueKey, isNativeInteractive = isNativeInteractiveControl) {
+function createArtifactSdk(deriveQueueKey, isNativeInteractive = isNativeInteractiveControl, mermaid = mermaid_node_exports) {
+  const { isMermaidSvg: isMermaidSvg2, mermaidNodeFrom: mermaidNodeFrom2, mermaidNodeElement: mermaidNodeElement2 } = mermaid;
   let annotationMode = true;
   let hovered = null;
   let selected = null;
@@ -4340,6 +4406,12 @@ function createArtifactSdk(deriveQueueKey, isNativeInteractive = isNativeInterac
     if (!ids.has(el)) ids.set(el, String(++counter));
     return ids.get(el);
   }
+  function escapeAnnotationText(value) {
+    return String(value).replace(
+      /[&<>"']/g,
+      (char) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[char]
+    );
+  }
   function selector(el) {
     if (!el || !el.tagName) return "";
     const parts = [];
@@ -4362,12 +4434,138 @@ function createArtifactSdk(deriveQueueKey, isNativeInteractive = isNativeInterac
     return parts.join(" > ");
   }
   function context(el) {
-    return {
+    const base = {
       uid: uid(el),
       selector: selector(el),
       tag: (el.tagName || "").toLowerCase(),
       text: (el.innerText || el.textContent || "").trim().replace(/\s+/g, " ").slice(0, 240)
     };
+    const mermaidNode = mermaidNodeFrom2(el, selector);
+    if (mermaidNode) {
+      base.tag = "mermaid-node";
+      base.text = mermaidNode.label || base.text;
+      base.target = mermaidNode;
+    }
+    return base;
+  }
+  function annotationTargetEl(el) {
+    return mermaidNodeElement2(el) || el;
+  }
+  const mermaidViewports = /* @__PURE__ */ new WeakMap();
+  function findMermaidSvgs() {
+    const svgs = /* @__PURE__ */ new Set();
+    for (const svg of document.querySelectorAll("svg")) {
+      if (isMermaidSvg2(svg)) svgs.add(svg);
+    }
+    return [...svgs];
+  }
+  function createViewport(svg) {
+    const bbox = svg.getBBox ? safeBBox(svg) : null;
+    const initial = readViewBox(svg) || (bbox ? { x: bbox.x, y: bbox.y, w: bbox.width, h: bbox.height } : null);
+    if (!initial) return null;
+    svg.setAttribute("viewBox", `${initial.x} ${initial.y} ${initial.w} ${initial.h}`);
+    const view = { ...initial };
+    let frozen = false;
+    let panning = null;
+    function apply() {
+      svg.setAttribute("viewBox", `${view.x} ${view.y} ${view.w} ${view.h}`);
+    }
+    function reset() {
+      Object.assign(view, initial);
+      apply();
+    }
+    function zoomAt(clientX, clientY, factor) {
+      const rect = svg.getBoundingClientRect();
+      if (!rect.width || !rect.height) return;
+      const px = (clientX - rect.left) / rect.width;
+      const py = (clientY - rect.top) / rect.height;
+      const fx = view.x + view.w * px;
+      const fy = view.y + view.h * py;
+      const next = Math.min(Math.max(view.w * factor, initial.w / 40), initial.w * 8);
+      const scale = next / view.w;
+      view.w = next;
+      view.h *= scale;
+      view.x = fx - (fx - view.x) * scale;
+      view.y = fy - (fy - view.y) * scale;
+      apply();
+    }
+    function onWheel(event) {
+      if (frozen) return;
+      event.preventDefault();
+      zoomAt(event.clientX, event.clientY, event.deltaY > 0 ? 1.15 : 1 / 1.15);
+    }
+    function onPointerDown(event) {
+      if (frozen || event.button !== 0) return;
+      panning = { x: event.clientX, y: event.clientY, vx: view.x, vy: view.y };
+      svg.setPointerCapture?.(event.pointerId);
+      svg.style.cursor = "grabbing";
+    }
+    function onPointerMove(event) {
+      if (!panning) return;
+      const rect = svg.getBoundingClientRect();
+      if (!rect.width || !rect.height) return;
+      view.x = panning.vx - (event.clientX - panning.x) / rect.width * view.w;
+      view.y = panning.vy - (event.clientY - panning.y) / rect.height * view.h;
+      apply();
+    }
+    function onPointerUp(event) {
+      panning = null;
+      svg.releasePointerCapture?.(event.pointerId);
+      svg.style.cursor = frozen ? "" : "grab";
+    }
+    svg.addEventListener("wheel", onWheel, { passive: false });
+    svg.addEventListener("pointerdown", onPointerDown);
+    svg.addEventListener("pointermove", onPointerMove);
+    svg.addEventListener("pointerup", onPointerUp);
+    svg.addEventListener("pointercancel", onPointerUp);
+    function setFrozen(next) {
+      frozen = !!next;
+      panning = null;
+      svg.style.cursor = frozen ? "" : "grab";
+      svg.style.touchAction = frozen ? "" : "none";
+    }
+    setFrozen(false);
+    return { reset, setFrozen };
+  }
+  function safeBBox(svg) {
+    try {
+      return svg.getBBox();
+    } catch {
+      return null;
+    }
+  }
+  function readViewBox(svg) {
+    const raw = svg.getAttribute?.("viewBox");
+    if (!raw) return null;
+    const parts = raw.trim().split(/[\s,]+/).map(Number);
+    if (parts.length !== 4 || parts.some((n) => !Number.isFinite(n))) return null;
+    return { x: parts[0], y: parts[1], w: parts[2], h: parts[3] };
+  }
+  function enhanceMermaid() {
+    for (const svg of findMermaidSvgs()) {
+      if (mermaidViewports.has(svg)) continue;
+      const viewport = createViewport(svg);
+      if (viewport) {
+        viewport.setFrozen(annotationMode);
+        mermaidViewports.set(svg, viewport);
+      }
+    }
+  }
+  let mermaidEnhanceScheduled = false;
+  function scheduleMermaidEnhance() {
+    if (mermaidEnhanceScheduled) return;
+    mermaidEnhanceScheduled = true;
+    const run2 = () => {
+      mermaidEnhanceScheduled = false;
+      enhanceMermaid();
+    };
+    if (typeof window.requestAnimationFrame === "function") window.requestAnimationFrame(run2);
+    else window.setTimeout(run2, 50);
+  }
+  function setMermaidFrozen(frozen) {
+    for (const svg of findMermaidSvgs()) {
+      mermaidViewports.get(svg)?.setFrozen(frozen);
+    }
   }
   function closestElement(node) {
     if (!node) return document.body;
@@ -4465,6 +4663,7 @@ function createArtifactSdk(deriveQueueKey, isNativeInteractive = isNativeInterac
     }
     if (!annotationMode && style) style.remove();
     if (!annotationMode) closeCard();
+    setMermaidFrozen(annotationMode);
   }
   function queuePrompt(prompt, options = {}) {
     const originElement = options.element || document.activeElement || document.body;
@@ -4832,17 +5031,20 @@ function createArtifactSdk(deriveQueueKey, isNativeInteractive = isNativeInterac
     const root = ensureShadow();
     closeCard();
     const c = options.context || context(target);
+    let anchor = target;
     if (options.range) {
       highlightTextRange(options.range);
     } else {
-      selected = target;
+      anchor = annotationTargetEl(target);
+      selected = anchor;
       highlightElement(selected);
     }
-    const rect = options.range ? options.range.getBoundingClientRect() : target.getBoundingClientRect();
+    const rect = options.range ? options.range.getBoundingClientRect() : anchor.getBoundingClientRect();
     const card = document.createElement("div");
     card.className = "lavish-annotation-card";
-    const heading = c.tag === "text" ? "Annotate text" : "Annotate &lt;" + c.tag + "&gt;";
-    const placeholder = c.tag === "text" ? "Tell the agent what to change about this text..." : "Tell the agent what to change about this element...";
+    const nodeLabel = c.tag === "mermaid-node" ? c.target?.label || c.text || "" : "";
+    const heading = c.tag === "text" ? "Annotate text" : c.tag === "mermaid-node" ? "Annotate node" + (nodeLabel ? ": " + escapeAnnotationText(nodeLabel) : "") : "Annotate &lt;" + c.tag + "&gt;";
+    const placeholder = c.tag === "text" ? "Tell the agent what to change about this text..." : c.tag === "mermaid-node" ? "Tell the agent what to change about this diagram node..." : "Tell the agent what to change about this element...";
     card.innerHTML = '<div class="lavish-heading">' + heading + '</div><textarea placeholder="' + placeholder + '"></textarea><div class="lavish-hint">Enter to queue &middot; ' + (/Mac|iP(hone|ad|od)/.test(navigator.platform) ? "\u2318" : "Ctrl") + '+Enter to send now</div><div class="lavish-row"><button class="lavish-cancel" type="button">Cancel</button><button class="lavish-send" type="button">Queue</button></div>';
     root.appendChild(card);
     const left = Math.min(Math.max(12, rect.left), window.innerWidth - card.offsetWidth - 12);
@@ -4896,6 +5098,15 @@ function createArtifactSdk(deriveQueueKey, isNativeInteractive = isNativeInterac
       window.scrollTo(Number(msg.x) || 0, Number(msg.y) || 0);
     }
   });
+  document.addEventListener(
+    "keydown",
+    (event) => {
+      if (!isModeToggleHotkeyEvent(event)) return;
+      event.preventDefault();
+      parent.postMessage({ type: "lavish:toggleAnnotationMode" }, "*");
+    },
+    true
+  );
   let scrollFrame = 0;
   window.addEventListener(
     "scroll",
@@ -4913,9 +5124,10 @@ function createArtifactSdk(deriveQueueKey, isNativeInteractive = isNativeInterac
     (event) => {
       if (!annotationMode || isLavishUi(event.target) || isLavishAction(event.target) || isInteractiveControl(event.target))
         return;
-      if (event.target === selected) return;
+      const target = annotationTargetEl(event.target);
+      if (target === selected) return;
       if (hovered && hovered !== selected) clearHighlight(hovered);
-      hovered = event.target;
+      hovered = target;
       highlightElement(hovered);
     },
     true
@@ -4963,6 +5175,12 @@ function createArtifactSdk(deriveQueueKey, isNativeInteractive = isNativeInterac
   } else {
     startLayoutAudit();
   }
+  enhanceMermaid();
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", enhanceMermaid, { once: true });
+  }
+  const mermaidObserver = new MutationObserver(() => scheduleMermaidEnhance());
+  mermaidObserver.observe(document.documentElement, { childList: true, subtree: true });
 }
 
 // src/html-transform.js
@@ -5198,6 +5416,7 @@ function normalizeFiniteNumber(value) {
 }
 function normalizeTarget(target) {
   if (!target || typeof target !== "object" || Array.isArray(target)) return null;
+  if (target.type === "mermaid-node") return normalizeMermaidNodeTarget(target);
   return JSON.parse(JSON.stringify(target));
 }
 
@@ -5498,7 +5717,15 @@ async function serve({
         return;
       }
       await watchSession(session, watchers, events, logEvent);
-      res.type("html").send(createChromeHtml(session, { layoutGateEnabled: shouldEnableLayoutGate(req.query || {}) }));
+      const artifactHtml = await readFile3(session.file, "utf8").catch(() => "");
+      const { faviconTag, title } = extractArtifactHead(artifactHtml);
+      res.type("html").send(
+        createChromeHtml(session, {
+          layoutGateEnabled: shouldEnableLayoutGate(req.query || {}),
+          faviconTag,
+          title: title ? `${title} \xB7 Lavish` : "Lavish Editor"
+        })
+      );
     } catch (error) {
       next(error);
     }
@@ -5922,27 +6149,58 @@ function normalizeFlagValue(value) {
   if (Array.isArray(value)) return normalizeFlagValue(value[0]);
   return value === void 0 || value === null ? "" : String(value).trim().toLowerCase();
 }
-function createChromeHtml(session, { layoutGateEnabled = true } = {}) {
+var LAVISH_DEFAULT_FAVICON = `<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>\u{1F48E}</text></svg>">`;
+function readTagAttr(tag, name) {
+  const attrRe = /([a-z][\w:-]*)\s*=\s*("([^"]*)"|'([^']*)'|([^\s>]+))/gi;
+  const target = name.toLowerCase();
+  let match;
+  while ((match = attrRe.exec(tag)) !== null) {
+    if (match[1].toLowerCase() === target) {
+      return (match[3] ?? match[4] ?? match[5] ?? "").trim();
+    }
+  }
+  return "";
+}
+function extractArtifactHead(html) {
+  const head = String(html || "").slice(0, 1e4);
+  let faviconTag = LAVISH_DEFAULT_FAVICON;
+  const linkTags = head.match(/<link\b(?:"[^"]*"|'[^']*'|[^"'>])*>/gi) || [];
+  const iconTag = linkTags.find((tag) => /(^|\s)icon(\s|$)/i.test(readTagAttr(tag, "rel")));
+  const iconHref = iconTag ? readTagAttr(iconTag, "href") : "";
+  if (iconHref && /^(data:|https?:|\/\/)/i.test(iconHref)) {
+    const safeHref = iconHref.replace(/&/g, "&amp;").replace(/"/g, "&quot;");
+    faviconTag = `<link rel="icon" href="${safeHref}">`;
+  }
+  let title = "";
+  const titleMatch = head.match(/<title[^>]*>([\s\S]*?)<\/title>/i);
+  if (titleMatch) title = titleMatch[1].replace(/\s+/g, " ").trim();
+  return { faviconTag, title };
+}
+function createChromeHtml(session, { layoutGateEnabled = true, faviconTag = LAVISH_DEFAULT_FAVICON, title = "Lavish Editor" } = {}) {
   const sessionJson = jsonScript({
     key: session.key,
     file: session.file,
     initialChat: session.chat || [],
-    layoutGateEnabled
+    layoutGateEnabled,
+    modeToggleHotkeyKey: MODE_TOGGLE_HOTKEY_KEY
   });
   const { head: pathHead, tail: pathTail } = displayPathParts(session.file);
   const bodyClass = layoutGateEnabled ? "lavish layout-gate-active" : "lavish";
   const layoutGateHidden = layoutGateEnabled ? "" : " hidden";
+  const modeHotkeyUpper = MODE_TOGGLE_HOTKEY_KEY.toUpperCase();
+  const modeToggleHint = `Toggle annotate/explore mode (\u2318${modeHotkeyUpper} / Ctrl+${modeHotkeyUpper})`;
   return `<!doctype html>
 <html>
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
-<title>Lavish Editor</title>
+<title>${escapeHtml(title)}</title>
+${faviconTag}
 <link rel="stylesheet" href="/chrome.css">
 </head>
 <body class="${bodyClass}">
-<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><button class="menu-item" id="exportArtifact" type="button">${chromeIcons.download}<span>Export standalone HTML</span></button><button class="menu-item" id="shareArtifact" type="button">${chromeIcons.globe}<span>Publish link</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" data-artifact-src="/artifact/${session.key}/index.html"></iframe><div class="layout-issue-banner" id="layoutIssueBanner" hidden>This surface may have layout issues. Your agent has been notified.</div></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="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" title="${escapeHtml(modeToggleHint)}"><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><button class="menu-item" id="exportArtifact" type="button">${chromeIcons.download}<span>Export standalone HTML</span></button><button class="menu-item" id="shareArtifact" type="button">${chromeIcons.globe}<span>Publish link</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" data-artifact-src="/artifact/${session.key}/index.html"></iframe><div class="layout-issue-banner" id="layoutIssueBanner" hidden>This surface may have layout issues. Your agent has been notified.</div></div><aside class="panel"><h2>Conversation</h2><div class="panel-scroll" id="panelScroll"><div class="chat" id="chatLog"></div><div class="annotation-pills" id="annotationPills"></div></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><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="share-overlay" id="shareDialog" role="dialog" aria-modal="true" aria-labelledby="shareTitleText" hidden><form class="share-card" id="shareForm"><div class="share-head"><div><div class="share-kicker">Publish to <a class="share-link" href="https://ht-ml.app" target="_blank" rel="noopener noreferrer">ht-ml.app</a></div><h2 id="shareTitleText">Publish artifact</h2></div><button class="share-close" id="shareClose" type="button" aria-label="Close publish dialog"><svg width="14" height="14" viewBox="0 0 10 10" fill="none" aria-hidden="true" focusable="false"><path d="M1 1L9 9M9 1L1 9" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg></button></div><p class="share-note">ht-ml.app is a separate, third-party hosting service, not part of Lavish. Publishing sends this artifact to its servers.</p><p class="share-copy">This uploads this artifact to ht-ml.app with local assets inlined. Without a password, the page is PUBLIC and anyone with the link can open it. With a password, the page is PRIVATE and viewers must supply the password to view.</p><p class="share-note">Do not publish secrets. The Lavish annotation SDK is not included.</p><div class="share-grid"><label>Password (optional)<input id="sharePassword" name="password" type="password" autocomplete="new-password" placeholder="Leave blank for a public page"></label></div><div class="share-status" id="shareStatus" role="status"></div><div class="share-result" id="shareResult" hidden><label>Share URL<div class="share-copy-row"><input id="shareUrl" readonly><button class="share-copy-btn" id="copyShareUrl" type="button">Copy URL</button></div></label><label>Update key (secret)<div class="share-copy-row"><input id="shareUpdateKey" readonly><button class="share-copy-btn" id="copyUpdateKey" type="button">Copy key</button></div></label><p class="share-note">Keep the update key private. ht-ml.app returns it once and it is the only way to update or delete this page later.</p></div><div class="share-actions"><button class="share-cancel" id="shareCancel" type="button">Cancel</button><button class="button" id="sharePublish" type="submit">Publish</button></div></form></div>
 <div class="ended-overlay layout-gate-overlay" id="layoutGateOverlay"${layoutGateHidden}><div class="ended-card"><div class="ended-title" id="layoutGateTitle">Checking layout.<br>One moment.</div><p class="ended-copy" id="layoutGateCopy">Lavish is waiting for fonts and final geometry before revealing this artifact.</p><button class="button ended-action" id="layoutGateAction" type="button">Show anyway</button></div></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>
@@ -5952,16 +6210,23 @@ function createChromeHtml(session, { layoutGateEnabled = true } = {}) {
 </html>`;
 }
 function createSdkJs(key) {
+  const mermaidHelperEntries = Object.entries(mermaid_node_exports).filter(([, value]) => typeof value === "function");
+  const mermaidHelperDecls = mermaidHelperEntries.map(([name, fn]) => `const ${name}=${fn.toString()};`).join("\n");
+  const mermaidHelperKeys = mermaidHelperEntries.map(([name]) => name).join(", ");
   return `(() => {
 const key=${JSON.stringify(key)};
 void key;
 const deriveQueueKey=${deriveLavishQueueKey.toString()};
 const isNativeInteractiveControl=${isNativeInteractiveControl.toString()};
+const MODE_TOGGLE_HOTKEY_KEY=${JSON.stringify(MODE_TOGGLE_HOTKEY_KEY)};
+const isModeToggleHotkeyEvent=${isModeToggleHotkeyEvent.toString()};
 const fragmentsSignificantlyOverlap=${fragmentsSignificantlyOverlap.toString()};
 const resolveVisibleSpillCandidates=${resolveVisibleSpillCandidates.toString()};
 const classifyHorizontalOverflow=${classifyHorizontalOverflow.toString()};
 const classifyVerticalOverflow=${classifyVerticalOverflow.toString()};
-(${createArtifactSdk.toString()})(deriveQueueKey, isNativeInteractiveControl);
+${mermaidHelperDecls}
+const mermaidHelpers={ ${mermaidHelperKeys} };
+(${createArtifactSdk.toString()})(deriveQueueKey, isNativeInteractiveControl, mermaidHelpers);
 })();`;
 }
 function escapeHtml(value) {
@@ -6147,7 +6412,7 @@ function normalizePagePath(path6) {
 var COMMANDS = /* @__PURE__ */ new Set(["open", "poll", "end", "stop", "server", "playbook", "design", "setup", "export", "share"]);
 var RESERVED = new Set(RESERVED_COMMANDS);
 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.35";
+var VERSION = "0.1.37";
 async function run(argv) {
   await ensureStateDir();
   const normalizedArgv = normalizeArgv(argv);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lavish-axi",
-  "version": "0.1.35",
+  "version": "0.1.37",
   "packageManager": "pnpm@11.1.1",
   "description": "HTML is the new markdown. Lavish is the new editor for your HTML artifacts.",
   "type": "module",
@@ -23,6 +23,7 @@
     "format": "prettier --write .",
     "format:check": "prettier --check .",
     "prepack": "npm run build",
+    "prepare": "npm run build",
     "test": "node --test",
     "typecheck": "tsc --noEmit"
   },