@panphora/clayjs 1.23.0 → 1.24.1

package/src/plugins/ai-edit.js

@@ -21,7 +21,7 @@
  *
  * The bus version previewed the reply as it streamed. The wire carries status lines
  * only — replaceable progress, capped and droppable — so the page shows throttled
- * status lines ("Writing, 1.8 KB") and then the result once, with Keep/Revert as
+ * status lines ("Writing, 1.8 KB") and then the result once, with Keep/Discard as
  * before. `@page` reads the saved file from disk rather than a copy in the payload:
  * the plugin saves first and then sends `{ page: true }`, because a whole page never
  * fits the envelope.
@@ -29,12 +29,12 @@
  * The comment box is compose only: a click anywhere outside it closes it, keeping the
  * text as a draft for that target, and Send moves the whole live state to one compact
  * bar at the bottom of the viewport. The bar carries the host's progress and Stop, the
- * reply's warnings and Keep/Revert, and then the save, so no part of a running edit
+ * reply's warnings and Keep/Discard, and then the save, so no part of a running edit
  * depends on a popover the person may want out of the way.
  *
  * Undo integration: observers pause at request start. On Keep the element is rewound
  * to the snapshot while still paused, observers resume, then one final morph lands
- * the whole AI edit as a single undoable step. On Revert the rewind happens under
+ * the whole AI edit as a single undoable step. On Discard the rewind happens under
  * pause, so history never sees the edit at all.
  *
  * All injected chrome is runtime-only (`no-save no-watch no-snapshot`): never saved,
@@ -62,10 +62,7 @@ const UNIT_SELECTOR = "h1,h2,h3,h4,h5,h6,p,figure";
 const BLOCK_SELECTOR = "p,h1,h2,h3,h4,h5,h6,li,dt,dd,blockquote,pre,figcaption,td,th";
 const CONTAINER_SELECTOR = "section,article,aside,header,footer,nav,main,div,ul,ol,dl,table,figure,form";
 const NOT_TEXT = "script,style,template,textarea,input,select,button,iframe,svg,math";
-// The request ceiling, kept below the host's 1 MiB envelope so the refusal happens
-// here, where the message can say what to do about it.
-const MAX_PAYLOAD_BYTES = 900 * 1024;
-const TOO_LARGE = "This section is too large for AI editing; select a smaller part.";
+const TOO_LARGE = "This section is too large for AI editing. Select a smaller part.";
 const SAVE_FAILED = "The save did not finish; the edit is still on the page.";
 
 let requestCounter = 0;
@@ -98,6 +95,7 @@ let helperState = null;  // "ready" or "unavailable"
 let listeners = null;    // the AbortController every handler one session added listens on
 let observers = [];      // the page observers that session opened
 let styleEl = null;      // the one stylesheet the chrome needed
