@clowder-ai/companion 0.1.0-alpha.24 → 0.1.0-alpha.26

package/renderer/conversation-surface.mjs

@@ -0,0 +1,188 @@
+import { explainError } from './errors.mjs';
+import { ConversationHistory } from './conversation-history.mjs';
+import { HostConversationDraft } from './conversation-draft.mjs';
+import { ReplyLetterController } from './reply-letter-controller.mjs';
+import { ReplyLetterView } from './reply-letter-view.mjs';
+
+/** Owns the chat panel's history, durable draft and reply-letter interaction. */
+export class ConversationSurface {
+  constructor({ document, client, controls, bubble, transcript, getCallPhase,
+    onAccepted, retryLegacy, status, scheduleInterval = setInterval,
+    cancelInterval = clearInterval }) {
+    this.$ = id => document.getElementById(id);
+    Object.assign(this, { client, controls, bubble, transcript, getCallPhase,
+      onAccepted, retryLegacy, status });
+    this.scheduleInterval = (...args) => Reflect.apply(scheduleInterval, globalThis, args);
+    this.cancelInterval = (...args) => Reflect.apply(cancelInterval, globalThis, args);
+    this.activePageRead = null;
+    this.pendingOlderRead = false;
+    this.bodyReads = new Set();
+    this.replyMode = 'idle';
+    this.controller = new ReplyLetterController({
+      requestContinuation: value => void this.readBody(value.messageId, value.continuation),
+      render: value => this.renderReply(value),
+    });
+    this.view = new ReplyLetterView({
+      document,
+      controller: this.controller,
+      retry: draft => void (draft.submissionRevision === undefined
+        ? this.retryLegacy(draft.text) : this.draft.retry(draft)),
+    });
+    this.lastRenderedDraft = '';
+    this.draft = new HostConversationDraft({
+      client,
+      changed: value => this.renderDraft(value),
+      delivery: value => {
+        this.controller.recordDelivery(value.receipt, value.text, value);
+        void this.readHistory();
+      },
+      invalidated: value => this.controller.invalidateDraft(value),
+    });
+    this.history = new ConversationHistory({ changed: value => this.renderHistory(value) });
+    this.bind();
+  }
+
+  bind() {
+    this.$('message').addEventListener('input', () => this.draft.update(this.$('message').value));
+    this.$('history').onclick = () => void this.client.openConversation().then(result => {
+      if (result.delivery === 'unconfirmed') this.status('打开聊天尚未确认 · 请从 Clowder 查看');
+    }).catch(error => this.status(explainError(error)));
+    this.$('reply-history-open').addEventListener('click', () => {
+      void this.controls.show('chat');
+      void this.readHistory();
+    });
+    this.$('reply-return-latest').addEventListener('click', () => {
+      this.$('chat-transcript').scrollTop = this.$('chat-transcript').scrollHeight;
+    });
+    this.$('chat-transcript').addEventListener('scroll', () => {
+      if (this.controller.mode === 'history' && this.$('chat-transcript').scrollTop < 24) {
+        void this.readOlderHistory();
+      }
+    });
+    this.$('compose').onsubmit = event => this.submit(event);
+  }
+
+  renderReply(value) {
+    const previous = this.replyMode;
+    this.replyMode = value.mode;
+    this.view.render(value);
+    this.controls.remeasure?.();
+    if (value.mode === 'reply' && previous !== 'reply' && this.controls.panel !== 'chat') {
+      void this.controls.show('chat');
+    }
+    if (value.mode === 'idle' && previous === 'reply' && this.controls.panel === 'chat') {
+      void this.controls.show('none');
+    }
+  }
+
+  renderDraft(value) {
+    const input = this.$('message');
+    if (input.value !== this.lastRenderedDraft && input.value !== value.localText) {
+      this.draft.update(input.value);
+      return;
+    }
+    input.value = value.localText;
+    this.lastRenderedDraft = value.localText;
+    this.controller.setDraftNotice(value.status);
+  }
+
+  renderHistory(value) {
+    this.threadTitle = value.threadTitle || this.threadTitle;
+    if (this.threadTitle) this.$('chat-name').textContent = this.threadTitle;
+    this.bubble.load(value.messages);
+    this.transcript.load(value.messages);
+    this.controller.loadHistory(value.messages);
+    this.$('history').textContent = value.hasMoreOlder
+      ? '在 Cat Café 中查看更早聊天 ↗' : '在 Cat Café 中查看完整聊天 ↗';
+  }
+
+  openWrite(callActive) {
+    if (callActive) this.controller.openHistory();
+    else this.controller.openCompose();
+  }
+
+  closeHistory() {
+    if (this.controller.mode === 'history') this.controller.close();
+  }
+
+  openHistory() { this.controller.openHistory(); }
+
+  async submit(event) {
+    event.preventDefault();
+    this.draft.update(this.$('message').value);
+    const receipt = await this.draft.submit();
+    if (receipt?.delivery !== 'accepted') return;
+    this.onAccepted();
+    void this.readHistory();
+  }
+
+  async readHistory({ before, older = false } = {}) {
+    const readKind = older ? 'older' : 'latest';
+    if (this.activePageRead) {
+      if (readKind === 'older' && this.activePageRead === 'latest') this.pendingOlderRead = true;
+      return;
+    }
+    this.activePageRead = readKind;
+    try {
+      const page = await this.client.readConversationPage(before === undefined ? {} : { before });
+      this.history.loadPage(page, { older });
+      void this.controls.setAmbient(this.getCallPhase() === 'idle' ? 'none' : 'actions');
+      this.$('chat-connection-status').textContent = page.status === 'stale'
+        ? '聊天位置已变化 · 请重新往上翻' : '';
+    } catch (error) {
+      if (error?.code === 'permission_required') {
+        this.history.clearProtected('permission_required');
+        this.controller.clearProtected('permission_required');
+        this.$('chat-connection-status').textContent = '聊天权限已撤销';
+      } else this.$('chat-connection-status').textContent = '聊天记录暂未更新 · 正在说的话仍会显示';
+    } finally {
+      const readPendingOlder = readKind === 'latest' && this.pendingOlderRead;
+      if (readKind === 'latest') this.pendingOlderRead = false;
+      this.activePageRead = null;
+      if (readPendingOlder) void this.readOlderHistory();
+    }
+  }
+
+  async readOlderHistory() {
+    const { hasMoreOlder, olderCursor, pageStatus } = this.history.snapshot();
+    if (this.controller.mode !== 'history' || pageStatus !== 'available' || !hasMoreOlder || !olderCursor) return;
+    await this.readHistory({ before: olderCursor, older: true });
+  }
+
+  async readBody(messageId, continuation) {
+    if (this.bodyReads.has(continuation) || this.history.bodyContinuation(messageId) !== continuation) return;
+    this.bodyReads.add(continuation);
+    try {
+      const result = await this.client.readConversationBody(continuation);
+      this.history.applyBody(continuation, result);
+      if (result.status === 'stale') {
+        this.controller.releaseContinuation(messageId, continuation);
+        this.$('chat-connection-status').textContent = '回复正文已变化 · 正在重新读取';
+        void this.readHistory();
+      }
+      if (result.status === 'withdrawn') this.controller.withdrawReply(messageId);
+    } catch (error) {
+      if (error?.code === 'permission_required') {
+        this.history.clearProtected('permission_required');
+        this.controller.clearProtected('permission_required');
+        this.$('chat-connection-status').textContent = '聊天权限已撤销';
+      } else {
+        this.controller.releaseContinuation(messageId, continuation);
+        this.$('chat-connection-status').textContent = '完整回复暂未读完 · 稍后重试';
+      }
+    } finally { this.bodyReads.delete(continuation); }
+  }
+
+  start() {
+    void this.readHistory();
+    void this.draft.load();
+    this.historyMonitor = this.scheduleInterval(() => void this.readHistory(), 3000);
+    this.draftMonitor = this.scheduleInterval(() => void this.draft.load(), 3000);
+  }
+
+  close() {
+    this.cancelInterval(this.historyMonitor);
+    this.cancelInterval(this.draftMonitor);
+    this.draft.close();
+  }
+}

