litura-app 0.3.4 → 0.3.6

package/CHANGELOG.md

@@ -5,6 +5,14 @@ number carries breaking changes.
 
 ## Unreleased
 
+## 0.3.6 — 2026-09-07
+
+- Published the latest editor interface and behavior updates together with the product audit and local draft history.
+
+## 0.3.5 — 2026-09-07
+
+- Refreshed the README preview with natural generic-writing highlights and meaningful rewrite options in a full-screen review flow.
+
 ## 0.3.4 — 2026-09-07
 
 - Refreshed the README preview with a full-screen Litura review flow and three rewrite options.

package/README.md

@@ -2,7 +2,7 @@
 
 Litura is a local, AI-assisted text editor for making prose sharper and less generic without taking control away from its author. The name comes from Latin: a correction, erasure, or visible revision in a manuscript.
 
-![Litura editor with review marks and rewrite options](docs/screenshot.png)
+![Litura editor with review highlights and rewrite options](docs/screenshot.png)
 
 ## What it does
 

package/SPEC.md

@@ -89,8 +89,8 @@ The panel keeps what is about the draft as a whole: typed messages, replies, `Re
 - One field, no mode control. What the message does is decided by what is attached: a passage the writer selected is a rewrite target, a finding is something to ask about, and nothing attached is a conversation about the draft. The placeholder says which of the three is active.
 - `Enter` sends; `Shift+Enter` inserts a newline.
 - `Escape` cancels an active request or detaches the current selection.
-- A single control above the stream closes what the assistant is showing and opens it again: `×` over an open conversation, `Conversation` over a closed one. One press puts away both the turns and the finding cards standing in the rail — two `×` in two places for one idea is two presses to get a clean screen. The composer is not part of it: it is how the writer talks to the draft at all, so it is always there.
-- Closing is a view, not an edit. Nothing is discarded: the turns stay in memory and in storage, the findings and their marks stay in the draft, and clicking a mark builds its card again without reopening the conversation. Anything new arriving opens the stream by itself, so a reply never lands somewhere the writer cannot see. There is no control that discards the conversation; replacing the document does that, and the server only ever reads the last 20 turns.
+- A single control above the stream closes what the assistant is showing and opens it again: `×` over an open conversation, `Conversation` over a closed one — and no control at all while the stream is empty, so the toggle never flips over an empty panel. One press puts away both the turns and the finding cards standing in the rail — two `×` in two places for one idea is two presses to get a clean screen. The composer is not part of it: it is how the writer talks to the draft at all, so it is always there.
+- Closing is a view, not an edit. The turns stay in memory and in storage, applied options stay with their `Undo`, and the findings and their marks stay in the draft — clicking a mark builds its card again. Remark cards and undecided option groups are put away. Anything new arriving opens the stream by itself, so a reply never lands somewhere the writer cannot see; merely moving cards between the rail and the stream on resize never opens it. There is no control that discards the conversation; replacing the document does that, and the server only ever reads the last 20 turns.
 - A failed model call is one short sentence naming the cause — a rejected key, a rate limit, an overloaded provider — and one button doing something about it. The sentence never carries the remedy as a second clause: `Try again` is the remedy. Where retrying cannot help there is no retry, and a key problem offers `Open settings` instead. The provider's payload goes to the tooltip and the console, where it is there for a bug report and nowhere else.
 
 ## 3. Writing workflows
@@ -167,27 +167,15 @@ There is one replacement scope, and it is the quoted passage. The tint in the dr
 
 For an ordinary selection, the next composer message becomes the rewrite instruction.
 
-The server returns exactly three strings, and they are tried on rather than listed. One at a time, the option is substituted into the draft where the passage sits, so it is read with the sentences around it — which is what decides whether it works. It arrives on a plain white sheet rather than the accent tint a mark or an attached passage carries: inside a preview, colour belongs to the edit, and a wash underneath drowns it. Nothing is ranked or reordered by a local metric.
+The server returns exactly three strings, shown as a stack of option cards in the chat stream. Clicking a card replaces only the attached range; the remaining cards then retire. Requesting the options hides the finding card — it has said its piece — and a failed request brings it back. The group carries a refresh-icon `Try again` control that discards the three and re-requests them with the same instruction and the same attached passage.
 
-A finding card holds one thing at a time: the remark, then the request in flight, then the strip. Clicking `Options` replaces the remark with `Looking for options…`; when the answer lands the same slot holds the strip instead. Cancelling — `Escape`, editing, `Try again` finding nothing — puts the remark back exactly as it was.
+The client ranks what the model already produced by the resulting whole-document local score and shows that score delta on each card for Latin-script drafts. Colour marks only a material move; a point or two on an already-clean draft stays uncoloured so the options do not all read as bad. The score is never fed to the model.
 
-Only the remark is worth a box. For the two states after it the card keeps its place in the rail and drops its walls: a bordered panel around a status line, or around a row of stepper controls, is more furniture than a passing moment deserves. The strip carries no border, background or padding of its own — the controls are the interface, and nothing needs to hold them. Without a card — an ordinary selection, or `/idea` — the strip has no block to sit in and stands on its own: in the rail beside the passage, or above the composer in place of `Review draft` when there is no rail.
+While the options are up the attached passage stays highlighted in the draft, and hovering or focusing a card previews that option where it will live — substituted into the paragraph with the sentences around it, on a plain white sheet with no red/green diff. The document itself is untouched while the writer is choosing, so nothing is autosaved, no finding is re-anchored, and undo stays clean until the writer keeps one. `Enter` or `Space` on a focused card applies it; `Escape` dismisses the hover preview. Clicking into the draft only drops the hover preview — the cards stay, because choosing is a click on a card.
 
-The substitution itself is a decoration, not an edit: the document is untouched while the writer is choosing, so nothing is autosaved, no finding is re-anchored, and undo stays clean.
+A coloured word-level diff (added/removed runs animated in reading order, via `wordDiff`) is deliberately not on this path. It is kept in the tree as a noted option for another place (e.g. history compare), where showing what changed word by word is the job.
 
-- `‹ N of 3 ›` steps through the options and the writer's own wording as one ring — `Original`, then 1, 2, 3, and round again — also with `←` and `→`;
-- an option is shown as a word-level edit script against the writer's own wording. What the edit *is* stays on the line for as long as the option is up: cut words stay struck through, added words stay where they landed. What is temporary is the colour. It walks through the changed runs in reading order, ninety milliseconds apart, holds for about a second and a half, and leaves the same way — so the passage announces what changed and then settles into something readable as a sentence rather than as a coloured diff. Nothing about the highlight animates size; the line's reserved height is measured against this, and a highlight that moved the text would make that measurement a lie. A cut longer than 120 characters is not struck through: a rewritten paragraph in strikethrough is a wall, not a diff;
-- every option is a different length, so the paragraph would rewrap and step the rest of the draft up and down as the writer flips through. The tallest of the stops — the writer's own wording included — is measured once against a copy of the real line when the options arrive, and reserved as a minimum height on that line. Shorter options leave a little slack rather than dragging the page up. A rewrite spanning whole paragraphs is not reserved: it already replaces blocks, where there is nothing to hold still;
-- stepping back to `Original` runs the same close-up in reverse — the option's words are the ones that go, the writer's own come back untinted — and only then does the sheet leave, so nothing about the passage ever cuts;
-- `Try again` discards the three and re-requests them with the same instruction and the same passage.
-
-There is no confirm button. Whatever stop the writer leaves the ring on is what the draft keeps, because they have been reading that stop in place the whole time and `Original` is one of the stops. Leaving happens by pressing `Enter`, clicking into the draft, or turning to another finding; the replacement covers the range the answer was generated for, and only while that range still holds its original text. `Escape` returns the ring to `Original` and closes, so cancelling is still cancelling. Focus moves to the strip when the options arrive: at that moment the writer is choosing, not typing.
-
-An edit nobody pressed a button for has to leave a way back in sight. After a replacement a single `Undo` stands for eight seconds in the same card the options sat in, beside the sentence that changed; there is no word for what happened, because the sentence says it. It stands on its own, with no panel around one button, and the countdown is in the button itself: a bar across its foot drains over those eight seconds, so the control is also the clock, and the writer sees the offer expiring rather than guessing at it. `Undo` puts back exactly what was replaced and only while it is still there to put back — it is not the editor's undo stack, which by then may belong to something the writer typed afterwards. The History snapshot taken before every replacement is the longer way back.
-
-Nothing commits on a timer. A document that changes while its author is looking out of the window is the one thing the product principles rule out.
-
-A finding card is hidden while its own options are on screen — it has said its piece, and the strip owns the decision. Leaving on `Original` or pressing `Escape` brings it back; keeping an option removes it, because the passage it remarked on is gone.
+Keeping an option leaves only that option in the chat — the other cards step aside — with a single `Undo` on the kept card itself, with no timer: it stays good until the passage changes under it. `Undo` puts back exactly what was replaced and only while it is still there to put back; keeping also takes a History snapshot, which is the longer way back. Choosing an option closes the chat stream; the kept card and its `Undo` survive in the stream history. Closing discards remark cards and undecided option groups but keeps applied ones. Nothing commits on a timer.
 
 ### 3.5 Draft chat
 
@@ -216,7 +204,7 @@ A failed continuation says so in the status line rather than going quiet: a feat
 
 ### 3.7 `/idea` expansion
 
-Typing `/idea <instruction>` on a line and pressing `Enter` streams the expansion into the assistant panel, then offers it as a preview over the command line — the same try-on strip as a rewrite, with one option and no `Try again`. The command line is replaced only if the writer keeps it.
+Typing `/idea <instruction>` on a line and pressing `Enter` streams the expansion into the assistant panel, then offers it as a single option card — the same cards as a rewrite, with one option and no `Try again`. The command line is replaced only if the writer keeps it.
 
 If the request fails or is stopped, whatever arrived stays in the panel as text and the command line is untouched.
 

package/editing.js

@@ -18,6 +18,10 @@ export function newerVersion(latest, current) {
 // reading order, so the change can be shown one word at a time instead of as
 // one opaque block. Spaces the rewrite did not touch stay untouched.
 //
+// NOTE: kept as a noted option for another place (e.g. history compare or a
+// future coloured diff). Rewrite variants currently preview on a plain white
+// sheet with no red/green — this helper is not on that path right now.
+//
 // ponytail: plain LCS table, O(words²) — a sentence or a paragraph, not a
 // book. Past the guard it falls back to a single changed run, which is what
 // the coarse version always did.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "litura-app",
-  "version": "0.3.4",
+  "version": "0.3.6",
   "description": "A local AI-assisted editor for sharper, more human writing",
   "keywords": [
     "writing",

package/public/app.js

@@ -16866,42 +16866,6 @@
     for (let i = 0; i < 3; i++) if (a[i] !== b[i]) return a[i] > b[i];
     return false;
   }
-  function wordDiff(before, after) {
-    const a = before.match(/\s+|\S+/g) ?? [], b = after.match(/\s+|\S+/g) ?? [];
-    if (a.length * b.length > 4e4) return coarseDiff(a, b);
-    const lcs = Array.from({ length: a.length + 1 }, () => new Uint32Array(b.length + 1));
-    for (let i2 = a.length - 1; i2 >= 0; i2--) {
-      for (let j2 = b.length - 1; j2 >= 0; j2--) {
-        lcs[i2][j2] = a[i2] === b[j2] ? lcs[i2 + 1][j2 + 1] + 1 : Math.max(lcs[i2 + 1][j2], lcs[i2][j2 + 1]);
-      }
-    }
-    const ops = [];
-    const push = (type, text) => {
-      const last = ops[ops.length - 1];
-      if (last && last.type === type) last.text += text;
-      else ops.push({ type, text });
-    };
-    let i = 0, j = 0;
-    while (i < a.length && j < b.length) {
-      if (a[i] === b[j]) push("keep", a[i++]), j++;
-      else if (lcs[i + 1][j] >= lcs[i][j + 1]) push("del", a[i++]);
-      else push("ins", b[j++]);
-    }
-    while (i < a.length) push("del", a[i++]);
-    while (j < b.length) push("ins", b[j++]);
-    return ops;
-  }
-  function coarseDiff(a, b) {
-    let start = 0, end = 0;
-    while (start < a.length && start < b.length && a[start] === b[start]) start++;
-    while (end < a.length - start && end < b.length - start && a[a.length - end - 1] === b[b.length - end - 1]) end++;
-    return [
-      { type: "keep", text: a.slice(0, start).join("") },
-      { type: "del", text: a.slice(start, a.length - end).join("") },
-      { type: "ins", text: b.slice(start, b.length - end).join("") },
-      { type: "keep", text: end ? a.slice(-end).join("") : "" }
-    ].filter((op) => op.text);
-  }
 
   // node_modules/@codemirror/search/dist/index.js
   var basicNormalize = typeof String.prototype.normalize == "function" ? (x) => x.normalize("NFKD") : (x) => x;
@@ -18436,9 +18400,8 @@
       event.preventDefault();
       jumpToNextFinding(event.shiftKey ? -1 : 1);
     }
-    if (event.key === "Escape" && preview) {
-      preview.index = -1;
-      endPreview();
+    if (event.key === "Escape" && plainPreview) {
+      clearPlainPreview();
       workView.focus();
     }
   });
@@ -18448,10 +18411,16 @@
     if (finding) dismissed.push({ code: finding.code, quote: finding.quote, document: workView.state.doc.toString() });
     docStorage.setItem("dismissed", JSON.stringify(dismissed.slice(-100)));
     reviewFindings = reviewFindings.filter((finding2) => finding2.id !== id);
-    findingCards.get(id)?.remove();
+    const card = findingCards.get(id);
+    if (card) {
+      railAnchors.delete(card);
+      railHomes.delete(card);
+      card.remove();
+    }
     findingCards.delete(id);
     workView.dispatch({ effects: dropReviewFx.of(id) });
     if (activeFinding?.id === id) detach();
+    else clearPlainPreview();
     saveFindings();
     syncReviewLabel();
   }
@@ -18468,8 +18437,9 @@
     if (saved.document === workView.state.doc.toString() && saved.findings?.length && mergeFindings(saved.findings)) syncReviewLabel();
   }
   function clearReview() {
-    for (const card of findingCards.values()) card.remove();
-    findingCards.clear();
+    discardFindingCards();
+    for (const stale of document.querySelectorAll(".chat-variants")) stale.remove();
+    clearPlainPreview();
     reviewFindings = [];
     checkedSentences.clear();
     workView.dispatch({ effects: setReviewFx.of([]) });
@@ -18774,7 +18744,7 @@
       }
       if (!answer.trim()) throw new Error("The model returned no passage");
       bubble.remove();
-      showPreview([answer], null, target);
+      showVariants([answer], null, target, null);
     } catch (error) {
       bubble.title = error.message;
       bubble.textContent = (answer ? answer + "\n\n" : "") + (job.signal.aborted ? "Stopped. " : `${modelError(error).say} `) + "The original idea is unchanged.";
@@ -18846,7 +18816,7 @@
   }
   function placeHome(node) {
     const home = railHomes.get(node) ?? chatStream;
-    if (home === chatStream) chatAdd(node);
+    if (home === chatStream) streamAppend(node);
     else home.insertBefore(node, document.getElementById("review-status"));
   }
   function railAdd(node, anchor, home = chatStream) {
@@ -18884,16 +18854,32 @@
     chatClear.setAttribute("aria-label", open ? "Close the conversation" : "Show the conversation");
     chatClear.title = open ? "Close \u2014 nothing is discarded" : "Show the conversation";
     if (open) {
+      chatClear.hidden = false;
       chatScroll(true);
       return;
     }
     chatStream.hidden = true;
     detach();
-    for (const card of findingCards.values()) card.remove();
+    discardFindingCards();
+    for (const stale of document.querySelectorAll(".chat-variants")) {
+      if (!stale.querySelector(".variant-card.is-applied")) stale.remove();
+    }
+    chatClear.hidden = chatStream.children.length === 0;
+    layoutRail();
+  }
+  function discardFindingCards() {
+    for (const card of findingCards.values()) {
+      railAnchors.delete(card);
+      railHomes.delete(card);
+      card.remove();
+    }
     findingCards.clear();
   }
   function chatAdd(node) {
     setChatOpen(true);
+    return streamAppend(node);
+  }
+  function streamAppend(node) {
     const stick = chatAtBottom();
     chatStream.append(node);
     chatScroll(stick);
@@ -18911,7 +18897,7 @@
     if (focusComposer) chatInput.focus();
   }
   function detach() {
-    cancelPreview();
+    clearPlainPreview();
     attached = null;
     activeFinding = null;
     chatChip.classList.add("hidden");
@@ -18927,94 +18913,69 @@
     });
     return range;
   }
-  var REVERT_MS = 700;
-  var VariantWidget = class extends WidgetType {
-    constructor(text, original, block2, reverting) {
+  var DELTA_MATERIAL = 5;
+  var PlainVariantWidget = class extends WidgetType {
+    constructor(text, block2) {
       super();
       this.text = text;
-      this.original = original;
       this.block = block2;
-      this.reverting = reverting;
     }
     eq(other) {
-      return other.text === this.text && other.block === this.block && other.reverting === this.reverting;
+      return other.text === this.text && other.block === this.block;
     }
     toDOM() {
       const node = document.createElement(this.block ? "div" : "span");
-      node.className = this.reverting ? "cm-variant is-reverting" : "cm-variant";
-      node.append(variantNodes(this.original, this.text));
+      node.className = "cm-variant-plain";
+      node.textContent = this.text;
       return node;
     }
-  };
-  var WORD_STEP = 90;
-  var WORD_STEPS_MAX = 10;
-  function variantNodes(original, text) {
-    const fragment = document.createDocumentFragment();
-    let step = 0;
-    for (const op of wordDiff(original, text)) {
-      if (op.type === "keep") {
-        fragment.append(op.text);
-        continue;
-      }
-      if (op.type === "del" && op.text.length > 120) continue;
-      const part = document.createElement(op.type === "del" ? "del" : "ins");
-      part.className = op.type === "del" ? "cm-variant-old" : "cm-variant-new";
-      part.textContent = op.text;
-      part.style.animationDelay = `${Math.min(step++, WORD_STEPS_MAX) * WORD_STEP}ms`;
-      fragment.append(part);
-    }
-    return fragment;
-  }
-  function reservedHeight(target, variants) {
-    const line = workView.state.doc.lineAt(target.from);
-    if (line.number !== workView.state.doc.lineAt(target.to).number) return 0;
-    const at = workView.domAtPos(line.from).node;
-    const lineEl = (at.nodeType === 1 ? at : at.parentElement)?.closest(".cm-line");
-    if (!lineEl) return 0;
-    const probe = document.createElement("div");
-    probe.className = lineEl.className;
-    probe.style.cssText = `position:absolute;visibility:hidden;pointer-events:none;width:${lineEl.clientWidth}px`;
-    lineEl.parentElement.append(probe);
-    const before = workView.state.sliceDoc(line.from, target.from);
-    const after = workView.state.sliceDoc(target.to, line.to);
-    let tallest = 0;
-    try {
-      for (const option of [target.text, ...variants]) {
-        probe.replaceChildren(before, variantNodes(target.text, option), after);
-        tallest = Math.max(tallest, probe.offsetHeight);
-      }
-    } finally {
-      probe.remove();
+    ignoreEvent() {
+      return true;
     }
-    return tallest;
-  }
-  var setVariantFx = StateEffect.define();
-  var variantField = StateField.define({
+  };
+  var setPlainVariantFx = StateEffect.define();
+  var variantPlainField = StateField.define({
     create: () => null,
     update(value, tr) {
       if (tr.docChanged) return null;
-      for (const effect of tr.effects) if (effect.is(setVariantFx)) return effect.value;
+      for (const effect of tr.effects) if (effect.is(setPlainVariantFx)) return effect.value;
       return value;
     },
     provide: (field) => EditorView.decorations.from(field, (value) => {
       if (!value) return Decoration.none;
-      const marks2 = [];
-      if (value.reserve) {
-        marks2.push(Decoration.line({ attributes: { style: `min-height:${value.reserve}px` } }).range(value.lineFrom));
-      }
-      marks2.push(Decoration.replace({
-        widget: new VariantWidget(value.text, value.original, value.block, value.reverting),
+      return Decoration.set([Decoration.replace({
+        widget: new PlainVariantWidget(value.text, value.block),
         block: value.block
-      }).range(value.from, value.to));
-      return Decoration.set(marks2, true);
+      }).range(value.from, value.to)], true);
     })
   });
-  function applyText(text, target) {
+  var plainPreview = null;
+  function showPlainPreview(text, target) {
+    plainPreview = { target };
+    workView.dispatch({
+      effects: [setPlainVariantFx.of({
+        from: target.from,
+        to: target.to,
+        text,
+        block: workView.state.doc.lineAt(target.from).number !== workView.state.doc.lineAt(target.to).number
+      })]
+    });
+  }
+  function clearPlainPreview() {
+    if (!plainPreview) return;
+    plainPreview = null;
+    try {
+      workView.dispatch({ effects: setPlainVariantFx.of(null) });
+    } catch {
+    }
+  }
+  function applyText(text, target, wrap = null, card = null) {
     if (!replacementTarget(workView.state.doc.toString(), target) || workView.state.readOnly) {
       chatAdd(chatEl("div", "chat-error", "The draft changed since this answer. Select the passage and request new options."));
       return;
     }
     const range = target;
+    clearPlainPreview();
     saveSnapshot("Before AI replacement");
     workView.dispatch({
       changes: { from: range.from, to: range.to, insert: text },
@@ -19023,6 +18984,48 @@
     workView.focus();
     save();
     detach();
+    if (card) card.classList.add("is-applied");
+    if (wrap) {
+      wrap.classList.add("is-spent");
+      for (const sibling of wrap.querySelectorAll(".variant-card")) {
+        if (sibling !== card) sibling.hidden = true;
+      }
+      const foot = wrap.querySelector(".variant-foot");
+      if (foot) foot.hidden = true;
+      const soloHint = wrap.querySelector(":scope > .variant-hint");
+      if (soloHint) soloHint.hidden = true;
+      attachUndo(card, text, target);
+      setChatOpen(false);
+    }
+  }
+  function attachUndo(card, text, target) {
+    if (!card) return;
+    let row = card.querySelector(".variant-undo-row");
+    if (!row) {
+      row = chatEl("div", "variant-undo-row");
+      const undo3 = chatEl("button", "chat-again", "Undo");
+      undo3.type = "button";
+      undo3.title = "Put the passage back as it was";
+      undo3.addEventListener("click", () => {
+        const at = Number(undo3.dataset.from);
+        const { applied, previous } = undo3.dataset;
+        if (workView.state.sliceDoc(at, at + applied.length) !== applied) {
+          chatAdd(chatEl("div", "chat-error", "That passage has changed since. Use the editor\u2019s undo instead."));
+          return;
+        }
+        workView.dispatch({ changes: { from: at, to: at + applied.length, insert: previous }, selection: { anchor: at + previous.length } });
+        workView.focus();
+        save();
+        undo3.closest(".chat-variants")?.remove();
+        if (chatStream.children.length === 0) setChatOpen(false);
+      });
+      row.append(undo3);
+      card.append(row);
+    }
+    const undo2 = row.querySelector("button");
+    undo2.dataset.from = String(target.from);
+    undo2.dataset.applied = text;
+    undo2.dataset.previous = target.text;
   }
   function markFor(id) {
     return workView.dom.querySelector(`.cm-slop[data-slop-id="${id}"]`);
@@ -19030,7 +19033,7 @@
   function syncActiveCard() {
     for (const [id, card] of findingCards) card.classList.toggle("is-active", id === activeFinding?.id);
   }
-  function findingCard(finding) {
+  function findingCard(finding, instruction) {
     const card = chatEl("div", "chat-card");
     card.addEventListener("mouseenter", () => markFor(finding.id)?.classList.add("is-hot"));
     card.addEventListener("mouseleave", () => markFor(finding.id)?.classList.remove("is-hot"));
@@ -19040,9 +19043,8 @@
     dismiss.setAttribute("aria-label", "Dismiss this finding");
     dismiss.addEventListener("click", () => {
       chatAbort?.abort();
+      clearPlainPreview();
       dismissFinding(finding.id);
-      cancelPreview();
-      card.remove();
     });
     card.append(
       dismiss,
@@ -19058,167 +19060,131 @@
         if (!card.querySelector(".chat-error")) card.append(chatEl("div", "chat-error", "This passage has changed. Run Review again."));
         return;
       }
-      const target = { ...live, text: workView.state.sliceDoc(live.from, live.to) };
-      attach(target, finding, false);
-      requestVariants(`Fix ${finding.pattern}: ${finding.fix}. Preserve facts and voice. Replace only the quoted passage.`, null, card);
+      offer.disabled = true;
+      offer.textContent = "Looking\u2026";
+      if (activeFinding?.id !== finding.id) {
+        const target = { ...live, text: workView.state.sliceDoc(live.from, live.to) };
+        attach(target, finding, false);
+      }
+      requestVariants(instruction, null, card);
     });
     card.append(offer);
     return card;
   }
-  var previewStrip = document.getElementById("chat-preview");
-  var cardContent = /* @__PURE__ */ new WeakMap();
-  function cardShow(card, ...nodes) {
-    if (!cardContent.has(card)) cardContent.set(card, [...card.childNodes]);
-    card.classList.add("is-bare");
-    card.replaceChildren(...nodes);
-  }
-  function cardRestore(card) {
-    const saved = cardContent.get(card);
-    if (!saved) return;
-    card.classList.remove("is-bare");
-    card.replaceChildren(...saved);
-    cardContent.delete(card);
-  }
-  var previewCount = document.getElementById("preview-count");
-  var previewKept = document.getElementById("preview-kept");
-  var preview = null;
-  var keptTimer = null;
-  var revertTimer = null;
-  function renderPreview() {
-    reviewButton.hidden = !!preview;
-    previewStrip.hidden = !preview;
-    if (!preview) {
-      clearTimeout(revertTimer);
-      workView.dispatch({ effects: setVariantFx.of(null) });
-      return;
-    }
-    const { target, index, variants } = preview;
-    const original = index < 0;
-    previewCount.textContent = original ? "Original" : `${index + 1} of ${variants.length}`;
-    document.getElementById("preview-again").hidden = preview.instruction === null;
-    const text = original ? target.text : variants[index];
-    const against = original ? variants[preview.shown] : target.text;
-    if (!original) preview.shown = index;
-    workView.dispatch({
-      effects: [
-        setVariantFx.of({
-          from: target.from,
-          to: target.to,
-          lineFrom: workView.state.doc.lineAt(target.from).from,
-          reserve: preview.reserve,
-          text,
-          original: against,
-          reverting: original,
-          block: workView.state.doc.lineAt(target.from).number !== workView.state.doc.lineAt(target.to).number
-        }),
-        EditorView.scrollIntoView(target.from, { y: "center" })
-      ]
+  function variantCards(variants, instruction, target, card = null) {
+    const doc2 = workView.state.doc.toString();
+    const measurable = isLatinScript(doc2);
+    const base2 = measurable ? styleScore(doc2).score : null;
+    const scored = variants.map((text) => ({
+      text,
+      score: measurable ? styleScore(doc2.slice(0, target.from) + text + doc2.slice(target.to)).score : null
+    }));
+    if (measurable) scored.sort((a, b) => a.score - b.score);
+    const wrap = chatEl("div", "chat-variants");
+    wrap.setAttribute("role", "list");
+    wrap.dataset.targetFrom = String(target.from);
+    scored.forEach(({ text, score }, index) => {
+      const item = chatEl("div", "variant-card");
+      item.setAttribute("role", "listitem");
+      item.tabIndex = 0;
+      item.setAttribute("role", "button");
+      item.setAttribute("aria-label", `Apply option ${index + 1}`);
+      const label = chatEl("div", "variant-label", `Option ${index + 1}`);
+      if (score !== null) {
+        const move = score - base2;
+        const tone = move <= -DELTA_MATERIAL ? " is-better" : move >= DELTA_MATERIAL ? " is-worse" : "";
+        const delta = chatEl("span", `variant-delta${tone}`, `${base2} \u2192 ${score}`);
+        delta.title = "Local AI-tell score for the whole draft if you pick this variant";
+        label.append(delta);
+      }
+      const body = chatEl("div", "variant-text", text);
+      item.append(label, body);
+      const previewIt = () => {
+        if (wrap.classList.contains("is-spent")) return;
+        if (!replacementTarget(workView.state.doc.toString(), target)) return;
+        showPlainPreview(text, target);
+      };
+      const unpreview = () => clearPlainPreview();
+      item.addEventListener("mouseenter", previewIt);
+      item.addEventListener("mouseleave", unpreview);
+      item.addEventListener("focus", previewIt);
+      item.addEventListener("blur", unpreview);
+      const apply = () => {
+        if (!wrap.classList.contains("is-spent")) applyText(text, target, wrap, item);
+      };
+      item.addEventListener("click", apply);
+      item.addEventListener("keydown", (event) => {
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          apply();
+        } else if (event.key === "Escape") {
+          event.preventDefault();
+          unpreview();
+          item.blur();
+          workView.focus();
+        }
+      });
+      wrap.append(item);
     });
-    clearTimeout(revertTimer);
-    if (original) {
-      revertTimer = setTimeout(() => {
-        if (preview?.index === -1) workView.dispatch({ effects: setVariantFx.of(null) });
-      }, REVERT_MS);
-    }
-  }
-  function showPreview(variants, instruction, target, card = null) {
-    hideKept();
-    preview = { variants, instruction, target, index: 0, shown: 0, card };
-    preview.reserve = reservedHeight(target, variants);
-    previewStrip.hidden = false;
-    if (card) cardShow(card, previewStrip);
-    else railAdd(previewStrip, () => preview?.target.from ?? null, document.querySelector(".chat-recipes"));
-    renderPreview();
-    document.getElementById("preview-next").focus();
-  }
-  function cancelPreview() {
-    if (!preview) return;
-    const { card } = preview;
-    preview = null;
-    railAnchors.delete(previewStrip);
-    previewStrip.style.top = "";
-    previewStrip.style.visibility = "";
-    document.querySelector(".chat-recipes").insertBefore(previewStrip, document.getElementById("review-status"));
-    if (card) cardRestore(card);
-    renderPreview();
-  }
-  function endPreview() {
-    if (!preview) return;
-    const { variants, index, target, card } = preview;
-    cancelPreview();
-    if (index < 0) return;
-    applyText(variants[index], target);
-    card?.remove();
-    showKept(variants[index], target);
-  }
-  function stepPreview(delta) {
-    if (!preview) return;
-    const stops = preview.variants.length + 1;
-    preview.index = (preview.index + 1 + delta + stops) % stops - 1;
-    renderPreview();
-  }
-  var KEPT_MS = 8e3;
-  function showKept(text, target) {
-    clearTimeout(keptTimer);
-    railAdd(previewKept, () => target.from, document.querySelector(".chat-recipes"));
-    previewKept.hidden = false;
-    previewKept.dataset.from = target.from;
-    previewKept.dataset.applied = text;
-    previewKept.dataset.previous = target.text;
-    previewKept.style.setProperty("--kept-ms", `${KEPT_MS}ms`);
-    previewKept.classList.remove("is-counting");
-    void previewKept.offsetWidth;
-    previewKept.classList.add("is-counting");
-    keptTimer = setTimeout(hideKept, KEPT_MS);
-  }
-  function hideKept() {
-    clearTimeout(keptTimer);
-    previewKept.hidden = true;
-    previewKept.classList.remove("is-counting");
-    railAnchors.delete(previewKept);
-    previewKept.style.top = "";
-    previewKept.style.visibility = "";
-    document.querySelector(".chat-recipes").insertBefore(previewKept, document.getElementById("review-status"));
-  }
-  document.getElementById("preview-undo").addEventListener("click", () => {
-    const from = Number(previewKept.dataset.from);
-    const { applied, previous } = previewKept.dataset;
-    hideKept();
-    if (workView.state.sliceDoc(from, from + applied.length) !== applied) {
-      chatAdd(chatEl("div", "chat-error", "That passage has changed since. Use the editor\u2019s undo instead."));
-      return;
-    }
-    workView.dispatch({ changes: { from, to: from + applied.length, insert: previous }, selection: { anchor: from + previous.length } });
-    workView.focus();
-    save();
-  });
-  document.getElementById("preview-prev").addEventListener("click", () => stepPreview(-1));
-  document.getElementById("preview-next").addEventListener("click", () => stepPreview(1));
-  document.getElementById("preview-again").addEventListener("click", () => {
-    if (!preview) return;
-    const { instruction, target, card } = preview;
-    cancelPreview();
-    if (!replacementTarget(workView.state.doc.toString(), target)) {
-      chatAdd(chatEl("div", "chat-error", "This answer is out of date. Select the passage again."));
-      return;
-    }
-    requestVariants(instruction, target, card);
-  });
-  previewStrip.addEventListener("keydown", (event) => {
-    if (event.key === "ArrowLeft") {
-      event.preventDefault();
-      stepPreview(-1);
+    if (instruction !== null) {
+      const foot = chatEl("div", "variant-foot");
+      const again = chatEl("button", "chat-again is-icon");
+      again.type = "button";
+      again.setAttribute("aria-label", "Try again \u2014 ask for three more");
+      again.title = "Try again \u2014 ask for three more";
+      again.innerHTML = '<svg viewBox="0 0 20 20" width="15" height="15" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><polyline points="19.17 3.33 19.17 8.33 14.17 8.33"/><path d="M17.07 12.5a7.5 7.5 0 1 1-1.77-7.8l3.87 3.63"/></svg>';
+      again.addEventListener("click", () => {
+        if (wrap.classList.contains("is-spent")) return;
+        clearPlainPreview();
+        wrap.remove();
+        requestVariants(instruction, target, card);
+      });
+      const hint = chatEl("span", "variant-hint", "Hover to preview \xB7 Click to apply \xB7 Esc to dismiss");
+      foot.append(hint, again);
+      wrap.append(foot);
+    } else {
+      const hint = chatEl("div", "variant-hint", "Hover to preview \xB7 Click to apply \xB7 Esc to dismiss");
+      wrap.append(hint);
+    }
+    return wrap;
+  }
+  function skeletonCards(count = 3) {
+    const wrap = chatEl("div", "chat-variants is-loading");
+    wrap.setAttribute("aria-busy", "true");
+    for (let i = 0; i < count; i++) {
+      const item = chatEl("div", "variant-card is-loading");
+      item.append(
+        chatEl("div", "skeleton skeleton-label"),
+        chatEl("div", "skeleton skeleton-line"),
+        chatEl("div", "skeleton skeleton-line is-short")
+      );
+      wrap.append(item);
     }
-    if (event.key === "ArrowRight") {
-      event.preventDefault();
-      stepPreview(1);
+    return wrap;
+  }
+  function hideFindingCard(card) {
+    if (!card || card.hidden) return;
+    card.hidden = true;
+    layoutRail();
+  }
+  function restoreFindingCard(card) {
+    if (!card) return;
+    const offer = card.querySelector(".chat-offer:disabled");
+    if (offer) {
+      offer.disabled = false;
+      offer.textContent = "Options";
     }
-    if (event.key === "Enter") {
-      event.preventDefault();
-      endPreview();
-      workView.focus();
+    if (!card.hidden) return;
+    card.hidden = false;
+    layoutRail();
+  }
+  function showVariants(variants, instruction, target) {
+    chatAdd(variantCards(variants, instruction, target));
+    try {
+      workView.dispatch({ effects: EditorView.scrollIntoView(target.from, { y: "center" }) });
+    } catch {
     }
-  });
+  }
   async function requestVariants(instruction, existingTarget = null, card = null) {
     const range = existingTarget ?? attachedRange();
     const target = existingTarget ?? (range && { ...range, document: workView.state.doc.toString() });
@@ -19228,8 +19194,9 @@
     }
     if (!await ensureAgent()) return;
     if (!replacementTarget(workView.state.doc.toString(), target)) return;
-    cancelPreview();
-    if (card) cardShow(card, chatEl("div", "card-working", "Looking for options\u2026"));
+    clearPlainPreview();
+    if (card) hideFindingCard(card);
+    const placeholder2 = chatAdd(skeletonCards());
     chatAbort?.abort();
     const job = startJob();
     chatAbort = job;
@@ -19250,11 +19217,24 @@
       const data = await res.json();
       if (!res.ok || data.error) throw new Error(data.error || `Server error ${res.status}`);
       if (!replacementTarget(workView.state.doc.toString(), target)) throw new Error("The draft changed while the rewrites were coming back. Select the passage again.");
-      showPreview(data.variants, instruction, target, card);
+      const stick = chatAtBottom();
+      const wrap = variantCards(data.variants, instruction, target);
+      if (placeholder2.isConnected) {
+        placeholder2.replaceWith(wrap);
+        chatScroll(stick);
+      } else {
+        placeholder2.remove();
+        chatAdd(wrap);
+      }
     } catch (error) {
-      if (card) cardRestore(card);
-      if (error.name === "AbortError") return;
+      if (error.name === "AbortError") {
+        placeholder2.remove();
+        restoreFindingCard(card);
+        return;
+      }
       console.error("[/rewrite]", error);
+      placeholder2.remove();
+      restoreFindingCard(card);
       chatAdd(errorCard(modelError(error), () => requestVariants(instruction, target, card)));
     } finally {
       finishJob(job);
@@ -19263,7 +19243,7 @@
   }
   var findingCards = /* @__PURE__ */ new Map();
   function openFinding(finding, center = false) {
-    endPreview();
+    clearPlainPreview();
     const range = findingRange(finding.id);
     if (!range) return;
     attach({ ...range, text: workView.state.sliceDoc(range.from, range.to) }, finding, false);
@@ -19272,7 +19252,10 @@
       chatScroll(true);
       return;
     }
-    findingCards.set(finding.id, railAdd(findingCard(finding), () => findingRange(finding.id)?.from ?? null));
+    const instruction = `Fix ${finding.pattern}: ${finding.fix}. Preserve facts and voice. Replace only the quoted passage.`;
+    const card = findingCard(finding, instruction);
+    findingCards.set(finding.id, railAdd(card, () => card.hidden ? null : findingRange(finding.id)?.from ?? null));
+    if (card.parentElement === chatStream) setChatOpen(true);
     syncActiveCard();
   }
   async function chatSend() {
@@ -19393,9 +19376,11 @@ Editing direction: ${activeFinding.fix}`,
     detach();
     chatInput.focus();
   });