+let picker = null;       // the area picker while it is over the page
 let chromeToken = 0;     // the latest init(); a teardown retires the one before it
 
 function dropDraft(el) {
@@ -127,6 +125,15 @@ async function helperStateNow() {
   return helper && (helper.state === 'ready' || helper.state === 'unavailable') ? helper.state : null;
 }
 
+// The page half of "rewrite a chosen area", read at use time: it is null until the
+// page plugin's own dynamic import lands, and on any page that is no Block document.
+const pageAi = () => window.clay?.blockeditor?.ai || null;
+
+// A Block document whose own surface has not loaded yet (or failed): the DOM path
+// must stand down, because morphing the editor would replace it.
+const isBlockDoc = () => !!window.clay?.editPlugins?.includes('blockeditor') && !!document.querySelector('article[data-blockeditor]');
+const blockDocWithoutSurface = () => isBlockDoc() && !pageAi()?.active();
+
 // ---------------------------------------------------------------- observers (undo/autosave)
 
 function pauseObservers() {
@@ -168,6 +175,9 @@ function liveRange() {
 // else it is the block around the whole selection, so a backward selection and a
 // forward one land on the same element.
 function targetFromRange(range) {
+  // A Block document has its own selection toolbar, and its blocks are ProseMirror
+  // DOM: the page surface names the area instead.
+  if (pageAi() || blockDocWithoutSurface()) return null;
   let node = range.commonAncestorContainer;
   if (node.nodeType !== 1) node = node.parentElement;
   if (!node || !document.body.contains(node)) return null;
@@ -270,16 +280,8 @@ function candidateFrom(html, tag) {
 
 // ---------------------------------------------------------------- session lifecycle
 
-function newSession(el, comment, quote) {
+function newSession(el, comment, quote, { contextRefsOf, wantsPage }) {
   const docMode = el === document.body;
-  // Context refs are @tokens containing a dot or slash (@notes.md, @src/x.js). Bare
-  // @words are not refs: a leading one is an engine token (@fable, @codex — routed
-  // helper-side), and mid-text ones are prose.
-  // The @ has to start a word, so an email address or a URL is prose too.
-  const contextRefs = [...comment.matchAll(/(?<![\w\u00C0-\u024F.@\/:-])@([\w.-]*[/.][\w./-]*)/g)]
-    .map(m => m[1].replace(/\.+$/, '')) // a sentence's full stop is not part of the name
-    .filter(ref => ref !== 'page')
-    .filter(ref => /[/.]/.test(ref));
   const elementHTML = docMode ? strippedBodyHTML() : el.outerHTML;
   const payload = {
     id: 'req-' + Date.now().toString(36) + '-' + (++requestCounter),
@@ -287,7 +289,7 @@ function newSession(el, comment, quote) {
     tag: el.tagName.toLowerCase(),
     elementHTML,
     comment,
-    contextRefs
+    contextRefs: contextRefsOf(comment)
   };
   if (quote) {
     payload.quote = quote.text;
@@ -295,7 +297,7 @@ function newSession(el, comment, quote) {
   }
   // Document mode reads the live page itself, and every other @page request reads
   // the file from disk: the plugin saves first, then asks for it by flag.
-  if (!docMode && /(?<![\w\u00C0-\u024F.@\/:-])@page(?![\w\/-]|\.\w)/.test(comment)) payload.page = true;
+  if (!docMode && wantsPage(comment)) payload.page = true;
   return {
     id: payload.id,
     el,
@@ -312,7 +314,11 @@ function newSession(el, comment, quote) {
 }
 
 async function sendRequest(el, comment, quote) {
-  session = newSession(el, comment, quote);
+  if (el.aiTarget) return sendTargetRequest(el, comment, quote);
+  // The comment conventions load here, where a request is sent, not at boot: a page
+  // whose composer is never typed into does not fetch them.
+  const { MAX_PAYLOAD_BYTES, contextRefsOf, wantsPage } = await import("../lib/ai-comment.js");
+  session = newSession(el, comment, quote, { contextRefsOf, wantsPage });
   // Refused here, before anything is sent or paused: the envelope would refuse it
   // anyway, and a refusal the page cannot explain is worse than one it can.
   if (new Blob([JSON.stringify(session.payload)]).size > MAX_PAYLOAD_BYTES) {
@@ -352,6 +358,71 @@ async function sendRequest(el, comment, quote) {
   else onError(outcome.error || 'the helper reported an error');
 }
 
+// A page area's request. Nothing morphs and no save hold is taken, so the page keeps
+// autosaving while a person types during a long request, and Keep is the target's own
+// one undoable transaction. Only the bar and the panel belong to this plugin here.
+async function sendTargetRequest(target, comment, quote) {
+  const live = {
+    id: null,
+    el: target,
+    target,
+    docMode: false,
+    state: 'requesting',
+    paused: false,
+    held: false,
+    handle: null,
+    finalCandidate: null
+  };
+  session = live;
+  // A refusal is the box's answer: the comment stays in it, unsent and still a draft.
+  let started;
+  try {
+    started = await target.start(comment, quote);
+  } catch (error) {
+    onError(error?.message || 'the helper reported an error');
+    return;
+  }
+  if (session !== live) return; // stopped while the request was being built
+  if (started.status !== 'ok') {
+    session = null;
+    setStatus(started.message, 'warn');
+    return;
+  }
+  live.id = started.id;
+  keepDraft(target, comment);
+  closePanelForSend();
+  barLifecycle = {};
+  showBar('working');
+  setBarStatus('Sending\u2026');
+  const handle = started.send({
+    onStatus: ({ text }) => { if (session === live) setBarStatus(text); }
+  });
+  live.handle = handle;
+  const outcome = await handle.done;
+  if (session !== live) return;
+  if (outcome.state !== 'done') {
+    if (outcome.state === 'cancelled') onError('HTML Clay stopped this edit.');
+    else onError(outcome.error || 'the helper reported an error');
+    return;
+  }
+  live.state = 'deciding';
+  let result;
+  try {
+    result = await target.propose(outcome.result || {});
+  } catch (error) {
+    onError(error?.message || 'the reply could not be applied');
+    return;
+  }
+  if (session !== live) return;
+  if (result.status !== 'ready') {
+    onError(result.message);
+    return;
+  }
+  dropDraft(target);
+  showBar('ready');
+  setBarStatus(readyText(result.warnings || [], (outcome.result || {}).model), result.warnings?.length ? 'warn' : '');
+}
+
 // What a reply may not add: anything that runs code. Each part is counted, and the
 // reply is refused when it holds more of any part than the element the model was
 // given, so a page's own scripts and handlers are not a reason to refuse an edit
@@ -469,6 +540,11 @@ function revertSession() {
   const s = session;
   session = null;
   if (!s) return;
+  if (s.target) {
+    s.target.discard();
+    positionChrome();
+    return;
+  }
   try {
     if ((s.state === 'requesting' || s.state === 'deciding') && loadedEngine()) {
       sessionMorph(s, s.snapshot, { rewind: true });
@@ -484,6 +560,7 @@ async function keepSession() {
   const s = session;
   if (!s) return;
   session = null;
+  if (s.target) return keepTarget(s.target);
   // What is on screen is what Keep keeps: the preview may have been edited by hand.
   const liveResult = s.docMode ? strippedBodyHTML() : s.el.outerHTML;
   try {
@@ -509,6 +586,29 @@ async function keepSession() {
   scheduleBarClose();
 }
 
+// The page area keeps itself: one transaction, its own preview cleared, and the save
+// flushed by the surface. A stale result touches nothing and says so on the bar.
+async function keepTarget(target) {
+  positionChrome();
+  showBar('saving');
+  setBarStatus('Saving\u2026');
+  const lifecycle = barLifecycle;
+  let result;
+  try {
+    result = await target.keep();
+  } catch (error) {
+    result = { status: 'failed', message: error?.message || SAVE_FAILED };
+  }
+  if (lifecycle !== barLifecycle) return;
+  if (!result || result.status !== 'kept') {
+    showBar('error');
+    setBarStatus((result && result.message) || SAVE_FAILED, 'warn');
+    return;
+  }
+  setBarStatus(result.message || 'Saved');
+  scheduleBarClose();
+}
+
 // Stop is live from the moment the request starts, which includes the window where an
 // @page save is still in flight and there is no handle yet. Nothing is left on screen:
 // the edit is rewound and the bar goes with it.
@@ -613,7 +713,7 @@ function buildChrome() {
 
   barStop = part(bevelButton('Stop', { extra: ['flex:none'] }), 'bar-stop');
   barKeep = part(bevelButton('Keep', { variant: 'primary', extra: ['flex:none'] }), 'bar-keep');
-  barRevert = part(bevelButton('Revert', { variant: 'quiet', extra: ['flex:none'] }), 'bar-revert');
+  barRevert = part(bevelButton('Discard', { variant: 'quiet', extra: ['flex:none'] }), 'bar-revert');
   barClose = part(bevelIconButton(GLYPHS.toastClose, { label: 'Dismiss error' }), 'bar-close');
   barClose.pin({ flex: 'none' });
   for (const control of [barStop, barKeep, barRevert, barClose]) setShown(control, false, 'inline-flex');
@@ -887,6 +987,10 @@ function closeBar(lifecycle) {
 // The ring follows the target while anything is on screen for it, which includes every
 // bar mode; the panel is placed only while it is the thing on screen.
 function positionChrome() {
+  // A Block document keeps a fixed bar of its own at the bottom on a phone, and the
+  // editor already reserves the room for it: the status bar sits above that.
+  const coarse = window.matchMedia?.('(pointer: coarse)')?.matches;
+  set(bar, 'bottom', pageAi()?.active() && coarse ? '112px' : '16px');
   if (!anchorEl) return;
   if (!anchorEl.isConnected) { abandonTarget(); return; }
   if (anchorEl === document.body) {
@@ -933,9 +1037,13 @@ function positionChrome() {
 }
 
 function openPanel(el, quote) {
-  // A composer already open on another target hands its text over as that target's draft
-  // before anything here replaces the target or the box.
-  if (!panel.hidden && anchorEl && anchorEl !== el) storeDraft();
+  // A composer already open on the same target keeps its box as it is. On another target
+  // its text travels with the person and the old target's draft is cleared.
+  const wasOpen = !panel.hidden;
+  const sameTarget = wasOpen && anchorEl === el;
+  const changedTarget = wasOpen && !!anchorEl && anchorEl !== el;
+  const carried = changedTarget ? textarea.value : null;
+  if (changedTarget) dropDraft(anchorEl);
   const range = quote ? liveRange() : null; // read before focus moves into the panel
   const active = document.activeElement;
   returnFocus = active && active !== document.body && !panel.contains(active) ? active : null;
@@ -944,10 +1052,12 @@ function openPanel(el, quote) {
   hideChip();
   setShown(panel, true);
   pendingSelection = quote;
-  const shown = quote ? (quote.text.trim().length > 400 ? quote.text.trim().slice(0, 400) + '\u2026' : quote.text.trim()) : '';
+  const shown = quote
+    ? (quote.text.trim().length > 400 ? quote.text.trim().slice(0, 400) + '\u2026' : quote.text.trim())
+    : (el.aiTarget ? el.label : '');
   panel.dataset.quote = shown;
   setStatus('');
-  textarea.value = drafts.get(el) || '';
+  if (!sameTarget) textarea.value = carried ? carried : (drafts.get(el) || '');
   highlight(anchorRange);
   applyHelperState();
   positionChrome();
@@ -975,6 +1085,7 @@ function closePanel() {
   returnFocus = null;
   pendingSelection = undefined;
   clearHighlight();
+  picker?.close();
   setShown(panel, false);
   setShown(ring, false);
   textarea.value = '';
@@ -985,6 +1096,7 @@ function closePanel() {
 // The send path closes the box without cancelling anything and without letting the
 // target go: the request is now about that element, and the ring stays on it.
 function closePanelForSend() {
+  picker?.close();
   anchorRange = null;
   returnFocus = null;
   pendingSelection = undefined;
@@ -1063,7 +1175,7 @@ function wireInteractions() {
     const startedInPanel = panelPointerDown;
     panelPointerDown = false;
     if (startedInPanel) return;
-    if (panel.contains(event.target) || bar.contains(event.target) || chip.contains(event.target) || docBubble.contains(event.target)) return;
+    if (panel.contains(event.target) || bar.contains(event.target) || chip.contains(event.target) || docBubble.contains(event.target) || picker?.contains(event.target)) return;
     if (session || barMode) return; // one edit at a time, and the bar owns the screen
     const section = event.target.closest?.('[data-edit-id]');
     const unit = section ? unitFrom(event.target) : null;
@@ -1093,6 +1205,17 @@ function wireInteractions() {
   document.addEventListener('keydown', (event) => {
     if (isShortcut(event)) {
       if (barMode || session || pageOwnsFocus()) return;
+      const ai = pageAi();
+      if (ai?.active()) {
+        const chosen = ai.targetFromSelection();
+        // Nothing chosen: leave the key to the browser.
+        if (!chosen) return;
+        event.preventDefault();
+        openPanel(chosen, chosen.quote);
+        return;
+      }
+      // A Block document whose surface is not ready has no DOM path to fall back on.
+      if (blockDocWithoutSurface()) return;
       if (anchorEl && !anchorEl.isConnected) closePanel();
       const range = liveRange();
       let target = range ? targetFromRange(range) : null;
@@ -1141,6 +1264,13 @@ function build() {
   wireInteractions();
 }
 
+// Whether this host lists an ai-edit helper at all, ready or turned off. The menu asks
+// before it offers Ask AI, so a page whose host cannot answer never shows the item.
+async function available() {
+  await (boot || loadHelper());
+  return helperState === 'ready' || helperState === 'unavailable';
+}
+
 async function init() {
   if (!startsAtImport() || panel) return;  // an owner/editor feature, built once
   if (!(await loadHelper())) return;
@@ -1164,18 +1294,72 @@ function canOpenTarget(el) {
 // are not valid targets. A listed but disabled helper opens the existing setup
 // explanation with Send unavailable, just like the keyboard shortcut.
 async function open(el, { prompt } = {}) {
+  // A Block document is rewritten through its own surface: only the whole document
+  // is a DOM entry point, and any element inside the editor is refused. This is the
+  // guard that keeps the morph path off the editor.
+  if (blockDocWithoutSurface()) return false;
+  if (pageAi()?.active() && el !== document.body) return false;
   if (!canOpenTarget(el)) return false;
   await init();
   // A click listener that calls this runs its microtasks before the same click reaches
   // the click-away handler, so the opening has to wait for that event to finish.
   await new Promise(resolve => setTimeout(resolve, 0));
-  if (!panel || session || barMode || !canOpenTarget(el)) return false;
-  if (!panel.hidden && anchorEl === el) {
+  if (!panel || session || barMode) return false;
+  const ai = pageAi();
+  const target = ai?.active() ? ai.wholePage() : el;
+  if (target === el ? !canOpenTarget(el) : !target.isConnected) return false;
+  if (!panel.hidden && anchorEl === target) {
+    textarea.focus();
+    return true;
+  }
+  if (typeof prompt === 'string' && !drafts.has(target)) keepDraft(target, prompt);
+  openPanel(target, null);
+  return true;
+}
+
+// `clay.aiEdit.openTarget(target)` opens the composer on a target the page built
+// itself, such as a tool block's Revise or the new tool `/ai` asked for. Returns true
+// when the composer is showing for it.
+async function openTarget(target) {
+  if (!target || target.aiTarget !== true) return false;
+  await init();
+  // The click or the key that asked is still travelling to the click-away handler, as
+  // in open().
+  await new Promise(resolve => setTimeout(resolve, 0));
+  if (!panel || session || barMode) return false;
+  if (!target.isConnected) return false;
+  if (!panel.hidden && anchorEl === target) {
     textarea.focus();
     return true;
   }
-  if (typeof prompt === 'string' && !drafts.has(el)) keepDraft(el, prompt);
-  openPanel(el, null);
+  openPanel(target, target.quote ?? null);
+  return true;
+}
+
+// `await clay.aiEdit.pick()` starts the area picker: the page under the pointer, one
+// click per block, and the composer on whatever is chosen. A Block document names its
+// own targets; anywhere else the picker hit-tests the page itself. Returns true when
+// the picker is up, false when there is nothing to pick with.
+async function pick() {
+  await init();
+  if (blockDocWithoutSurface()) return false;
+  // The click that called this is still travelling to the click-away handler, exactly
+  // as in open().
+  await new Promise(resolve => setTimeout(resolve, 0));
+  if (!panel || session || barMode) return false;
+  if (picker?.picking) return true;
+  const ai = pageAi();
+  // The overlay loads here, where it is opened, not at boot. A failed fetch is the
+  // same answer as nothing to pick with: the menu says so and nothing else changes.
+  const mod = await import("./ai-edit/picker.js").catch(() => null);
+  if (!mod) return false;
+  picker = mod.createPicker({
+    surface: ai?.active() ? ai : null,
+    onPicked: (target) => openPanel(target, target.quote),
+    onWholePage: () => openPanel(ai?.active() ? ai.wholePage() : document.body),
+    onCancel: () => { if (!panel.hidden) closePanel(); },
+  });
+  picker.open();
   return true;
 }
 
@@ -1206,6 +1390,8 @@ function teardown() {
   listeners = null;
   for (const observer of observers) observer.disconnect();
   observers = [];
+  picker?.close();
+  picker = null;
   for (const node of [styleEl, ring, panel, bar, chip, docBubble]) node?.remove();
   styleEl = ring = panel = textarea = statusEl = pointer = bar = barStatus = null;
   barStop = barKeep = barRevert = barClose = chip = docBubble = null;
@@ -1231,7 +1417,7 @@ function teardown() {
  * the committed mode is still view; the commit that enters edit builds the chrome, inert
  * until somebody opens it, exactly as `clay.aiEdit.init()` does. What a session adds is
  * everything still unresolved — a request on the wire, a preview waiting for Keep or
- * Revert, a comment typed and not sent — so `quiesce` refuses the exit and `resume`
+ * Discard, a comment typed and not sent — so `quiesce` refuses the exit and `resume`
  * leaves that same preview, comment and selection timer exactly as they were.
  * `dispose` (after the barrier) stops every editor-only handler and takes the chrome
  * down, so a save or selection event in view draws nothing. `initial: true` adopts the
@@ -1249,10 +1435,10 @@ export function aiEditParticipant() {
           if (!initial) build();
         },
         quiesce() {
-          const unsent = (panel && !panel.hidden && textarea.value.trim() !== '') ||
-            [...drafted].some((el) => el.isConnected);
+          const unsent = panel && !panel.hidden && textarea.value.trim() !== '';
           const pending = [];
           if (session) pending.push(session.id);
+          if (picker?.picking) pending.push('picker');
           if (barMode === 'saving') pending.push('save');
           if (unsent) pending.push('prompt');
           if (!pending.length) return;
@@ -1276,4 +1462,4 @@ onDomReady(() => { boot = init().then(() => {}, () => {}); });
 
 export { aiEditParticipant as modeParticipant };
 
-export const aiEdit = { init, open };
+export const aiEdit = { init, open, openTarget, pick, available };

package/src/plugins/indicator-chip.js

@@ -3,7 +3,7 @@
 import { set, style } from "../lib/hostile-css.js";
 import { bevelSurface, pageScheme, paintLook } from "../ui/bevel-controls.js";
 import { TOKENS, FONT_SANS } from "../ui/bevel.js";
-import { saveFeedback } from "../core/save-feedback.js";
+import { saveFeedback, FAILURE_CLAIMED } from "../core/save-feedback.js";
 
 // No 'conflict' here on purpose. core/conflict-notice.js owns that state now,
 // and it ships in every document rather than only the ones that turned this chip on.
@@ -12,25 +12,20 @@ import { saveFeedback } from "../core/save-feedback.js";
 // leaves core unaware that this plugin exists, which is the direction that
 // dependency has to point.
 const LABELS = {
-  saving: "Saving…",
-  saved: "Saved",
   error: "Couldn't save",
-  offline: "Offline, not saved",
-  retrying: "Saving…",
+  offline: "Offline, will retry",
   blocked: "Can't save here",
-  pending: "Saving…",
-  acknowledged: "Saving…",
-  checkpointed: "Saved",
   unavailable: "Can't store changes: download a copy",
 };
 
-// States that stay on screen instead of fading: a save still in flight, one that keeps
-// trying, one the host will not take without help, and where the journal says the work is.
-const STICKY = new Set(["saving", "retrying", "blocked", "pending", "acknowledged", "unavailable"]);
+// The chip has words only for a save that did not go through. A save on its way says
+// nothing and leaves a standing failure up, and a save that landed takes the chip down.
+// The block editor's retrying takes down a plain "Couldn't save" (it keeps trying on its
+// own and raises its own notice if that runs long) but leaves "Offline, will retry" up,
+// which is still true.
+const QUIET = new Set(["saving", "pending", "acknowledged"]);
+const CLEARS = new Set(["saved", "checkpointed"]);
 
-const ALARMING = new Set(["error", "offline", "blocked", "unavailable"]);
-
-const REST = [`background:${TOKENS.surface}`, `color:${TOKENS.ink}`, `border-color:${TOKENS["line-2"]}`];
 const ALARM = [
   `background:${TOKENS["ox-soft"]}`,
   `color:${TOKENS.ox}`,
@@ -38,7 +33,6 @@ const ALARM = [
 ];
 
 let el = null;
-let hideTimer = null;
 
 function ensure() {
   // Looked up on every call, never trusted once detached: a live-sync morph or a
@@ -57,35 +51,46 @@ function ensure() {
   return el;
 }
 
-export function show(state) {
+function hide() {
+  if (!el) return;
+  set(el, "opacity", "0");
+  el.textContent = "";
+  delete el.dataset.state;
+}
+
+// Another notice is already saying this, so the chip says nothing: two save notices at once
+// read as one problem reported twice.
+export function standDown() {
+  hide();
+}
+
+export function show(state, detail) {
+  if (QUIET.has(state)) return;
+  if (CLEARS.has(state)) return hide();
+  if (state === "retrying") {
+    if (el?.dataset.state === "error") hide();
+    return;
+  }
   if (!LABELS[state]) return;
-  // A failed or offline save is the persistent toast's to report when clay-ui is loaded,
-  // and so is saved when the page turned on clay.saveToast. Blocked is the exception:
-  // the page cannot save at all, so the chip stays even beside the generic toast.
-  const ownedByToast = state !== "blocked" &&
-    (ALARMING.has(state) || (state === "saved" && saveFeedback.savedToast));
-  if (saveFeedback.toasts && ownedByToast) {
-    clearTimeout(hideTimer);
-    if (el) {
-      set(el, "opacity", "0");
-      el.textContent = "";
-      delete el.dataset.state;
-    }
+  // The block editor put its own notice up for this failure. Read here, after every
+  // listener has seen the event, so the order the two subscribed in does not matter.
+  if (state === "error" && detail?.[FAILURE_CLAIMED]) return;
+  // A failed or offline save is the persistent toast's to report when clay-ui is loaded.
+  // Blocked is the exception: the page cannot save at all, so the chip stays even beside
+  // the generic toast.
+  if (saveFeedback.toasts && state !== "blocked") {
+    hide();
     return;
   }
   const node = ensure();
   node.textContent = LABELS[state];
   node.dataset.state = state;
-  style(node, ALARMING.has(state) ? ALARM : REST);
-  paintLook(node, { background: ALARMING.has(state) ? null : TOKENS.surface });
+  style(node, ALARM);
+  paintLook(node, { background: null });
   set(node, "opacity", "1");
-  clearTimeout(hideTimer);
-  if (!STICKY.has(state)) hideTimer = setTimeout(() => { set(node, "opacity", "0"); }, 2200);
 }
 
 export function remove() {
-  clearTimeout(hideTimer);
-  hideTimer = null;
   el?.remove();
   el = null;
 }

package/src/plugins/indicator.js

@@ -7,8 +7,16 @@ const SAVE_EVENTS = ["saving", "saved", "error", "offline", "retrying", "blocked
 // The drawing arrives on demand; states that come before it are shown in order once it has.
 let chip = null;
 const loadChip = () => (chip ??= import("./indicator-chip.js"));
-const show = (state) => {
-  loadChip().then((m) => { if (listeners) m.show(state); }, () => {});
+const show = (state, detail) => {
+  loadChip().then((m) => { if (listeners) m.show(state, detail); }, () => {});
+};
+
+// The page editor puts up its own notice, with Download and Copy text, whenever it cannot
+// save at all (plugins/page.js showBlocked and showFull), so the chip stands down for those.
+const PAGE_NOTICED = new Set(["blocked", "unavailable"]);
+const showPageState = (state) => {
+  if (!PAGE_NOTICED.has(state)) return show(state);
+  loadChip().then((m) => { if (listeners) m.standDown(); }, () => {});
 };
 
 let listeners = null;
@@ -25,9 +33,10 @@ function arm() {
     document.addEventListener(type, loadChip, { signal, once: true, capture: true });
   }
   for (const state of SAVE_EVENTS) {
-    document.addEventListener("clay:save-" + state, () => show(state), { signal });
+    document.addEventListener("clay:save-" + state, (event) => show(state, event.detail), { signal });
   }
-  document.addEventListener("clay:page-save-state", (event) => show(event.detail?.state), { signal });
+  document.addEventListener("clay:blockeditor-save-state", (event) => showPageState(event.detail?.state), { signal });
+  document.addEventListener("clay:save-status", (event) => show(event.detail?.state), { signal });
 }
 
 function disarm() {