@clowder-ai/companion 0.1.0-alpha.3 → 0.1.0-alpha.31

package/renderer/conversation-draft.mjs

@@ -0,0 +1,304 @@
+const receiptFingerprint = receipt => [
+  receipt.delivery,
+  receipt.messageId ?? '',
+  receipt.reason ?? '',
+  receipt.draftRevision ?? '',
+].join('\u0000');
+
+const copySubmission = submission => ({
+  clientMessageId: submission.clientMessageId,
+  text: submission.text,
+  submissionRevision: submission.submissionRevision,
+  receipt: { ...submission.receipt },
+});
+
+/**
+ * Renderer coordinator for the Host-owned composer draft.
+ *
+ * It keeps the current local edit separate from the last canonical Host text.
+ * Reads may reconcile receipts, but only submit() and retry() can send text.
+ */
+export class HostConversationDraft {
+  constructor({ client, changed = () => {}, delivery = () => {}, invalidated = () => {},
+    uuid = () => crypto.randomUUID(), schedule = setTimeout, cancel = clearTimeout,
+    debounceMs = 180 }) {
+    Object.assign(this, { client, changed, delivery, invalidated, uuid, debounceMs });
+    this.schedule = (...args) => Reflect.apply(schedule, globalThis, args);
+    this.cancel = (...args) => Reflect.apply(cancel, globalThis, args);
+    this.scopeRef = null;
+    this.revision = null;
+    this.canonicalText = '';
+    this.localText = '';
+    this.localVersion = 0;
+    this.localEdited = false;
+    this.writable = false;
+    this.status = 'loading';
+    this.submissions = new Map();
+    this.reportedReceipts = new Map();
+  }
+
+  snapshot() {
+    return {
+      scopeRef: this.scopeRef,
+      revision: this.revision,
+      canonicalText: this.canonicalText,
+      localText: this.localText,
+      writable: this.writable,
+      status: this.status,
+      submissions: [...this.submissions.values()].map(copySubmission),
+    };
+  }
+
+  canonicalReply() {
+    if (this.scopeRef === null || this.revision === null) return null;
+    return {
+      kind: 'conversation-draft', v: 1, status: 'available', scopeRef: this.scopeRef,
+      revision: this.revision, text: this.canonicalText, writable: this.writable,
+      submissions: [...this.submissions.values()].map(copySubmission),
+    };
+  }
+
+  emit() { this.changed(this.snapshot()); }
+
+  update(text) {
+    this.localText = text;
+    this.localEdited = true;
+    ++this.localVersion;
+    if (!['scope_changed', 'readonly'].includes(this.status)) this.status = 'editing';
+    this.emit();
+    if (this.saveTimer !== undefined) this.cancel(this.saveTimer);
+    this.saveTimer = this.schedule(() => {
+      this.saveTimer = undefined;
+      void this.save();
+    }, this.debounceMs);
+    this.saveTimer?.unref?.();
+  }
+
+  async load(options = {}) {
+    if (this.loading) return this.loading;
+    const operation = this.loadOnce(options);
+    this.loading = operation;
+    try { return await operation; }
+    finally { if (this.loading === operation) this.loading = undefined; }
+  }
+
+  async loadOnce({ preserveStatus = null } = {}) {
+    try {
+      const response = await this.client.readConversationDraft();
+      if (response.status !== 'available') {
+        this.revision = response.revision;
+        this.writable = false;
+        this.status = response.status;
+        this.emit();
+        return response;
+      }
+      if (response.scopeRef === this.scopeRef && this.revision !== null
+        && response.revision < this.revision) return response;
+      const scopeChanged = this.scopeRef !== null && this.scopeRef !== response.scopeRef;
+      const previousCanonical = this.canonicalText;
+      const previousSubmissions = [...this.submissions.values()];
+      if (scopeChanged) {
+        const unconfirmed = previousSubmissions.filter(value => value.receipt.delivery === 'unconfirmed');
+        const latest = unconfirmed.at(-1);
+        if (latest && (!this.localEdited || this.localText === previousCanonical)) {
+          this.localText = latest.text;
+          this.localEdited = true;
+          ++this.localVersion;
+        }
+        for (const submission of unconfirmed) this.invalidated({
+          ...copySubmission(submission), scopeRef: this.scopeRef, reason: 'scope_changed',
+        });
+        this.reportedReceipts.clear();
+      } else if (!this.localEdited || this.localText === previousCanonical) {
+        this.localText = response.text;
+        this.localEdited = false;
+      }
+      this.scopeRef = response.scopeRef;
+      this.revision = response.revision;
+      this.canonicalText = response.text;
+      this.writable = response.writable;
+      this.submissions = new Map(response.submissions.map(value => [value.clientMessageId, copySubmission(value)]));
+      this.status = scopeChanged ? 'scope_changed'
+        : preserveStatus ?? (response.writable ? 'ready' : 'readonly');
+      for (const submission of this.submissions.values()) this.report(submission);
+      this.emit();
+      if (!scopeChanged) await this.reconcileUnconfirmed();
+      return response;
+    } catch (error) {
+      this.status = error?.code ?? 'unavailable';
+      this.emit();
+      return null;
+    }
+  }
+
+  report(submission, restored = true) {
+    const key = `${this.scopeRef}\u0000${submission.clientMessageId}`;
+    const fingerprint = receiptFingerprint(submission.receipt);
+    if (this.reportedReceipts.get(key) === fingerprint) return;
+    this.reportedReceipts.set(key, fingerprint);
+    this.delivery({ ...copySubmission(submission), scopeRef: this.scopeRef, restored });
+  }
+
+  async reconcileUnconfirmed() {
+    const scopeRef = this.scopeRef;
+    for (const submission of [...this.submissions.values()]) {
+      if (submission.receipt.delivery !== 'unconfirmed' || scopeRef !== this.scopeRef) continue;
+      try {
+        const receipt = await this.client.readConversationDelivery(submission.clientMessageId, scopeRef);
+        if (scopeRef !== this.scopeRef) return;
+        const updated = { ...submission, receipt };
+        if (receipt.delivery !== 'rejected') this.submissions.set(submission.clientMessageId, updated);
+        this.report(updated);
+      } catch (error) {
+        if (error?.code === 'invalid_request' && scopeRef !== this.scopeRef) return;
+        this.status = error?.code ?? 'unavailable';
+      }
+    }
+    this.emit();
+  }
+
+  async save() {
+    if (this.saving) {
+      this.saveAgain = true;
+      return this.saving;
+    }
+    const operation = (async () => {
+      let result;
+      do {
+        this.saveAgain = false;
+        result = await this.saveOnce();
+      } while (this.saveAgain);
+      return result;
+    })();
+    this.saving = operation;
+    try { return await operation; }
+    finally { if (this.saving === operation) this.saving = undefined; }
+  }
+
+  async saveOnce() {
+    if (this.scopeRef === null) await this.load();
+    const text = this.localText;
+    const version = this.localVersion;
+    if (this.scopeRef === null || this.revision === null) return null;
+    if (!this.writable || text.length > 8000) {
+      this.status = 'readonly';
+      this.emit();
+      return null;
+    }
+    if (text === this.canonicalText) return this.canonicalReply();
+    const expectedRevision = this.revision;
+    const scopeRef = this.scopeRef;
+    this.status = 'saving';
+    this.emit();
+    try {
+      const response = await this.client.saveConversationDraft(expectedRevision, text, scopeRef);
+      if (response.status !== 'available') {
+        this.revision = response.revision;
+        this.status = response.status;
+        this.emit();
+        await this.load({ preserveStatus: response.status });
+        return response;
+      }
+      if (response.scopeRef !== scopeRef) {
+        await this.load({ preserveStatus: 'scope_changed' });
+        return null;
+      }
+      if (this.revision !== null && response.revision < this.revision) return this.canonicalReply();
+      const preserveStatus = version === this.localVersion ? 'ready' : 'editing';
+      this.applySaved(response, preserveStatus);
+      return response;
+    } catch (error) {
+      this.status = error?.code ?? 'unavailable';
+      this.emit();
+      return null;
+    }
+  }
+
+  applySaved(response, status) {
+    this.scopeRef = response.scopeRef;
+    this.revision = response.revision;
+    this.canonicalText = response.text;
+    this.writable = response.writable;
+    this.submissions = new Map(response.submissions.map(value => [value.clientMessageId, copySubmission(value)]));
+    this.status = response.writable ? status : 'readonly';
+    for (const submission of this.submissions.values()) this.report(submission);
+    this.emit();
+  }
+
+  async flush() {
+    if (this.saveTimer !== undefined) {
+      this.cancel(this.saveTimer);
+      this.saveTimer = undefined;
+    }
+    return this.save();
+  }
+
+  async submit() {
+    const text = this.localText.trim();
+    if (!text) return null;
+    if (text !== this.localText) {
+      this.localText = text;
+      this.localEdited = true;
+      ++this.localVersion;
+      this.emit();
+    }
+    const submittedVersion = this.localVersion;
+    const saved = await this.flush();
+    if (!saved || saved.status !== 'available' || saved.text !== text || !saved.writable) return null;
+    const submission = {
+      clientMessageId: this.uuid(), text, submissionRevision: saved.revision,
+      receipt: null,
+    };
+    return this.send(submission, submittedVersion);
+  }
+
+  async retry(submission) {
+    const current = this.submissions.get(submission.clientMessageId);
+    if (!current || current.receipt.delivery !== 'unconfirmed'
+      || current.text !== submission.text
+      || current.submissionRevision !== submission.submissionRevision) return null;
+    return this.send(current, null);
+  }
+
+  async send(submission, submittedVersion) {
+    const scopeRef = this.scopeRef;
+    if (scopeRef === null) return null;
+    try {
+      const receipt = await this.client.submitConversationText(
+        submission.text, submission.clientMessageId, submission.submissionRevision, scopeRef,
+      );
+      if (scopeRef !== this.scopeRef) return null;
+      const updated = { ...submission, receipt };
+      if (receipt.delivery !== 'rejected') this.submissions.set(submission.clientMessageId, updated);
+      this.reportedReceipts.delete(`${scopeRef}\u0000${submission.clientMessageId}`);
+      this.report(updated, false);
+      if (receipt.delivery === 'accepted') {
+        if (submittedVersion !== null && submittedVersion === this.localVersion
+          && this.localText === submission.text) {
+          this.localText = '';
+          this.localEdited = false;
+          ++this.localVersion;
+        }
+        this.status = 'accepted';
+        this.emit();
+        await this.load();
+      } else if (receipt.delivery === 'unconfirmed') {
+        this.status = 'unconfirmed';
+        this.emit();
+      } else {
+        this.status = receipt.reason;
+        this.emit();
+      }
+      return receipt;
+    } catch (error) {
+      this.status = error?.code ?? 'unavailable';
+      this.emit();
+      return null;
+    }
+  }
+
+  close() {
+    if (this.saveTimer !== undefined) this.cancel(this.saveTimer);
+    this.saveTimer = undefined;
+  }
+}

