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

package/renderer/surface.mjs

@@ -4,110 +4,367 @@ import { explainError } from './errors.mjs';
 import { VoicePeer } from './peer.mjs';
 import { ScreenShare } from './screen-share.mjs';
 import { TranscriptView } from './transcript-view.mjs';
+import { CallTranscriptView } from './call-transcript-view.mjs';
+import { SettingsView } from './settings-view.mjs';
+import { RecentBubble } from './recent-bubble.mjs';
+import { PetMotion } from './pet-motion.mjs';
+import { LivingBody } from './living-body.mjs';
+import { detectDockedEdge } from './living-edge.mjs';
 import { bindPetControls } from './pet-controls.mjs';
-
+import { DecisionPanel } from './decision-panel.mjs';
+import { nativeWorkLabel, normalizeNativeWork } from './native-work-motion.mjs';
+import { NativeWindowTravel } from './native-window-travel.mjs';
+import { currentCompanionIdentity } from './companion-identity.mjs';
+import { FoldedChatUnread } from './chat-unread.mjs';
+import { COMPACT_BALL_SIZE, compactSizeAction } from './compact-size.mjs';
+import { WorkOverviewView } from './work-overview.mjs';
+import { MeetingStatus, renderMeetingStatus } from './meeting-state.mjs';
+import { VisibleTextPresentation } from './visible-text-receipt.mjs';
+import { ConversationSurface } from './conversation-surface.mjs';
+import { CallControlsPresentation } from './call-controls-presentation.mjs';
+import { CallDuration } from './call-duration.mjs';
+import { AppAssistController } from './app-assist-controller.mjs';
 const $ = id => document.getElementById(id);
 const label = (id, text) => { $(id).querySelector('.label').textContent = text; };