+  chatClear.addEventListener("mousedown", (event) => event.preventDefault());
   chatClear.addEventListener("click", () => {
-    setChatOpen(chatStream.hidden);
-    chatInput.focus();
+    const open = chatStream.hidden;
+    setChatOpen(open);
+    (open ? chatInput : workView).focus();
   });
   document.addEventListener("keydown", (event) => {
     if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
@@ -19502,6 +19487,15 @@ Editing direction: ${activeFinding.fix}`,
       transition: "background .12s ease"
     },
     ".cm-slop:hover": { background: "var(--slop-tint-hover)" },
+    // Hover preview of a variant: a plain white sheet over the passage, no
+    // colours. The attached tint stays underneath for the passage itself; this
+    // replace decoration only shows while a card is hovered or focused.
+    ".cm-variant-plain": {
+      background: "var(--overlay)",
+      borderRadius: "2px",
+      boxShadow: "0 0 0 2px var(--overlay)",
+      borderBottom: "1px solid var(--border-strong)"
+    },
     // Slightly dim the content while /idea is streaming
     "&.streaming .cm-content": { opacity: "0.8" },
     // Placeholder text (shown when doc is empty)
@@ -19560,7 +19554,7 @@ Editing direction: ${activeFinding.fix}`,
         ghostField,
         reviewField,
         attachField,
-        variantField,
+        variantPlainField,
         // Read-only compartment — toggled during /idea streaming
         readonlyComp.of(EditorState.readOnly.of(true)),
         // Word wrap (essential for prose)
@@ -19586,9 +19580,10 @@ Editing direction: ${activeFinding.fix}`,
             openFinding(finding);
             return false;
           },
-          // Reaching for the text means the writer is done choosing.
+          // Reaching for the text dismisses a hover preview; the cards stay —
+          // choosing is a click on a card, not a click in the draft.
           mousedown() {
-            endPreview();
+            clearPlainPreview();
             return false;
           },
           contextmenu(event, view) {
@@ -19614,7 +19609,7 @@ Editing direction: ${activeFinding.fix}`,
                 detach();
               });
             }