package/renderer/conversation-history.mjs

@@ -0,0 +1,176 @@
+const copyRow = row => ({
+  ...row,
+  body: { ...row.body },
+  inputMessageIds: [...row.inputMessageIds],
+});
+
+/** In-memory presentation cache for the Host-owned v2 conversation projection. */
+export class ConversationHistory {
+  constructor({ changed = () => {} } = {}) {
+    this.changed = changed;
+    this.rows = new Map();
+    this.order = [];
+    this.latestIds = new Set();
+    this.tokens = new Map();
+    this.consumed = new Map();
+    this.threadTitle = '';
+    this.hasMoreOlder = false;
+    this.olderCursor = null;
+    this.pageStatus = 'idle';
+    this.loadedOlder = false;
+  }
+
+  loadPage(page, { older = false } = {}) {
+    if (page.status !== 'available') {
+      this.pageStatus = 'stale';
+      this.emit();
+      return false;
+    }
+    this.pageStatus = 'available';
+    this.threadTitle = page.threadTitle;
+    const pageIds = [];
+    for (const value of page.messages) {
+      pageIds.push(value.id);
+      this.mergeRow(value);
+    }
+    const inPage = new Set(pageIds);
+    if (older) {
+      this.order = [...pageIds, ...this.order.filter(id => !inPage.has(id))];
+    } else {
+      const overlapsLatest = pageIds.some(id => this.latestIds.has(id));
+      const keepEarlier = this.latestIds.size === 0 || overlapsLatest || this.loadedOlder;
+      this.order = [...(keepEarlier ? this.order.filter(id => !inPage.has(id)) : []), ...pageIds];
+      this.latestIds = inPage;
+      for (const id of [...this.rows.keys()]) {
+        if (!this.order.includes(id)) this.remove(id);
+      }
+    }
+    if (older || !this.loadedOlder) {
+      this.hasMoreOlder = page.hasMoreOlder;
+      this.olderCursor = page.olderCursor;
+    }
+    if (older) this.loadedOlder = true;
+    this.emit();
+    return true;
+  }
+
+  mergeRow(value) {
+    const previous = this.rows.get(value.id);
+    const next = {
+      ...value,
+      body: { ...value.body },
+      inputMessageIds: [...value.inputMessageIds],
+      bodyStatus: value.body.complete ? 'complete' : 'loading',
+    };
+    if (!previous || previous.body.revision !== value.body.revision) {
+      this.forgetMessageTokens(value.id);
+      this.consumed.set(value.id, new Set());
+      this.rows.set(value.id, next);
+      this.registerContinuation(next);
+      return;
+    }
+
+    if (previous.text.startsWith(value.text)) {
+      next.text = previous.text;
+      next.body = previous.body;
+      next.bodyStatus = previous.bodyStatus;
+    } else if (!value.text.startsWith(previous.text)) {
+      next.text = previous.text;
+      next.body = previous.body;
+      next.bodyStatus = 'stale';
+    }
+    this.rows.set(value.id, next);
+    this.registerContinuation(next);
+  }
+
+  bodyContinuation(messageId) {
+    const value = this.rows.get(messageId);
+    return value?.bodyStatus === 'loading' ? value.body.continuation : null;
+  }
+
+  applyBody(continuation, reply) {
+    const binding = this.tokens.get(continuation);
+    if (!binding) return false;
+    const value = this.rows.get(binding.messageId);
+    if (!value || value.body.revision !== binding.revision) return false;
+    if (reply.status === 'withdrawn') {
+      this.remove(binding.messageId);
+      this.emit();
+      return true;
+    }
+    if (reply.status === 'stale') {
+      value.bodyStatus = 'stale';
+      this.emit();
+      return true;
+    }
+    const used = this.consumed.get(binding.messageId) ?? new Set();
+    if (used.has(continuation)) return true;
+    if (reply.messageId !== binding.messageId || reply.body.revision !== binding.revision
+      || value.body.continuation !== continuation) {
+      value.bodyStatus = 'stale';
+      this.emit();
+      return false;
+    }
+    used.add(continuation);
+    this.consumed.set(binding.messageId, used);
+    value.text += reply.text;
+    value.body = { ...reply.body };
+    value.bodyStatus = reply.body.complete ? 'complete' : 'loading';
+    if (!reply.body.complete && used.has(reply.body.continuation)) value.bodyStatus = 'stale';
+    this.registerContinuation(value);
+    this.emit();
+    return value.bodyStatus !== 'stale';
+  }
+
+  registerContinuation(value) {
+    const continuation = value.body.continuation;
+    if (!continuation || value.bodyStatus !== 'loading') return;
+    this.tokens.set(continuation, { messageId: value.id, revision: value.body.revision });
+  }
+
+  forgetMessageTokens(messageId) {
+    for (const [token, binding] of this.tokens) {
+      if (binding.messageId === messageId) this.tokens.delete(token);
+    }
+  }
+
+  remove(messageId) {
+    this.rows.delete(messageId);
+    this.order = this.order.filter(id => id !== messageId);
+    this.forgetMessageTokens(messageId);
+    this.consumed.delete(messageId);
+  }
+
+  clearProtected(reason) {
+    this.rows.clear();
+    this.order = [];
+    this.latestIds.clear();
+    this.tokens.clear();
+    this.consumed.clear();
+    this.threadTitle = '';
+    this.hasMoreOlder = false;
+    this.olderCursor = null;
+    this.pageStatus = reason;
+    this.emit();
+  }
+
+  message(messageId) {
+    const value = this.rows.get(messageId);
+    return value ? copyRow(value) : undefined;
+  }
+
+  snapshot() {
+    return {
+      threadTitle: this.threadTitle,
+      messages: this.order.flatMap(id => {
+        const value = this.rows.get(id);
+        return value ? [copyRow(value)] : [];
+      }),
+      hasMoreOlder: this.hasMoreOlder,
+      olderCursor: this.olderCursor,
+      pageStatus: this.pageStatus,
+    };
+  }
+
+  emit() { this.changed(this.snapshot()); }
+}

