@clowder-ai/companion 0.1.0-alpha.2 → 0.1.0-alpha.21

package/renderer/surface.mjs

@@ -4,102 +4,339 @@ 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';
 const $ = id => document.getElementById(id);
-const status = text => { $('status').textContent = text; };
-const transcript = new TranscriptView($('transcript'));
-let expanded = false;
-let sharing = false;
-let pendingScreen = false;
-
+const label = (id, text) => { $(id).querySelector('.label').textContent = text; };
+const status = text => {
+  $('status').textContent = text;
+  $('menu-status').textContent = text;
+  $('chat-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')]);
+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, loading = false, transcriptLoading = false, latestHistory, previousPhase = 'idle';
+let didMove = false, threadTitle, settingsView, settingsValues, decisionPanel, workView;
+let previousControlPanel = 'none';
+// F229 stays quiet: a history ID change has no provenance for proactive text.
+const ambientPanel = active => active ? 'actions' : '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) {
-  status('请从 Clowder 的插件页面打开猫猫球');
-  for (const id of ['begin', 'documents', 'history']) $(id).disabled = true;
+  $('actions').hidden = false; $('status').hidden = false;
+  status('请从 Clowder 的聊聊入口打开猫猫球');
+  document.querySelectorAll('button').forEach(button => { button.disabled = true; });
 } else {
+  nativeTravel.start();
   const client = createCompanionClient(window.clowderCompanion);
+  const controls = bindPetControls(client, {
+    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 => {
+      if (panel === 'chat') foldedChatUnread.open();
+      else if (previousControlPanel === 'chat' && conversation?.active) foldedChatUnread.fold();
+      previousControlPanel = panel;
+      if (panel === 'chat') void 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(); 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');
+      }
+    },
+  });
   const screen = new ScreenShare({
     screenRequest: () => client.screenPick(),
-    screenStart: (selectionId, label) => client.screenOpen(selectionId, label),
+    screenStart: (selectionId, name) => client.screenOpen(selectionId, name),
     screenFrame: (selectionId, frame) => client.screenFrame(selectionId, {
       ...frame, frameId: crypto.randomUUID(), sourceLabel: '所选画面', observedAt: Date.now(),
-    }),
-    screenStop: () => client.screenClose(),
+    }), screenStop: () => client.screenClose(),
   }, value => {
-    sharing = value.sharing;
-    pendingScreen = value.pending === true;
-    $('share').textContent = sharing ? '停止共享' : pendingScreen ? '取消选屏' : '共享屏幕';
-    $('share').setAttribute('aria-pressed', String(sharing));
-    $('screen-status').hidden = !sharing && !pendingScreen && value.message === '未共享屏幕';
-    $('screen-status').textContent = sharing ? `正在共享：${value.label}` : value.message;
-    $('screen-status').dataset.state = sharing ? 'sharing' : pendingScreen ? 'pending' : 'stopped';
+    const wasActive = sharing || pendingScreen;
+    sharing = value.sharing; pendingScreen = value.pending === true;
+    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),
+    transcript: event => {
+      if (event.type === 'turn-done') {
+        transcript.finish(event); callTranscript.finish(event); bubble.finish(event.role); callBubble.finish(event.role);
+        void readHistory(); void readCallTranscript();
+      } else if (event.type === 'typed') {
+        callTranscript.appendTyped(event);
+        void readHistory(); void readCallTranscript();
+      } else {
+        transcript.append(event.role, event.text, true);
+        callTranscript.appendLive(event);
+        const speaker = event.role === 'assistant' ? conversation.identity?.displayName ?? '猫猫' : '语音';
+        bubble.append(event.role, event.text, speaker); callBubble.append(event.role, event.text, 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 readHistory();
+        foldedChatUnread.reset();
+        if (controls.panel === 'transcript') void controls.show('menu');
+      }
+      previousPhase = value.phase;
       const active = value.phase !== 'idle';
-      document.body.className = value.phase === 'talking' ? 'connected' : active ? 'connecting' : '';
-      $('idle').hidden = active; $('controls').hidden = !active;
-      $('share').hidden = value.phase !== 'talking';
-      $('compose').querySelector('button').disabled = value.phase !== 'talking';
-      $('begin').disabled = !value.identity;
-      status(value.message);
+      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;
+      callTranscript.setCall(value.callId);
+      void controls.setAmbient(ambientPanel(active));
+      $('begin').hidden = active; $('begin').disabled = !value.identity;
+      $('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;
+      $('share').disabled = value.phase !== 'talking';
+      $('menu-call-share').disabled = value.phase !== 'talking';
+      $('compose').querySelector('button').disabled = !value.identity || value.phase === 'connecting';
+      status(value.message ?? '');
+      $('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 ? '麦克风已开启' : '';
+      for (const id of ['actions', 'chat-call-context', 'transcript-call-context', 'menu-call-context', 'settings-call-context']) $(id).dataset.connectionState = value.recovering ? 'recovering' : active ? 'connected' : 'idle';
+      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));
+      $('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);
+      const nativeSnapshot = normalizeNativeWork(identity?.nativeWork);
+      const workLabel = nativeWorkLabel(nativeSnapshot, identity?.nativeActivity);
+      const 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) {
-        $('identity').textContent = identity.displayName;
-        $('chat-name').textContent = identity.displayName;
-        $('pet').setAttribute('aria-label', `${identity.displayName}，拖动可以移动`);
-        $('pet').dataset.skin = identity.skin;
-        $('dock').setAttribute('aria-label', `和${identity.displayName}交流`);
-        $('message').setAttribute('aria-label', `给${identity.displayName}写一句`);
-        document.documentElement.style.setProperty('--speaker-label', JSON.stringify(identity.carrier.displayName));
-        $('documents').textContent = `资料查询 · ${identity.documentsAllowed ? '开启' : '暂停'}`;
+        $('menu-play').hidden = identity.skin !== 'xianxian-codex';
+        const companionLabel = companionIdentity
+          ? `${companionIdentity.title} · ${companionIdentity.partnerLabel}` : identity.displayName;
+        $('chat-name').textContent = threadTitle ?? companionLabel; $('menu-name').textContent = companionLabel;
+        $('call-message').placeholder = `发消息给${identity.displayName}…`;
+        $('pet').setAttribute('aria-label', `${companionLabel}：点击或右键打开名片，拖动移动`);
+        $('documents').querySelector('.menu-status').textContent = identity.documentsAllowed ? '开启' : '暂停';
         $('documents').setAttribute('aria-pressed', String(identity.documentsAllowed));
-        $('connection-scope').textContent = identity.duty.catId === identity.carrier.catId
-          ? (active && identity.documentsAllowed ? `资料工具 · ${identity.toolsReady ? '已连接' : '连接中'}` : '交流保存在同一段聊天中')
-          : `${identity.duty.displayName} · 实时语音由${identity.carrier.displayName}承载`;
-      }
-      for (const [id, muted, target, off, on] of [
-        ['mic', value.muted, '麦克风', '取消静音', '静音'],
-        ['speaker', value.silent, '播音', '开声音', '关声音'],
-      ]) {
-        $(id).setAttribute('aria-pressed', String(muted));
-        $(id).setAttribute('aria-label', `${muted ? '开启' : '关闭'}${target}`);
-        $(id).querySelector('span').textContent = muted ? off : on;
+        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('menu');
+    },
+  });
+  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);
     },
   });
