lavish-axi 0.1.3 → 0.1.6

package/README.md

@@ -1,10 +1,10 @@
 <h1 align="center">lavish-axi</h1>
 <p align="center">
-  <a href="https://github.com/kunchenguid/lavish/actions/workflows/ci.yml"
-    ><img alt="CI" src="https://img.shields.io/github/actions/workflow/status/kunchenguid/lavish/ci.yml?style=flat-square&label=ci"
+  <a href="https://github.com/kunchenguid/lavish-axi/actions/workflows/ci.yml"
+    ><img alt="CI" src="https://img.shields.io/github/actions/workflow/status/kunchenguid/lavish-axi/ci.yml?style=flat-square&label=ci"
   /></a>
-  <a href="https://github.com/kunchenguid/lavish/actions/workflows/release-please.yml"
-    ><img alt="Release" src="https://img.shields.io/github/actions/workflow/status/kunchenguid/lavish/release-please.yml?style=flat-square&label=release"
+  <a href="https://github.com/kunchenguid/lavish-axi/actions/workflows/release-please.yml"
+    ><img alt="Release" src="https://img.shields.io/github/actions/workflow/status/kunchenguid/lavish-axi/release-please.yml?style=flat-square&label=release"
   /></a>
   <a href="https://www.npmjs.com/package/lavish-axi"
     ><img alt="npm" src="https://img.shields.io/npm/v/lavish-axi?style=flat-square"
@@ -31,15 +31,21 @@ 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 an agent-generated HTML file in a local browser, lets you pinpoint elements and send feedback.
+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.
 
