lavish-axi 0.1.31 → 0.1.33

package/README.md

@@ -33,7 +33,7 @@ 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.
 
-- **Local only** - Work with your local HTML artifacts with a local CLI. Zero cloud dependency.
+- **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.
 - **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.
 
@@ -88,7 +88,7 @@ npm install -g lavish-axi
 lavish-axi setup hooks
 ```
 
-This installs a `SessionStart` hook for **Claude Code**, **Codex**, and **OpenCode** that surfaces open sessions, visualization playbooks, and usage guidance at the start of each session.
+This installs a `SessionStart` hook for **Claude Code**, **Codex**, **OpenCode**, and **GitHub Copilot CLI** that surfaces open sessions, visualization playbooks, and usage guidance at the start of each session.
 Unlike the skill, the hook also shows your live open sessions, so a fresh agent session can resume an in-flight review.
 **Restart your agent session after running this** so the new hook takes effect.
 
@@ -117,8 +117,9 @@ pnpm link
         ▼
 ┌────────────────────────┐
 │ Human annotates text   │
-│ or elements, or        │
-│ sends chat feedback    │
+│ or elements, sends     │
+│ chat, or browser audit │
+│ reports layout issues  │
 └───────┬────────────────┘
         ▼
 ┌────────────────────────┐
@@ -128,49 +129,71 @@ pnpm link
 ```
 
 - **File-path identity** - Sessions are keyed by the canonical HTML file path, so agents do not need opaque IDs.
-- **Portable artifacts** - The artifact runs in an iframe while Lavish injects a small SDK for annotations, snapshots, and feedback controls.
+- **Portable artifacts** - The artifact runs in an iframe while Lavish injects a small SDK for annotations, snapshots, feedback controls, and render-time layout checks.
   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.
   Before writing HTML, choose a design system in strict priority order: follow a user-requested look first; otherwise inspect the project the artifact is about - the subject or product whose content or UI it represents, which may differ from your current working directory - and match that project's Tailwind or theme config, CSS variables or design tokens, component library, brand assets, or existing styled pages.
   If the artifact previews, proposes, or mocks a specific app's UI, render it in that app's own design system so it faithfully shows the product, even when you are running in a different repo.
-  Only when both come up empty, run `lavish-axi design` for a copy-pasteable Tailwind CSS v4 + DaisyUI v5 CDN fallback.
-  That fallback guidance recommends DaisyUI's `luxury` theme by default and warns not to `@apply` DaisyUI classes inside Tailwind browser-runtime style blocks.
+  Only when both come up empty, run `lavish-axi design` for a copy-pasteable Tailwind CSS v4 + DaisyUI v5 CDN fallback, a content-to-playbook router, and Mermaid diagram tooling.
+  That fallback guidance recommends DaisyUI's `luxury` theme by default, warns not to `@apply` DaisyUI classes inside Tailwind browser-runtime style blocks, includes an optional layout safety CSS snippet for dense nested grid/flex layouts, and provides a pinned Mermaid CDN snippet with initialization for flows, architecture, state, and sequence diagrams.
+- **Open-time layout gate** - The browser chrome masks each artifact until the real in-iframe layout audit reports no error-severity findings.
+  Warning-only artifacts reveal normally; error findings notify the agent through the same `layout_warnings` poll path and keep the curtain up until a clean reload.
+  The user can click **Show anyway**, and a bounded safety timeout reveals with a persistent layout-issues banner so review is never blocked indefinitely.
+- **Layout warnings** - After fonts load and layout settles, the injected SDK audits the real browser render for page horizontal overflow, element overflow, clipped text, and overlapping text.
+  Intentional horizontal scrollers using `overflow-x: auto` or `scroll` are excluded.
+  Fresh warnings are returned from `lavish-axi poll` as `layout_warnings` with `selector`, `kind`, `overflowPx`, `viewportWidth`, and `severity`, so agents can fix unreadable layouts before asking the human to review.
 - **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.