-  function details(value) {
-    expanded = value;
-    $('details').hidden = !value;
-    $('write').setAttribute('aria-expanded', String(value));
-    void client.resize(value).catch(error => status(explainError(error)));
+  workView = new WorkOverviewView({
+    document,
+    client,
+    changed: () => { if (controls.panel === 'menu') controls.remeasure?.(); },
+  });
+  decisionPanel = new DecisionPanel({
+    document,
+    client,
+    controls,
+    motion,
+    proactivePolicy: () => settingsValues?.proactivePolicy,
+  });
+  async function readHistory() {
+    if (loading) return;
+    loading = true;
+    try {
+      const history = await client.readConversation();
+      $('history').textContent = history.hasMore ? '在 Cat Café 中查看更早聊天 ↗' : '在 Cat Café 中查看完整聊天 ↗';
+      threadTitle = history.threadTitle;
+      $('chat-name').textContent = threadTitle;
+      bubble.load(history.messages);
+      void controls.setAmbient(ambientPanel(conversation.phase !== 'idle'));
+      const serialized = JSON.stringify(history.messages);
+      if (serialized !== latestHistory) { latestHistory = serialized; transcript.load(history.messages); }
+    } catch { $('chat-status').textContent = '聊天记录暂未更新 · 正在说的话仍会显示'; }
+    finally { loading = false; }
   }
-  $('begin').onclick = () => { transcript.reset(); void conversation.begin(); };
-  $('end').onclick = () => void conversation.end();
-  $('mic').onclick = () => conversation.muteMic();
-  $('speaker').onclick = () => conversation.muteSpeaker();
-  $('write').onclick = () => details(!expanded);
-  $('collapse').onclick = () => details(false);
-  $('share').onclick = () => void (sharing || pendingScreen ? screen.stop('屏幕共享已停止') : screen.start()).catch(() => status('屏幕共享已停止'));
+  async function readCallTranscript() {
+    if (transcriptLoading || !conversation.active || !conversation.callId) return;
+    transcriptLoading = true;
+    const callId = conversation.callId;
+    try {
+      const reply = await client.readTranscript();
+      if (!conversation.active || conversation.callId !== callId) return;
+      callTranscript.load(reply);
+      foldedChatUnread.receiveMany(reply.rows);
+      callBubble.loadTranscript(reply.rows, conversation.identity?.displayName);
+      $('call-transcript-status').textContent = reply.hasMore ? '这里只显示这次通话最近的内容' : '';
+    } catch {
+      if (conversation.active && conversation.callId === callId) $('call-transcript-status').textContent = '字幕暂未更新 · 实时内容仍会继续显示';
+    } finally { transcriptLoading = false; }
+  }
+  $('share-badge').onclick = toggleScreen;
   $('history').onclick = () => void client.openConversation().then(result => {
-    if (result.delivery === 'unconfirmed') status('打开聊天尚未确认 · 请从 Clowder 查看猫猫球聊天');
+    if (result.delivery === 'unconfirmed') status('打开聊天尚未确认 · 请从 Clowder 查看');
   }).catch(error => status(explainError(error)));
-  $('documents').onclick = () => void conversation.documents(conversation.identity?.documentsAllowed === false);
-  $('compose').onsubmit = async event => {
-    event.preventDefault();
-    const text = $('message').value;
+  async function submitMessage(event, inputId) {
+    event.preventDefault(); const input = $(inputId); const text = input.value;
     if (await conversation.send(text)) {
-      if ($('message').value === text) $('message').value = '';
+      motion.signal('received');
+      if (input.value === text) input.value = '';
+      latestHistory = undefined; void readHistory();
     }
-  };
+  }
+  $('compose').onsubmit = event => submitMessage(event, 'message');
+  $('call-compose').onsubmit = event => submitMessage(event, 'call-message');
+  $('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(), 3000);
-  void conversation.refresh();
+  const statusMonitor = setInterval(() => void conversation.refresh(), 1000);
+  const historyMonitor = setInterval(() => void readHistory(), 3000);
+  const transcriptMonitor = setInterval(() => void readCallTranscript(), 1000);
+  const decisionMonitor = setInterval(() => { if (controls.panel !== 'decisions') void decisionPanel.read(); }, 15000);
+  const workMonitor = setInterval(() => { if (controls.panel === 'menu') void workView.load(); }, 15000);
+  void conversation.refresh(); void readHistory(); void decisionPanel.read(); void settingsView.controller.load(); void controls.show('none');
   window.addEventListener('beforeunload', () => {
-    clearInterval(monitor); unsubscribe();
-    void conversation.end();
+    clearInterval(statusMonitor); clearInterval(historyMonitor); clearInterval(transcriptMonitor); clearInterval(decisionMonitor); clearInterval(workMonitor);
+    unsubscribe(); nativeTravel.close(); motion.close(); void conversation.end();
   });
 }

package/renderer/transcript-view.mjs

@@ -1,7 +1,10 @@
+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();
   }
   append(role, text, chunk = false) {
@@ -11,30 +14,80 @@ 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;
   }
   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;
   }