package/renderer/conversation.mjs

@@ -2,8 +2,9 @@ import { explainError } from './errors.mjs';
 
 /** Local controls only. Durable messages, identity and preferences belong to the Host. */
 export class CompanionConversation {
-  constructor({ client, createPeer, render, transcript, stopScreen, uuid = () => crypto.randomUUID() }) {
-    Object.assign(this, { client, createPeer, render, transcript, stopScreen, uuid });
+  constructor({ client, createPeer, render, transcript, delivery = () => {}, stopScreen,
+    uuid = () => crypto.randomUUID() }) {
+    Object.assign(this, { client, createPeer, render, transcript, delivery, stopScreen, uuid });
     this.active = false;
     this.generation = 0;
     this.phase = 'idle';
@@ -219,10 +220,15 @@ export class CompanionConversation {
     try {
       const receipt = await this.client.text(input.text, input.id);
       if (receipt?.delivery !== 'accepted') {
+        this.reportDelivery(input, receipt ?? {
+          kind: 'delivery', delivery: 'unconfirmed', clientMessageId: input.id,
+          messageId: null, callId: null,
+        });
         if (generation === this.generation) this.show(explainError({ code: 'unconfirmed' }));
         return false;
       }
       if (this.pendingText === input) this.pendingText = undefined;
+      this.reportDelivery(input, receipt);
       // Voice may have ended; an accepted message still retires this draft.
       // Keep the newer voice status rather than announcing that we are listening.
       if (generation !== this.generation) return true;
@@ -230,10 +236,18 @@ export class CompanionConversation {
       this.show(this.active ? this.listening() : '已发送 · 回答会留在同一段聊天中');
       return true;
     } catch (error) {
+      if (error?.code === 'unconfirmed') this.reportDelivery(input, {
+        kind: 'delivery', delivery: 'unconfirmed', clientMessageId: input.id,
+        messageId: null, callId: null,
+      });
       if (generation === this.generation) this.show(explainError(error));
       return false;
     } finally { this.sending = false; }
   }
+  reportDelivery(input, receipt) {
+    try { this.delivery({ text: input.text, receipt }); }
+    catch { /* Presentation failures cannot change Host delivery truth. */ }
+  }
   muteMic() {
     if (this.audioMode === 'receive_only') return;
     this.muted = !this.muted; this.peer?.muteMic(this.muted);

package/renderer/index.html

@@ -118,11 +118,28 @@
         <div class="call-context-actions call-context-inline-actions"><button id="chat-mic" data-action="mute">静音</button><button id="chat-share" data-action="share"><span class="label">共享画面</span></button><button data-action="stop" class="destructive compact">挂断</button></div>
         <div id="chat-share-context" class="call-share-line" hidden><svg class="icon" aria-hidden="true"><use href="#i-screen"/></svg><span><strong id="chat-share-target"></strong><small>仅共享此窗口</small></span></div>
       </div>
-      <header><strong id="chat-name">和猫猫写几句</strong><button data-action="dismiss" aria-label="收起文字">收起</button></header>
+      <header id="chat-history-header"><strong id="chat-name">和猫猫写几句</strong><button data-action="dismiss" aria-label="收起文字">收起</button></header>
       <div id="chat-transcript" role="log" aria-live="polite"><p class="empty">想说什么，就写在这里。</p></div>
-      <form id="compose"><textarea id="message" aria-label="给猫猫输入消息" placeholder="输入消息…" rows="2" maxlength="8000"></textarea><button type="submit" class="primary">发送</button></form>
-      <small id="chat-status" role="status"></small>
-      <small><span id="connection-scope">语音与文字共用同一段聊天</span> <button id="history">在 Cat Café 中查看完整聊天 ↗</button></small>
+      <button id="reply-return-latest" class="reply-return-latest" type="button" hidden>回到最新 ↓</button>
+      <div id="reply-sent" class="reply-sent" tabindex="-1" hidden>
+        <svg viewBox="0 0 36 27" aria-hidden="true"><rect x="1" y="1" width="34" height="25" rx="4"/><path d="M2.5 3.5 18 15 33.5 3.5"/></svg>
+        <span><strong id="reply-sent-status">已发送</strong><small id="reply-letter-text"></small></span>
+      </div>
+      <article id="reply-card" class="reply-card" hidden tabindex="-1">
+        <div class="reply-head"><span id="reply-input-text" class="reply-input-text"></span>
+          <button id="reply-retain" class="reply-ring" type="button" aria-label="留住回复" title="留住回复">
+            <svg viewBox="0 0 16 16" aria-hidden="true"><circle class="reply-ring-track" cx="8" cy="8" r="6.5"/><circle class="reply-ring-progress" cx="8" cy="8" r="6.5"/></svg>
+          </button>
+          <button id="reply-close" class="reply-close" type="button" aria-label="关闭回复" title="关闭回复" hidden>×</button>
+        </div>
+        <div id="reply-body" class="reply-body"></div>
+        <small id="reply-body-status" class="reply-body-status" role="status"></small>
+        <button id="reply-history-open" class="reply-history-open" type="button">往上翻聊天记录</button>
+      </article>
+      <form id="compose"><textarea id="message" aria-label="给猫猫输入消息" placeholder="输入消息…" rows="1" maxlength="8000"></textarea><button type="submit" class="primary">发送</button></form>
+      <div class="chat-feedback"><small id="chat-status" role="status"></small><button id="reply-retry" type="button" hidden>↻ 重试</button></div>
+      <small id="chat-connection-status" role="status"></small>
+      <small id="chat-scope"><span id="connection-scope">语音与文字共用同一段聊天</span> <button id="history">在 Cat Café 中查看完整聊天 ↗</button></small>
     </section>
     <section id="transcript" class="floating call-transcript" data-expanded="false" aria-label="这次通话的字幕" hidden>
       <div id="transcript-call-context" class="call-context transcript-call-context">

package/renderer/pet-controls.mjs

@@ -35,7 +35,13 @@ export function bindPetControls(client, { action, error, changed, moved = () =>
       $('anchor').style.left = `${placed.pet.x}px`; $('anchor').style.top = `${placed.pet.y}px`;
       if (node) { node.style.left = `${placed.panel.x}px`; node.style.top = `${placed.panel.y}px`; node.style.maxHeight = `${placed.panel.height}px`; }
       if (previousPanel !== next) {
-        if (next === 'chat') $('message').focus({ preventScroll: true });
+        if (next === 'chat') {
+          const mode = $('chat').dataset.replyMode;
+          const target = mode === 'reply'
+            ? ($('reply-close')?.hidden === false ? $('reply-close') : $('reply-retain'))
+            : mode === 'sent' ? $('reply-sent') : $('message');
+          target?.focus?.({ preventScroll: true });
+        }
         if (next === 'transcript') $('call-message').focus({ preventScroll: true });
         if (next === 'settings') $('settings-back').focus({ preventScroll: true });
         if (next === 'decisions') $('decision-reload').focus({ preventScroll: true });
@@ -98,7 +104,7 @@ export function bindPetControls(client, { action, error, changed, moved = () =>
   });
   document.querySelectorAll('[data-action]').forEach(button => button.onclick = () => {
     const kind = button.dataset.action;
-    if (kind === 'write' || kind === 'history') { void show('chat'); return; }
+    if (kind === 'write' || kind === 'history') { action(kind); void show('chat'); return; }
     if (kind === 'transcript') { void show('transcript'); return; }
     if (kind === 'settings') { void show('settings'); return; }
     if (kind === 'decisions') { void show('decisions'); return; }

package/renderer/reply-letter-controller.mjs

@@ -0,0 +1,343 @@
+import { newestHistoryAnchor, projectReplyBody, selectReplyPresentation } from './reply-letter-state.mjs';
+
+const replyVisibleDuration = text => Math.min(30_000, 6_000 + Math.ceil([...text].length / 8) * 1_000);
+
+/**
+ * Transient presentation state for a Host-owned conversation.
+ *
+ * Inputs are normalized bridge rows. In particular, inputMessageIds must be
+ * supplied by the trusted Host projection; this controller never guesses a
+ * relationship from timestamps, call ids, adjacency or equal text.
+ */
+export class ReplyLetterController {
+  constructor({ render, requestContinuation = () => {}, now = Date.now,
+    schedule = setTimeout, cancel = clearTimeout }) {
+    Object.assign(this, { render, requestContinuation, now });
+    this.schedule = (...args) => Reflect.apply(schedule, globalThis, args);
+    this.cancel = (...args) => Reflect.apply(cancel, globalThis, args);
+    this.mode = 'idle';
+    this.pending = new Map();
+    this.settled = [];
+    this.pairs = new Map();
+    this.history = [];
+    this.draft = null;
+    this.letter = null;
+    this.reply = null;
+    this.retained = false;
+    this.hasNewer = false;
+    this.selectedMessageId = null;
+    this.pauseReasons = new Set();
+    this.requestedContinuations = new Set();
+    this.dismissedReplies = new Set();
+    this.timerHandle = null;
+    this.timerStartedAt = null;
+    this.timerRemainingMs = 0;
+    this.blockedReason = null;
+    this.draftNotice = null;
+  }
+
+  recordDelivery(receipt, text, context = {}) {
+    this.blockedReason = null;
+    if (receipt.delivery !== 'accepted') {
+      this.draft = {
+        text,
+        clientMessageId: receipt.clientMessageId,
+        ...(context.submissionRevision === undefined ? {} : { submissionRevision: context.submissionRevision }),
+        ...(context.scopeRef === undefined ? {} : { scopeRef: context.scopeRef }),
+        settlement: receipt.delivery === 'rejected' ? receipt.reason : 'unconfirmed',
+      };
+      if (this.mode !== 'history') this.mode = 'compose';
+      this.emit();
+      return;
+    }
+    const letter = { text, clientMessageId: receipt.clientMessageId, inputMessageId: receipt.messageId };
+    const known = this.pending.get(receipt.messageId) ?? this.pairs.get(receipt.messageId)?.letter;
+    if (known?.clientMessageId === receipt.clientMessageId) {
+      if (this.draft?.clientMessageId === receipt.clientMessageId) this.draft = null;
+      this.emit();
+      return;
+    }
+    this.pending.set(receipt.messageId, letter);
+    if (context.restored === false || this.draft?.clientMessageId === receipt.clientMessageId) this.draft = null;
+    if (this.mode !== 'history') {
+      this.stopTimer();
+      this.reply = null;
+      this.letter = letter;
+      this.retained = false;
+      this.mode = 'sent';
+    }
+    this.emit();
+  }
+
+  invalidateDraft(value) {
+    this.draft = {
+      text: value.text,
+      clientMessageId: value.clientMessageId,
+      submissionRevision: value.submissionRevision,
+      scopeRef: value.scopeRef,
+      settlement: value.reason ?? 'scope_changed',
+    };
+    if (this.mode !== 'history') this.mode = 'compose';
+    this.emit();
+  }
+
+  setDraftNotice(value) {
+    if (this.draftNotice === value) return;
+    this.draftNotice = value;
+    this.emit();
+  }
+
+  openCompose() {
+    if (this.reply) this.dismissedReplies.add(this.reply.id);
+    this.stopTimer();
+    this.reply = null;
+    this.letter = null;
+    this.mode = 'compose';
+    this.retained = false;
+    this.hasNewer = false;
+    this.selectedMessageId = null;
+    this.pauseReasons.clear();
+    this.emit();
+  }
+
+  loadHistory(rows) {
+    this.history = rows.map(row => ({
+      id: row.id,
+      role: row.role,
+      text: row.text,
+      body: projectReplyBody(row),
+      inputMessageIds: [...(row.inputMessageIds ?? [])],
+      responsePhase: row.responsePhase ?? 'unknown',
+      deliveryReceipt: row.deliveryReceipt ? { ...row.deliveryReceipt } : undefined,
+    }));
+    let restoredLetter = null;
+    for (const row of this.history) {
+      const receipt = row.deliveryReceipt;
+      if (row.role !== 'user' || receipt?.delivery !== 'accepted' || receipt.messageId !== row.id) continue;
+      if (this.pending.has(row.id) || this.pairs.has(row.id)) continue;
+      restoredLetter = {
+        text: row.text,
+        clientMessageId: receipt.clientMessageId,
+        inputMessageId: row.id,
+      };
+      this.pending.set(row.id, restoredLetter);
+    }
+    let newestPair = null;
+    const settledNow = [];
+    for (const row of this.history) {
+      if (row.role !== 'assistant') continue;
+      if (row.responsePhase === 'completed') this.requestMissingBody(row);
+      for (const inputMessageId of row.inputMessageIds) {
+        const pending = this.pending.get(inputMessageId);
+        const existing = this.pairs.get(inputMessageId);
+        if (!pending && !existing) continue;
+        if (row.responsePhase !== 'completed') {
+          if (pending) {
+            const updated = { ...pending, responsePhase: row.responsePhase };
+            this.pending.set(inputMessageId, updated);
+            if (this.letter?.inputMessageId === inputMessageId) this.letter = updated;
+          }
+          continue;
+        }
+        const letter = pending ?? existing.letter;
+        const pair = { inputMessageId, replyId: row.id, letter, reply: this.replyValue(row) };
+        if (!existing) {
+          this.pending.delete(inputMessageId);
+          this.settled.push({ inputMessageId, replyId: row.id });
+          settledNow.push(pair);
+        }
+        this.pairs.set(inputMessageId, pair);
+        newestPair = pair;
+      }
+    }
+
+    const presentationPair = selectReplyPresentation({ mode: this.mode, letter: this.letter,
+      reply: this.reply, settledPairs: settledNow, pairs: this.pairs,
+      dismissedReplies: this.dismissedReplies });
+    if (newestPair && this.mode === 'history') {
+      if (newestPair.replyId !== this.selectedMessageId) this.hasNewer = true;
+    } else if (presentationPair) {
+      const changedReply = this.reply?.id !== presentationPair.replyId;
+      const becameComplete = this.reply?.id === presentationPair.replyId
+        && this.reply.complete === false && presentationPair.reply.complete === true;
+      this.letter = presentationPair.letter;
+      this.reply = presentationPair.reply;
+      this.selectedMessageId = presentationPair.replyId;
+      this.mode = 'reply';
+      if (changedReply) {
+        this.retained = false;
+        this.pauseReasons.clear();
+        this.stopTimer();
+      }
+      if ((changedReply || becameComplete) && presentationPair.reply.complete) {
+        this.timerRemainingMs = replyVisibleDuration(presentationPair.reply.text);
+        this.startTimer();
+      }
+    } else if (this.mode === 'sent') {
+      this.letter = [...this.pending.values()].at(-1) ?? null;
+      if (!this.letter) this.mode = 'idle';
+    } else if (restoredLetter && this.mode === 'idle') {
+      this.letter = restoredLetter;
+      this.mode = 'sent';
+    }
+    this.emit();
+  }
+
+  replyValue(row) {
+    return { id: row.id, text: row.text, complete: row.body.complete,
+      responsePhase: row.responsePhase };
+  }
+
+  requestMissingBody(row) {
+    const reference = row.body.continuation;
+    if (row.body.complete || !reference) {
+      for (const key of this.requestedContinuations) {
+        if (key.startsWith(`${row.id}\u0000`)) this.requestedContinuations.delete(key);
+      }
+      return;
+    }
+    const key = `${row.id}\u0000${reference}`;
+    if (this.requestedContinuations.has(key)) return;
+    this.requestedContinuations.add(key);
+    this.requestContinuation({ messageId: row.id, continuation: reference });
+  }
+
+  releaseContinuation(messageId, continuation) {
+    this.requestedContinuations.delete(`${messageId}\u0000${continuation}`);
+  }
+
+  pause(reason) {
+    if (this.pauseReasons.has(reason)) return;
+    this.pauseReasons.add(reason);
+    if (this.timerHandle !== null) {
+      this.timerRemainingMs = Math.max(0, this.timerRemainingMs - (this.now() - this.timerStartedAt));
+      this.stopTimer(false);
+    }
+    this.emit();
+  }
+
+  resume(reason) {
+    if (!this.pauseReasons.delete(reason)) return;
+    if (this.pauseReasons.size === 0) this.startTimer();
+    this.emit();
+  }
+
+  pin() {
+    if (this.mode !== 'reply') return;
+    this.retained = true;
+    this.stopTimer();
+    this.emit();
+  }
+
+  close() {
+    if (this.reply) this.dismissedReplies.add(this.reply.id);
+    this.stopTimer();
+    this.reply = null;
+    this.retained = false;
+    this.selectedMessageId = null;
+    this.letter = [...this.pending.values()].at(-1) ?? null;
+    this.mode = this.letter ? 'sent' : 'idle';
+    this.emit();
+  }
+
+  withdrawReply(replyId) {
+    let restored = null;
+    for (const [inputMessageId, pair] of this.pairs) {
+      if (pair.replyId !== replyId) continue;
+      restored = { ...pair.letter, responsePhase: 'withdrawn' };
+      this.pairs.delete(inputMessageId);
+      this.pending.set(inputMessageId, restored);
+    }
+    this.settled = this.settled.filter(value => value.replyId !== replyId);
+    this.history = this.history.filter(value => value.id !== replyId);
+    this.dismissedReplies.delete(replyId);
+    for (const key of this.requestedContinuations) {
+      if (key.startsWith(`${replyId}\u0000`)) this.requestedContinuations.delete(key);
+    }
+    if (this.reply?.id === replyId) {
+      this.stopTimer();
+      this.reply = null;
+      this.retained = false;
+      this.selectedMessageId = null;
+      this.letter = restored ?? [...this.pending.values()].at(-1) ?? null;
+      this.mode = this.letter ? 'sent' : 'idle';
+    }
+    this.emit();
+  }
+
+  clearProtected(reason) {
+    this.stopTimer();
+    this.pending.clear();
+    this.settled = [];
+    this.pairs.clear();
+    this.history = [];
+    this.letter = null;
+    this.reply = null;
+    this.retained = false;
+    this.hasNewer = false;
+    this.selectedMessageId = null;
+    this.requestedContinuations.clear();
+    this.dismissedReplies.clear();
+    this.blockedReason = reason;
+    this.mode = this.draft ? 'compose' : 'idle';
+    this.emit();
+  }
+
+  openHistory(messageId = newestHistoryAnchor(this.selectedMessageId, this.settled, this.history)) {
+    this.stopTimer();
+    this.mode = 'history';
+    this.retained = true;
+    this.selectedMessageId = messageId;
+    this.hasNewer = false;
+    this.emit();
+  }
+
+  returnLatest() {
+    this.selectedMessageId = this.settled.at(-1)?.replyId ?? this.history.at(-1)?.id ?? null;
+    this.hasNewer = false;
+    this.emit();
+  }
+
+  startTimer() {
+    if (this.timerHandle !== null || this.timerRemainingMs <= 0 || this.retained
+      || this.mode !== 'reply' || !this.reply?.complete || this.pauseReasons.size > 0) return;
+    this.timerStartedAt = this.now();
+    this.timerHandle = this.schedule(() => {
+      this.timerHandle = null;
+      this.timerStartedAt = null;
+      this.timerRemainingMs = 0;
+      this.close();
+    }, this.timerRemainingMs);
+  }
+
+  stopTimer(reset = true) {
+    if (this.timerHandle !== null) this.cancel(this.timerHandle);
+    this.timerHandle = null;
+    this.timerStartedAt = null;
+    if (reset) this.timerRemainingMs = 0;
+  }
+
+  snapshot() {
+    const elapsed = this.timerHandle === null ? 0 : this.now() - this.timerStartedAt;
+    return {
+      mode: this.mode,
+      draft: this.draft,
+      letter: this.letter,
+      reply: this.reply,
+      retained: this.retained,
+      selectedMessageId: this.selectedMessageId,
+      hasNewer: this.hasNewer,
+      blockedReason: this.blockedReason,
+      draftNotice: this.draftNotice,
+      pendingInputMessageIds: [...this.pending.keys()],
+      settled: this.settled.map(value => ({ ...value })),
+      history: this.history.map(row => ({ ...row, body: { ...row.body }, inputMessageIds: [...row.inputMessageIds] })),
+      timer: {
+        running: this.timerHandle !== null,
+        remainingMs: Math.max(0, this.timerRemainingMs - elapsed),
+      },
+    };
+  }
+
+  emit() { this.render(this.snapshot()); }
+}

package/renderer/reply-letter-state.mjs

@@ -0,0 +1,38 @@
+export const projectReplyBody = row => ({
+  revision: row.body?.revision ?? '',
+  complete: row.body?.complete === true,
+  continuation: row.body?.continuation ?? null,
+});
+
+function newestSettledPair(settledPairs, dismissedReplies, inputMessageId) {
+  for (let index = settledPairs.length - 1; index >= 0; index -= 1) {
+    const pair = settledPairs[index];
+    if (dismissedReplies.has(pair.replyId)) continue;
+    if (inputMessageId !== undefined && pair.inputMessageId !== inputMessageId) continue;
+    return pair;
+  }
+  return undefined;
+}
+
+/** Only a newly settled relevant reply, or the reply already on screen, may take presentation focus. */
+export function selectReplyPresentation({ mode, letter, reply, settledPairs, pairs, dismissedReplies }) {
+  if (mode === 'compose' || mode === 'history') return undefined;
+  if (mode === 'sent') {
+    if (!letter) return undefined;
+    return newestSettledPair(settledPairs, dismissedReplies, letter.inputMessageId);
+  }
+  const freshPair = newestSettledPair(settledPairs, dismissedReplies);
+  if (mode === 'idle' || (mode === 'reply' && freshPair)) return freshPair;
+  if (mode !== 'reply' || !reply) return undefined;
+  for (const pair of pairs.values()) {
+    if (pair.replyId === reply.id) return pair;
+  }
+  return undefined;
+}
+
+export function newestHistoryAnchor(selectedMessageId, settled, history) {
+  if (selectedMessageId !== null) return selectedMessageId;
+  const settledReplyId = settled.at(-1)?.replyId;
+  if (settledReplyId !== undefined) return settledReplyId;
+  return history.at(-1)?.id ?? null;
+}