-const status = text => { $('status').textContent = text; $('chat-status').textContent = text; $('announcement').textContent = text; };
-const transcript = new TranscriptView($('transcript'));
-let sharing = false, pendingScreen = false, loading = false, latestHistory, previousPhase = 'idle';
-
+const status = text => {
+  $('status').textContent = text;
+  $('menu-status').textContent = text;
+  $('announcement').textContent = text;
+};
+const transcript = new TranscriptView($('chat-transcript'));
+const callTranscript = new CallTranscriptView($('call-transcript-log'), {
+  onUnread: count => {
+    $('call-unread').hidden = count === 0;
+    $('call-unread').textContent = count ? `${count} 条新消息` : '';
+  },
+});
+const bubble = new RecentBubble([$('bubble-first'), $('bubble-second')]);
+const callBubble = new RecentBubble([$('call-bubble-first'), $('call-bubble-second')], { showSpeaker: false });
+const callDuration = new CallDuration($('call-duration'));
+const meetingStatus = new MeetingStatus();
+const foldedChatUnread = new FoldedChatUnread(count => {
+  $('call-chat-unread').hidden = count === 0;
+  $('call-chat-unread').textContent = count ? String(count) : '';
+  $('call-chat').setAttribute('aria-label', count ? `聊天，${count} 条未读` : '聊天');
+});
+const motion = new PetMotion($('pet'), { livingBody: new LivingBody({ root: $('pet'), sit: $('living-sit'),
+  video: $('living-video'), transitionVideo: $('living-video-transition') }) });
+const nativeTravel = new NativeWindowTravel({
+  readPosition: () => ({ x: window.screenX, y: window.screenY }),
+  changed: value => motion.syncTravel(value),
+});
+let sharing = false, pendingScreen = false, transcriptLoading = false, previousPhase = 'idle';
+let appAssistOffer = null;
+let didMove = false, settingsView, settingsValues, decisionPanel, workView, callControlsPresentation;
+let previousControlPanel = 'none';
+// F229 stays quiet: a history ID change has no provenance for proactive text.
+const ambientPanel = active => active ? 'actions' : appAssistOffer ? 'app-assist' : 'none';
+const setTexts = (ids, text) => { for (const id of ids) $(id).textContent = text; };
+const setHidden = (ids, hidden) => { for (const id of ids) $(id).hidden = hidden; };
 if (!window.clowderCompanion) {
   $('actions').hidden = false; $('status').hidden = false;
   status('请从 Clowder 的聊聊入口打开猫猫球');
   document.querySelectorAll('button').forEach(button => { button.disabled = true; });
 } else {
+  nativeTravel.start();
   const client = createCompanionClient(window.clowderCompanion);
+  let conversationSurface;
+  const visibleText = new VisibleTextPresentation({
+    document,
+    report: observation => client.observePresentation(observation),
+    transcript, callTranscript, bubble, callBubble,
+  });
   const controls = bindPetControls(client, {
-    error: error => status(explainError(error)),
-    changed: panel => { if (panel === 'chat') void readHistory(); },
+    activate: () => { const handled = callControlsPresentation?.activate() ?? false; if (handled) void controls.show('actions'); return handled; },
+    escape: panel => callControlsPresentation?.escape(panel) ?? false,
+    error: (error, context) => status(context?.panel === 'settings' && error?.code === 'invalid_request' ? '这个 Host 版本还不支持猫旁设置。原来的设置入口会继续保留。' : explainError(error)),
+    moved: (dx, dy) => {
+      if (dx !== 'stop') { didMove = true; nativeTravel.setManual(true); motion.move(dx, dy); return; }
+      nativeTravel.setManual(false);
+      motion.stopMove();
+      if (!didMove) return;
+      didMove = false;
+      void conversation.refresh();
+      setTimeout(() => motion.setDockedEdge(detectDockedEdge(window, $('pet').getBoundingClientRect())), 100);
+    },
+    changed: panel => {
+      callControlsPresentation?.setPanel(panel);
+      visibleText.retry();
+      if (previousControlPanel === 'chat' && panel !== 'chat') conversationSurface.closeHistory();
+      if (panel === 'chat' && conversationSurface.controller.mode === 'idle') conversationSurface.openHistory();
+      if (panel === 'chat') foldedChatUnread.open();
+      else if (previousControlPanel === 'chat' && conversation?.active) foldedChatUnread.fold();
+      previousControlPanel = panel;
+      if (panel === 'chat') void conversationSurface.readHistory();
+      if (panel === 'transcript') void readCallTranscript();
+      if (panel === 'decisions') void decisionPanel?.read();
+      if (panel === 'settings') void settingsView?.open();
+      if (panel === 'menu') void workView?.load();
+    },
     action(kind) {
-      if (kind === 'begin') { transcript.reset(); void conversation.begin(); void controls.show('none'); }
+      if (kind === 'write') {
+        conversationSurface.openWrite(conversation.active);
+      }
+      if (kind === 'history') conversationSurface.openHistory();
+      if (kind === 'begin') { transcript.reset(); callTranscript.reset(); bubble.reset(); callBubble.clear(); void conversation.begin(); void controls.show('none'); }
+      if (kind === 'listen') { transcript.reset(); callTranscript.reset(); bubble.reset(); callBubble.clear(); void conversation.begin('receive_only'); void controls.show('none'); }
       if (kind === 'stop') void conversation.end();
       if (kind === 'mute') conversation.muteMic();
       if (kind === 'speaker') conversation.muteSpeaker();
       if (kind === 'share') toggleScreen();
       if (kind === 'documents') void conversation.documents(conversation.identity?.documentsAllowed === false);
       if (kind === 'hide') void client.hide().catch(error => status(explainError(error)));
+      if (kind === 'size-toggle') {
+        if (!settingsValues) { status('大小设置仍在读取'); return; }
+        void settingsView.controller.requestUpdate('ballSize', compactSizeAction(settingsValues.ballSize).value);
+      }
+      if (kind === 'transcript-return') void controls.show('actions');
+      if (kind === 'transcript-expand') {
+        const expanded = $('transcript').dataset.expanded !== 'true';
+        $('transcript').dataset.expanded = String(expanded);
+        setTexts(['transcript-expand-label'], expanded ? '收起' : '展开');
+        void controls.show('transcript');
+      }
+      if (kind === 'play' && conversation.identity?.skin === 'xianxian-codex') {
+        void controls.show('none');
+        motion.signal('play');
+      }
+    },
+  });
+  callControlsPresentation = new CallControlsPresentation({
+    document, root: $('actions'), pet: $('pet'), input: $('lite-call-message'),
+    composers: [{ form: $('call-compose'), input: $('call-message') },
+      { form: $('lite-call-compose'), input: $('lite-call-message') }],
+    send: text => conversation.send(text),
+    accepted: () => { motion.signal('received'); void conversationSurface.readHistory(); },
+    changed: () => controls.remeasure(),
+  });
+  const appAssist = new AppAssistController({
+    client,
+    changed: value => {
+      appAssistOffer = value.offer;
+      $('app-assist-name').textContent = appAssistOffer?.appName ?? '';
+      void controls.setAmbient(ambientPanel(previousPhase !== 'idle'));
+    },
+    accepted: () => {
+      status('提示已收起。请先点“语音通话”，连上后再点“共享画面”。');
+      $('menu-status').hidden = false;
+      void controls.show('menu');
     },
   });
   const screen = new ScreenShare({
-    screenRequest: () => client.screenPick(),
-    screenStart: (selectionId, name) => client.screenOpen(selectionId, name),
+    screenRequest: () => client.screenPick(), screenStart: (selectionId, name) => client.screenOpen(selectionId, name),
     screenFrame: (selectionId, frame) => client.screenFrame(selectionId, {
       ...frame, frameId: crypto.randomUUID(), sourceLabel: '所选画面', observedAt: Date.now(),
     }), screenStop: () => client.screenClose(),
   }, value => {
+    const wasActive = sharing || pendingScreen;
     sharing = value.sharing; pendingScreen = value.pending === true;
-    for (const id of ['share', 'menu-share']) label(id, sharing ? '停止共享' : pendingScreen ? '取消选屏' : '共享画面');
+    callControlsPresentation.setMediaLocked(sharing || pendingScreen);
+    for (const id of ['share', 'menu-share', 'menu-call-share', 'chat-share', 'settings-share']) label(id, sharing ? '停止共享' : pendingScreen ? '取消选屏' : '共享画面');
+    for (const prefix of ['call', 'menu', 'chat', 'transcript', 'settings']) {
+      $(`${prefix}-share-context`).hidden = !sharing;
+      $(`${prefix}-share-target`).textContent = sharing ? `共享中：${value.label}` : '';
+    }
     $('share-badge').hidden = !sharing && !pendingScreen;
     $('share-badge').title = sharing ? `正在共享：${value.label}，点此停止` : '正在选屏，点此取消';
+    $('share-badge').setAttribute('aria-label', sharing ? `停止共享：${value.label}` : '取消选屏');
+    if (value.message && value.message !== '未共享屏幕' && (wasActive || pendingScreen)) status(value.message);
   });
   function toggleScreen() {
+    if (conversation.phase !== 'talking') {
+      status('先开始语音通话，连上后可选择窗口或屏幕');
+      $('status').hidden = false;
+      void controls.show('actions');
+      return;
+    }
     void (sharing || pendingScreen ? screen.stop('屏幕共享已停止') : screen.start()).catch(error => status(explainError(error)));
   }
   const conversation = new CompanionConversation({
     client, createPeer: callback => new VoicePeer(callback, client), stopScreen: () => screen.stop(),
-    transcript: event => event.type === 'turn-done' ? transcript.finish(event) : transcript.append(event.role, event.text, !event.typed),
+    delivery: ({ text, receipt }) => conversationSurface.controller.recordDelivery(receipt, text),
+    transcript: event => {
+      if (event.type === 'turn-done') {
+        transcript.finish(event); callTranscript.finish(event); bubble.finish(event.role); callBubble.finish(event.role);
+        void conversationSurface.readHistory(); void readCallTranscript();
+      } else if (event.type === 'typed') {
+        callTranscript.appendTyped(event);
+        void conversationSurface.readHistory(); void readCallTranscript();
+      } else {
+        const speaker = event.role === 'assistant' ? conversation.identity?.displayName ?? '猫猫' : '语音';
+        visibleText.appendLive(event, speaker);
+        void controls.setAmbient('actions');
+      }
+    },
     render(value) {
       const showFailure = value.failed && previousPhase !== 'idle' && value.phase === 'idle';
+      const justConnected = previousPhase !== 'talking' && value.phase === 'talking';
+      if (previousPhase !== 'idle' && value.phase === 'idle') {
+        transcript.reset(); callTranscript.reset(); bubble.reset(); callBubble.clear(); void conversationSurface.readHistory();
+        foldedChatUnread.reset();
+        if (controls.panel === 'transcript') void controls.show('menu');
+      }
       previousPhase = value.phase;
       const active = value.phase !== 'idle';
+      const receiveOnly = value.audioMode === 'receive_only';
+      const canReceiveOnly = value.identity?.audio?.supportedModes?.includes('receive_only') === true;
+      const retryReceiveOnly = value.failed && value.retryMode === 'receive_only' && canReceiveOnly;
+      visibleText.setCall(value.callId);
+      callDuration.set(value.connectedAt);
+      callControlsPresentation.setActive(active);
+      if (value.identity?.appAssist) appAssist.consume(value.identity.appAssist);
+      void controls.setAmbient(ambientPanel(active));
       $('begin').hidden = active; $('begin').disabled = !value.identity;
-      label('begin', value.failed ? '重试语音' : '语音聊');
-      $('mic').hidden = value.phase !== 'talking'; $('speaker').hidden = !active;
+      $('listen').hidden = active || !canReceiveOnly; $('listen').disabled = !value.identity;
+      label('begin', value.failed && !retryReceiveOnly ? '重试语音通话' : '语音通话');
+      label('listen', retryReceiveOnly ? '重试只听' : '只听');
+      $('begin').className = retryReceiveOnly ? '' : 'primary';
+      $('listen').className = retryReceiveOnly ? 'primary' : '';
+      $('mic').hidden = value.phase !== 'talking' || receiveOnly; $('speaker').hidden = !active;
+      $('chat-mic').hidden = value.phase !== 'talking' || receiveOnly;
+      $('menu-mic').hidden = value.phase !== 'talking' || receiveOnly;
+      $('transcript-mic').hidden = value.phase !== 'talking' || receiveOnly;
+      $('settings-mic').hidden = value.phase !== 'talking' || receiveOnly;
       $('active-actions').hidden = !active;
-      for (const id of ['share', 'menu-share']) $(id).disabled = value.phase !== 'talking';
+      $('share').disabled = value.phase !== 'talking';
+      $('menu-call-share').disabled = value.phase !== 'talking';
       $('compose').querySelector('button').disabled = !value.identity || value.phase === 'connecting';
+      callControlsPresentation.setComposerState(value.identity, value.phase === 'connecting');
       status(value.message ?? '');
-      $('status').hidden = !value.message || /^(点|正在听|语音已结束|已发送)/.test(value.message);
-      $('call-badge').hidden = !active;
-      $('call-badge').dataset.state = value.muted ? 'muted' : value.phase;
-      const callLabel = value.phase === 'connecting' ? '正在连接，点此取消' : value.muted ? '麦克风已静音，点此结束' : '语音进行中，点此结束';
-      $('call-badge').title = callLabel; $('call-badge').setAttribute('aria-label', callLabel);
+      $('status').hidden = !value.message || /^(点击|正在听|麦克风已静音|只听模式|只听已结束|语音通话已结束|已发送)/.test(value.message);
+      $('menu-status').hidden = !value.message;
+      const callState = value.recovering ? '连接不稳定' : value.phase === 'connecting' ? '正在连接'
+        : receiveOnly ? '只听中' : active ? '通话中' : '';
+      const microphoneState = receiveOnly ? '麦克风未启用'
+        : value.phase === 'connecting' ? '正在请求麦克风'
+          : value.recovering ? `正在等待原连接恢复 · ${value.muted ? '麦克风已静音' : '麦克风已开启'}`
+            : value.muted ? '麦克风已静音' : active ? '麦克风已开启' : '';
+      const connectionState = value.recovering ? 'recovering' : value.phase === 'talking' ? 'connected' : value.phase === 'connecting' ? 'connecting' : 'idle';
+      for (const id of ['actions', 'chat-call-context', 'transcript-call-context', 'menu-call-context', 'settings-call-context']) $(id).dataset.connectionState = connectionState;
+      setTexts(['call-state', 'chat-call-state', 'transcript-call-state', 'menu-call-state', 'settings-call-state'], callState);
+      setTexts(['call-mic-state', 'chat-call-mic-state', 'transcript-call-mic-state', 'menu-call-mic-state', 'settings-call-mic-state'], microphoneState);
+      setHidden(['chat-call-context', 'transcript-call-context', 'menu-call-context', 'settings-call-context'], !active);
       label('mic', value.muted ? '取消静音' : '静音'); $('mic').setAttribute('aria-pressed', String(value.muted));
-      label('speaker', value.silent ? '开启播音' : '关闭播音');
+      $('mic').setAttribute('aria-label', value.muted ? '取消静音' : '静音');
+      $('mic-icon').setAttribute('href', value.muted ? '#i-mic-off' : '#i-mic');
+      $('chat-mic').textContent = value.muted ? '取消静音' : '静音';
+      $('menu-mic').setAttribute('aria-label', value.muted ? '取消静音' : '静音');
+      $('menu-mic').title = value.muted ? '取消静音' : '静音';
+      $('menu-mic').setAttribute('aria-pressed', String(value.muted));
+      $('menu-mic-icon').setAttribute('href', value.muted ? '#i-mic-off' : '#i-mic');
+      $('settings-mic').textContent = value.muted ? '取消静音' : '静音';
+      $('transcript-mic').setAttribute('aria-label', value.muted ? '取消静音' : '静音');
+      $('transcript-mic').setAttribute('aria-pressed', String(value.muted));
+      $('transcript-mic-icon').setAttribute('href', value.muted ? '#i-mic-off' : '#i-mic');
+      label('speaker', '播音');
+      $('speaker').setAttribute('aria-pressed', String(!value.silent));
+      $('speaker').title = value.silent ? '开启播音' : '关闭播音';
+      $('name-card-actions').hidden = active;
+      $('menu-hide-label').textContent = active ? '结束通话并隐藏' : '隐藏';
       const identity = value.identity;
+      const companionIdentity = currentCompanionIdentity(identity);
+      renderMeetingStatus(document, meetingStatus.update(active ? identity?.meeting : null));
+      const nativeSnapshot = normalizeNativeWork(identity?.nativeWork);
+      const workLabel = nativeWorkLabel(nativeSnapshot, identity?.nativeActivity), workState = workLabel ? `${identity.displayName}${workLabel}` : '';
+      setTexts(['call-work', 'chat-call-work', 'transcript-call-work', 'menu-call-work', 'settings-call-work'], workState);
+      setHidden(['call-work', 'chat-call-work', 'transcript-call-work', 'menu-call-work', 'settings-call-work'], !workState);
+      motion.setContext({ skin: identity?.skin, phase: value.phase,
+        nativeActivity: identity?.nativeActivity ?? 'none', muted: value.muted || receiveOnly });
+      motion.setBehaviorEnabled(identity?.behaviorEnabled === true);
+      motion.syncNativeSnapshot(nativeSnapshot);
+      if (justConnected) motion.signal('connected');
+      if (showFailure) motion.signal('failed');
       if (identity) {
-        $('chat-name').textContent = identity.displayName; $('menu-name').textContent = identity.displayName;
-        $('pet').setAttribute('aria-label', `${identity.displayName}：点击交流，右键更多，拖动移动`);
-        $('pet').dataset.skin = identity.skin;
+        $('menu-play').hidden = identity.skin !== 'xianxian-codex';
+        const companionLabel = companionIdentity
+          ? `${companionIdentity.title} · ${companionIdentity.partnerLabel}` : identity.displayName;
+        $('chat-name').textContent = conversationSurface?.threadTitle ?? companionLabel; $('menu-name').textContent = companionLabel;
+        $('message').placeholder = `发消息给${identity.displayName}…`;
+        $('pet').setAttribute('aria-label', active ? `${companionLabel}：指向或点击显示通话控制，右键打开名片，拖动移动`
+          : `${companionLabel}：点击或右键打开名片，拖动移动`);
         $('documents').querySelector('.menu-status').textContent = identity.documentsAllowed ? '开启' : '暂停';
         $('documents').setAttribute('aria-pressed', String(identity.documentsAllowed));
-        $('connection-scope').textContent = identity.duty.catId === identity.carrier.catId ? '交流保存在同一段聊天中' : `${identity.duty.displayName} · 实时语音由${identity.carrier.displayName}承载`;
+        if (companionIdentity) {
+          $('connection-scope').textContent = `${companionIdentity.partnerLabel} · ${companionIdentity.liveLabel} · ${companionIdentity.deepLabel}`;
+        } else {
+          const live = identity.liveTransport?.kind === 'gpt_live_v3'
+            ? 'GPT Live · 实时型号未证实' : '实时载体未确认';
+          $('connection-scope').textContent = identity.duty.catId === identity.carrier.catId
+            ? `${identity.duty.displayName} · ${live}`
+            : `${identity.duty.displayName} · ${live} · 绑定载体 ${identity.carrier.displayName}`;
+        }
       }
-      if (showFailure) void controls.show('actions');
+      if (showFailure) void controls.show('menu');
     },
   });
-  async function readHistory() {
-    if (loading || conversation.active || controls.panel !== 'chat') return;
-    loading = true;
+  $('app-assist-dismiss').onclick = () => { void appAssist.settle('dismiss'); };
+  $('app-assist-start').onclick = () => { void appAssist.settle('accept'); };
+  conversationSurface = new ConversationSurface({
+    document, client, controls, bubble, transcript,
+    onAccepted: () => motion.signal('received'),
+    retryLegacy: text => conversation.send(text),
+    status,
+    scheduleInterval: setInterval,
+    cancelInterval: clearInterval,
+  });
+  settingsView = new SettingsView({
+    document,
+    client,
+    close: () => void controls.show('menu'),
+    callActive: () => conversation.active,
+    expectHostStop: () => conversation.expectHostStop(),
+    settleExpectedHostStop: callStopped => conversation.settleExpectedHostStop(callStopped),
+    layoutChanged: () => { if (controls.panel === 'settings') controls.remeasure?.(); },
+    onValues(values) {
+      const sizeChanged = settingsValues !== undefined && settingsValues.ballSize !== values.ballSize;
+      settingsValues = values;
+      document.documentElement?.style?.setProperty?.('--pet-scale', String(values.ballSize / 72));
+      $('anchor').dataset.ballSize = String(values.ballSize);
+      $('anchor').dataset.compact = String(values.ballSize <= COMPACT_BALL_SIZE);
+      label('menu-size-toggle', compactSizeAction(values.ballSize).label);
+      motion.setBehaviorEnabled(values.behaviorEnabled);
+      $('documents').hidden = true;
+      decisionPanel?.refreshBadge();
+      if (sizeChanged) void controls.show(controls.panel);
+    },
+  });
+  workView = new WorkOverviewView({
+    document,
+    client,
+    changed: () => { if (controls.panel === 'menu') controls.remeasure?.(); },
+  });
+  decisionPanel = new DecisionPanel({
+    document,
+    client,
+    controls,
+    motion,
+    proactivePolicy: () => settingsValues?.proactivePolicy,
+  });
+  async function readCallTranscript() {
+    if (transcriptLoading || !conversation.active || !conversation.callId) return;
+    transcriptLoading = true;
+    const callId = conversation.callId;
     try {
-      const history = await client.readConversation();
-      if (conversation.active) return;
-      $('history').textContent = history.hasMore ? '更早聊天 ↗' : '完整聊天 ↗';
-      const serialized = JSON.stringify(history.messages);
-      if (serialized !== latestHistory) { latestHistory = serialized; transcript.load(history.messages); }
-    } catch (error) { status(explainError(error)); }
-    finally { loading = false; }
+      const reply = await client.readTranscript();
+      if (!conversation.active || conversation.callId !== callId) return;
+      if (!visibleText.loadTranscript(callId, reply, conversation.identity?.displayName)) return;
+      foldedChatUnread.receiveMany(reply.rows);
+      $('call-transcript-status').textContent = reply.hasMore ? '这里只显示这次通话最近的内容' : '';
+    } catch {
+      if (conversation.active && conversation.callId === callId) $('call-transcript-status').textContent = '字幕暂未更新 · 实时内容仍会继续显示';
+    } finally { transcriptLoading = false; }
   }
-  $('call-badge').onclick = () => void conversation.end();
   $('share-badge').onclick = toggleScreen;
-  $('history').onclick = () => void client.openConversation().then(result => {
-    if (result.delivery === 'unconfirmed') status('打开聊天尚未确认 · 请从 Clowder 查看');
-  }).catch(error => status(explainError(error)));
-  $('compose').onsubmit = async event => {
-    event.preventDefault(); const text = $('message').value;
-    if (await conversation.send(text)) {
-      if ($('message').value === text) $('message').value = '';
-      latestHistory = undefined; void readHistory();
-    }
-  };
+  $('call-unread').onclick = () => callTranscript.scrollToBottom();
   const unsubscribe = client.subscribe(event => {
-    if (event.kind === 'media-stopped') void conversation.releaseLocal('语音已停止');
+    if (event.kind === 'media-stopped') void conversation.hostStopped(event.reason);
     if (event.kind === 'view-dismiss') controls.dismiss();
   });
-  const monitor = setInterval(() => { void conversation.refresh(); void readHistory(); }, 3000);
-  void conversation.refresh(); void controls.show('none');
-  window.addEventListener('beforeunload', () => { clearInterval(monitor); unsubscribe(); void conversation.end(); });
+  const statusMonitor = setInterval(() => void conversation.refresh(), 1000), transcriptMonitor = setInterval(() => void readCallTranscript(), 1000);
+  const decisionMonitor = setInterval(() => { if (controls.panel !== 'decisions') void decisionPanel.read(); }, 15000), workMonitor = setInterval(() => { if (controls.panel === 'menu') void workView.load(); }, 15000);
+  void conversation.refresh(); conversationSurface.start(); void decisionPanel.read(); void settingsView.controller.load(); void controls.show('none');
+  window.addEventListener('beforeunload', () => {
+    clearInterval(statusMonitor); clearInterval(transcriptMonitor); clearInterval(decisionMonitor); clearInterval(workMonitor); conversationSurface.close(); callControlsPresentation.close(); callDuration.close();
+    unsubscribe(); appAssist.close(); visibleText.close(); nativeTravel.close(); motion.close(); void conversation.end();
+  });
 }