+- **Export and sharing** - `lavish-axi export` writes `<name>.export.html` by inlining local assets only, stripping the annotation SDK, and leaving remote CDN/font references as links that still need network access.
+  `lavish-axi share` publishes the same local-inlined HTML to [ht-ml.app](https://ht-ml.app), a third-party hosting service not part of Lavish.
+  Publishing sends the artifact to ht-ml.app's servers, public by default, or private and password-protected with `--password`; the response includes a secret `update_key` shown once for later management.
+  Bundling never fetches remote URLs, Lavish itself does not set a CSP, local reads stay confined and size-capped, and absolute `file://` paths outside safe inlined asset references are redacted before output.
+  Per-asset and per-bundle inline caps default to 10 MB and 25 MB, overridable with `LAVISH_AXI_EXPORT_MAX_ASSET_BYTES` and `LAVISH_AXI_EXPORT_MAX_BUNDLE_BYTES`.
+  Unresolved local assets or export notices such as author-set CSP meta tags and redacted file URLs are surfaced in command or browser output.
+  Use `--token` or `LAVISH_AXI_HTML_APP_TOKEN` for an optional bearer token; set `LAVISH_AXI_HTML_APP_API_URL` only when overriding the ht-ml.app API base.
 - **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`.
+- **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.
-  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.
+  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 delivers the prompts before ending the session.
 - **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.
-- **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. 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.
+- **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.
 - **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.
   Set `LAVISH_AXI_IDLE_TIMEOUT_MS=0` or `off` to disable idle self-shutdown.
-- **Local-first state** - Session state stays under `.lavish-axi/` in the workspace.
+- **Local-first state** - Session state stays under `~/.lavish-axi/` by default, or `LAVISH_AXI_STATE_DIR` when set.
 - **Network binding** - The server binds to loopback (`127.0.0.1`) by default. Set `LAVISH_AXI_HOST` to bind elsewhere; a wildcard (`0.0.0.0` or `::`) binds every interface. Binding beyond loopback exposes an unauthenticated server that can read and serve arbitrary local files to anything that can reach it, so only do so on a trusted network. Set `LAVISH_AXI_LINK_HOST` to control the hostname written into generated session links (defaults to the bind address, or loopback when bound to a wildcard).
 
 ## CLI Reference
 
-| Command                       | Description                                                                                                                 |
-| ----------------------------- | --------------------------------------------------------------------------------------------------------------------------- |
-| `lavish-axi`                  | Show current sessions and usage guidance.                                                                                   |
-| `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; leave no-timeout polls running, or re-run them if interrupted. |
-| `lavish-axi end <html-file>`  | End a session.                                                                                                              |
-| `lavish-axi stop`             | Shut down the background server.                                                                                            |
-| `lavish-axi playbook [id]`    | List focused artifact guidance or show one playbook.                                                                        |
-| `lavish-axi design`           | Show the Tailwind + DaisyUI CDN fallback, including the `luxury` default theme and DaisyUI `@apply` warning.                |
-| `lavish-axi setup hooks`      | Install or repair optional SessionStart hooks for Claude Code, Codex, and OpenCode; restart the agent session afterward.    |
-| `lavish-axi server`           | Run the local Lavish Editor server.                                                                                         |
+| Command                         | Description                                                                                                                                                                                                                                                               |
+| ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `lavish-axi`                    | Show current sessions and usage guidance.                                                                                                                                                                                                                                 |
+| `lavish-axi update`             | Check for or apply the latest npm release through the AXI SDK self-updater.                                                                                                                                                                                               |
+| `lavish-axi <html-file>`        | Open or resume a Lavish Editor session, with the open-time layout gate enabled by default.                                                                                                                                                                                |
+| `lavish-axi poll <html-file>`   | Long-poll until the user sends feedback, ends the session, or the browser reports fresh `layout_warnings`; leave no-timeout polls running, or re-run them if interrupted.                                                                                                 |
+| `lavish-axi end <html-file>`    | End a session.                                                                                                                                                                                                                                                            |
+| `lavish-axi export <html-file>` | Write a portable copy of the artifact: one HTML file with its local assets inlined, so it opens with no server and no sibling files. Remote CDN/font references are left as links.                                                                                        |
+| `lavish-axi share <html-file>`  | Publish the artifact (local assets inlined) to [ht-ml.app](https://ht-ml.app), a third-party host not part of Lavish, and print a visitable URL plus a secret update key; shares are public by default, and `--password` makes viewers enter the password before viewing. |
+| `lavish-axi stop`               | Shut down the background server.                                                                                                                                                                                                                                          |
+| `lavish-axi playbook [id]`      | List focused artifact guidance or show one playbook; agents must open each matching playbook before writing HTML.                                                                                                                                                         |
+| `lavish-axi design`             | Show the Tailwind + DaisyUI CDN fallback, content-to-playbook router, Mermaid diagram tooling, `luxury` default theme, DaisyUI `@apply` warning, and layout safety snippet.                                                                                               |
+| `lavish-axi setup hooks`        | Install or repair optional SessionStart hooks for Claude Code, Codex, OpenCode, and GitHub Copilot CLI; restart the agent session afterward.                                                                                                                              |
+| `lavish-axi server`             | Run the local Lavish Editor server.                                                                                                                                                                                                                                       |
 
 Known playbook IDs: `diagram`, `table`, `comparison`, `plan`, `code`, `input`, `slides`.
-One artifact often combines several playbooks, such as a plan that includes a comparison and a diagram, so read every playbook relevant to the artifact for the best quality.
+One artifact often combines several playbooks, such as a plan that includes a comparison and a diagram, so agents must match against each `use_when` trigger and open every matching playbook before writing HTML.
+For flows, architecture, state, or sequence diagrams, open the diagram playbook and use the Mermaid tooling from `lavish-axi design` unless SVG is needed for richly annotated nodes; avoid hand-built div/flexbox boxes-and-arrows.
 
 ### Flags
 
 | Command                  | Flag                  | Description                                                                                                                                                                                                                         |
 | ------------------------ | --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `lavish-axi <html-file>` | `--no-open`           | Ensure the server/session exists without opening another browser window.                                                                                                                                                            |
+| `lavish-axi <html-file>` | `--no-gate`           | Skip the open-time layout curtain for this browser open.                                                                                                                                                                            |
+| `lavish-axi update`      | `--check`             | Report current vs latest npm version without installing an update.                                                                                                                                                                  |
+| `lavish-axi export`      | `--out <path>`        | Write the export to a specific path instead of `<name>.export.html` next to the source.                                                                                                                                             |
+| `lavish-axi share`       | `--password <pw>`     | Make the third-party ht-ml.app page private; viewers must supply the password.                                                                                                                                                      |
+| `lavish-axi share`       | `--token <t>`         | Attach an optional bearer token (`LAVISH_AXI_HTML_APP_TOKEN`); never required to publish.                                                                                                                                           |
 | `lavish-axi poll`        | `--agent-reply "..."` | Show the agent's reply in the existing browser chat before polling again.                                                                                                                                                           |
 | `lavish-axi poll`        | `--timeout-ms <ms>`   | Test/debug escape hatch only; agents should normally omit it and leave the long poll running.                                                                                                                                       |
 | `lavish-axi stop`        | `--port <port>`       | Shut down a server running on a non-default port.                                                                                                                                                                                   |

package/dist/chrome-client.js

@@ -24,19 +24,51 @@ const moreButton = /** @type {HTMLButtonElement} */ (document.getElementById("mo
 const moreMenu = /** @type {HTMLDivElement} */ (document.getElementById("moreMenu"));
 const reloadArtifactButton = /** @type {HTMLButtonElement} */ (document.getElementById("reloadArtifact"));
 const copySnapshotButton = /** @type {HTMLButtonElement} */ (document.getElementById("copySnapshot"));
+const exportArtifactButton = /** @type {HTMLButtonElement} */ (document.getElementById("exportArtifact"));
+const shareArtifactButton = /** @type {HTMLButtonElement} */ (document.getElementById("shareArtifact"));
+const shareDialog = /** @type {HTMLDivElement} */ (document.getElementById("shareDialog"));
+const shareForm = /** @type {HTMLFormElement} */ (document.getElementById("shareForm"));
+const shareCloseButton = /** @type {HTMLButtonElement} */ (document.getElementById("shareClose"));
+const shareCancelButton = /** @type {HTMLButtonElement} */ (document.getElementById("shareCancel"));
+const sharePublishButton = /** @type {HTMLButtonElement} */ (document.getElementById("sharePublish"));
+const sharePasswordInput = /** @type {HTMLInputElement} */ (document.getElementById("sharePassword"));
+const shareStatus = /** @type {HTMLDivElement} */ (document.getElementById("shareStatus"));
+const shareResult = /** @type {HTMLDivElement} */ (document.getElementById("shareResult"));
+const shareUrlInput = /** @type {HTMLInputElement} */ (document.getElementById("shareUrl"));
+const shareUpdateKeyInput = /** @type {HTMLInputElement} */ (document.getElementById("shareUpdateKey"));
+const copyShareUrlButton = /** @type {HTMLButtonElement} */ (document.getElementById("copyShareUrl"));
+const copyUpdateKeyButton = /** @type {HTMLButtonElement} */ (document.getElementById("copyUpdateKey"));
 const endButton = /** @type {HTMLButtonElement} */ (document.getElementById("end"));
 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 layoutGateOverlay = /** @type {HTMLDivElement} */ (document.getElementById("layoutGateOverlay"));
+const layoutGateTitle = /** @type {HTMLDivElement} */ (document.getElementById("layoutGateTitle"));
+const layoutGateCopy = /** @type {HTMLParagraphElement} */ (document.getElementById("layoutGateCopy"));
+const layoutGateAction = /** @type {HTMLButtonElement} */ (document.getElementById("layoutGateAction"));
+const layoutIssueBanner = /** @type {HTMLDivElement} */ (document.getElementById("layoutIssueBanner"));
 const sendHint = /** @type {HTMLSpanElement} */ (document.getElementById("sendHint"));
+const artifactSrc = frame.dataset.artifactSrc || frame.getAttribute?.("data-artifact-src") || frame.src || "";
 
 const queued = loadQueuedPrompts();
 let annotation = true;
 let ended = false;
 let agentPresence = "waiting";
 let pendingSnapshot = "";
+const layoutGateEnabled = sessionData.layoutGateEnabled !== false;
+const configuredLayoutGateMaxHoldMs = Number(sessionData.layoutGateMaxHoldMs);
+const layoutGateMaxHoldMs =
+  Number.isFinite(configuredLayoutGateMaxHoldMs) && configuredLayoutGateMaxHoldMs > 0
+    ? Math.min(configuredLayoutGateMaxHoldMs, 60_000)
+    : 12_000;
+let layoutGateVisible = false;
+let layoutGateArmed = false;
+let layoutGateManuallyBypassed = !layoutGateEnabled;
+let layoutGateCycle = 0;
+/** @type {ReturnType<typeof setTimeout> | undefined} */
+let layoutGateTimer;
 const snapshotRequests = [];
 let endAfterSubmit = false;
 let workingBubble = null;
@@ -91,7 +123,7 @@ function render() {
         escapeHtml(prompt.prompt) +
         '</span><button class="pill-close" type="button" aria-label="Remove queued prompt" data-index="' +
         index +
-        '">×</button></div><div class="pill-tooltip">' +
+        '"><svg width="10" height="10" 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><div class="pill-tooltip">' +
         (prompt.selector
           ? '<div class="tooltip-label">Target</div><div class="pill-tooltip-target">' +
             escapeHtml(prompt.selector) +
@@ -322,6 +354,122 @@ async function submitQueuedOnce() {
   if (agentPresence === "listening") setAgentPresence("working");
 }
 
+function normalizeLayoutWarningsPayload(value) {
+  return Array.isArray(value) ? value.filter((item) => item && typeof item === "object") : [];
+}
+
+function isErrorLayoutWarning(warning) {
+  return String(warning?.severity || "").toLowerCase() === "error";
+}
+
+function setLayoutIssueBanner(visible, text = "This surface may have layout issues. Your agent has been notified.") {
+  if (!layoutIssueBanner) return;
+  layoutIssueBanner.textContent = text;
+  layoutIssueBanner.hidden = !visible;
+}
+
+function clearLayoutGateTimer() {
+  if (layoutGateTimer) clearTimeout(layoutGateTimer);
+  layoutGateTimer = undefined;
+}
+
+function setLayoutGateCard(state) {
+  if (!layoutGateTitle || !layoutGateCopy) return;
+
+  if (state === "held") {
+    layoutGateTitle.innerHTML = "Fixing a layout issue...";
+    layoutGateCopy.textContent =
+      "The real browser found overflow or overlapping content. Your agent has been notified and this will reveal after the next clean reload.";
+    return;
+  }
+
+  layoutGateTitle.innerHTML = "Checking layout.<br>One moment.";
+  layoutGateCopy.textContent = "Lavish is waiting for fonts and final geometry before revealing this artifact.";
+}
+
+function setLayoutGateActive(active) {
+  layoutGateVisible = active;
+  if (layoutGateOverlay) layoutGateOverlay.hidden = !active;
+  document.body?.classList?.toggle("layout-gate-active", active);
+}
+
+function revealLayoutGate({ showBanner = false, bannerText = undefined } = {}) {
+  clearLayoutGateTimer();
+  layoutGateArmed = false;
+  setLayoutGateActive(false);
+  setLayoutIssueBanner(showBanner, bannerText);
+}
+
+function forceRevealLayoutGate(reason) {
+  if (!layoutGateEnabled || ended) return;
+  if (reason === "manual") layoutGateManuallyBypassed = true;
+  const bannerText =
+    reason === "timeout"
+      ? "This surface may have layout issues. Lavish revealed it after the safety timeout so review is never blocked."
+      : "This surface may have layout issues. You chose to show it before the layout check passed.";
+  revealLayoutGate({ showBanner: true, bannerText });
+}
+
+function startLayoutGateCycle() {
+  if (!layoutGateEnabled || layoutGateManuallyBypassed || ended) return;
+
+  layoutGateCycle += 1;
+  layoutGateArmed = true;
+  setLayoutIssueBanner(false);
+  setLayoutGateCard("checking");
+  setLayoutGateActive(true);
+  clearLayoutGateTimer();
+
+  const cycle = layoutGateCycle;
+  layoutGateTimer = setTimeout(() => {
+    if (cycle !== layoutGateCycle || !layoutGateVisible || ended) return;
+    forceRevealLayoutGate("timeout");
+  }, layoutGateMaxHoldMs);
+  layoutGateTimer?.unref?.();
+}
+
+function handleLayoutWarningsForGate(layoutWarnings) {
+  const warnings = normalizeLayoutWarningsPayload(layoutWarnings);
+  const hasErrors = warnings.some(isErrorLayoutWarning);
+
+  if (!layoutGateEnabled) return;
+
+  if (layoutGateManuallyBypassed) {
+    setLayoutIssueBanner(hasErrors);
+    return;
+  }
+
+  if (!layoutGateArmed && !layoutGateVisible) return;
+
+  if (!hasErrors) {
+    revealLayoutGate();
+    return;
+  }
+
+  setLayoutGateCard("held");
+  setLayoutGateActive(true);
+}
+
+function initializeLayoutGate() {
+  if (!layoutGateEnabled) {
+    setLayoutGateActive(false);
+    setLayoutIssueBanner(false);
+    return;
+  }
+
+  if (layoutGateAction) layoutGateAction.onclick = () => forceRevealLayoutGate("manual");
+  startLayoutGateCycle();
+}
+
+async function submitLayoutWarnings(layoutWarnings) {
+  const response = await fetch("/api/" + key + "/layout-warnings", {
+    method: "POST",
+    headers: { "content-type": "application/json" },
+    body: JSON.stringify({ layout_warnings: normalizeLayoutWarningsPayload(layoutWarnings) }),
+  });
+  if (!response.ok) throw new Error("failed to submit layout warnings");
+}
+
 async function endSession() {
   if (ended) return;
   const response = await fetch("/api/" + key + "/end", { method: "POST" });
@@ -333,6 +481,8 @@ async function endSession() {
   chatInput.disabled = true;
   updateSendState();
   if (presenceBanner) presenceBanner.hidden = true;
+  layoutGateManuallyBypassed = true;
+  revealLayoutGate();
   postToFrame({ type: "lavish:setAnnotationMode", enabled: false });
   endedOverlay.hidden = false;
 }
@@ -353,10 +503,136 @@ function copyDomSnapshot() {
   requestSnapshot("copy");
 }
 
+function exportFileName() {
+  const base = (filePath.split(/[\\/]/).pop() || "artifact.html").replace(/\.html?$/i, "");
+  return (base || "artifact") + ".export.html";
+}
+
+function setExportLabel(text) {
+  const label = exportArtifactButton.querySelector("span");
+  if (label) label.textContent = text;
+}
+
+function unresolvedAssetText(count) {
+  return count === 1 ? "1 unresolved asset" : `${count} unresolved assets`;
+}
+
+function noticeText(count) {
+  return count === 1 ? "1 notice" : `${count} notices`;
+}
+
+function exportWarningText(unresolvedCount, noticeCount) {
+  if (unresolvedCount > 0 && noticeCount > 0) {
+    return `${unresolvedAssetText(unresolvedCount)} and ${noticeText(noticeCount)}`;
+  }
+  if (unresolvedCount > 0) return unresolvedAssetText(unresolvedCount);
+  return noticeText(noticeCount);
+}
+
+async function exportArtifact() {
+  // The bundle inlines local assets server-side, so it can take a moment - keep the menu open
+  // and narrate progress in place instead of closing it and leaving the user with no feedback.
+  exportArtifactButton.disabled = true;
+  setExportLabel("Exporting...");
+  try {
+    const response = await fetch("/api/" + key + "/export");
+    if (!response.ok) throw new Error("export failed");
+    const warningCount = Number(response.headers.get("x-lavish-export-warning-count") || "0");
+    const noticeCount = Number(response.headers.get("x-lavish-export-notice-count") || "0");
+    const blob = await response.blob();
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = exportFileName();
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
+    setTimeout(() => URL.revokeObjectURL(url), 2000);
+    if (warningCount > 0 || noticeCount > 0) {
+      setExportLabel(`Exported with ${exportWarningText(warningCount, noticeCount)}`);
+    } else {
+      setExportLabel("Export standalone HTML");
+      closeMenus();
+    }
+  } catch {
+    setExportLabel("Export failed - retry");
+  } finally {
+    exportArtifactButton.disabled = false;
+  }
+}
+
+function openShareDialog() {
+  closeMenus();
+  shareDialog.hidden = false;
+  shareStatus.textContent = "";
+  shareStatus.classList.remove("error");
+  shareResult.hidden = true;
+  sharePasswordInput.value = "";
+  sharePasswordInput.focus();
+}
+
+function closeShareDialog() {
+  shareDialog.hidden = true;
+}
+
+async function copyToButton(value, button, label) {
+  await copyText(value);
+  button.textContent = "Copied";
+  setTimeout(() => {
+    button.textContent = label;
+  }, 1200);
+}
+
+async function publishShare(event) {
+  event.preventDefault();
+  sharePublishButton.disabled = true;
+  shareStatus.classList.remove("error");
+  shareStatus.textContent = "Publishing to ht-ml.app...";
+  shareResult.hidden = true;
+  const password = sharePasswordInput.value.trim();
+  const passwordProtected = Boolean(password);
+  try {
+    const response = await fetch("/api/" + key + "/share", {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify(password ? { password } : {}),
+    });
+    const data = await response.json();
+    if (!response.ok) throw new Error(data.error || "publish failed");
+    shareUrlInput.value = data.url || "";
+    shareUpdateKeyInput.value = data.update_key || "";
+    const unresolvedAssets = Array.isArray(data.unresolved_local_assets) ? data.unresolved_local_assets : [];
+    const notices = Array.isArray(data.notices) ? data.notices : [];
+    const warningCount = unresolvedAssets.length;
+    const noticeCount = notices.length;
+    const noticeSummary = noticeCount ? noticeText(noticeCount) : "";
+    shareStatus.textContent =
+      warningCount > 0
+        ? `Published with ${warningCount === 1 ? "1 unresolved local asset" : `${warningCount} unresolved local assets`}${noticeSummary ? ` and ${noticeSummary}` : ""}.${passwordProtected ? " This page is PASSWORD-PROTECTED; viewers also need the password." : ""}`
+        : noticeCount > 0
+          ? `Published with ${noticeSummary}.${passwordProtected ? " This page is PASSWORD-PROTECTED; viewers also need the password." : ""}`
+          : passwordProtected
+            ? "Published. This page is PASSWORD-PROTECTED; viewers also need the password."
+            : "Published. Anyone with the link can view this page.";
+    shareResult.hidden = false;
+    shareUrlInput.focus();
+    shareUrlInput.select();
+  } catch (error) {
+    shareStatus.classList.add("error");
+    shareStatus.textContent = error instanceof Error ? error.message : String(error);
+  } finally {
+    sharePublishButton.disabled = false;
+  }
+}
+
 function resetFrame() {
+  startLayoutGateCycle();
   // The iframe is sandboxed, so reload by resetting the iframe URL from chrome.
-  // eslint-disable-next-line no-self-assign
-  frame.src = frame.src;
+  frame.src = artifactSrc || frame.src;
+}
+
+function loadFrame() {
+  if (artifactSrc) frame.src = artifactSrc;
 }
 
 function reloadArtifact() {
@@ -404,10 +680,16 @@ window.addEventListener("message", (event) => {
   if (msg.type === "lavish:scroll") {
     lastScroll = { x: Number(msg.x) || 0, y: Number(msg.y) || 0 };
   }
+  if (msg.type === "lavish:layoutWarnings") {
+    handleLayoutWarningsForGate(msg.layout_warnings);
+    submitLayoutWarnings(msg.layout_warnings).catch(() => {});
+  }
   if (msg.type === "lavish:sendQueuedPrompts") sendQueued();
   if (msg.type === "lavish:endSession") endSession();
 });
 
+loadFrame();
+
 annotationSwitch.onclick = () => {
   annotation = !annotation;
   annotationSwitch.setAttribute("aria-pressed", String(annotation));
@@ -429,6 +711,16 @@ chatInput.addEventListener("input", hideSendHint);
 copyPathButton.onclick = copyFilePath;
 reloadArtifactButton.onclick = reloadArtifact;
 copySnapshotButton.onclick = copyDomSnapshot;
+exportArtifactButton.onclick = exportArtifact;
+shareArtifactButton.onclick = openShareDialog;
+shareCloseButton.onclick = closeShareDialog;
+shareCancelButton.onclick = closeShareDialog;
+shareForm.addEventListener("submit", publishShare);
+shareDialog.addEventListener("click", (event) => {
+  if (event.target === shareDialog) closeShareDialog();
+});
+copyShareUrlButton.onclick = () => copyToButton(shareUrlInput.value, copyShareUrlButton, "Copy URL");
+copyUpdateKeyButton.onclick = () => copyToButton(shareUpdateKeyInput.value, copyUpdateKeyButton, "Copy key");
 endButton.onclick = () => {
   closeMenus();
   endSession();
@@ -439,7 +731,13 @@ document.addEventListener("mousedown", (event) => {
   if (!sendMenu.hidden && !sendActions.contains(target)) setMenuOpen(sendCaret, sendMenu, false);
 });
 document.addEventListener("keydown", (event) => {
-  if (event.key === "Escape") closeMenus();
+  if (event.key === "Escape") {
+    if (!shareDialog.hidden) {
+      closeShareDialog();
+    } else {
+      closeMenus();
+    }
+  }
 });
 frame.addEventListener("load", () => {
   postToFrame({ type: "lavish:setAnnotationMode", enabled: annotation && !ended });
@@ -447,6 +745,8 @@ frame.addEventListener("load", () => {
   postToFrame({ type: "lavish:restoreScroll", x: lastScroll.x, y: lastScroll.y });
 });
 
+initializeLayoutGate();
+
 const events = new EventSource("/events/" + key);
 events.addEventListener("reload", () => resetFrame());
 events.addEventListener("chrome-reload", () => reloadAfterServerRestart());