package/renderer/conversation-surface.mjs

@@ -0,0 +1,201 @@
+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,
+    onAccepted, retryLegacy, status, scheduleInterval = setInterval,
+    cancelInterval = clearInterval }) {
+    this.$ = id => document.getElementById(id);
+    Object.assign(this, { client, controls, bubble, transcript,
+      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.historySelection = null;
+    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.$('chat-transcript').addEventListener('wheel', event => {
+      if (event.deltaY < 0 && this.controller.mode === 'history'
+        && this.$('chat-transcript').scrollTop <= 0) void this.readOlderHistory();
+    }, { passive: true });
+    this.$('compose').onsubmit = event => this.submit(event);
+  }
+
+  renderReply(value) {
+    const previous = this.replyMode;
+    const previousSelection = this.historySelection;
+    if (previous === 'history' && value.mode !== 'history') {
+      this.transcript.leaveHistory(previousSelection);
+    }
+    this.replyMode = value.mode;
+    this.view.render(value);
+    this.controls.remeasure?.();
+    if (value.mode === 'history'
+      && (previous !== 'history' || previousSelection !== value.selectedMessageId)) {
+      this.transcript.enterHistory(value.selectedMessageId);
+    }
+    this.historySelection = value.mode === 'history' ? value.selectedMessageId : null;
+    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 });
+      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();
+  }
+}