-            if (preview) queueMicrotask(cancelPreview);
+            if (plainPreview) queueMicrotask(clearPlainPreview);
             if (reviewFindings.length) {
               syncReviewLabel();
               saveFindings();
@@ -19682,6 +19677,7 @@ Editing direction: ${activeFinding.fix}`,
     findingCards.clear();
     docStorage.removeItem("wa-chat");
     docStorage.removeItem("dismissed");
+    setChatOpen(false);
     loadingDocument = false;
   }
   function saveToDisk() {

package/public/index.html

@@ -73,24 +73,6 @@
     <!-- Actions that spend a model call sit with the assistant, not in the
          header: the draft's frame stays the draft's. -->
     <div class="chat-recipes">
-      <!-- Rewrites are tried on in the draft itself; this only steps through
-           them. display:contents keeps the buttons in the row above. -->
-      <span class="preview-controls" id="chat-preview" hidden>
-        <span class="preview-step">
-          <button type="button" class="recipe is-icon" id="preview-prev" aria-label="Previous option" title="Previous option (←)">‹</button>
-          <span id="preview-count"></span>
-          <button type="button" class="recipe is-icon" id="preview-next" aria-label="Next option" title="Next option (→)">›</button>
-        </span>
-        <button type="button" class="recipe is-icon" id="preview-again" aria-label="Try again" title="Try again — ask for three more">
-          <svg viewBox="0 0 20 20" width="15" height="15" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><polyline points="19.17 3.33 19.17 8.33 14.17 8.33"/><path d="M17.07 12.5a7.5 7.5 0 1 1-1.77-7.8l3.87 3.63"/></svg>
-        </button>
-        <small class="preview-hint">← → step · leaving keeps what you see · Esc restores</small>
-      </span>
-      <!-- A replacement nobody pressed a button for has to leave a way back
-           where the writer is already looking. -->
-      <span class="preview-controls" id="preview-kept" hidden>
-        <button type="button" class="recipe" id="preview-undo" title="Put the passage back as it was">Undo</button>
-      </span>
       <span id="review-status" role="status"></span>
     </div>
     <div class="chat-composer">

package/public/style.css

@@ -68,7 +68,7 @@
 /* Review actions live in the assistant panel. The status line is the last
    item and takes the leftover width, truncating rather than wrapping. */
 .chat-recipes { display: flex; align-items: center; gap: 8px; padding: 0 4px 8px; }
-.chat-recipes:not(:has(> #chat-preview:not([hidden]), > #ai-stop:not([hidden]), > #review-status:not(:empty))) { display: none; }
+.chat-recipes:not(:has(> #review-status:not(:empty))) { display: none; }
 .recipe {
   padding: 5px 12px;
   border: 1px solid var(--border);
@@ -84,8 +84,6 @@
 .recipe:hover { background: var(--surface-3); }
 .recipe.has-findings { color: var(--accent); border-color: var(--accent); }
 .recipe.is-icon { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; padding: 5px 6px; text-align: center; }
-.preview-step { display: inline-flex; align-items: center; gap: 6px; }
-.preview-hint { display: none; }
 #review-status { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); font-size: 12px; }
 
 #document-menu-button, .document-dialog button {
@@ -396,37 +394,8 @@ html, body {
 
 #rail .chat-offer { margin-top: 7px; padding: 3px 10px; font-size: 12px; }
 
-/* A card is a box while it is a remark. What comes after — waiting for
-   options, stepping through them, the way back — is passing state, and a
-   bordered panel around a status line or one button is more furniture than
-   the moment deserves. The card keeps its place in the rail and gives up its
-   walls. */
-.chat-card.is-bare {
-  padding: 0;
-  border: 0;
-  background: none;
-}
 .card-working { color: var(--muted); font-size: 13px; }
 
-/* Bare too: the controls are the interface, nothing needs to hold them. */
-#rail #chat-preview {
-  position: relative;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 8px;
-}
-/* Asking for three more is a corner action, not a step in the ring: it sits
-   out of the reading order, at the end of the row the stepper starts. */
-#rail #preview-again {
-  margin-left: auto;
-  border: 0;
-  background: none;
-  color: var(--muted);
-}
-#rail #preview-again:hover { color: var(--text); background: none; }
-#rail .preview-hint { display: block; flex: 1 0 100%; color: var(--muted); font-size: 11px; }
-
 .pane-header {
   position: relative;
   height: 48px;
@@ -686,6 +655,20 @@ html, body {
 .chat-again:hover { background: var(--surface-2); color: var(--text); }
 .chat-error .chat-again { margin-left: auto; align-self: center; }
 
+/* Icon-only retry under the options: a quiet refresh mark, not a second pill
+   shouting next to the cards. Text retries elsewhere keep the pill. */
+.chat-again.is-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 30px;
+  min-height: 30px;
+  padding: 5px 6px;
+  color: var(--muted);
+}
+.chat-again.is-icon:hover { color: var(--text); }
+.chat-again.is-icon svg { display: block; }
+
 /* Rendered reply: block spacing comes from the tags, not from pre-wrap */
 .chat-message.is-markdown { white-space: normal; }
 .chat-message.is-markdown > * + * { margin-top: 8px; }
@@ -957,90 +940,176 @@ html, body {
    its content, so the reserved space is measured, not guessed. */
 #editor-wrapper .cm-content { padding-bottom: var(--chat-height, 140px); }
 
-/* ── Rewrite preview ──────────────────────────────────── */
-/* The proposal is a clean sheet laid over the draft: the same white the chat
-   cards use, not another accent. Colour in here belongs to the edit itself —
-   what was added and what was cut — and a blue wash underneath drowns both. */
-.cm-variant {
+/* ── Rewrite variants (0.2 cards, tightened) ────────────────────────── */
+/* A hover/focus preview is a clean sheet laid over the draft: the same white
+   the chat cards use, not another accent — and deliberately no red/green.
+   NOTE: the coloured word-diff (cm-variant-old/new + wordDiff) is kept in the
+   tree as a noted option for another place (e.g. history compare); it is not
+   used on this path. */
+.cm-variant-plain {
   background: var(--overlay);
   box-shadow: 0 0 0 2px var(--overlay);
   border-bottom: 1px solid var(--border-strong);
+  border-radius: 2px;
   white-space: pre-wrap;
 }
 
-/* What this option changes stays on the line — struck words stay struck, added
-   words stay added. Only the colour is temporary: it walks through the edit in
-   reading order, holds for a couple of seconds, and leaves the same way, so
-   the sentence ends up readable as a sentence instead of as a coloured diff.
-   Nothing here animates size: the line's reserved height is measured against
-   this, and a highlight that moved the text would make that measurement a
-   lie. */
-.cm-variant-new {
-  border-radius: var(--r-xs);
-  text-decoration: none;
-  animation: word-add 2.6s var(--ease) both;
+/* A pressed toggle has to look pressed wherever it lives. */
+.recipe[aria-pressed="true"] { background: var(--surface-3); border-color: var(--border-strong); }
+
+/* Stack of options under a finding card (or in the stream for a selection).
+   One quiet column: the option owns the card, the score is metadata. */
+.chat-variants {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
 }
 
-.cm-variant-old {
+/* An option reads as a small card, not as running chat text: a firm header
+   row (Option N + score delta), then the prose itself. The whole card is the
+   button — hover previews it in place, click keeps it. */
+.variant-card {
+  padding: 10px 14px 11px;
+  border-radius: var(--r-field);
+  border: 1px solid var(--border-subtle);
+  border-left: 2px solid var(--border-strong);
+  background: var(--overlay);
+  cursor: pointer;
+  color: var(--text);
+  font-size: 14px;
+  line-height: 1.55;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  transition: border-color .12s ease, background .12s ease, box-shadow .12s ease, translate .12s var(--ease);
+  animation: chat-in .2s var(--ease);
+}
+
+.variant-card:hover,
+.variant-card:focus-visible {
+  background: var(--surface-2);
+  border-left-color: var(--accent);
+  box-shadow: var(--shadow-sm);
+  outline: none;
+}
+
+.variant-card:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+.variant-label {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 5px;
+  color: var(--muted);
+  font-family: var(--ui-font);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: .06em;
+  text-transform: uppercase;
+}
+
+/* Draft score if you pick this variant. Informational — never fed to the model. */
+.variant-delta {
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0;
+  text-transform: none;
+}
+
+.variant-delta.is-better { color: var(--ok); }
+.variant-delta.is-worse { color: var(--danger); }
+
+.variant-text { color: var(--text); }
+
+.variant-card.is-loading { cursor: default; border-left-color: var(--border-subtle); }
+.variant-card.is-loading:hover { background: var(--overlay); box-shadow: none; }
+
+/* Once one option is applied the others point at a range that is gone. Stop
+   advertising a click that would silently do nothing. */
+.chat-variants.is-spent .variant-card { cursor: default; opacity: .45; }
+.chat-variants.is-spent .variant-card:hover,
+.chat-variants.is-spent .variant-card:focus-visible {
+  background: var(--overlay);
+  border-left-color: var(--border-subtle);
+  box-shadow: none;
+}
+
+.chat-variants.is-spent .variant-card.is-applied {
+  opacity: 1;
+  border-left-color: var(--accent);
+}
+
+.variant-card.is-applied .variant-label::after {
+  content: 'applied';
+  margin-left: auto;
+  color: var(--accent);
+  font-weight: 500;
+  letter-spacing: .06em;
+  text-transform: uppercase;
+}
+
+/* Footer: hint left (what hover/click do), Try again right. Quiet by design —
+   three disliked options are a dead end without the button, but the button
+   must not shout louder than the options. */
+.variant-foot {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.variant-hint {
+  color: var(--muted);
+  font-family: var(--ui-font);
+  font-size: 11px;
+  line-height: 1.4;
+}
+
+.chat-variants > .variant-hint { padding: 0 2px; }
+
+/* The way back on the kept card: one quiet Undo with no timer, sitting under
+   the applied text. It stays good until the passage changes under it. */
+.variant-undo-row { display: flex; margin-top: 8px; }
+.variant-undo-row .chat-again { align-self: flex-start; }
+
+/* Rail: same cards, tighter — they are margin notes, not the conversation. */
+#rail .chat-variants { gap: 6px; }
+#rail .variant-card { padding: 9px 12px 10px; font-size: 13px; }
+#rail .variant-hint { font-size: 11px; }
+
+/* Loading skeletons: same shape as the cards coming, so nothing jumps. */
+.skeleton {
   border-radius: var(--r-xs);
-  text-decoration: line-through;
-  text-decoration-thickness: 1px;
-  animation: word-cut 2.6s var(--ease) both;
-}
-
-@keyframes word-add {
-  0%        { background: transparent; }
-  10%, 65%  { background: var(--added-tint); }
-  100%      { background: transparent; }
-}
-
-@keyframes word-cut {
-  0%        { background: transparent; color: inherit; }
-  10%, 65%  { background: var(--removed-tint); color: var(--danger); }
-  100%      { background: transparent; color: var(--muted); }
-}
-
-/* The cut word and the word taking its place are adjacent in the edit script
-   — the space between them belongs to neither, so it has to be drawn. */
-.cm-variant-old + .cm-variant-new { margin-left: .28em; }
-
-/* Stepping back to the writer's wording: the option's words are the ones
-   struck, and the words coming back are the writer's own — nothing lights up
-   for them, they were never a proposal. */
-.is-reverting .cm-variant-new { animation: none; background: transparent; }
-
-/* The controls belong to the row above the composer, not to a box of their
-   own — display:contents lets them sit in that flex row directly. */
-.preview-controls { display: contents; }
-#preview-count { color: var(--text-2); font-size: 13px; font-variant-numeric: tabular-nums; }
-#rail #preview-kept .recipe { box-shadow: var(--shadow-sm); }
-/* The same card the options sat in, holding the way back instead: the box
-   stays put, only what is inside it changes. The bar drains over the same
-   window Undo is good for, so the writer sees the time running out rather
-   than guessing when the offer expires. */
-/* One button, no panel around it. The countdown lives in the button itself:
-   the control is the timer, so there is nothing to draw but the control. */
-#rail #preview-kept { display: flex; }
-#rail #preview-undo { position: relative; overflow: hidden; }
-/* Gated behind a class, not the bare selector: JS restarts the drain by
-   toggling it off and on across a reflow, which a plain animation on the
-   selector itself would not replay. */
-#rail #preview-kept.is-counting #preview-undo::after {
-  content: '';
-  position: absolute;
-  left: 0; right: 0; bottom: 0;
-  height: 2px;
-  background: var(--muted);
-  transform-origin: left;
-  animation: kept-countdown linear forwards;
-  animation-duration: var(--kept-ms, 8000ms);
+  background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 37%, var(--surface-3) 63%);
+  background-size: 400% 100%;
+  animation: skeleton-sheen 1.4s ease-in-out infinite;
 }
-@keyframes kept-countdown {
-  from { transform: scaleX(1); }
-  to   { transform: scaleX(0); }
+
+.skeleton-label {
+  width: 72px;
+  height: 10px;
+  margin-bottom: 8px;
+}
+
+.skeleton-line {
+  height: 12px;
+  margin-top: 7px;
+}
+
+.skeleton-line.is-short { width: 62%; }
+
+@keyframes skeleton-sheen {
+  from { background-position: 100% 50%; }
+  to { background-position: 0 50%; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .skeleton { animation: none; }
+  .variant-card { animation: none; transition: none; }
 }
-/* A pressed toggle has to look pressed wherever the strip is living. */
-.recipe[aria-pressed="true"] { background: var(--surface-3); border-color: var(--border-strong); }
 
 .error-msg {
   padding: 12px 14px;