lavish-axi 0.1.32 → 0.1.34

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.
 
@@ -125,6 +125,7 @@ pnpm link
 ┌────────────────────────┐
 │ lavish-axi poll waits  │
 │ and returns prompts    │
+│ or layout warnings     │
 └────────────────────────┘
 ```
 
@@ -138,38 +139,48 @@ pnpm link
 - **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.
+- **Layout warnings** - After fonts load and layout settles, the injected SDK audits the real browser render for page horizontal overflow, element overflow, clipped or visibly spilling text, and overlapping text.
+  Intentional horizontal scrollers using `overflow-x: auto` or `scroll` are excluded from horizontal checks, and `overflow-y: auto` or `scroll` is treated as intentional for vertical overflow.
+  Current findings are returned from `lavish-axi poll` as `layout_warnings` with `selector`, `kind`, `overflowPx`, `viewportWidth`, `severity`, and `persistent`.
+  Fresh error-severity findings should be fixed and rechecked before asking the human to review; repeated or warning-only findings can be surfaced to the human with a note when the cause is not obvious.
 - **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 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 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 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 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, 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 agents must match against each `use_when` trigger and open every matching playbook before writing HTML.
@@ -182,6 +193,9 @@ For flows, architecture, state, or sequence diagrams, open the diagram playbook
 | `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,6 +24,20 @@ 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"));
@@ -109,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) +
@@ -489,6 +503,128 @@ 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.
@@ -575,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();
@@ -585,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 });

package/dist/chrome.css

@@ -424,6 +424,193 @@ body.lavish {
   width: 208px;
   border-radius: 11px;
 }
+.share-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 80;
+  display: grid;
+  place-items: center;
+  padding: var(--space-16);
+  background: rgba(15, 17, 21, 0.72);
+}
+.share-overlay[hidden] {
+  display: none;
+}
+.share-card {
+  width: min(520px, 100%);
+  max-height: min(760px, calc(100vh - 32px));
+  overflow: auto;
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius-xl);
+  background: var(--bg-panel);
+  color: var(--fg);
+  box-shadow: var(--shadow-floating);
+  padding: var(--space-12);
+}
+.share-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-8);
+  margin-bottom: var(--space-8);
+}
+.share-kicker {
+  color: var(--fg-label);
+  font-size: var(--text-xs);
+  font-weight: var(--w-bold);
+  letter-spacing: var(--track-label);
+  text-transform: uppercase;
+}
+.share-link {
+  color: inherit;
+  text-decoration: underline;
+  text-decoration-color: var(--border-strong);
+  text-underline-offset: 2px;
+}
+.share-link:hover {
+  color: var(--accent-hover);
+  text-decoration-color: currentColor;
+}
+.share-head h2 {
+  margin: var(--space-2) 0 0;
+  font-family: var(--font-serif);
+  font-size: var(--text-2xl);
+  font-style: italic;
+  font-weight: var(--w-regular);
+  line-height: var(--lh-2xl);
+}
+.share-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-pill);
+  background: transparent;
+  color: var(--fg-muted);
+  cursor: pointer;
+  font: inherit;
+  padding: 0;
+}
+.share-close svg {
+  display: block;
+}
+.share-close:hover {
+  color: var(--fg);
+  border-color: var(--border-strong);
+}
+.share-copy,
+.share-note {
+  margin: 0 0 var(--space-8);
+  color: var(--fg-muted);
+}
+.share-note {
+  color: var(--fg-faint);
+  font-size: var(--text-sm);
+}
+.share-grid {
+  display: grid;
+  gap: var(--space-8);
+  margin-top: var(--space-10);
+}
+.share-grid label,
+.share-result label {
+  display: grid;
+  gap: var(--space-4);
+  min-width: 0;
+  color: var(--fg-muted);
+  font-size: var(--text-xs);
+  font-weight: var(--w-bold);
+  letter-spacing: var(--track-label);
+  text-transform: uppercase;
+}
+.share-grid input,
+.share-result input {
+  min-width: 0;
+  width: 100%;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  background: var(--bg);
+  color: var(--fg);
+  font: inherit;
+  font-size: var(--text-base);
+  font-weight: var(--w-regular);
+  letter-spacing: 0;
+  padding: 10px;
+  text-transform: none;
+}
+.share-grid input::placeholder {
+  color: var(--fg-label);
+}
+.share-status {
+  min-height: 20px;
+  margin-top: var(--space-8);
+  color: var(--fg-muted);
+  font-size: var(--text-sm);
+}
+.share-status.error {
+  color: var(--danger);
+}
+.share-result {
+  display: grid;
+  gap: var(--space-8);
+  margin-top: var(--space-8);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  background: var(--bg-elevated);
+  padding: var(--space-8);
+}
+.share-result[hidden] {
+  display: none;
+}
+.share-copy-row {
+  display: flex;
+  gap: var(--space-6);
+  min-width: 0;
+}
+.share-copy-row input {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+}
+.share-copy-btn {
+  flex: none;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  background: transparent;
+  color: var(--fg-muted);
+  font: inherit;
+  font-size: var(--text-xs);
+  font-weight: var(--w-bold);
+  padding: 0 10px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+.share-copy-btn:hover {
+  color: var(--fg);
+  border-color: var(--border-strong);
+}
+.share-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--space-8);
+  margin-top: var(--space-12);
+}
+.share-cancel {
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  background: transparent;
+  color: var(--fg-muted);
+  font-family: inherit;
+  font-size: var(--text-sm);
+  font-weight: var(--w-bold);
+  padding: 9px 14px;
+  cursor: pointer;
+}
+.share-cancel:hover {
+  color: var(--fg);
+  border-color: var(--border-strong);
+}
 .layout {
   height: calc(100vh - var(--bar-h));
   min-height: 0;
@@ -565,6 +752,9 @@ body.lavish {
   text-overflow: ellipsis;
 }
 .pill-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   width: 18px;
   height: 18px;
   border: 0;
@@ -572,10 +762,11 @@ body.lavish {
   padding: 0;
   background: var(--border);
   color: var(--fg-muted);
-  line-height: 18px;
-  font-size: 14px;
   cursor: pointer;
 }
+.pill-close svg {
+  display: block;
+}
 .pill-tooltip {
   display: none;
   position: absolute;
@@ -739,4 +930,11 @@ body.layout-gate-active iframe#artifact {
   .pill-preview {
     max-width: min(220px, 70vw);
   }
+  .share-overlay {
+    align-items: start;
+    padding: var(--space-8);
+  }
+  .share-copy-row {
+    flex-direction: column;
+  }
 }