+  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;
+  }
   reset() {
+    for (const row of this.activeRows.values()) row.remove();
     this.activeRows.clear();
     this.completed.clear();
   }
+  load(messages) {
+    const pinned = this.nearBottom();
+    const readingPosition = this.container.scrollTop;
+    const anchor = 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;
+      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;
+    });
+    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;
+  }
 }

package/renderer/work-overview.mjs

@@ -0,0 +1,95 @@
+const activityLabel = activity => activity === 'waiting' ? '等待中' : '正在工作';
+
+function deliveryMeta(artifact) {
+  if (!artifact) return '已交付';
+  const version = artifact.version ? `作品 ${artifact.version}` : '作品 · 版本未确认';
+  if (artifact.versionState === 'current') return `${version} · 当前版本`;
+  if (artifact.versionState === 'superseded') return `${version} · 已有更新版本`;
+  return `${version} · 版本关系未确认`;
+}
+
+export function workOverviewPresentation(reply) {
+  const availableRows = reply?.status !== 'unavailable';
+  const active = availableRows ? (reply.active ?? []).map(entry => ({
+    entryRef: entry.entryRef,
+    title: entry.title,
+    meta: entry.actor ? `${entry.actor.displayName} · ${activityLabel(entry.activity)}` : activityLabel(entry.activity),
+  })) : [];
+  const deliveries = availableRows ? (reply.recentDeliveries ?? []).map(entry => ({
+    entryRef: entry.entryRef,
+    title: entry.title,
+    meta: deliveryMeta(entry.artifact),
+  })) : [];
+  return {
+    visible: active.length > 0 || deliveries.length > 0 || ['partial', 'unavailable'].includes(reply?.status),
+    scopeLabel: availableRows && reply?.scope?.label ? `仅当前项目 · ${reply.scope.label}` : '',
+    notice: reply?.status === 'partial' ? '仅部分读取' : reply?.status === 'unavailable' ? '暂不可用' : '',
+    active,
+    deliveries,
+  };
+}
+
+const navigationText = delivery => delivery === 'applied' ? '已打开原处'
+  : delivery === 'queued' || delivery === 'requested' ? '已请求打开原处'
+    : delivery === 'blocked' ? '原处暂时无法打开' : '打开原处的结果未确认';
+
+/** Renders only bounded Host-issued rows; every navigation target remains opaque. */
+export class WorkOverviewView {
+  constructor({ document, client, changed = () => {} }) {
+    this.document = document;
+    this.client = client;
+    this.changed = changed;
+    this.$ = id => document.getElementById(id);
+    this.loading = false;
+  }
+
+  renderRows(listId, rows) {
+    const list = this.$(listId);
+    list.replaceChildren();
+    for (const row of rows) {
+      const button = this.document.createElement('button');
+      button.type = 'button';
+      button.className = 'work-overview-row';
+      const title = this.document.createElement('strong');
+      const meta = this.document.createElement('span');
+      title.textContent = row.title;
+      meta.textContent = row.meta;
+      button.append(title, meta);
+      button.onclick = () => void this.open(row.entryRef);
+      list.append(button);
+    }
+  }
+
+  render(reply) {
+    const view = workOverviewPresentation(reply);
+    this.$('work-overview').hidden = !view.visible;
+    this.$('work-scope').textContent = view.scopeLabel;
+    this.$('work-notice').textContent = view.notice;
+    this.$('work-active-section').hidden = view.active.length === 0;
+    this.$('work-delivery-section').hidden = view.deliveries.length === 0;
+    this.renderRows('work-active-list', view.active);
+    this.renderRows('work-delivery-list', view.deliveries);
+    this.changed();
+  }
+
+  async open(entryRef) {
+    try {
+      const reply = await this.client.openWork(entryRef);
+      this.$('work-notice').textContent = navigationText(reply.delivery);
+    } catch {
+      this.$('work-notice').textContent = '原处暂时无法打开';
+    }
+  }
+
+  async load() {
+    if (this.loading) return;
+    this.loading = true;
+    try {
+      this.render(await this.client.readWork());
+    } catch {
+      this.render({ status: 'unavailable', active: [], recentDeliveries: [] });
+    } finally {
+      this.loading = false;
+    }
+  }
+}