-- **Browser-native review** - Serve local HTML artifacts with relative JS/CSS/assets intact.
-- **Precise feedback** - Click elements, queue annotation & prompts , and send them back to the agent.
-- **Agent-ergonomic interface** - Follows [AXI principles](https://axi.md), use TOON output, long polling, and contextual disclosure that keep autonomous agents on track.
+- **Local only** - Work with your local HTML artifacts with a local CLI. Zero cloud dependency.
+- **Human-AI collaboration** - Annotate elements, selected text ranges, 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 technial plans, design explorations and more out of the box.
+
+Lavish Editor is an [AXI](https://axi.md), which means -
+
+- It's just a CLI any capable agent can run without setup.
+- No skills required. Agents learn to use AXIs by using them.
+- It's optimized for agent ergonomics. TOON output, long polling, and contextual disclosure making it highly token efficient.
 
 ## Quick Start
 
-Tell your agent:
+Just tell your agent:
 
 ```sh
 Use `npx lavish-axi` to write a technical plan for what we discussed.
@@ -56,8 +62,8 @@ npm install -g lavish-axi
 **From source**
 
 ```sh
-git clone https://github.com/kunchenguid/lavish.git
-cd lavish
+git clone https://github.com/kunchenguid/lavish-axi.git
+cd lavish-axi
 npm ci
 npm run build
 npm link
@@ -77,7 +83,8 @@ npm link
 └───────┬────────────────┘
         ▼
 ┌────────────────────────┐
-│ Human annotates or     │
+│ Human annotates text   │
+│ or elements, or        │
 │ sends chat feedback    │
 └───────┬────────────────┘
         ▼
@@ -88,7 +95,8 @@ npm link
 ```
 
 - **File-path identity** - Sessions are keyed by the canonical HTML file path, so agents do not need opaque IDs.
-- **Sandboxed artifact** - The artifact runs in an iframe while Lavish injects a small SDK for annotations and snapshots.
+- **Sandboxed artifact** - The artifact runs in an iframe while Lavish injects a small SDK for annotations and snapshots, plus Tailwind CSS v4 and DaisyUI v5 design assets unless the HTML includes `<meta name="lavish-design" content="off">`.
+- **Precise targets** - Text annotations include selected text plus range anchors, so agents are not limited to whole-element selectors.
 - **Local-first state** - Session state stays under `.lavish-axi/` in the workspace.
 
 ## CLI Reference
@@ -99,6 +107,10 @@ npm link
 | `lavish-axi <html-file>`      | Open or resume a Lavish Editor session.                      |
 | `lavish-axi poll <html-file>` | Long-poll until the user sends feedback or ends the session. |
 | `lavish-axi end <html-file>`  | End a session.                                               |
+| `lavish-axi playbook [id]`    | List focused artifact guidance or show one playbook.         |
+| `lavish-axi design`           | Show the injected Tailwind CSS and DaisyUI design reference. |
+
+Known playbook IDs: `diagram`, `table`, `comparison`, `plan`, `diff`, `interactive`, `slides`.
 
 ### Flags
 
@@ -112,7 +124,7 @@ npm link
 
 ```sh
 npm run check          # Run all verification commands
-npm run build          # Bundle the publishable CLI
+npm run build          # Bundle the publishable CLI, chrome, and design assets
 npm test               # Run node:test tests
 npm run lint           # Run ESLint
 npm run format:check   # Check Prettier formatting

package/dist/chrome-client.js

@@ -0,0 +1,221 @@
+/* global EventSource, document, location, window */
+
+const sessionDataElement = document.getElementById("lavish-session");
+const sessionData = JSON.parse(sessionDataElement?.textContent || "{}");
+const key = String(sessionData.key || "");
+const initialChat = Array.isArray(sessionData.initialChat) ? sessionData.initialChat : [];
+
+const frame = /** @type {HTMLIFrameElement} */ (document.getElementById("artifact"));
+const annotationPills = /** @type {HTMLDivElement} */ (document.getElementById("annotationPills"));
+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 endButton = /** @type {HTMLButtonElement} */ (document.getElementById("end"));
+const filePathInput = /** @type {HTMLInputElement} */ (document.getElementById("filePath"));
+const copyPathButton = /** @type {HTMLButtonElement} */ (document.getElementById("copyPath"));
+
+const queued = [];
+let annotation = true;
+let agentPolling = false;
+let pendingSnapshot = "";
+let workingBubble = null;
+
+function escapeHtml(value) {
+  return String(value).replace(
+    /[&<>"']/g,
+    (char) =>
+      ({
+        "&": "&amp;",
+        "<": "&lt;",
+        ">": "&gt;",
+        '"': "&quot;",
+        "'": "&#39;",
+      })[char],
+  );
+}
+
+function render() {
+  annotationPills.innerHTML = queued
+    .map(
+      (prompt, index) =>
+        '<div class="pill-wrap"><div class="pill"><span class="pill-preview">' +
+        escapeHtml(prompt.prompt) +
+        '</span><button class="pill-close" type="button" aria-label="Remove queued prompt" data-index="' +
+        index +
+        '">×</button></div><div class="pill-tooltip">' +
+        (prompt.selector
+          ? '<div class="tooltip-label">Target</div><div class="pill-tooltip-target">' +
+            escapeHtml(prompt.selector) +
+            "</div>"
+          : "") +
+        '<div class="tooltip-label">Prompt</div><div class="pill-tooltip-prompt">' +
+        escapeHtml(prompt.prompt) +
+        "</div></div></div>",
+    )
+    .join("");
+
+  for (const button of annotationPills.querySelectorAll(".pill-close")) {
+    const closeButton = /** @type {HTMLButtonElement} */ (button);
+    closeButton.addEventListener("click", (event) => removeQueuedPrompt(Number(closeButton.dataset.index), event));
+  }
+}
+
+function addChat(role, text) {
+  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;
+}
+
+function syncChat(chat) {
+  for (const el of [...chatLog.querySelectorAll(".bubble.user,.bubble.agent:not(.agent-working)")]) {
+    el.remove();
+  }
+
+  for (const item of chat) addChat(item.role, item.text);
+  if (workingBubble) chatLog.appendChild(workingBubble);
+  chatLog.scrollTop = chatLog.scrollHeight;
+}
+
+function setAgentPolling(active) {
+  agentPolling = !!active;
+  sendButton.disabled = !agentPolling;
+
+  if (agentPolling) {
+    if (workingBubble) workingBubble.remove();
+    workingBubble = null;
+    return;
+  }
+
+  if (!workingBubble) {
+    workingBubble = document.createElement("div");
+    workingBubble.className = "bubble agent agent-working";
+    workingBubble.innerHTML = '<span class="spinner"></span><span>Working...</span>';
+    chatLog.appendChild(workingBubble);
+  }
+  chatLog.scrollTop = chatLog.scrollHeight;
+}
+
+function removeQueuedPrompt(index, event) {
+  if (event) event.stopPropagation();
+  queued.splice(index, 1);
+  render();
+}
+
+function postToFrame(message) {
+  if (frame.contentWindow) frame.contentWindow.postMessage(message, "*");
+}
+
+function sendQueued() {
+  if (!agentPolling) return;
+
+  const text = chatInput.value.trim();
+  if (text) {
+    queued.push({ uid: "", prompt: text, selector: "", tag: "message", text: "Freeform message" });
+    addChat("user", text);
+    chatInput.value = "";
+    render();
+  }
+  if (!queued.length) return;
+
+  postToFrame({ type: "lavish:requestSnapshot" });
+}
+
+async function submitQueued() {
+  const prompts = queued.splice(0, queued.length);
+  render();
+  setAgentPolling(false);
+  await fetch("/api/" + key + "/prompts", {
+    method: "POST",
+    headers: { "content-type": "application/json" },
+    body: JSON.stringify({ prompts, domSnapshot: pendingSnapshot }),
+  });
+}
+
+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>';
+}
+
+async function copyFilePath() {
+  try {
+    await navigator.clipboard.writeText(filePathInput.value);
+  } catch {
+    filePathInput.select();
+    document.execCommand("copy");
+  }
+
+  copyPathButton.textContent = "Copied";
+  setTimeout(() => {
+    copyPathButton.textContent = "Copy Path";
+  }, 1200);
+}
+
+async function reloadAfterServerRestart() {
+  let sawOutage = false;
+  const deadline = Date.now() + 5000;
+
+  while (Date.now() < deadline) {
+    try {
+      const res = await fetch("/health", { cache: "no-store" });
+      if (sawOutage && res.ok) {
+        location.reload();
+        return;
+      }
+    } catch {
+      sawOutage = true;
+    }
+
+    await new Promise((resolve) => setTimeout(resolve, 100));
+  }
+
+  location.reload();
+}
+
+window.addEventListener("message", (event) => {
+  if (event.source !== frame.contentWindow) return;
+
+  const msg = event.data || {};
+  if (msg.type === "lavish:queuePrompt") {
+    queued.push(msg.prompt);
+    render();
+  }
+  if (msg.type === "lavish:snapshot") {
+    pendingSnapshot = msg.snapshot || "";
+    submitQueued();
+  }
+  if (msg.type === "lavish:sendQueuedPrompts") sendQueued();
+  if (msg.type === "lavish:endSession") endSession();
+});
+
+annotationButton.onclick = () => {
+  annotation = !annotation;
+  annotationButton.textContent = "Annotation: " + (annotation ? "On" : "Off");
+  annotationButton.classList.toggle("annotation-on", annotation);
+  postToFrame({ type: "lavish:setAnnotationMode", enabled: annotation });
+};
+
+sendButton.onclick = sendQueued;
+copyPathButton.onclick = copyFilePath;
+endButton.onclick = endSession;
+frame.addEventListener("load", () => postToFrame({ type: "lavish:setAnnotationMode", enabled: annotation }));
+
+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("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 || []));
+events.addEventListener("agent-working", (event) => setAgentPolling(!JSON.parse(event.data).working));
+
+render();
+initialChat.forEach((item) => addChat(item.role, item.text));
+setAgentPolling(false);