package/renderer/transcript-view.mjs

@@ -1,8 +1,13 @@
+import { historicalCompanionIdentity } from './companion-identity.mjs';
+
 export class TranscriptView {
   constructor(container) {
     this.container = container;
     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();
@@ -11,41 +16,138 @@ export class TranscriptView {
     if (!row) {
       row = this.container.ownerDocument.createElement('p');
       row.className = role;
+      if (chunk) { row.dataset.live = 'true'; row.dataset.author = `实时语音 · ${role === 'user' ? '你' : '猫猫'}`; }
       this.container.append(row);
       if (chunk) this.activeRows.set(role, row);
     }
-    row.textContent += text;
+    row.textContent = (row.textContent + text).slice(-16000);
     if (pinned) this.container.scrollTop = this.container.scrollHeight;
+    return row;
   }
   finish({ role, transcript, turnId }) {
     if (!['user', 'assistant'].includes(role) || (turnId && this.completed.has(turnId))) return;
     const pinned = this.nearBottom();
-    let row = this.activeRows.get(role);
-    if (!row && transcript) {
-      this.append(role, '', true);
-      row = this.activeRows.get(role);
-    }
-    if (row && typeof transcript === 'string') row.textContent = transcript;
+    // A provider caption is ephemeral. Only Host history can create a saved row.
+    this.activeRows.get(role)?.remove();
     this.activeRows.delete(role);
     if (turnId) this.completed.add(turnId);
+    if (this.completed.size > 256) this.completed.delete(this.completed.values().next().value);
     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?.();
+    if (!viewport) return null;
+    for (const [id, row] of this.historyRows) {
+      const rect = row.getBoundingClientRect?.();
+      if (rect && rect.bottom > viewport.top && rect.top < viewport.bottom)
+        return { id, offset: rect.top - viewport.top };
+    }
+    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();
-    this.reset();
-    this.container.replaceChildren(...messages.map(message => {
-      const row = this.container.ownerDocument.createElement('p');
+    const hidden = this.container.hidden;
+    const pinned = !hidden && this.nearBottom();
+    const readingPosition = this.container.scrollTop;
+    const anchor = hidden || pinned ? null : this.visibleHistoryAnchor();
+    const previous = this.historyRows;
+    this.historyRows = new Map();
+    const rows = messages.map(message => {
+      const row = previous.get(message.id) ?? this.container.ownerDocument.createElement('p');
       row.className = message.role; row.dataset.messageId = message.id;
-      row.textContent = message.text; row.title = message.name;
+      if (row.textContent !== message.text) row.textContent = message.text;
+      const identity = historicalCompanionIdentity(message.companionIdentity, message.name);
+      row.dataset.author = identity.authorLabel;
+      if (identity.companionKnown) {
+        row.dataset.companion = identity.partnerLabel;
+        row.dataset.companionLive = identity.liveLabel;
+        row.dataset.companionDeep = identity.deepLabel;
+        row.dataset.companionAvatar = identity.avatarCatId;
+        row.dataset.companionSkin = identity.skin;
+        row.title = [identity.authorLabel, identity.partnerLabel, identity.liveLabel, identity.deepLabel].join('\n');
+        row.setAttribute('aria-label', [identity.authorLabel, message.text,
+          identity.partnerLabel, identity.liveLabel, identity.deepLabel].join('。'));
+      } else {
+        for (const key of ['companion', 'companionLive', 'companionDeep', 'companionAvatar', 'companionSkin'])
+          delete row.dataset[key];
+        row.title = identity.authorLabel;
+        row.removeAttribute?.('aria-label');
+      }
+      this.historyRows.set(message.id, row);
       return row;
-    }));
-    if (pinned) this.container.scrollTop = this.container.scrollHeight;
+    });
+    this.container.replaceChildren(...rows, ...this.activeRows.values());
+    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;
   }
 }