lavish-axi 0.1.55 → 0.1.56

package/README.md

@@ -194,8 +194,9 @@ 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.
+  On wider screens, 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), while the composer exposes **Send & End** beside **Send to Agent** to submit queued prompts and user-ended attribution together.
+- **Reviewing on a phone** - Below 860px wide, the artifact takes the whole screen above a **Conversation** dock, and the conversation opens as a bottom sheet over it: tap the dock, swipe it up, or press the chevron to raise it; tap the dimmed artifact, swipe the sheet down, press the chevron, or press Escape to lower it. The dock reports what matters while the sheet is down - how many prompts are queued, a reply that arrived while you were reading, or whether the agent is listening - and the sheet stays open across a reload of the review page. The sheet sizes itself to the visible viewport and respects safe-area insets; if the keyboard or attachments leave little room, conversation content yields or scrolls while the send actions remain pinned above the bottom edge. In landscape the sheet covers the top bar as well. Wider screens keep the side-by-side layout.
 - **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.

package/dist/chrome-client.js

@@ -108,6 +108,11 @@ const chatAttachments = /** @type {HTMLDivElement} */ (document.getElementById("
 const chatAttachButton = /** @type {HTMLButtonElement} */ (document.getElementById("chatAttach"));
 const chatAttachInput = /** @type {HTMLInputElement} */ (document.getElementById("chatAttachInput"));
 const chatAttachmentNotice = /** @type {HTMLSpanElement} */ (document.getElementById("chatAttachmentNotice"));
+const panel = /** @type {HTMLElement} */ (document.getElementById("panel"));
+const panelHead = /** @type {HTMLDivElement} */ (document.getElementById("panelHead"));
+const panelSummary = /** @type {HTMLSpanElement} */ (document.getElementById("panelSummary"));
+const panelToggle = /** @type {HTMLButtonElement} */ (document.getElementById("panelToggle"));
+const panelScrim = /** @type {HTMLDivElement} */ (document.getElementById("panelScrim"));
 const sendButton = /** @type {HTMLButtonElement} */ (document.getElementById("send"));
 const sendAndEndButton = /** @type {HTMLButtonElement} */ (document.getElementById("sendAndEnd"));
 const annotationSwitch = /** @type {HTMLButtonElement} */ (document.getElementById("annotation"));
@@ -400,6 +405,7 @@ function render() {
   }
   updateSendState();
   scrollPanelToBottom();
+  renderSheetSummary();
 }
 
 function updateSendState() {
@@ -540,6 +546,7 @@ function syncChat(chat) {
 function setAgentPresence(state) {
   agentPresence = state === "listening" || state === "working" ? state : "waiting";
   updateSendState();
+  renderSheetSummary();
   if (presenceBanner) presenceBanner.hidden = ended || agentPresence !== "waiting";
 
   if (agentPresence !== "working") {
@@ -691,6 +698,198 @@ function scrollPanelToBottom() {
   panelScroll.scrollTop = panelScroll.scrollHeight;
 }
 
+// ---- Phone-width conversation sheet ----
+// Below this width chrome.css turns the conversation panel into a dock the user raises as a
+// bottom sheet over the artifact. This controller owns intent, accessibility state, gestures,
+// visual-viewport measurements, and the dock summary; CSS owns the geometry. The query must match
+// the one chrome.css lays the sheet out under.
+const MOBILE_SHEET_MEDIA = "(max-width: 860px)";
+// How far a drag on the dock must travel before it counts as a gesture rather than a tap.
+const SHEET_DRAG_THRESHOLD_PX = 48;
+const sheetStorageKey = "lavish-axi:sheet-open:" + key;
+const sheetMedia = typeof window.matchMedia === "function" ? window.matchMedia(MOBILE_SHEET_MEDIA) : null;
+// The user's intent, kept across a chrome reload so a live-reload or server upgrade does not drop
+// them back onto a closed dock mid-conversation.
+let sheetOpen = readSheetOpen();
+// The latest agent reply that landed while the sheet was closed: the dock previews it until the
+// user opens the sheet, so a reply never arrives silently behind the artifact.
+let unreadAgentReply = "";
+/** @type {{ pointerId: any, startY: number, moved: boolean } | null} */
+let sheetDrag = null;
+let suppressSheetClick = false;
+
+function readSheetOpen() {
+  try {
+    return sessionStorage.getItem(sheetStorageKey) === "1";
+  } catch {
+    return false;
+  }
+}
+
+function isMobileSheet() {
+  return Boolean(sheetMedia && sheetMedia.matches);
+}
+
+function setSheetOpen(open) {
+  const next = Boolean(open);
+  const changed = next !== sheetOpen;
+  sheetOpen = next;
+  try {
+    if (sheetOpen) sessionStorage.setItem(sheetStorageKey, "1");
+    else sessionStorage.removeItem(sheetStorageKey);
+  } catch {
+    // Storage refused is not worth a broken sheet: the state just stops surviving a reload.
+  }
+  if (sheetOpen) unreadAgentReply = "";
+  applySheetState();
+  if (!changed || !isMobileSheet()) return;
+  if (sheetOpen) scrollPanelToBottom();
+}
+
+// Re-derives every sheet attribute from the two facts that matter - whether the phone layout is
+// active and whether the sheet is open - so a viewport crossing the breakpoint in either direction
+// leaves nothing stale: a desktop panel is never inert, and a closed dock never traps focus.
+function applySheetState() {
+  const mobile = isMobileSheet();
+  const open = mobile && sheetOpen;
+  document.body.classList.toggle("sheet-open", open);
+  const docked = mobile && !open;
+  panelScroll.inert = docked;
+  chatComposer.inert = docked;
+  const activeElement = document.activeElement;
+  if (docked && activeElement && (panelScroll.contains(activeElement) || chatComposer.contains(activeElement))) {
+    panelToggle.focus();
+  }
+  panelToggle.setAttribute("aria-expanded", open ? "true" : "false");
+  panelToggle.setAttribute("aria-label", open ? "Hide conversation" : "Show conversation");
+  renderSheetSummary();
+}
+
+// What the closed dock says. One line, most actionable state first: work the user has queued,
+// then a reply they have not seen, then whether the agent is there to receive a send.
+function sheetSummary() {
+  if (ended) return { text: "Session ended", accent: false, unread: false };
+  if (queued.length > 0) {
+    return { text: queued.length === 1 ? "1 queued" : queued.length + " queued", accent: true, unread: false };
+  }
+  if (unreadAgentReply) return { text: unreadAgentReply, accent: false, unread: true };
+  if (agentPresence === "working") return { text: "Agent is working…", accent: false, unread: false };
+  if (agentPresence === "listening") return { text: "Agent listening", accent: false, unread: false };
+  return { text: "Agent not listening", accent: false, unread: false };
+}
+
+function renderSheetSummary() {
+  const summary = sheetSummary();
+  panelSummary.textContent = summary.text;
+  panelSummary.classList.toggle("is-accent", summary.accent);
+  panelSummary.classList.toggle("is-unread", summary.unread);
+}
+
+// A brief pulse on the dock when something the user should notice lands while the sheet is
+// closed: a prompt they queued from the artifact, or an agent reply.
+function pulseSheetDock() {
+  if (!isMobileSheet() || sheetOpen) return;
+  panelHead.classList.remove("is-fresh");
+  // Restart the animation even when the previous pulse is still running.
+  void panelHead.offsetWidth;
+  panelHead.classList.add("is-fresh");
+}
+
+function noteAgentReply(text) {
+  if (!isMobileSheet() || sheetOpen) return;
+  unreadAgentReply = String(text || "");
+  renderSheetSummary();
+  pulseSheetDock();
+}
+
+// The phone keyboard shrinks the visual viewport without touching the layout viewport on iOS, so
+// the sheet reads its height and offset from here; chrome.css consumes these only under the phone
+// breakpoint. Android reports the same numbers through the layout viewport thanks to the
+// `interactive-widget=resizes-content` viewport meta, which makes this a no-op there.
+function syncVisualViewport() {
+  const root = document.documentElement;
+  if (!root || !root.style || typeof root.style.setProperty !== "function") return;
+  const viewport = window.visualViewport;
+  const height = viewport ? viewport.height : window.innerHeight;
+  const top = viewport ? viewport.offsetTop : 0;
+  if (!(height > 0)) return;
+  root.style.setProperty("--vv-height", Math.round(height) + "px");
+  root.style.setProperty("--vv-top", Math.round(Math.max(0, top || 0)) + "px");
+}
+
+function sheetDragOffset(event) {
+  return sheetDrag ? Number(event.clientY) - sheetDrag.startY : 0;
+}
+
+function clearSheetDrag() {
+  sheetDrag = null;
+  panel.classList.remove("is-dragging");
+  panel.style.transform = "";
+}
+
+function finishSheetDrag(event) {
+  if (!sheetDrag || event.pointerId !== sheetDrag.pointerId) return;
+  const offset = sheetDragOffset(event);
+  const moved = sheetDrag.moved;
+  clearSheetDrag();
+  if (!moved) return;
+  // The click that follows a completed drag must not undo what the drag decided.
+  suppressSheetClick = true;
+  if (sheetOpen && offset > SHEET_DRAG_THRESHOLD_PX) setSheetOpen(false);
+  else if (!sheetOpen && offset < -SHEET_DRAG_THRESHOLD_PX) setSheetOpen(true);
+}
+
+panelHead.addEventListener("click", () => {
+  if (!isMobileSheet()) return;
+  if (suppressSheetClick) {
+    suppressSheetClick = false;
+    return;
+  }
+  setSheetOpen(!sheetOpen);
+});
+panelScrim.addEventListener("click", () => setSheetOpen(false));
+panelHead.addEventListener("pointerdown", (event) => {
+  if (!isMobileSheet() || event.button) return;
+  sheetDrag = { pointerId: event.pointerId, startY: Number(event.clientY), moved: false };
+  if (typeof panelHead.setPointerCapture === "function") panelHead.setPointerCapture(event.pointerId);
+});
+panelHead.addEventListener("pointermove", (event) => {
+  if (!sheetDrag || event.pointerId !== sheetDrag.pointerId) return;
+  const offset = sheetDragOffset(event);
+  if (Math.abs(offset) > 6) sheetDrag.moved = true;
+  if (!sheetDrag.moved) return;
+  panel.classList.add("is-dragging");
+  // Follow the finger: an open sheet only moves down, a closed dock only up.
+  panel.style.transform = sheetOpen
+    ? "translateY(" + Math.max(0, offset) + "px)"
+    : "translateY(calc(100% - var(--dock-h) - env(safe-area-inset-bottom, 0px) + " + Math.min(0, offset) + "px))";
+});
+panelHead.addEventListener("pointerup", finishSheetDrag);
+panelHead.addEventListener("pointercancel", (event) => {
+  if (!sheetDrag || event.pointerId !== sheetDrag.pointerId) return;
+  clearSheetDrag();
+  suppressSheetClick = false;
+});
+if (sheetMedia && typeof sheetMedia.addEventListener === "function") {
+  sheetMedia.addEventListener("change", (event) => {
+    if (!event.matches) {
+      sheetOpen = false;
+      try {
+        sessionStorage.removeItem(sheetStorageKey);
+      } catch {
+        // Storage refusal only prevents persistence; the in-memory state is already reset.
+      }
+    }
+    applySheetState();
+  });
+}
+if (window.visualViewport && typeof window.visualViewport.addEventListener === "function") {
+  window.visualViewport.addEventListener("resize", syncVisualViewport);
+  window.visualViewport.addEventListener("scroll", syncVisualViewport);
+}
+window.addEventListener("resize", syncVisualViewport);
+syncVisualViewport();
+
 function scrollElementIntoView(el) {
   el.scrollIntoView({ block: "nearest", inline: "nearest" });
 }
@@ -1586,6 +1785,7 @@ function markSessionEnded() {
   moreButton.disabled = true;
   chatInput.disabled = true;
   updateSendState();
+  renderSheetSummary();
   if (presenceBanner) presenceBanner.hidden = true;
   if (handoffBanner) handoffBanner.hidden = true;
   if (outdatedBanner) outdatedBanner.hidden = true;
@@ -2253,6 +2453,8 @@ async function queueWhiteboardFeedback(index, message, mode) {
       // earlier unsent prompt instead of stacking duplicates.
       [internalQueueKeyField]: "whiteboard:" + index,
     });
+    // Queued from the whiteboard inside the artifact, like any other in-artifact prompt.
+    pulseSheetDock();
     postToWhiteboard(index, mode, { type: "lavish-whiteboard:queueResult", ok: true });
     if (mode === "overlay") closeWhiteboard();
   } catch (error) {
@@ -2556,6 +2758,8 @@ window.addEventListener("message", (event) => {
   // The artifact spoke, so it rendered and ran its SDK - there is nothing fatal to probe for.
   if (msg.type === "lavish:queuePrompt") {
     enqueuePrompt(msg.prompt);
+    // Queued from inside the artifact, where the closed dock is the only sign it landed.
+    pulseSheetDock();
   }
   if (msg.type === "lavish:snapshot") {
     const snapshotAction = snapshotRequests.shift() || "submit";
@@ -2867,6 +3071,10 @@ document.addEventListener("keydown", (event) => {
       closeShareDialog();
     } else if (warningsDrawerOpen) {
       closeWarningsDrawer({ restoreFocus: true });
+    } else if (!moreMenu.hidden) {
+      closeMenus();
+    } else if (sheetOpen && isMobileSheet()) {
+      setSheetOpen(false);
     } else {
       closeMenus();
     }
@@ -2907,13 +3115,18 @@ events.addEventListener("chrome-reload", (event) => reloadAfterServerRestart(shu
 // The replacement server serves a different artifact's review. This page keeps working against
 // it; it is only running the previous version of the chrome, which is the user's to act on.
 events.addEventListener("chrome-outdated", (event) => setChromeOutdated(true, shutdownEventReason(event)));
-events.addEventListener("agent-reply", (event) => addChat("agent", JSON.parse(event.data).text));
+events.addEventListener("agent-reply", (event) => {
+  const text = JSON.parse(event.data).text;
+  addChat("agent", text);
+  noteAgentReply(text);
+});
 events.addEventListener("chat-sync", (event) => syncChat(JSON.parse(event.data).chat || []));
 events.addEventListener("agent-presence", (event) => setAgentPresence(JSON.parse(event.data).state));
 events.addEventListener("layout-warnings", (event) => setLayoutWarnings(JSON.parse(event.data).warnings || []));
 // A reconnecting stream means this chrome may have missed updates while it was away.
 events.addEventListener("open", () => refreshLayoutWarnings());
 
+applySheetState();
 render();
 setChromeOutdated(false);
 setWarningsDrawerOpen(false);

package/dist/chrome.css

@@ -96,6 +96,7 @@
   --shadow-tooltip: 0 16px 44px rgba(0, 0, 0, 0.35);
   --shadow-floating: 0 20px 70px rgba(0, 0, 0, 0.35);
   --bar-h: 56px;
+  --bar-pad: var(--space-8);
   --panel-w: 360px;
   --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
   --dur-fast: 120ms;
@@ -135,7 +136,7 @@ body.lavish {
   display: flex;
   align-items: center;
   gap: 14px;
-  padding: 0 var(--space-8);
+  padding: 0 var(--bar-pad);
   background: var(--bg-bar);
   border-bottom: var(--hairline-subtle);
   box-sizing: border-box;
@@ -891,6 +892,18 @@ body.lavish {
   min-width: 0;
   min-height: 0;
 }
+/* Desktop keeps the panel's original flex children: the head wrappers exist only so the phone
+   layout can turn the heading into a dock, and they are transparent to layout everywhere else. */
+.panel-head,
+.panel-head-row {
+  display: contents;
+}
+.panel-handle,
+.panel-summary,
+.panel-toggle,
+.panel-scrim {
+  display: none;
+}
 .panel h2 {
   font-size: 15px;
   line-height: 1.3;
@@ -1331,7 +1344,7 @@ body.layout-gate-active iframe#artifact {
 @media (max-width: 640px) {
   .bar {
     gap: 10px;
-    padding: 0 var(--space-6);
+    --bar-pad: var(--space-6);
   }
   .brand-support {
     display: none;
@@ -1345,23 +1358,202 @@ body.layout-gate-active iframe#artifact {
     max-height: min(70vh, 460px);
   }
 }
+/* Phone-width chrome: the artifact takes the whole viewport above a persistent conversation dock,
+   and the conversation itself is a bottom sheet the dock raises over a scrim. A side-by-side or
+   stacked split leaves neither half usable on a phone - the composer alone is taller than the
+   strip a split gives the panel - so the two surfaces take turns owning the height instead.
+   The sheet is sized from the visual viewport (`--vv-top`/`--vv-height`, kept current by
+   chrome-client.js) rather than the layout viewport, so an on-screen keyboard shrinks it instead
+   of covering the composer, and every edge that can meet a notch or home indicator pads by the
+   matching safe-area inset. */
 @media (max-width: 860px) {
-  body {
-    overflow: auto;
+  :root {
+    --bar-h: calc(56px + env(safe-area-inset-top, 0px));
+    --dock-h: 60px;
+    --sheet-peek: 16px;
+    --composer-reserve: calc(1px + var(--space-4) + 34px + var(--space-6) + env(safe-area-inset-bottom, 0px));
+    --sheet-top: max(var(--bar-h) + var(--sheet-peek) - var(--vv-top, 0px), var(--sheet-peek));
+  }
+  .bar {
+    padding-top: env(safe-area-inset-top, 0px);
+    padding-right: calc(var(--bar-pad) + env(safe-area-inset-right, 0px));
+    padding-left: calc(var(--bar-pad) + env(safe-area-inset-left, 0px));
   }
   .layout {
     height: calc(100vh - var(--bar-h));
-    grid-template-columns: 1fr;
-    grid-template-rows: minmax(0, 1fr) min(42vh, 360px);
+    height: calc(100dvh - var(--bar-h));
+    grid-template-columns: minmax(0, 1fr);
+    /* The second row only reserves the dock's footprint so the artifact is never underneath it;
+       the panel itself is fixed. */
+    grid-template-rows: minmax(0, 1fr) calc(var(--dock-h) + env(safe-area-inset-bottom, 0px));
+  }
+  .frame {
+    padding: 0 env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px);
+    background: var(--bg-bar);
   }
   .panel {
-    width: 100%;
+    position: fixed;
+    z-index: 30;
+    top: calc(var(--vv-top, 0px) + var(--sheet-top));
+    right: 0;
+    left: 0;
+    width: auto;
+    height: calc(var(--vv-height, 100dvh) - var(--sheet-top));
+    padding: 0 env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px);
     border-left: 0;
-    border-top: var(--hairline-subtle);
+    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
+    /* The hairline is a shadow, not a border: a border would add to the sheet's box and push
+       the docked head one pixel past the viewport edge. */
+    box-shadow:
+      0 -1px 0 var(--border-subtle),
+      var(--shadow-floating);
+    /* Collapsed: slide everything but the dock below the viewport. The sheet keeps its full
+       height, so opening it is one transform and the chat never reflows mid-gesture. */
+    transform: translateY(calc(100% - var(--dock-h) - env(safe-area-inset-bottom, 0px)));
+    transition: transform var(--dur-slow) var(--ease);
+    will-change: transform;
+  }
+  body.sheet-open .panel {
+    transform: none;
+  }
+  .panel.is-dragging {
+    transition: none;
+  }
+  .panel-head {
+    display: flex;
+    flex: 0 0 auto;
+    flex-direction: column;
+    height: var(--dock-h);
+    padding: 6px 16px 0;
+    cursor: pointer;
+    user-select: none;
+    -webkit-user-select: none;
+    touch-action: none;
+  }
+  body:not(.sheet-open) .panel-head {
+    height: calc(var(--dock-h) + env(safe-area-inset-bottom, 0px));
+    padding-bottom: env(safe-area-inset-bottom, 0px);
+  }
+  .panel-handle {
+    display: block;
+    width: 36px;
+    height: 4px;
+    margin: 0 auto 6px;
+    border-radius: var(--radius-pill);
+    background: var(--border-strong);
+  }
+  .panel-head-row {
+    display: flex;
+    flex: 1 1 auto;
+    align-items: center;
+    gap: 10px;
+    min-width: 0;
+  }
+  .panel h2 {
+    flex: 0 0 auto;
+    margin: 0;
+  }
+  .panel-summary {
+    display: block;
+    flex: 1 1 auto;
+    min-width: 0;
+    color: var(--fg-faint);
+    font-size: 12px;
+    line-height: 1.35;
+    text-align: right;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .panel-summary:empty {
+    display: none;
+  }
+  .panel-summary.is-accent {
+    color: var(--accent);
+    font-weight: var(--w-semi);
+  }
+  .panel-summary.is-unread::before {
+    content: "";
+    display: inline-block;
+    width: 6px;
+    height: 6px;
+    margin-right: 6px;
+    border-radius: var(--radius-pill);
+    background: var(--accent);
+    vertical-align: 1px;
+  }
+  .panel-toggle {
+    display: flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-pill);
+    background: var(--bg-elevated);
+    color: var(--fg-muted);
+    cursor: pointer;
+  }
+  .panel-toggle svg {
+    display: block;
+    transition: transform var(--dur) var(--ease);
+  }
+  body.sheet-open .panel-toggle svg {
+    transform: rotate(180deg);
+  }
+  .panel-head.is-fresh .panel-toggle {
+    animation: dock-pulse 700ms var(--ease);
+  }
+  .panel-scroll {
+    flex: 1 1 56px;
+    min-height: clamp(
+      0px,
+      calc(var(--vv-height, 100dvh) - var(--sheet-top) - var(--dock-h) - var(--composer-reserve)),
+      56px
+    );
+    overscroll-behavior: contain;
   }
   .chat {
     padding-bottom: 10px;
   }
+  .composer {
+    position: static;
+    min-height: min(
+      var(--composer-reserve),
+      max(0px, calc(var(--vv-height, 100dvh) - var(--sheet-top) - var(--dock-h)))
+    );
+    flex: 0 1 auto;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
+  }
+  .chat-attachments {
+    max-height: min(176px, 25dvh);
+  }
+  .composer .actions {
+    position: sticky;
+    bottom: 0;
+    z-index: 1;
+    padding-top: 8px;
+    background: var(--bg-panel);
+    box-shadow: 0 -1px 0 var(--border-subtle);
+  }
+  .panel-scrim {
+    display: block;
+    position: fixed;
+    inset: var(--bar-h) 0 0 0;
+    z-index: 29;
+    background: rgba(15, 17, 21, 0.72);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity var(--dur-slow) var(--ease);
+  }
+  body.sheet-open .panel-scrim {
+    opacity: 1;
+    pointer-events: auto;
+  }
   .pill-preview {
     max-width: min(220px, 70vw);
   }
@@ -1373,6 +1565,40 @@ body.layout-gate-active iframe#artifact {
     flex-direction: column;
   }
 }
+/* A phone on its side has no height to share: the raised sheet covers the bar as well (the sheet
+   carries its own close control) and the composer gives up its tall default. */
+@media (max-width: 860px) and (max-height: 520px) {
+  :root {
+    --sheet-top: var(--sheet-peek);
+  }
+  .panel-scrim {
+    inset: 0;
+  }
+  .composer textarea {
+    min-height: 48px;
+  }
+  .chat-attachments {
+    max-height: 44px;
+  }
+}
+@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
+  .panel,
+  .panel-scrim,
+  .panel-toggle svg {
+    transition: none;
+  }
+  .panel-head.is-fresh .panel-toggle {
+    animation: none;
+  }
+}
+@keyframes dock-pulse {
+  0% {
+    box-shadow: 0 0 0 0 rgba(244, 201, 93, 0.55);
+  }
+  100% {
+    box-shadow: 0 0 0 10px rgba(244, 201, 93, 0);
+  }
+}
 
 /* Whiteboard overlay: a full-viewport layer above the chrome hosting the
    sandboxed Excalidraw frame. The frame owns all whiteboard UI; this layer

package/dist/cli.mjs

@@ -9920,7 +9920,9 @@ var chromeIcons = {
     16
   ),
   reveal: chromeIcon('<path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z"/><circle cx="12" cy="12" r="3"/>', 13),
-  dismiss: chromeIcon('<line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>', 13)
+  dismiss: chromeIcon('<line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>', 13),
+  // The mobile conversation sheet's only chevron: CSS rotates it when the sheet is open.
+  chevronUp: chromeIcon('<polyline points="6 15 12 9 18 15"/>', 18, 2)
 };
 function displayPathParts(file, home = homedir()) {
   const normalizedFile = file.replaceAll("\\", "/");
@@ -10056,14 +10058,14 @@ function createChromeHtml(session, {
 <html>
 <head>
 <meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, interactive-widget=resizes-content">
 <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><div class="warnings-wrap" id="warningsWrap" hidden><button class="warnings-button" id="warningsButton" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="warningsDrawer">${chromeIcons.warning}<span class="warnings-count" id="warningsCount">0</span></button><div class="menu warnings-drawer" id="warningsDrawer" role="dialog" aria-labelledby="warningsTitle" aria-describedby="warningsSummary" hidden><div class="warnings-head"><h2 class="warnings-title" id="warningsTitle">Layout issues</h2><p class="warnings-summary" id="warningsSummary"></p></div><div class="warnings-toolbar"><label class="warnings-selectall"><input type="checkbox" id="warningsSelectAll"><span>Select all</span></label><span class="warnings-selected" id="warningsSelected" role="status" aria-live="polite"></span></div><div class="warnings-list" id="warningsList"></div><div class="warnings-foot"><p class="warnings-note">Queueing sends a repair request with your next feedback. An issue is marked resolved only after a newer artifact load and a complete check at the same viewport no longer finds it.</p><button class="button" id="warningsQueueButton" type="button" disabled>Queue selected fixes</button></div></div></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-popups-to-escape-sandbox allow-downloads" data-artifact-src="/artifact/${session.key}/index.html"></iframe></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" id="chatComposer"><div class="presence-banner handoff-banner" id="handoffBanner" hidden><span>This review is open in another Lavish tab.</span><button class="handoff-takeover" id="handoffTakeover" type="button">Take over here</button></div><div class="presence-banner handoff-banner" id="outdatedBanner" hidden><span id="outdatedText">The Lavish server this page was connected to is no longer running. Reloading will work once it is running again.</span><span class="outdated-actions"><button class="handoff-takeover" id="outdatedReload" type="button">Check and reload</button><button class="handoff-takeover" id="outdatedDismiss" type="button">Dismiss</button></span></div><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="chat-attachments" id="chatAttachments"></div><div class="chat-attachment-toolbar"><button class="chat-attach" id="chatAttach" type="button">Attach images</button><input id="chatAttachInput" type="file" accept="${escapeHtml(acceptedMime.join(","))}" multiple hidden><span class="chat-attachment-notice" id="chatAttachmentNotice" role="status"></span></div><div class="send-hint" id="sendHint" hidden>Write a message or annotate an element first.</div><div class="actions" id="sendActions"><button class="button button-danger" id="sendAndEnd" type="button">${chromeIcons.exit}<span>Send &amp; End</span></button><button class="button" id="send">Send to Agent</button></div></div></aside></div>
+<div class="layout"><div class="frame"><iframe id="artifact" sandbox="allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox allow-downloads" data-artifact-src="/artifact/${session.key}/index.html"></iframe></div><div class="panel-scrim" id="panelScrim"></div><aside class="panel" id="panel"><div class="panel-head" id="panelHead"><span class="panel-handle" aria-hidden="true"></span><div class="panel-head-row"><h2>Conversation</h2><span class="panel-summary" id="panelSummary" role="status" aria-live="polite"></span><button class="panel-toggle" id="panelToggle" type="button" aria-expanded="false" aria-controls="panel" aria-label="Show conversation">${chromeIcons.chevronUp}</button></div></div><div class="panel-scroll" id="panelScroll"><div class="chat" id="chatLog"></div><div class="annotation-pills" id="annotationPills"></div></div><div class="composer" id="chatComposer"><div class="presence-banner handoff-banner" id="handoffBanner" hidden><span>This review is open in another Lavish tab.</span><button class="handoff-takeover" id="handoffTakeover" type="button">Take over here</button></div><div class="presence-banner handoff-banner" id="outdatedBanner" hidden><span id="outdatedText">The Lavish server this page was connected to is no longer running. Reloading will work once it is running again.</span><span class="outdated-actions"><button class="handoff-takeover" id="outdatedReload" type="button">Check and reload</button><button class="handoff-takeover" id="outdatedDismiss" type="button">Dismiss</button></span></div><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="chat-attachments" id="chatAttachments"></div><div class="chat-attachment-toolbar"><button class="chat-attach" id="chatAttach" type="button">Attach images</button><input id="chatAttachInput" type="file" accept="${escapeHtml(acceptedMime.join(","))}" multiple hidden><span class="chat-attachment-notice" id="chatAttachmentNotice" role="status"></span></div><div class="send-hint" id="sendHint" hidden>Write a message or annotate an element first.</div><div class="actions" id="sendActions"><button class="button button-danger" id="sendAndEnd" type="button">${chromeIcons.exit}<span>Send &amp; End</span></button><button class="button" id="send">Send to Agent</button></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>
@@ -10332,7 +10334,7 @@ var POLL_WAKE_PATH_RULES = Object.freeze([
 ]);
 var POLL_SEND_AND_END_RULE = "`Send & End` ends the session. Its final feedback is still delivered once. After that response, polling stops, and the agent must not reopen the session uninvited.";
 var CODEX_POLL_WAKE_PATH_GUIDANCE = "Codex detected: completed background tasks may not resume Codex automatically, so keep the poll attached to the active turn.";
-var VERSION = "0.1.55";
+var VERSION = "0.1.56";
 function detectInvokingAgent(env = process.env) {
   return ["CODEX_SANDBOX", "CODEX_THREAD_ID"].some((key) => Object.hasOwn(env, key)) ? "codex" : "generic";
 }

package/package.json

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

package/plugin.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://agent-plugins.org/schemas/1.0.0/plugin.schema.json",
   "name": "lavish-axi",
-  "version": "0.1.55",
+  "version": "0.1.56",
   "description": "HTML is the new markdown. Lavish is the new editor for your HTML artifacts.",
   "author": {
     "name": "Kun Chen",