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

package/manifest.json

@@ -1,6 +1,6 @@
 {
   "pluginId": "official.companion",
-  "version": "0.1.0-alpha.26",
+  "version": "0.1.0-alpha.28",
   "contractVersion": "0.1.0",
   "name": "猫猫球",
   "icon": {
@@ -40,7 +40,7 @@
       "bridgeVersion": "1.5.0",
       "surface": {
         "entrypoint": "renderer/index.html",
-        "integrity": "sha256-Q5N69iKFCZpX1mGm9KJWOvJaU3xd5mdGbojDBRZUTx4="
+        "integrity": "sha256-l4CrAxOELZjC8DrB8BYv8K2pFg1ggCCgarOXhD/tfZ8="
       },
       "presentation": {
         "width": 300,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clowder-ai/companion",
-  "version": "0.1.0-alpha.26",
+  "version": "0.1.0-alpha.28",
   "description": "The desktop voice body for your Clowder companion",
   "license": "MIT",
   "type": "module",

package/plugin.yaml

@@ -1,6 +1,6 @@
 {
   "pluginId": "official.companion",
-  "version": "0.1.0-alpha.26",
+  "version": "0.1.0-alpha.28",
   "contractVersion": "0.1.0",
   "name": "猫猫球",
   "icon": {
@@ -40,7 +40,7 @@
       "bridgeVersion": "1.5.0",
       "surface": {
         "entrypoint": "renderer/index.html",
-        "integrity": "sha256-Q5N69iKFCZpX1mGm9KJWOvJaU3xd5mdGbojDBRZUTx4="
+        "integrity": "sha256-l4CrAxOELZjC8DrB8BYv8K2pFg1ggCCgarOXhD/tfZ8="
       },
       "presentation": {
         "width": 300,

package/renderer/conversation-surface.mjs

@@ -18,6 +18,7 @@ export class ConversationSurface {
     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),
@@ -59,14 +60,27 @@ export class ConversationSurface {
         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');
     }

package/renderer/index.html

@@ -118,26 +118,35 @@
         <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 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>
-      <button id="reply-return-latest" class="reply-return-latest" type="button" hidden>回到最新 ↓</button>
+      <header id="chat-history-header"><strong id="chat-name">和猫猫写几句</strong>
+        <button id="chat-history-dismiss" data-action="dismiss" aria-label="收起文字">收起</button>
+      </header>
+      <div id="chat-transcript-shell" class="chat-transcript-shell" hidden>
+        <div id="chat-transcript" role="log" aria-live="polite"><p class="empty">想说什么，就写在这里。</p></div>
+        <button id="reply-history-close" class="reply-history-close" data-action="dismiss" aria-label="关闭历史" title="关闭历史" hidden>
+          <svg viewBox="0 0 16 16" aria-hidden="true"><path d="m4 4 8 8m0-8-8 8"/></svg>
+        </button>
+        <button id="reply-return-latest" class="reply-return-latest" type="button" hidden>回到最新 ↓</button>
+      </div>
       <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>
+        <span><strong id="reply-sent-status">已发送</strong><small id="reply-letter-text" hidden></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>
+          <button id="reply-close" class="reply-close" type="button" aria-label="关闭回复" title="关闭回复" hidden>
+            <svg viewBox="0 0 16 16" aria-hidden="true"><path d="m4 4 8 8m0-8-8 8"/></svg>
+          </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>
+      <div id="chat-feedback" class="chat-feedback" hidden><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>

package/renderer/reply-letter-controller.mjs

@@ -25,6 +25,7 @@ export class ReplyLetterController {
     this.reply = null;
     this.retained = false;
     this.hasNewer = false;
+    this.historyPresentation = null;
     this.selectedMessageId = null;
     this.pauseReasons = new Set();
     this.requestedContinuations = new Set();
@@ -95,6 +96,7 @@ export class ReplyLetterController {
     this.mode = 'compose';
     this.retained = false;
     this.hasNewer = false;
+    this.historyPresentation = null;
     this.selectedMessageId = null;
     this.pauseReasons.clear();
     this.emit();
@@ -164,6 +166,7 @@ export class ReplyLetterController {
       this.reply = presentationPair.reply;
       this.selectedMessageId = presentationPair.replyId;
       this.mode = 'reply';
+      this.historyPresentation = null;
       if (changedReply) {
         this.retained = false;
         this.pauseReasons.clear();
@@ -234,6 +237,7 @@ export class ReplyLetterController {
     this.stopTimer();
     this.reply = null;
     this.retained = false;
+    this.historyPresentation = null;
     this.selectedMessageId = null;
     this.letter = [...this.pending.values()].at(-1) ?? null;
     this.mode = this.letter ? 'sent' : 'idle';
@@ -258,6 +262,7 @@ export class ReplyLetterController {
       this.stopTimer();
       this.reply = null;
       this.retained = false;
+      this.historyPresentation = null;
       this.selectedMessageId = null;
       this.letter = restored ?? [...this.pending.values()].at(-1) ?? null;
       this.mode = this.letter ? 'sent' : 'idle';
@@ -275,6 +280,7 @@ export class ReplyLetterController {
     this.reply = null;
     this.retained = false;
     this.hasNewer = false;
+    this.historyPresentation = null;
     this.selectedMessageId = null;
     this.requestedContinuations.clear();
     this.dismissedReplies.clear();
@@ -287,6 +293,17 @@ export class ReplyLetterController {
     this.stopTimer();
     this.mode = 'history';
     this.retained = true;
+    this.historyPresentation = 'conversation';
+    this.selectedMessageId = messageId;
+    this.hasNewer = false;
+    this.emit();
+  }
+
+  openReplyHistory(messageId = newestHistoryAnchor(this.selectedMessageId, this.settled, this.history)) {
+    this.stopTimer();
+    this.mode = 'history';
+    this.retained = true;
+    this.historyPresentation = 'reply';
     this.selectedMessageId = messageId;
     this.hasNewer = false;
     this.emit();
@@ -325,6 +342,7 @@ export class ReplyLetterController {
       letter: this.letter,
       reply: this.reply,
       retained: this.retained,
+      historyPresentation: this.mode === 'history' ? this.historyPresentation : null,
       selectedMessageId: this.selectedMessageId,
       hasNewer: this.hasNewer,
       blockedReason: this.blockedReason,

package/renderer/reply-letter-view.mjs

@@ -1,9 +1,9 @@
 const phaseLabel = phase => ({
   processing: '正在回复',
-  failed: '回复失败 · 已发送的消息仍在聊天中',
-  interrupted: '回复中断 · 已发送的消息仍在聊天中',
-  canceled: '回复已取消 · 已发送的消息仍在聊天中',
-  withdrawn: '回复已撤回 · 已发送的消息仍在聊天中',
+  failed: '回复失败',
+  interrupted: '回复中断',
+  canceled: '回复已取消',
+  withdrawn: '回复已撤回',
 }[phase] ?? '已发送');
 
 const draftStatus = settlement => ({
@@ -52,28 +52,38 @@ export class ReplyLetterView {
     card.addEventListener('pointercancel', () => this.controller.resume('pointer'));
     this.$('reply-retain').onclick = () => this.controller.pin();
     this.$('reply-close').onclick = () => this.controller.close();
-    this.$('reply-history-open').onclick = () => this.controller.openHistory();
+    this.$('reply-history-open').onclick = () => this.controller.openReplyHistory();
     this.$('reply-return-latest').onclick = () => this.controller.returnLatest();
     this.$('reply-retry').onclick = () => { if (this.value?.draft) this.retry(this.value.draft); };
   }
 
   render(value) {
     this.value = value;
-    const compose = value.mode === 'compose' || value.mode === 'history';
     const history = value.mode === 'history';
+    const replyHistory = history && value.historyPresentation === 'reply';
+    const conversationHistory = history && !replyHistory;
+    const compose = value.mode === 'compose' || conversationHistory;
     this.$('compose').hidden = !compose;
-    this.$('chat-history-header').hidden = !history;
+    this.$('chat-history-header').hidden = !conversationHistory;
+    this.$('chat-name').hidden = replyHistory;
+    this.$('chat-history-dismiss').hidden = replyHistory;
+    this.$('reply-history-close').hidden = !replyHistory;
+    this.$('chat-transcript-shell').hidden = !history;
+    this.$('chat-transcript-shell').dataset.hasNewer = String(history && value.hasNewer);
     this.$('chat-transcript').hidden = !history;
-    this.$('chat-scope').hidden = !history;
+    this.$('chat-scope').hidden = !conversationHistory;
+    this.$('chat-connection-status').hidden = replyHistory;
     this.$('reply-sent').hidden = value.mode !== 'sent';
     this.$('reply-card').hidden = value.mode !== 'reply';
     this.$('reply-return-latest').hidden = !history || !value.hasNewer;
 
     const retrying = value.mode === 'compose' && value.draft?.settlement === 'unconfirmed';
     this.$('reply-retry').hidden = !retrying;
-    this.$('chat-status').textContent = value.draft ? draftStatus(value.draft.settlement)
+    const feedback = value.draft ? draftStatus(value.draft.settlement)
       : value.draftNotice ? draftStatus(value.draftNotice)
       : value.blockedReason === 'permission_required' ? '聊天权限已撤销' : '';
+    this.$('chat-status').textContent = feedback;
+    this.$('chat-feedback').hidden = !compose || (!feedback && !retrying);
     if (value.draft) {
       const input = this.$('message');
       if (!input.value || input.value === this.lastRenderedDraft) input.value = value.draft.text;
@@ -81,7 +91,8 @@ export class ReplyLetterView {
     }
 
     if (value.letter) {
-      this.$('reply-letter-text').textContent = value.letter.text;
+      this.$('reply-letter-text').textContent = '';
+      this.$('reply-letter-text').hidden = true;
       this.$('reply-input-text').textContent = value.letter.text;
       this.$('reply-sent-status').textContent = phaseLabel(value.letter.responsePhase);
     }
@@ -99,5 +110,7 @@ export class ReplyLetterView {
     this.$('reply-retain').dataset.running = String(canRetain && value.timer.running);
     this.$('reply-retain').style.setProperty('--reply-visible-ms', `${value.timer.remainingMs}ms`);
     this.$('chat').dataset.replyMode = value.mode;
+    this.$('chat').dataset.historyPresentation = history
+      ? value.historyPresentation ?? 'conversation' : '';
   }
 }

package/renderer/style.css

@@ -188,11 +188,16 @@ button:disabled { opacity: .45; cursor: default; }
 #work-notice { margin: 0; padding: 3px 11px 7px; color: var(--desktop-muted); font-size: 10px; }
 #chat { width: 400px; max-height: 500px; display: flex; flex-direction: column; overflow: hidden; }
 #chat[data-reply-mode="compose"] { width: 340px; }
-#chat[data-reply-mode="sent"] { width: 210px; background: transparent; box-shadow: none; }
+#chat[data-reply-mode="sent"] { width: max-content; border: 0; background: transparent; box-shadow: none; overflow: visible; }
 #chat[data-reply-mode="reply"] { width: 370px; }
+#chat[data-reply-mode="history"][data-history-presentation="reply"] { width: 370px; }
 #chat-history-header { padding: 7px 9px 7px 15px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--cafe-border-subtle); }
 #chat-history-header button { font-size: 12px; color: var(--cafe-text-secondary); }
-#chat-transcript { height: 230px; overflow: auto; padding: 14px; line-height: 1.7; font-size: 13px; }
+.chat-transcript-shell { position: relative; min-height: 0; flex: 1 1 230px; }
+#chat[data-history-presentation="reply"] .chat-transcript-shell { flex-basis: 480px; }
+#chat-transcript { height: 100%; overflow: auto; padding: 14px; line-height: 1.7; font-size: 13px; }
+.chat-transcript-shell[data-has-newer="true"] #chat-transcript { padding-bottom: 56px; }
+#chat[data-history-presentation="reply"] #chat-transcript { padding-top: 44px; }
 #chat-transcript p { margin: 0 0 10px; overflow-wrap: anywhere; white-space: pre-wrap; }
 #chat-transcript p:not(.empty) { width: fit-content; max-width: 92%; padding: 7px 10px; border-radius: 9px; }
 #chat-transcript p.user { margin-left: auto; background: var(--desktop-rail); }
@@ -201,32 +206,35 @@ button:disabled { opacity: .45; cursor: default; }
 #compose { display: flex; align-items: center; padding: 10px; gap: 8px; border-top: 1px solid var(--cafe-border-subtle); }
 #chat[data-reply-mode="compose"] #compose { border: 0; }
 #message { resize: none; border: 1px solid var(--desktop-line-strong); border-radius: 8px; min-width: 0; height: 34px; flex: 1; background: var(--desktop-paper); padding: 6px 9px; color: inherit; line-height: 1.5; }
+#message:focus-visible { border-color: transparent; outline: 2px solid var(--cafe-accent); outline-offset: -2px; }
 .chat-feedback { min-height: 0; display: flex; align-items: center; gap: 8px; padding: 0 12px 8px; color: #8f4730; }
 .chat-feedback small { flex: 1; font-size: 11px; }
 .chat-feedback button { color: #8f4730; font-size: 11px; }
 #chat-connection-status, #chat-scope { color: var(--cafe-text-muted); font-size: 10px; padding: 0 14px 10px; }
-.reply-sent { align-items: center; gap: 9px; border-radius: 10px; background: var(--desktop-paper); box-shadow: 0 8px 24px #18171524; padding: 9px 11px; }
-.reply-sent:not([hidden]) { display: flex; }
+#chat-connection-status:empty { display: none; }
+.reply-sent { align-items: center; gap: 5px; background: transparent; padding: 0; }
+.reply-sent:not([hidden]) { display: flex; flex-direction: column; }
 .reply-sent > svg { width: 36px; height: 27px; flex: none; overflow: visible; }
 .reply-sent > svg rect { fill: var(--desktop-paper); stroke: var(--desktop-ink); stroke-width: 1.5; }
 .reply-sent > svg path { fill: none; stroke: var(--desktop-ink); stroke-width: 1.5; stroke-linejoin: round; }
-.reply-sent > span { min-width: 0; display: grid; gap: 2px; }
-.reply-sent strong { font-size: 12px; font-weight: 600; }
-.reply-sent small { overflow: hidden; color: var(--desktop-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
+.reply-sent > span { min-width: 0; }
+.reply-sent strong { display: block; border-radius: 999px; background: var(--desktop-ink); color: var(--desktop-paper); padding: 3px 8px; font-size: 10px; font-weight: 500; white-space: nowrap; }
+.reply-sent small { display: none; }
 .reply-card { position: relative; max-height: 500px; overflow-y: auto; padding: 12px 14px 10px; }
 .reply-head { display: flex; align-items: flex-start; gap: 8px; }
 .reply-input-text { min-width: 0; flex: 1; color: var(--desktop-muted); font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
-.reply-ring, .reply-close { width: 24px; height: 24px; flex: none; display: grid; place-items: center; padding: 0; color: var(--desktop-muted); }
+#chat .reply-ring, #chat .reply-close, #chat .reply-history-close { width: 24px; height: 24px; flex: none; display: grid; place-items: center; padding: 0; color: var(--desktop-muted); }
 .reply-ring svg { width: 18px; height: 18px; transform: rotate(-90deg); }
-.reply-ring circle { fill: none; stroke-width: 1.5; }
-.reply-ring-track { stroke: var(--desktop-line-strong); }
-.reply-ring-progress { stroke: var(--desktop-ink); stroke-linecap: round; stroke-dasharray: 40.84; stroke-dashoffset: 0; }
+.reply-ring circle { fill: none; stroke-width: 1; }
+.reply-ring-track { stroke: var(--desktop-line); }
+.reply-ring-progress { stroke: var(--desktop-muted); stroke-linecap: round; stroke-dasharray: 40.84; stroke-dashoffset: 0; }
 .reply-ring[data-running="true"] .reply-ring-progress { animation: reply-countdown var(--reply-visible-ms) linear forwards; }
-.reply-close { font-size: 20px; line-height: 1; }
+.reply-close svg, .reply-history-close svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
+.reply-history-close { position: absolute; top: 10px; right: 10px; z-index: 1; background: var(--desktop-rail); }
 .reply-body { margin-top: 7px; color: var(--desktop-ink); font-size: 14px; line-height: 1.65; overflow-wrap: anywhere; white-space: pre-wrap; }
 .reply-body-status { display: block; margin-top: 6px; color: var(--desktop-muted); font-size: 11px; }
 .reply-history-open { margin-top: 8px; padding: 3px 0; color: var(--desktop-muted); font-size: 11px; }
-.reply-return-latest { position: absolute; right: 12px; bottom: 59px; z-index: 1; border: 1px solid var(--desktop-line) !important; background: var(--desktop-paper) !important; box-shadow: 0 2px 8px #1817151a; color: #8f4730; font-size: 11px; }
+.reply-return-latest { position: absolute; left: 50%; bottom: 10px; z-index: 1; transform: translateX(-50%); border: 1px solid var(--desktop-line) !important; background: var(--desktop-ink) !important; box-shadow: 0 2px 8px #1817151a; color: var(--desktop-paper); font-size: 11px; white-space: nowrap; }
 @keyframes reply-countdown { to { stroke-dashoffset: 40.84; } }
 .call-transcript { width: 420px; height: 210px; display: flex; flex-direction: column; overflow: hidden; }
 .call-transcript[data-expanded="true"] { height: 500px; }

package/renderer/transcript-view.mjs

@@ -6,6 +6,8 @@ export class TranscriptView {
     this.activeRows = new Map();
     this.historyRows = new Map();
     this.completed = new Set();
+    this.savedHistoryViewport = null;
+    this.pendingHistoryEntry = null;
   }
   append(role, text, chunk = false) {
     const pinned = this.nearBottom();
@@ -33,7 +35,8 @@ export class TranscriptView {
     if (pinned) this.container.scrollTop = this.container.scrollHeight;
   }
   nearBottom() {
-    return this.container.scrollHeight - this.container.scrollTop - this.container.clientHeight < 32;
+    return !this.container.hidden
+      && this.container.scrollHeight - this.container.scrollTop - this.container.clientHeight < 32;
   }
   visibleHistoryAnchor() {
     const viewport = this.container.getBoundingClientRect?.();
@@ -45,15 +48,75 @@ export class TranscriptView {
     }
     return null;
   }
+  restoreHistoryAnchor(anchor, readingPosition, useFirstAvailable = false) {
+    const row = this.historyRows.get(anchor?.id)
+      ?? (useFirstAvailable ? this.historyRows.values().next().value : null);
+    const rect = row?.getBoundingClientRect?.();
+    const viewport = this.container.getBoundingClientRect?.();
+    if (!rect || !viewport || viewport.bottom <= viewport.top) {
+      this.container.scrollTop = readingPosition;
+      return false;
+    }
+    this.container.scrollTop += rect.top - viewport.top - anchor.offset;
+    return true;
+  }
+  revealHistoryRow(id) {
+    const row = this.historyRows.get(id);
+    const rect = row?.getBoundingClientRect?.();
+    const viewport = this.container.getBoundingClientRect?.();
+    if (!rect || !viewport || viewport.bottom <= viewport.top) return false;
+    if (rect.top >= viewport.top && rect.bottom <= viewport.bottom) return true;
+    const viewportHeight = viewport.bottom - viewport.top;
+    const rowHeight = Math.max(0, rect.bottom - rect.top);
+    const offset = Math.max(0, (viewportHeight - rowHeight) / 2);
+    this.container.scrollTop += rect.top - viewport.top - offset;
+    return true;
+  }
+  placeHistoryEntry(afterLoad) {
+    if (!this.pendingHistoryEntry || this.container.hidden) return false;
+    const viewport = this.pendingHistoryEntry;
+    if (viewport.anchor && this.restoreHistoryAnchor(viewport.anchor, viewport.scrollTop)) {
+      this.pendingHistoryEntry = null;
+      return true;
+    }
+    if (viewport.selectedMessageId && this.revealHistoryRow(viewport.selectedMessageId)) {
+      this.pendingHistoryEntry = null;
+      return true;
+    }
+    const bounds = this.container.getBoundingClientRect?.();
+    if (!afterLoad || !bounds || bounds.bottom <= bounds.top) return false;
+    this.container.scrollTop = this.container.scrollHeight;
+    this.pendingHistoryEntry = null;
+    return true;
+  }
+  leaveHistory(selectedMessageId) {
+    this.savedHistoryViewport = {
+      selectedMessageId,
+      anchor: this.visibleHistoryAnchor(),
+      scrollTop: this.container.scrollTop,
+    };
+    this.pendingHistoryEntry = null;
+  }
+  enterHistory(selectedMessageId) {
+    const saved = this.savedHistoryViewport?.selectedMessageId === selectedMessageId
+      ? this.savedHistoryViewport : null;
+    this.pendingHistoryEntry = {
+      selectedMessageId,
+      anchor: saved?.anchor ?? null,
+      scrollTop: saved?.scrollTop ?? this.container.scrollTop,
+    };
+    this.placeHistoryEntry(false);
+  }
   reset() {
     for (const row of this.activeRows.values()) row.remove();
     this.activeRows.clear();
     this.completed.clear();
   }
   load(messages) {
-    const pinned = this.nearBottom();
+    const hidden = this.container.hidden;
+    const pinned = !hidden && this.nearBottom();
     const readingPosition = this.container.scrollTop;
-    const anchor = pinned ? null : this.visibleHistoryAnchor();
+    const anchor = hidden || pinned ? null : this.visibleHistoryAnchor();
     const previous = this.historyRows;
     this.historyRows = new Map();
     const rows = messages.map(message => {
@@ -81,14 +144,10 @@ export class TranscriptView {
       return row;
     });
     this.container.replaceChildren(...rows, ...this.activeRows.values());
-    if (pinned) this.container.scrollTop = this.container.scrollHeight;
-    else if (anchor) {
-      const row = this.historyRows.get(anchor.id) ?? rows[0];
-      const rect = row?.getBoundingClientRect?.();
-      const viewport = this.container.getBoundingClientRect?.();
-      this.container.scrollTop = rect && viewport
-        ? this.container.scrollTop + rect.top - viewport.top - anchor.offset
-        : readingPosition;
-    } else this.container.scrollTop = readingPosition;
+    if (hidden) this.container.scrollTop = readingPosition;
+    else if (this.placeHistoryEntry(true)) return;
+    else if (pinned) this.container.scrollTop = this.container.scrollHeight;
+    else if (anchor) this.restoreHistoryAnchor(anchor, readingPosition, true);
+    else this.container.scrollTop = readingPosition;
   }
 }