@convokitapp/vue-ui 0.8.0 → 0.9.0

package/dist/index.js

@@ -28,6 +28,8 @@ function createConvoKitUiClient(client) {
     sendMessage: (input) => client.sendMessage(input),
     editMessage: (messageId, input) => client.editMessage(messageId, input),
     deleteMessage: (messageId) => client.deleteMessage(messageId),
+    getReplyPreviews: (conversationId, messageIds) => client.getReplyPreviews(conversationId, messageIds),
+    getMessageContext: (conversationId, options) => client.getMessageContext(conversationId, options),
     markConversationRead: (conversationId, options) => client.markConversationRead(conversationId, options),
     markConversationUnread: (conversationId) => client.markConversationUnread(conversationId),
     clearConversationUnread: (conversationId, options) => client.clearConversationUnread(conversationId, options),
@@ -188,7 +190,7 @@ var ConvoKitAvatar = defineComponent({
 });
 
 // src/components/conversation.ts
-import { ArrowLeft, Check as Check2, LoaderCircle as LoaderCircle2, Paperclip, Pencil as Pencil2, RefreshCw, Send } from "@lucide/vue";
+import { ArrowDown, ArrowLeft, Check as Check2, LoaderCircle as LoaderCircle2, Paperclip, Pencil as Pencil2, Reply as Reply2, RefreshCw, Send } from "@lucide/vue";
 import {
   defineComponent as defineComponent3,
   h as h3,
@@ -234,6 +236,8 @@ function isMessageMissing(cause) {
 function localConflict() {
   return Object.assign(new Error("Message was changed since it was loaded"), { code: "REVISION_CONFLICT" });
 }
+var JUMP_GUARD_MS = 150;
+var HIGHLIGHT_MS = 2e3;
 var compare = compareMessageOrder;
 function positionCursor(position) {
   return { createdAt: position.createdAt, id: position.messageId };
@@ -253,7 +257,26 @@ function isTargetMiss(cause) {
   const { code, status } = cause;
   return code === "MESSAGE_NOT_FOUND" || code === void 0 && status === 404;
 }
-function blank(currentUserId = "", support = { edit: false, delete: false }) {
+function isRouteMissing(cause) {
+  if (typeof cause !== "object" || cause === null) return false;
+  const { code, status } = cause;
+  return status === 404 && code !== "MESSAGE_NOT_FOUND";
+}
+var REPLY_PREVIEW_TEXT_LIMIT = 500;
+function previewOf(message) {
+  const text = message.text;
+  return {
+    id: message.id,
+    conversationId: message.conversationId,
+    senderId: message.senderId,
+    text: text === null ? null : text.slice(0, REPLY_PREVIEW_TEXT_LIMIT),
+    textTruncated: (text?.length ?? 0) > REPLY_PREVIEW_TEXT_LIMIT,
+    createdAt: message.createdAt,
+    revision: message.revision,
+    mediaCount: message.media.length
+  };
+}
+function blank(currentUserId = "", support = { edit: false, delete: false, jump: false, previews: false }) {
   return {
     conversation: null,
     messages: [],
@@ -270,7 +293,16 @@ function blank(currentUserId = "", support = { edit: false, delete: false }) {
     currentUserId,
     editingMessage: null,
     canEditMessages: support.edit,
-    canDeleteMessages: support.delete
+    canDeleteMessages: support.delete,
+    replyTarget: null,
+    replyPreviews: /* @__PURE__ */ new Map(),
+    highlightedMessageId: null,
+    jumpInFlight: false,
+    windowMode: "live",
+    hasNewerMessages: false,
+    isLoadingNewer: false,
+    canJumpToMessage: support.jump,
+    canResolveReplyPreviews: support.previews
   };
 }
 var ConversationStore = class {
@@ -289,7 +321,12 @@ var ConversationStore = class {
     }
     this.owner = this.client.sessionIdentity;
     this.user = this.owner ? this.client.currentUserId : "";
-    this.support = { edit: typeof this.client.editMessage === "function", delete: typeof this.client.deleteMessage === "function" };
+    this.support = {
+      edit: typeof this.client.editMessage === "function",
+      delete: typeof this.client.deleteMessage === "function",
+      jump: typeof this.client.getMessageContext === "function",
+      previews: typeof this.client.getReplyPreviews === "function"
+    };
     this.state = blank(this.user, this.support);
   }
   options;
@@ -325,6 +362,26 @@ var ConversationStore = class {
    */
   activeEdit;
   refreshQueued = false;
+  /** A reconcile owed to the JUMPED window (0.9.0). `refreshQueued` stays owed across a jump so the tail-anchored
+   * reconcile still runs on the return to `live`; this flag is the one a jumped window consumes.
+   */
+  jumpedRefreshQueued = false;
+  /** The jumped window's paging cursors (0.9.0), opaque and server-minted; null at that end of the history. */
+  olderContextCursor = null;
+  newerContextCursor = null;
+  /** Preview entries that must be re-read on the next batch: a quoted parent changed outside the window, or the
+   * subscription reconnected (0.9.0). `'unavailable'` is terminal and never enters this set.
+   */
+  stalePreviews = /* @__PURE__ */ new Set();
+  /** Ids a batch is already asking for (0.9.0): two triggers that overlap share one request instead of racing. */
+  requestedPreviews = /* @__PURE__ */ new Set();
+  /** Live inserts recorded but not rendered while jumped (0.9.0); drained — and acknowledged — by the return. */
+  deferred = /* @__PURE__ */ new Set();
+  /** The message the current jumped window was centred on, until the window is paged (0.9.0). */
+  jumpAnchor;
+  previewTimer;
+  jumpTimer;
+  highlightTimer;
   typingTimers = /* @__PURE__ */ new Map();
   ownTypingTimer;
   sentTyping = false;
@@ -414,6 +471,19 @@ var ConversationStore = class {
     this.activeSend = void 0;
     this.activeEdit = void 0;
     this.refreshQueued = false;
+    this.jumpedRefreshQueued = false;
+    this.olderContextCursor = null;
+    this.newerContextCursor = null;
+    this.jumpAnchor = void 0;
+    this.stalePreviews.clear();
+    this.requestedPreviews.clear();
+    this.deferred.clear();
+    clearTimeout(this.previewTimer);
+    this.previewTimer = void 0;
+    clearTimeout(this.jumpTimer);
+    this.jumpTimer = void 0;
+    clearTimeout(this.highlightTimer);
+    this.highlightTimer = void 0;
   }
   dispose = () => {
     if (this.alive() && this.sentTyping) {
@@ -443,8 +513,10 @@ var ConversationStore = class {
       add(() => this.client.onConnectionEvent({
         onEvent: ({ topic, status }) => {
           if (!data || !this.alive(generation) || topic !== `messages:${this.room}` && topic !== `conversation:${this.room}`) return;
-          if (status === "SUBSCRIBED") this.queueRefresh();
-          else this.clearTyping();
+          if (status === "SUBSCRIBED") {
+            this.markPreviewsStale();
+            this.queueRefresh();
+          } else this.clearTyping();
         },
         onSessionEnded: () => {
           if (this.disposed || generation !== this.generation) return;
@@ -502,7 +574,10 @@ var ConversationStore = class {
     const known = existing ?? this.changes.get(message.id)?.message;
     if (known && older(message, known)) return;
     const insert = type === "insert" || this.changes.get(message.id)?.insert === true;
-    if (!existing && !insert && type === "update" && !this.state.isInitialLoading && !this.state.isLoadingOlder && !this.state.isReconciling) return;
+    if (!existing && !insert && type === "update") {
+      this.notePreviewSource(message.id);
+      if (!this.state.isInitialLoading && !this.state.isLoadingOlder && !this.state.isReconciling) return;
+    }
     const revision = ++this.revision;
     const provisional = existing && !message.media.length ? { ...message, media: existing.media } : message;
     this.record(provisional, insert, revision, false);
@@ -520,7 +595,14 @@ var ConversationStore = class {
     }
     this.changes.set(message.id, { revision, message, insert, complete });
     if (!existing && !(insert && hasContent(message))) return;
+    if (!existing && this.state.windowMode === "jumped") {
+      this.deferred.add(message.id);
+      if (!this.state.hasNewerMessages) this.patch({ hasNewerMessages: true });
+      return;
+    }
     this.patch({ messages: mergeMessages(this.state.messages, [message]) });
+    this.notePreviewSource(message.id);
+    if (message.replyToMessageId) this.schedulePreviews();
     if (!existing && message.senderId !== this.user && (this.options.markReadOnReceive ?? true)) void this.acknowledge(true);
   }
   confirmSend(message) {
@@ -542,6 +624,9 @@ var ConversationStore = class {
     this.changes.delete(id);
     this.hydrations.delete(id);
     this.hydrationPool.queued.delete(id);
+    this.deferred.delete(id);
+    this.markUnavailable(id);
+    if (this.state.replyTarget?.id === id) this.patch({ replyTarget: null });
     const ack = this.ack;
     if (ack.target !== id && ack.acknowledged?.id !== id) return;
     ack.unacknowledgeable.add(id);
@@ -610,6 +695,23 @@ var ConversationStore = class {
       previous = message;
     }
   }
+  /** Context windows get their OWN validator (0.9.0): `validatePage` measures a page against the backward cursor
+   * it was fetched with, and a window centred on a message has no such cursor. Only the per-row predicates are
+   * shared. A CENTRED window must carry its target exactly once; a cursor page must not be held to that.
+   */
+  validateContextPage(page, limit, targetId) {
+    if (page.length > limit) throw new Error("Message context exceeds the requested limit");
+    let previous;
+    for (const message of page) {
+      if (!this.validMessage(message) || previous && compare(message, previous) >= 0) {
+        throw new Error("Message context must contain distinct, room-scoped rows in newest-first order");
+      }
+      previous = message;
+    }
+    if (targetId !== void 0 && page.filter((message) => message.id === targetId).length !== 1) {
+      throw new Error("Centred message context must contain its target exactly once");
+    }
+  }
   fetchPage(before) {
     return this.client.getMessages({
       conversationId: this.room,
@@ -632,6 +734,148 @@ var ConversationStore = class {
     }
     return mergeMessages([], [...byId.values()]);
   }
+  /** `overlay` for a JUMPED window (0.9.0): the same precedence for rows the window already holds, WITHOUT the
+   * pending replay and the `changes`-insert replay, either of which would inject live-tail rows into a
+   * historical window. A jumped window only ever holds rows a context response carried.
+   */
+  overlayWindow(rows, revision) {
+    const byId = new Map(rows.filter((message) => !this.deleted.has(message.id)).map((message) => [message.id, message]));
+    for (const [id, change] of this.changes) {
+      const current = byId.get(id);
+      if (current && change.revision > revision) byId.set(id, newest(current, change.message, change.complete));
+    }
+    return mergeMessages([], [...byId.values()]);
+  }
+  /** The distinct quoted parents the rendered rows point at (0.9.0). */
+  referencedParents() {
+    const referenced = /* @__PURE__ */ new Set();
+    for (const message of this.state.messages) {
+      if (message.replyToMessageId) referenced.add(message.replyToMessageId);
+    }
+    return referenced;
+  }
+  /** Cache the terminal `'unavailable'` for a quoted parent that is gone, while any rendered row still quotes it
+   * (or an entry for it already exists). Never re-requested: absence from a resolved batch is the only deletion
+   * signal the backend gives, and a deleted message cannot come back.
+   */
+  markUnavailable(id) {
+    const cached = this.state.replyPreviews.get(id);
+    if (cached === "unavailable") return;
+    if (cached === void 0 && !this.referencedParents().has(id)) return;
+    const next = new Map(this.state.replyPreviews);
+    next.set(id, "unavailable");
+    this.stalePreviews.delete(id);
+    this.patch({ replyPreviews: next });
+  }
+  /** Re-read every non-terminal preview on the next batch (reconnect/`SUBSCRIBED`). */
+  markPreviewsStale() {
+    for (const [id, entry] of this.state.replyPreviews) if (entry !== "unavailable") this.stalePreviews.add(id);
+  }
+  /** A row for a quoted parent reached the store: the preview that references it is refreshed from the rendered
+   * row, or marked stale when the parent is outside the window. Previews are re-read, never copied — a parent
+   * edit bumps the PARENT's revision, which no row-precedence rule on the reply can see.
+   */
+  notePreviewSource(id) {
+    const cached = this.state.replyPreviews.get(id);
+    if (cached === void 0) return;
+    const row = this.state.messages.find((message) => message.id === id);
+    if (row && !isConvoKitPendingMessage(row)) {
+      const fresh = previewOf(row);
+      this.stalePreviews.delete(id);
+      if (cached !== "unavailable" && cached.revision === fresh.revision && cached.text === fresh.text && cached.mediaCount === fresh.mediaCount) return;
+      const next = new Map(this.state.replyPreviews);
+      next.set(id, fresh);
+      this.patch({ replyPreviews: next });
+      return;
+    }
+    if (cached === "unavailable") return;
+    this.stalePreviews.add(id);
+    this.schedulePreviews();
+  }
+  /** Coalesce a burst of live inserts into one batch; the handle is cleared wherever subscriptions are torn down
+   * and the callback is dropped when the store is no longer alive for the generation that scheduled it.
+   */
+  schedulePreviews() {
+    if (this.previewTimer !== void 0 || !this.support.previews) return;
+    const generation = this.generation;
+    const timer = setTimeout(() => {
+      this.previewTimer = void 0;
+      if (this.alive(generation)) void this.resolvePreviews();
+    }, 120);
+    timer.unref?.();
+    this.previewTimer = timer;
+  }
+  /** Resolve the quoted parents of the rendered rows in ONE request, never one per row (0.9.0). A parent inside
+   * the loaded window is derived locally and costs nothing; `'unavailable'` is terminal; an id with no entry is
+   * "not resolved yet", so a rejection — which says nothing about which ids exist — writes no entry at all and
+   * the next trigger asks again. `prune` drops entries no rendered row references (reconcile completion), which
+   * is what bounds the map to the window.
+   */
+  async resolvePreviews(prune = false) {
+    if (!this.alive() || !this.support.previews || !this.state.canResolveReplyPreviews) return;
+    const referenced = this.referencedParents();
+    const previews = new Map(this.state.replyPreviews);
+    let changed = false;
+    if (prune) {
+      for (const id of [...previews.keys()]) {
+        if (referenced.has(id)) continue;
+        previews.delete(id);
+        this.stalePreviews.delete(id);
+        changed = true;
+      }
+    }
+    const window = new Map(this.state.messages.filter((message) => !isConvoKitPendingMessage(message)).map((message) => [message.id, message]));
+    const wanted = [];
+    for (const id of referenced) {
+      const local = window.get(id);
+      if (local) {
+        this.stalePreviews.delete(id);
+        const cached2 = previews.get(id);
+        const fresh = previewOf(local);
+        if (cached2 === void 0 || cached2 === "unavailable" || cached2.revision !== fresh.revision || cached2.text !== fresh.text || cached2.mediaCount !== fresh.mediaCount) {
+          previews.set(id, fresh);
+          changed = true;
+        }
+        continue;
+      }
+      const cached = previews.get(id);
+      if (cached === "unavailable") continue;
+      if (cached !== void 0 && !this.stalePreviews.has(id)) continue;
+      if (this.requestedPreviews.has(id)) continue;
+      wanted.push(id);
+    }
+    if (changed) this.patch({ replyPreviews: previews });
+    if (wanted.length === 0) return;
+    const generation = this.generation;
+    for (const id of wanted) this.requestedPreviews.add(id);
+    try {
+      const resolved = await this.client.getReplyPreviews(this.room, wanted);
+      if (!this.alive(generation)) return;
+      const next = new Map(this.state.replyPreviews);
+      const returned = /* @__PURE__ */ new Set();
+      for (const preview of resolved) {
+        if (preview.conversationId !== this.room) continue;
+        returned.add(preview.id);
+        next.set(preview.id, preview);
+        this.stalePreviews.delete(preview.id);
+      }
+      for (const id of wanted) {
+        if (returned.has(id)) continue;
+        next.set(id, "unavailable");
+        this.stalePreviews.delete(id);
+      }
+      this.patch({ replyPreviews: next });
+    } catch (cause) {
+      if (!this.alive(generation)) return;
+      if (isRouteMissing(cause)) {
+        this.support.previews = false;
+        this.patch({ canResolveReplyPreviews: false });
+      }
+      this.fail(cause, generation);
+    } finally {
+      for (const id of wanted) this.requestedPreviews.delete(id);
+    }
+  }
   prune(revision) {
     const safeRevision = Math.min(revision, this.sendRevision ?? Infinity);
     for (const [id, change] of this.changes) if (change.revision <= safeRevision) this.changes.delete(id);
@@ -658,6 +902,7 @@ var ConversationStore = class {
       this.captured = capture(conversation);
       this.mergeReads(conversation.participants.map(readEntry));
       this.prune(revision);
+      void this.resolvePreviews();
       if ((this.options.markReadOnLoad ?? true) || this.ack.suppressed) {
         this.ack.suppressed = false;
         await this.acknowledge(true);
@@ -673,19 +918,36 @@ var ConversationStore = class {
   };
   queueRefresh() {
     this.refreshQueued = true;
+    this.jumpedRefreshQueued = true;
     this.flushRefresh();
   }
   flushRefresh() {
     const generation = this.generation;
     void Promise.resolve().then(() => {
-      if (!this.alive(generation) || !this.refreshQueued || this.state.isInitialLoading || this.state.isLoadingOlder || this.state.isReconciling) return;
+      if (!this.alive(generation) || !this.refreshQueued || this.state.isInitialLoading || this.state.isLoadingOlder || this.state.isLoadingNewer || this.state.isReconciling) return;
+      if (this.state.windowMode === "jumped") {
+        if (!this.jumpedRefreshQueued) return;
+        this.jumpedRefreshQueued = false;
+        void this.reconcileWindow();
+        return;
+      }
       this.refreshQueued = false;
+      this.jumpedRefreshQueued = false;
       void this.refresh();
     });
   }
   /** Re-fetch the entire viewed range atomically; a first-page-only refresh loses history. */
   refresh = async () => {
     if (!this.alive()) return;
+    if (this.state.windowMode === "jumped") {
+      this.refreshQueued = true;
+      if (this.state.isInitialLoading || this.state.isLoadingOlder || this.state.isLoadingNewer || this.state.isReconciling) {
+        this.jumpedRefreshQueued = true;
+        return;
+      }
+      this.jumpedRefreshQueued = false;
+      return this.reconcileWindow();
+    }
     if (this.state.isInitialLoading || this.state.isLoadingOlder || this.state.isReconciling) {
       this.refreshQueued = true;
       return;
@@ -723,6 +985,7 @@ var ConversationStore = class {
       if (opening) this.captured = capture(conversation);
       this.mergeReads(conversation.participants.map(readEntry));
       this.prune(revision);
+      void this.resolvePreviews(true);
       if (opening) void this.resumeAcknowledgement();
     } catch (cause) {
       this.fail(cause, generation, true);
@@ -734,7 +997,8 @@ var ConversationStore = class {
     }
   };
   loadOlderMessages = async () => {
-    if (!this.alive() || !this.state.hasLoaded || this.state.isInitialLoading || this.state.isLoadingOlder || this.state.isReconciling || !this.state.hasOlderMessages) return;
+    if (!this.alive() || !this.state.hasLoaded || this.state.isInitialLoading || this.state.isLoadingOlder || this.state.isReconciling || this.state.isLoadingNewer || !this.state.hasOlderMessages) return;
+    if (this.state.windowMode === "jumped") return this.loadContextPage("older");
     const generation = this.generation;
     const revision = this.revision;
     const cursor = this.cursor;
@@ -748,6 +1012,7 @@ var ConversationStore = class {
         messages: this.overlay(mergeMessages(page, this.state.messages), revision),
         hasOlderMessages: page.length === this.pageSize
       });
+      void this.resolvePreviews();
     } catch (cause) {
       this.fail(cause, generation, true);
     } finally {
@@ -757,6 +1022,298 @@ var ConversationStore = class {
       }
     }
   };
+  /** Page a jumped window towards the start (0.9.0); a no-op while the window is live or already at the end. */
+  loadNewerMessages = async () => {
+    if (!this.alive() || !this.state.hasLoaded || this.state.windowMode !== "jumped" || !this.state.hasNewerMessages || this.state.isInitialLoading || this.state.isLoadingOlder || this.state.isLoadingNewer || this.state.isReconciling) return;
+    return this.loadContextPage("newer");
+  };
+  /** One page of the jumped window in either direction, through the cursor the previous window returned. When
+   * the newer side reaches the tail the store does NOT flip to `live` on the spot — `newerCursor: null` was only
+   * true as of the server's query time and inserts have been deferred throughout the round trip, so the return
+   * to the live tail is a full `returnToLatest()`.
+   */
+  async loadContextPage(direction) {
+    const cursor = direction === "older" ? this.olderContextCursor : this.newerContextCursor;
+    if (cursor === null || typeof this.client.getMessageContext !== "function") return;
+    const generation = this.generation;
+    const revision = this.revision;
+    let reachedTail = false;
+    this.patch(direction === "older" ? { isLoadingOlder: true, error: null } : { isLoadingNewer: true, error: null });
+    try {
+      const page = await this.client.getMessageContext(this.room, {
+        ...direction === "older" ? { olderCursor: cursor } : { newerCursor: cursor },
+        limit: this.pageSize
+      });
+      if (!this.alive(generation)) return;
+      this.validateContextPage(page.messages, this.pageSize);
+      this.jumpAnchor = void 0;
+      if (direction === "older") {
+        this.olderContextCursor = page.olderCursor;
+        this.patch({
+          messages: this.overlayWindow(mergeMessages(this.state.messages, page.messages), revision),
+          hasOlderMessages: page.olderCursor !== null
+        });
+      } else {
+        this.newerContextCursor = page.newerCursor;
+        reachedTail = page.newerCursor === null;
+        this.patch({
+          messages: this.overlayWindow(mergeMessages(this.state.messages, page.messages), revision),
+          hasNewerMessages: page.newerCursor !== null
+        });
+      }
+      void this.resolvePreviews();
+    } catch (cause) {
+      if (!this.alive(generation)) return;
+      if (isRouteMissing(cause)) this.retireJump();
+      this.fail(cause, generation);
+    } finally {
+      if (this.alive(generation)) {
+        this.patch(direction === "older" ? { isLoadingOlder: false } : { isLoadingNewer: false });
+        this.flushRefresh();
+      }
+    }
+    if (reachedTail && this.alive(generation)) await this.returnToLatest();
+  }
+  /** Re-read the JUMPED window with one bounded request, in place of the tail-anchored boundary walk (0.9.0).
+   * The anchor is the jump target while the window has not been paged, otherwise the newest non-pending row at
+   * or older than the window's midpoint, and the limit is the window's own size. Tombstones are bounded by the
+   * returned range: a known row inside it that the response did not carry is gone, anything outside is not.
+   */
+  async reconcileWindow() {
+    const anchor = this.windowAnchor();
+    if (!anchor || typeof this.client.getMessageContext !== "function") return;
+    const generation = this.generation;
+    const revision = this.revision;
+    const rendered = this.state.messages.filter((message) => !isConvoKitPendingMessage(message));
+    const limit = Math.min(Math.max(rendered.length, 1), 100);
+    this.patch({ isReconciling: true, error: null });
+    try {
+      let conversation;
+      try {
+        conversation = await this.client.getConversation(this.room);
+      } catch (cause) {
+        this.fail(cause, generation, true);
+        return;
+      }
+      if (!this.alive(generation)) return;
+      if (conversation.id !== this.room) {
+        this.fail(new Error("Conversation response belongs to a different room"), generation, true);
+        return;
+      }
+      const page = await this.client.getMessageContext(this.room, { messageId: anchor, limit });
+      if (!this.alive(generation)) return;
+      this.validateContextPage(page.messages, limit, anchor);
+      this.olderContextCursor = page.olderCursor;
+      this.newerContextCursor = page.newerCursor;
+      const reconciled = this.overlayWindow(page.messages, revision);
+      const surviving = new Set(reconciled.map((message) => message.id));
+      const newestRow = page.messages[0];
+      const oldestRow = page.messages.at(-1);
+      if (newestRow && oldestRow) {
+        for (const message of rendered) {
+          if (surviving.has(message.id)) continue;
+          if (compare(message, oldestRow) < 0 || compare(message, newestRow) > 0) continue;
+          this.forget(message.id);
+        }
+      }
+      this.patch({
+        conversation,
+        messages: reconciled,
+        hasOlderMessages: page.olderCursor !== null,
+        hasNewerMessages: page.newerCursor !== null
+      });
+      this.mergeReads(conversation.participants.map(readEntry));
+      this.prune(revision);
+      void this.resolvePreviews(true);
+    } catch (cause) {
+      if (!this.alive(generation)) return;
+      if (isMessageMissing(cause)) this.removeMessage(anchor);
+      else if (isRouteMissing(cause)) this.retireJump();
+      this.fail(cause, generation);
+    } finally {
+      if (this.alive(generation)) {
+        this.patch({ isReconciling: false });
+        this.flushRefresh();
+      }
+    }
+  }
+  /** The row a jumped window re-reads around: its jump target while it has not been paged, otherwise the newest
+   * non-pending row at or older than the window's midpoint.
+   */
+  windowAnchor() {
+    const rendered = this.state.messages.filter((message) => !isConvoKitPendingMessage(message));
+    if (rendered.length === 0) return void 0;
+    if (this.jumpAnchor && rendered.some((message) => message.id === this.jumpAnchor)) return this.jumpAnchor;
+    return rendered[Math.floor((rendered.length - 1) / 2)]?.id;
+  }
+  /** A 0.8 backend does not serve the context route: the jump affordance disappears for the store's life rather
+   * than failing repeatedly. A coded `MESSAGE_NOT_FOUND` never trips this — that is a real missing target.
+   */
+  retireJump() {
+    this.support.jump = false;
+    this.patch({ canJumpToMessage: false });
+  }
+  /** Bring a message into view (0.9.0). A row already in the loaded window is only highlighted and scrolled to;
+   * otherwise the window is REPLACED by a context window centred on it and `windowMode` becomes `jumped`. A jump
+   * is a window operation, never a re-open: tombstones, the acknowledgement floor, this open's captured private
+   * state, edit mode and the reply target all survive it, and it arms no acknowledgement. It is a no-op while a
+   * send is in flight, so a replacement can never strand a pending row. A coded `MESSAGE_NOT_FOUND` is the
+   * guaranteed answer for a quoted message that was deleted: it marks the preview `'unavailable'` instead of
+   * reporting an error. Resolves true once the target is highlighted.
+   */
+  jumpToMessage = async (messageId) => {
+    if (!this.alive() || !this.state.hasLoaded) return false;
+    const id = messageId.trim();
+    if (!id || this.state.isSending) return false;
+    const rendered = this.state.messages.find((message) => message.id === id);
+    if (rendered) return isConvoKitPendingMessage(rendered) ? false : (this.beginJump(), this.landJump(id), true);
+    if (this.deleted.has(id)) {
+      this.markUnavailable(id);
+      return false;
+    }
+    if (!this.support.jump || typeof this.client.getMessageContext !== "function") return false;
+    if (this.state.isInitialLoading || this.state.isLoadingOlder || this.state.isLoadingNewer || this.state.isReconciling) return false;
+    const generation = this.generation;
+    this.beginJump();
+    this.patch({ isLoadingNewer: true, error: null, highlightedMessageId: null });
+    try {
+      const page = await this.client.getMessageContext(this.room, { messageId: id, limit: this.pageSize });
+      if (!this.alive(generation)) return false;
+      this.validateContextPage(page.messages, this.pageSize, id);
+      this.olderContextCursor = page.olderCursor;
+      this.newerContextCursor = page.newerCursor;
+      this.jumpAnchor = id;
+      this.patch({
+        messages: mergeMessages([], page.messages.filter((message) => !this.deleted.has(message.id))),
+        windowMode: "jumped",
+        hasOlderMessages: page.olderCursor !== null,
+        hasNewerMessages: page.newerCursor !== null
+      });
+      this.landJump(id);
+      void this.resolvePreviews(true);
+      return true;
+    } catch (cause) {
+      if (!this.alive(generation)) return false;
+      this.releaseJump();
+      if (isMessageMissing(cause)) {
+        this.markUnavailable(id);
+        return false;
+      }
+      if (isRouteMissing(cause)) this.retireJump();
+      this.fail(cause, generation);
+      return false;
+    } finally {
+      if (this.alive(generation)) {
+        this.patch({ isLoadingNewer: false });
+        this.flushRefresh();
+      }
+    }
+  };
+  /** Drop a jumped window and render the live tail again (0.9.0), through the normal newest-page load. There is
+   * no in-place flip: `windowMode` becomes `live` BEFORE the request, so inserts arriving during the round trip
+   * are folded in by `overlay` exactly as `loadInitial()` and `refresh()` already tolerate, and the rows
+   * deferred while jumped are drained — and acknowledged — with it. A failure stays `jumped` with the window and
+   * its affordance intact; the highlight is carried through so the target re-anchors when it is still in the
+   * newest page. Resolves true once the live tail is rendered.
+   */
+  returnToLatest = async () => {
+    if (!this.alive() || !this.state.hasLoaded) return false;
+    if (this.state.windowMode !== "jumped") return true;
+    if (this.state.isInitialLoading || this.state.isLoadingOlder || this.state.isLoadingNewer || this.state.isReconciling) return false;
+    const generation = this.generation;
+    const revision = this.revision;
+    const highlighted = this.state.highlightedMessageId;
+    clearTimeout(this.highlightTimer);
+    this.highlightTimer = void 0;
+    this.patch({ windowMode: "live", isLoadingNewer: true, error: null, highlightedMessageId: null });
+    try {
+      const page = await this.fetchPage();
+      if (!this.alive(generation)) return false;
+      this.validatePage(page);
+      this.cursor = page.at(-1);
+      this.olderContextCursor = null;
+      this.newerContextCursor = null;
+      this.jumpAnchor = void 0;
+      this.patch({
+        messages: this.overlay(page, revision),
+        hasOlderMessages: page.length === this.pageSize,
+        hasNewerMessages: false
+      });
+      this.prune(revision);
+      const drained = [...this.deferred].some((id) => this.state.messages.some((message) => message.id === id && message.senderId !== this.user));
+      this.deferred.clear();
+      void this.resolvePreviews(true);
+      if (drained && (this.options.markReadOnReceive ?? true) || this.ack.followUp) void this.acknowledge(true);
+      if (highlighted && this.state.messages.some((message) => message.id === highlighted)) {
+        this.beginJump();
+        this.landJump(highlighted);
+      }
+      return true;
+    } catch (cause) {
+      if (!this.alive(generation)) return false;
+      this.patch({
+        windowMode: "jumped",
+        hasNewerMessages: this.newerContextCursor !== null,
+        highlightedMessageId: highlighted
+      });
+      this.fail(cause, generation, true);
+      return false;
+    } finally {
+      if (this.alive(generation)) {
+        this.patch({ isLoadingNewer: false });
+        this.flushRefresh();
+      }
+    }
+  };
+  /** The guard the views read while a jump lands: it is set BEFORE the window is replaced, because shrinking the
+   * list clamps `scrollTop` and emits a scroll event of its own.
+   */
+  beginJump() {
+    clearTimeout(this.jumpTimer);
+    this.jumpTimer = void 0;
+    clearTimeout(this.highlightTimer);
+    this.highlightTimer = void 0;
+    if (!this.state.jumpInFlight) this.patch({ jumpInFlight: true });
+  }
+  /** The window is in place: highlight the target and release the guard on a timer, never on "the first scroll
+   * event" — a target already in view produces none. The highlight's own timeout starts when the guard clears.
+   */
+  landJump(id) {
+    this.patch({ highlightedMessageId: id });
+    const generation = this.generation;
+    const timer = setTimeout(() => {
+      this.jumpTimer = void 0;
+      if (!this.alive(generation)) return;
+      this.patch({ jumpInFlight: false });
+      const clearing = setTimeout(() => {
+        this.highlightTimer = void 0;
+        if (this.alive(generation) && this.state.highlightedMessageId === id) this.patch({ highlightedMessageId: null });
+      }, HIGHLIGHT_MS);
+      clearing.unref?.();
+      this.highlightTimer = clearing;
+    }, JUMP_GUARD_MS);
+    timer.unref?.();
+    this.jumpTimer = timer;
+  }
+  releaseJump() {
+    clearTimeout(this.jumpTimer);
+    this.jumpTimer = void 0;
+    if (this.state.jumpInFlight) this.patch({ jumpInFlight: false });
+  }
+  /** Quote a rendered, confirmed message in the composer (0.9.0). A no-op for pending, tombstoned and unknown
+   * rows and while the caller's role (when known) is `READ`; any member may quote any row, own or not. Replying
+   * and editing are mutually exclusive, so this leaves edit mode. Sends nothing.
+   */
+  startReply = (messageId) => {
+    if (!this.alive() || this.ownRole() === "READ") return;
+    const row = this.state.messages.find((message) => message.id === messageId);
+    if (!row || isConvoKitPendingMessage(row) || this.deleted.has(messageId)) return;
+    this.patch({ replyTarget: row, editingMessage: null });
+  };
+  /** Drop the reply target without a request; the draft is untouched (replying never replaces it). */
+  cancelReply = () => {
+    if (this.state.replyTarget) this.patch({ replyTarget: null });
+  };
   /** Acknowledge through the newest rendered row now, regardless of visibility; no acknowledgement without a
    * target (a room opened with a marker that renders nothing clears the marker instead, once).
    */
@@ -786,6 +1343,7 @@ var ConversationStore = class {
   }
   /** Resolves when the request this call issued or joined settles; a follow-up is issued, not awaited. */
   acknowledge(automatic) {
+    if (this.state.windowMode === "jumped") return Promise.resolve();
     const ack = this.ack;
     if (automatic && (!this.visible || this.state.conversation === null)) {
       ack.suppressed = true;
@@ -798,6 +1356,10 @@ var ConversationStore = class {
     return this.issue(ack, this.generation) ?? Promise.resolve();
   }
   issue(ack, generation) {
+    if (this.state.windowMode === "jumped") {
+      ack.followUp = true;
+      return void 0;
+    }
     ack.followUp = false;
     const target = this.ackTarget(ack);
     const request = target ? this.send(ack, generation, target) : this.clearMarker(ack, generation);
@@ -874,11 +1436,14 @@ var ConversationStore = class {
   sendMessage = async ({ text, media }) => {
     const normalized = text?.trim();
     if (!this.alive() || this.state.isSending || !normalized && !media?.length) return null;
+    if (this.state.windowMode === "jumped" && !await this.returnToLatest()) return null;
+    if (!this.alive() || this.state.isSending) return null;
     const generation = this.generation;
     const revision = this.revision;
     this.sendRevision = revision;
     const clientMessageId = createClientMessageId();
     const pendingId = `convokit-pending-${clientMessageId}`;
+    const replyToMessageId = this.state.replyTarget?.id;
     const pending = {
       id: pendingId,
       clientMessageId,
@@ -888,7 +1453,8 @@ var ConversationStore = class {
       media: media ?? [],
       createdAt: /* @__PURE__ */ new Date(),
       updatedAt: null,
-      revision: 0
+      revision: 0,
+      ...replyToMessageId ? { replyToMessageId } : {}
     };
     const send = { pending };
     this.activeSend = send;
@@ -898,7 +1464,9 @@ var ConversationStore = class {
         conversationId: this.room,
         clientMessageId,
         ...normalized ? { text: normalized } : {},
-        ...media?.length ? { media } : {}
+        ...media?.length ? { media } : {},
+        // Omitted entirely when there is no quote, so a plain send is byte-identical to 0.8.
+        ...replyToMessageId ? { replyToMessageId } : {}
       });
       if (!this.alive(generation)) return null;
       if (!this.validMessage(message) || message.senderId !== this.user) throw new Error("Send response belongs to a different room or sender");
@@ -908,10 +1476,15 @@ var ConversationStore = class {
       let latest = existing ? newest(message, existing, live?.complete !== false) : message;
       if (live && live.revision > revision) latest = newest(latest, live.message, live.complete);
       if (!this.deleted.has(message.id)) this.changes.set(message.id, { revision: ++this.revision, message: latest, insert: true, complete: true });
-      this.patch({ messages: mergeMessages(
-        this.state.messages.filter((item) => item.id !== pendingId),
-        this.deleted.has(message.id) ? [] : [latest]
-      ) });
+      this.patch({
+        messages: mergeMessages(
+          this.state.messages.filter((item) => item.id !== pendingId),
+          this.deleted.has(message.id) ? [] : [latest]
+        ),
+        // The quote is spent: it is cleared only once the server accepted the send.
+        ...replyToMessageId ? { replyTarget: null } : {}
+      });
+      if (replyToMessageId) void this.resolvePreviews();
       void this.updateTyping(false);
       return this.alive(generation) ? latest : null;
     } catch (cause) {
@@ -949,7 +1522,7 @@ var ConversationStore = class {
   startEditing = (messageId) => {
     if (!this.alive() || !this.support.edit || this.ownRole() === "READ") return;
     const row = this.ownRow(messageId);
-    if (row) this.patch({ editingMessage: row });
+    if (row) this.patch({ editingMessage: row, replyTarget: null });
   };
   /** Leave edit mode without a request; the draft is the view's to restore. */
   cancelEditing = () => {
@@ -1114,6 +1687,15 @@ function useConversation(options) {
     editingMessage: field("editingMessage"),
     canEditMessages: field("canEditMessages"),
     canDeleteMessages: field("canDeleteMessages"),
+    replyTarget: field("replyTarget"),
+    replyPreviews: field("replyPreviews"),
+    highlightedMessageId: field("highlightedMessageId"),
+    jumpInFlight: field("jumpInFlight"),
+    windowMode: field("windowMode"),
+    hasNewerMessages: field("hasNewerMessages"),
+    isLoadingNewer: field("isLoadingNewer"),
+    canJumpToMessage: field("canJumpToMessage"),
+    canResolveReplyPreviews: field("canResolveReplyPreviews"),
     readerIdsFor: (message) => store.readerIdsFor(message),
     loadInitial: () => store.loadInitial(),
     refresh: () => store.refresh(),
@@ -1123,6 +1705,11 @@ function useConversation(options) {
     cancelEditing: () => store.cancelEditing(),
     saveEdit: (text) => store.saveEdit(text),
     deleteMessage: (messageId) => store.deleteMessage(messageId),
+    startReply: (messageId) => store.startReply(messageId),
+    cancelReply: () => store.cancelReply(),
+    jumpToMessage: (messageId) => store.jumpToMessage(messageId),
+    loadNewerMessages: () => store.loadNewerMessages(),
+    returnToLatest: () => store.returnToLatest(),
     markRead: () => store.markRead(),
     updateTyping: (isTyping) => store.updateTyping(isTyping),
     setVisible: (value) => {
@@ -1146,6 +1733,7 @@ import {
   MapPin,
   MessageCircle,
   Pencil,
+  Reply,
   Trash2
 } from "@lucide/vue";
 import {
@@ -1212,6 +1800,15 @@ var MessageListView = defineComponent2({
     onDeleteMessage: { type: Function, default: void 0 },
     canEditMessage: { type: Function, default: void 0 },
     confirmDelete: { type: Function, default: void 0 },
+    onReplyToMessage: { type: Function, default: void 0 },
+    canReplyToMessage: { type: Function, default: void 0 },
+    replyPreviewByMessageId: { type: Object, default: void 0 },
+    onJumpToMessage: { type: Function, default: void 0 },
+    highlightedMessageId: { type: String, default: null },
+    jumpInFlight: { type: Boolean, default: false },
+    hasNewerMessages: { type: Boolean, default: false },
+    isLoadingNewer: { type: Boolean, default: false },
+    onLoadNewer: { type: Function, default: void 0 },
     scrollElement: { type: Object, default: void 0 },
     paginationThreshold: { type: Number, default: 240 },
     reverse: { type: Boolean, default: true },
@@ -1219,13 +1816,18 @@ var MessageListView = defineComponent2({
     formatTime: { type: Function, default: formatMessageTime },
     imageLoading: { type: String, default: "lazy" }
   },
-  emits: ["load-older", "attachment-click", "edit-message", "delete-message"],
+  emits: ["load-older", "load-newer", "attachment-click", "edit-message", "delete-message", "reply-to-message", "jump-to-message"],
   setup(props, { attrs, emit, slots }) {
     const internalElement = ref(null);
     const confirming = ref(null);
+    const highlightCleared = ref(false);
     let requestInFlight = false;
     let lastRequestedLength = null;
+    let newerInFlight = false;
+    let lastNewerLength = null;
     let previousMessageCount = 0;
+    let scrolledTo = null;
+    let jumpArmed = false;
     const participants = computed2(() => new Map(props.conversation.participants.flatMap((participant) => [
       [participant.id, participant],
       [participant.appUserId, participant]
@@ -1248,13 +1850,26 @@ var MessageListView = defineComponent2({
         requestInFlight = false;
       }
     };
-    watch2(() => [props.messages.length, props.hasOlderMessages], async ([count, hasOlder]) => {
+    const requestNewer = async () => {
+      if (newerInFlight || lastNewerLength === props.messages.length || props.isLoadingNewer || !props.hasNewerMessages || !props.onLoadNewer) return;
+      newerInFlight = true;
+      lastNewerLength = props.messages.length;
+      try {
+        await props.onLoadNewer();
+      } catch {
+        lastNewerLength = null;
+      } finally {
+        newerInFlight = false;
+      }
+    };
+    watch2(() => [props.messages.length, props.hasOlderMessages, props.hasNewerMessages], async ([count, hasOlder, hasNewer]) => {
       const previous = previousMessageCount;
       if (count !== previousMessageCount || !hasOlder) lastRequestedLength = null;
+      if (count !== previousMessageCount || !hasNewer) lastNewerLength = null;
       const appended = count > previous;
       const element = internalElement.value;
       previousMessageCount = count;
-      if (element && props.reverse && props.stickToBottom && appended) {
+      if (element && props.reverse && props.stickToBottom && appended && !props.jumpInFlight) {
         const distanceFromBottom = element.scrollHeight - element.scrollTop - element.clientHeight;
         if (previous === 0 || distanceFromBottom < 320) {
           await nextTick();
@@ -1262,11 +1877,43 @@ var MessageListView = defineComponent2({
         }
       }
     }, { flush: "post", immediate: true });
+    watch2(() => [props.highlightedMessageId, props.messages, props.jumpInFlight], ([highlighted, , inFlight]) => {
+      if (inFlight && !jumpArmed) scrolledTo = null;
+      jumpArmed = !!inFlight;
+      if (!highlighted) {
+        scrolledTo = null;
+        highlightCleared.value = false;
+        return;
+      }
+      if (scrolledTo === highlighted) return;
+      const root = internalElement.value;
+      const row = root ? [...root.querySelectorAll("[data-message-id]")].find((node) => node.dataset.messageId === highlighted) : void 0;
+      if (!row) return;
+      scrolledTo = highlighted;
+      highlightCleared.value = false;
+      row.scrollIntoView({ block: "center", behavior: "instant" });
+      if (props.onJumpToMessage) row.focus({ preventScroll: true });
+    }, { flush: "post" });
     const viewerRole = computed2(() => props.conversation.membership?.role ?? props.conversation.participants.find((participant) => participant.appUserId === props.currentUserId || participant.id === props.currentUserId)?.role);
     const remove = async (message) => {
       if (props.confirmDelete && !await props.confirmDelete(message)) return false;
       return await props.onDeleteMessage?.(message) !== false;
     };
+    const renderQuote = (parentId, preview, jump) => {
+      const resolved = preview === void 0 || preview === "unavailable" ? void 0 : preview;
+      const author = resolved ? participants.value.get(resolved.senderId)?.name || resolved.senderId : void 0;
+      const attachments = resolved && resolved.mediaCount > 0 ? resolved.mediaCount === 1 ? "1 attachment" : `${resolved.mediaCount} attachments` : "";
+      const body = resolved ? resolved.text?.trim() || attachments : preview === "unavailable" ? "Original message unavailable" : "";
+      return h2(jump ? "button" : "div", {
+        class: cx("ckui-message-quote", preview === "unavailable" && "ckui-message-quote--unavailable"),
+        "data-reply-to": parentId,
+        "aria-label": resolved ? `Quoted message from ${author}` : preview === "unavailable" ? "Original message unavailable" : "Quoted message",
+        ...jump ? { type: "button", onClick: jump } : {}
+      }, [
+        ...author ? [h2("strong", { class: "ckui-message-quote__author" }, author)] : [],
+        ...body ? [h2("span", { class: "ckui-message-quote__body" }, body)] : []
+      ]);
+    };
     const renderMessage = (message, index) => {
       const isCurrentUser = message.senderId === props.currentUserId;
       const sender = participants.value.get(message.senderId);
@@ -1276,9 +1923,19 @@ var MessageListView = defineComponent2({
       const eligible = !isPending && (props.canEditMessage ? props.canEditMessage(message) : isCurrentUser && viewerRole.value !== "READ");
       const canEdit = eligible && !!props.onEditMessage;
       const canDelete = eligible && !!props.onDeleteMessage;
+      const replyEligible = !isPending && (props.canReplyToMessage ? props.canReplyToMessage(message) : viewerRole.value !== "READ");
+      const canReply = replyEligible && !!props.onReplyToMessage;
       const edit = () => {
         props.onEditMessage?.(message);
       };
+      const replyTo = () => {
+        props.onReplyToMessage?.(message);
+      };
+      const parentId = message.replyToMessageId;
+      const replyPreview = parentId ? props.replyPreviewByMessageId?.get(parentId) : void 0;
+      const jumpToReplyTarget = parentId && props.onJumpToMessage ? () => {
+        props.onJumpToMessage?.(parentId);
+      } : void 0;
       const slotProps = {
         message,
         chronologicalIndex: index,
@@ -1288,11 +1945,27 @@ var MessageListView = defineComponent2({
         isEdited,
         canEdit,
         canDelete,
+        canReply,
         ...canEdit ? { edit } : {},
-        ...canDelete ? { remove: () => remove(message) } : {}
+        ...canDelete ? { remove: () => remove(message) } : {},
+        ...canReply ? { reply: replyTo } : {},
+        ...parentId && replyPreview !== void 0 ? { replyPreview } : {},
+        ...jumpToReplyTarget ? { jumpToReplyTarget } : {}
       };
+      const anchor = {
+        "data-message-id": message.id,
+        ...props.onJumpToMessage ? { tabindex: "-1" } : {}
+      };
+      const highlighted = !highlightCleared.value && props.highlightedMessageId === message.id;
       const custom = slots.message?.(slotProps);
-      if (custom) return h2("div", { key: message.id, role: "listitem" }, custom);
+      if (custom) {
+        return h2("div", {
+          key: message.id,
+          role: "listitem",
+          ...anchor,
+          ...highlighted ? { class: "ckui-message-highlight" } : {}
+        }, custom);
+      }
       const currentAppearance = appearance();
       const messagePart = isCurrentUser ? "outgoingMessage" : "incomingMessage";
       const iconButton = (label, onClick, icon) => h2("button", {
@@ -1302,7 +1975,8 @@ var MessageListView = defineComponent2({
         class: partClass("button", currentAppearance, "ckui-icon-button"),
         style: partStyle("button", currentAppearance)
       }, [icon]);
-      const actions = canEdit || canDelete ? h2("div", { class: "ckui-message-actions" }, [
+      const actions = canReply || canEdit || canDelete ? h2("div", { class: "ckui-message-actions" }, [
+        ...canReply ? [iconButton("Reply to message", replyTo, h2(Reply, { size: 16, "aria-hidden": "true" }))] : [],
         ...canEdit ? [iconButton("Edit message", edit, h2(Pencil, { size: 16, "aria-hidden": "true" }))] : [],
         ...canDelete ? [iconButton("Delete message", () => {
           if (props.confirmDelete) void remove(message);
@@ -1345,21 +2019,24 @@ var MessageListView = defineComponent2({
         }, slots.media?.(mediaSlotProps) ?? [defaultMedia(media, open, props.imageLoading)]);
       });
       const receiptSlotProps = { message, readerIds };
+      const quote = parentId ? renderQuote(parentId, replyPreview, jumpToReplyTarget) : null;
       return h2("div", { key: message.id, role: "listitem" }, [
         h2("article", {
           class: cx(
             !props.unstyled && "ckui-message-row",
             isCurrentUser && !props.unstyled && "ckui-message-row--outgoing",
+            highlighted && "ckui-message-highlight",
             props.classNames?.message,
             props.classNames?.[messagePart]
           ),
           style: [props.styles?.message, props.styles?.[messagePart]],
-          "data-message-id": message.id
+          ...anchor
         }, [
           // Spread, not null: an absent action/label/prompt must not leave a comment node (0.7 markup stays byte-identical).
           ...actions ? [actions] : [],
           h2("div", { class: "ckui-message-bubble" }, [
             !isCurrentUser ? h2("strong", { class: "ckui-message-sender" }, sender?.name || message.senderId) : null,
+            ...quote ? [quote] : [],
             message.text ? h2("div", { class: "ckui-message-text" }, message.text) : null,
             ...mediaNodes,
             h2("span", { class: "ckui-message-time" }, [
@@ -1407,6 +2084,13 @@ var MessageListView = defineComponent2({
       } else {
         children.push(...props.messages.map(renderMessage));
       }
+      if (props.isLoadingNewer) {
+        children.push(slots["loading-newer"]?.() ?? h2("div", {
+          class: partClass("loading", currentAppearance, "ckui-inline-state"),
+          style: partStyle("loading", currentAppearance),
+          role: "status"
+        }, [h2(LoaderCircle, { class: "ckui-spin", "aria-hidden": "true" }), " Loading newer messages\u2026"]));
+      }
       return h2("div", {
         ...attrs,
         ref: (element) => {
@@ -1419,12 +2103,18 @@ var MessageListView = defineComponent2({
         role: "log",
         "aria-live": "polite",
         "aria-label": `Messages in ${props.conversation.displayTitle}`,
+        // Omitted entirely while idle, never `aria-busy="false"`: the 0.7 markup of this element is pinned.
+        ...props.jumpInFlight ? { "aria-busy": "true" } : {},
         onScroll: (event) => {
           const nativeHandler = attrs.onScroll;
           if (typeof nativeHandler === "function") nativeHandler(event);
+          if (props.jumpInFlight) return;
+          if (props.highlightedMessageId && !highlightCleared.value) highlightCleared.value = true;
           const element = event.currentTarget;
           const distanceFromOldest = props.reverse ? element.scrollTop : element.scrollHeight - element.scrollTop - element.clientHeight;
           if (distanceFromOldest <= props.paginationThreshold) void requestOlder();
+          const distanceFromNewest = props.reverse ? element.scrollHeight - element.scrollTop - element.clientHeight : element.scrollTop;
+          if (distanceFromNewest <= props.paginationThreshold) void requestNewer();
         }
       }, children);
     };
@@ -1464,6 +2154,18 @@ var viewProps = {
   onDeleteMessage: { type: Function, default: void 0 },
   canEditMessage: { type: Function, default: void 0 },
   confirmDelete: { type: Function, default: void 0 },
+  replyTarget: { type: Object, default: null },
+  onReplyToMessage: { type: Function, default: void 0 },
+  onCancelReply: { type: Function, default: void 0 },
+  canReplyToMessage: { type: Function, default: void 0 },
+  replyPreviewByMessageId: { type: Object, default: void 0 },
+  onJumpToMessage: { type: Function, default: void 0 },
+  highlightedMessageId: { type: String, default: null },
+  jumpInFlight: { type: Boolean, default: false },
+  hasNewerMessages: { type: Boolean, default: false },
+  isLoadingNewer: { type: Boolean, default: false },
+  onLoadNewer: { type: Function, default: void 0 },
+  onReturnToLatest: { type: Function, default: void 0 },
   isInitialLoading: { type: Boolean, default: false },
   isLoadingOlder: { type: Boolean, default: false },
   isSending: { type: Boolean, default: false },
@@ -1483,7 +2185,7 @@ var viewProps = {
   defaultDraft: { type: String, default: "" },
   onDraftChange: { type: Function, default: void 0 }
 };
-function editingSummary(message) {
+function messageSummary(message) {
   return message.text?.trim() || (message.media.length === 1 ? "1 attachment" : `${message.media.length} attachments`);
 }
 function typingLabel(userIds, displayNameForUser) {
@@ -1509,7 +2211,12 @@ var ConversationView = defineComponent3({
     "edit-message",
     "save-edit",
     "cancel-edit",
-    "delete-message"
+    "delete-message",
+    "reply-to-message",
+    "cancel-reply",
+    "jump-to-message",
+    "load-newer",
+    "return-to-latest"
   ],
   setup(props, { attrs, emit, slots }) {
     const internalDraft = ref2(props.defaultDraft);
@@ -1552,6 +2259,10 @@ var ConversationView = defineComponent3({
       leaveEdit(editing, "always");
       props.onCancelEdit?.();
     };
+    const cancelReply = () => {
+      props.onCancelReply?.();
+    };
+    const returnToLatest = () => props.onReturnToLatest?.();
     const canSave = (editing) => draft().trim().length > 0 || editing.media.length > 0;
     const submit = async () => {
       const editing = props.editingMessage;
@@ -1596,6 +2307,7 @@ var ConversationView = defineComponent3({
     };
     const refresh = () => props.onRefresh?.();
     const loadOlder = () => props.onLoadOlder?.();
+    const loadNewer = () => props.onLoadNewer?.();
     const addAttachment = () => {
       props.onAddAttachment?.();
     };
@@ -1642,6 +2354,7 @@ var ConversationView = defineComponent3({
     };
     const renderComposer = () => {
       const editing = props.editingMessage;
+      const replying = editing ? null : props.replyTarget;
       const slotProps = {
         value: draft(),
         setValue: setDraft,
@@ -1650,11 +2363,16 @@ var ConversationView = defineComponent3({
           void submit();
         },
         ...props.onAddAttachment ? { addAttachment } : {},
-        ...editing ? { editing, cancelEdit } : {}
+        ...editing ? { editing, cancelEdit } : {},
+        ...replying ? { replying, cancelReply } : {}
       };
       const busy = props.isSending || submitting.value;
       return slots.composer?.(slotProps) ?? h3("form", {
-        class: cx(partClass("composer", appearance(), "ckui-composer"), editing && !props.unstyled && "ckui-composer--editing"),
+        class: cx(
+          partClass("composer", appearance(), "ckui-composer"),
+          editing && !props.unstyled && "ckui-composer--editing",
+          replying && !props.unstyled && "ckui-composer--replying"
+        ),
         style: partStyle("composer", appearance()),
         onSubmit: (event) => {
           event.preventDefault();
@@ -1666,10 +2384,18 @@ var ConversationView = defineComponent3({
           h3(Pencil2, { size: 14, "aria-hidden": "true" }),
           h3("span", { class: "ckui-composer__editing-body" }, [
             h3("strong", "Editing message"),
-            h3("span", editingSummary(editing))
+            h3("span", messageSummary(editing))
           ]),
           h3("button", { type: "button", class: "ckui-link-button", "aria-label": "Cancel editing", onClick: cancelEdit }, "Cancel")
         ])] : [],
+        ...replying ? [h3("div", { class: "ckui-composer__replying", role: "status" }, [
+          h3(Reply2, { size: 14, "aria-hidden": "true" }),
+          h3("span", { class: "ckui-composer__replying-body" }, [
+            h3("strong", `Replying to ${nameForUser(replying.senderId)}`),
+            h3("span", messageSummary(replying))
+          ]),
+          h3("button", { type: "button", class: "ckui-link-button", "aria-label": "Cancel reply", onClick: cancelReply }, "Cancel")
+        ])] : [],
         props.onAddAttachment ? h3("button", {
           type: "button",
           "aria-label": "Add attachment",
@@ -1701,6 +2427,9 @@ var ConversationView = defineComponent3({
             if (event.key === "Escape" && props.editingMessage) {
               event.preventDefault();
               cancelEdit();
+            } else if (event.key === "Escape" && props.replyTarget) {
+              event.preventDefault();
+              cancelReply();
             }
           }
         }),
@@ -1743,6 +2472,7 @@ var ConversationView = defineComponent3({
         ...slots["read-receipt"] ? { "read-receipt": slots["read-receipt"] } : {},
         ...slots.empty ? { empty: slots.empty } : {},
         ...slots["loading-older"] ? { "loading-older": slots["loading-older"] } : {},
+        ...slots["loading-newer"] ? { "loading-newer": slots["loading-newer"] } : {},
         ...slots["message-error"] ? { error: slots["message-error"] } : {}
       };
       children.push(h3(MessageListView, {
@@ -1765,6 +2495,19 @@ var ConversationView = defineComponent3({
         ...props.onDeleteMessage ? { onDeleteMessage: (message) => props.onDeleteMessage?.(message) } : {},
         ...props.canEditMessage ? { canEditMessage: props.canEditMessage } : {},
         ...props.confirmDelete ? { confirmDelete: props.confirmDelete } : {},
+        ...props.onReplyToMessage ? { onReplyToMessage: (message) => {
+          props.onReplyToMessage?.(message);
+        } } : {},
+        ...props.canReplyToMessage ? { canReplyToMessage: props.canReplyToMessage } : {},
+        ...props.replyPreviewByMessageId ? { replyPreviewByMessageId: props.replyPreviewByMessageId } : {},
+        ...props.onJumpToMessage ? { onJumpToMessage: (messageId) => {
+          props.onJumpToMessage?.(messageId);
+        } } : {},
+        highlightedMessageId: props.highlightedMessageId,
+        jumpInFlight: props.jumpInFlight,
+        hasNewerMessages: props.hasNewerMessages,
+        isLoadingNewer: props.isLoadingNewer,
+        ...props.onLoadNewer ? { onLoadNewer: loadNewer } : {},
         reverse: props.reverseMessages,
         stickToBottom: props.stickToBottom,
         paginationThreshold: props.paginationThreshold,
@@ -1775,6 +2518,19 @@ var ConversationView = defineComponent3({
         density: props.density,
         unstyled: props.unstyled
       }, messageSlots));
+      if (props.onReturnToLatest) {
+        const jumpSlotProps = { returnToLatest };
+        children.push(slots["jump-to-latest"]?.(jumpSlotProps) ?? h3("div", { class: "ckui-conversation-jump" }, [
+          h3("button", {
+            type: "button",
+            class: "ckui-link-button",
+            "aria-label": "Jump to latest messages",
+            onClick: () => {
+              void returnToLatest();
+            }
+          }, [h3(ArrowDown, { size: 14, "aria-hidden": "true" }), " Jump to latest"])
+        ]));
+      }
       children.push(renderTyping(), renderComposer());
       return h3("section", {
         ...attrs,
@@ -1800,6 +2556,10 @@ var Conversation = defineComponent3({
     onSaveEdit: { type: Function, default: void 0 },
     onCancelEdit: { type: Function, default: void 0 },
     onDeleteMessage: { type: Function, default: void 0 },
+    replyTarget: { type: Object, default: void 0 },
+    onReplyToMessage: { type: Function, default: void 0 },
+    onCancelReply: { type: Function, default: void 0 },
+    onJumpToMessage: { type: Function, default: void 0 },
     client: { type: Object, required: true },
     conversationId: { type: String, required: true },
     messagePageSize: { type: Number, default: 30 },
@@ -1822,7 +2582,12 @@ var Conversation = defineComponent3({
     "edit-message",
     "save-edit",
     "cancel-edit",
-    "delete-message"
+    "delete-message",
+    "reply-to-message",
+    "cancel-reply",
+    "jump-to-message",
+    "load-newer",
+    "return-to-latest"
   ],
   setup(props, { attrs, emit, expose, slots }) {
     const controller = useConversation({
@@ -1892,6 +2657,17 @@ var Conversation = defineComponent3({
         onSaveEdit: _onSaveEdit,
         onCancelEdit: _onCancelEdit,
         onDeleteMessage: _onDeleteMessage,
+        replyTarget: _replyTarget,
+        onReplyToMessage: _onReplyToMessage,
+        onCancelReply: _onCancelReply,
+        replyPreviewByMessageId: _replyPreviewByMessageId,
+        onJumpToMessage: _onJumpToMessage,
+        highlightedMessageId: _highlightedMessageId,
+        jumpInFlight: _jumpInFlight,
+        hasNewerMessages: _hasNewerMessages,
+        isLoadingNewer: _isLoadingNewer,
+        onLoadNewer: _onLoadNewer,
+        onReturnToLatest: _onReturnToLatest,
         ...forwarded
       } = props;
       return h3(ConversationView, {
@@ -1937,6 +2713,39 @@ var Conversation = defineComponent3({
             return controller.deleteMessage(message.id);
           }
         } : {},
+        // Quoted replies and jump windows are the store's (0.9.0). Replying needs no adapter member; the jump
+        // affordances appear only while the adapter can fetch a context window, and disappear for the store's
+        // life against a backend that does not serve the route.
+        replyTarget: controller.replyTarget.value,
+        onReplyToMessage: (message) => {
+          emit("reply-to-message", message);
+          controller.startReply(message.id);
+        },
+        onCancelReply: () => {
+          emit("cancel-reply");
+          controller.cancelReply();
+        },
+        replyPreviewByMessageId: controller.replyPreviews.value,
+        highlightedMessageId: controller.highlightedMessageId.value,
+        jumpInFlight: controller.jumpInFlight.value,
+        hasNewerMessages: controller.hasNewerMessages.value,
+        isLoadingNewer: controller.isLoadingNewer.value,
+        ...controller.canJumpToMessage.value ? {
+          onJumpToMessage: (messageId) => {
+            emit("jump-to-message", messageId);
+            void controller.jumpToMessage(messageId);
+          }
+        } : {},
+        ...controller.windowMode.value === "jumped" ? {
+          onLoadNewer: () => {
+            emit("load-newer");
+            return controller.loadNewerMessages();
+          },
+          onReturnToLatest: () => {
+            emit("return-to-latest");
+            return controller.returnToLatest();
+          }
+        } : {},
         "onUpdate:modelValue": (value) => emit("update:modelValue", value),
         ...props.onBack ? { onBack: () => {
           props.onBack?.();
@@ -2773,6 +3582,7 @@ var defaultConvoKitTheme = {
   outgoingBubble: "#18181b",
   outgoingText: "#fafafa",
   badge: "#18181b",
+  highlight: "color-mix(in srgb, #18181b 14%, transparent)",
   radius: "10px",
   avatarSize: "40px",
   fontFamily: 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'
@@ -2805,6 +3615,7 @@ var ConvoKitThemeProvider = defineComponent5({
         "--ckui-outgoing": theme.outgoingBubble,
         "--ckui-outgoing-text": theme.outgoingText,
         "--ckui-badge": theme.badge,
+        "--ckui-highlight": theme.highlight,
         "--ckui-radius": theme.radius,
         "--ckui-avatar-size": theme.avatarSize,
         "--ckui-font": theme.fontFamily