@clowder-ai/companion 0.1.0-alpha.13 → 0.1.0-alpha.14

package/renderer/surface.mjs

@@ -4,35 +4,46 @@ 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 { decisionBadge, decisionRows } from './decision-view.mjs';
-import { normalizeNativeWork } from './native-work-motion.mjs';
+import { nativeWorkLabel, normalizeNativeWork } from './native-work-motion.mjs';
 import { NativeWindowTravel } from './native-window-travel.mjs';
 import { currentCompanionIdentity } from './companion-identity.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'));
+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 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, latestHistory, previousPhase = 'idle';
-let observedHistory = false, lastAssistantId;
-let resultPreviewUntil = 0;
-let didMove = false;
-let decisionLoading = false, decisionOffset = 0;
-let threadTitle;
-const showAmbient = active => (active || Date.now() < resultPreviewUntil) && bubble.hasContent();
-
+let sharing = false, pendingScreen = false, loading = false, transcriptLoading = false, latestHistory, previousPhase = 'idle';
+let didMove = false, decisionLoading = false, decisionOffset = 0, threadTitle, settingsView, settingsValues, latestDecisionPage;
+// 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) {
   $('actions').hidden = false; $('status').hidden = false;
   status('请从 Clowder 的聊聊入口打开猫猫球');
@@ -41,7 +52,7 @@ if (!window.clowderCompanion) {
   nativeTravel.start();
   const client = createCompanionClient(window.clowderCompanion);
   const controls = bindPetControls(client, {
-    error: error => status(explainError(error)),
+    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);
@@ -51,16 +62,27 @@ if (!window.clowderCompanion) {
       void conversation.refresh();
       setTimeout(() => motion.setDockedEdge(detectDockedEdge(window, $('pet').getBoundingClientRect())), 100);
     },
-    changed: panel => { if (panel === 'chat') void readHistory(); if (panel === 'decisions') void readDecisions(); },
+    changed: panel => {
+      if (panel === 'chat') void readHistory();
+      if (panel === 'transcript') void readCallTranscript();
+      if (panel === 'decisions') void readDecisions();
+      if (panel === 'settings') void settingsView?.open();
+    },
     action(kind) {
-      if (kind === 'begin') { transcript.reset(); bubble.reset(); void conversation.begin(); void controls.show('none'); }
-      if (kind === 'listen') { transcript.reset(); bubble.reset(); void conversation.begin('receive_only'); void controls.show('none'); }
+      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 === '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');
@@ -74,14 +96,21 @@ if (!window.clowderCompanion) {
       ...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 ? '取消选屏' : '共享画面');
+    for (const id of ['share', 'menu-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('先开始语音通话，连上后可选择窗口或屏幕');
       $('status').hidden = false;
       void controls.show('actions');
       return;
@@ -91,46 +120,79 @@ if (!window.clowderCompanion) {
   const conversation = new CompanionConversation({
     client, createPeer: callback => new VoicePeer(callback, client), stopScreen: () => screen.stop(),
     transcript: event => {
-      if (event.type === 'turn-done') { transcript.finish(event); bubble.finish(event.role); void readHistory(); }
-      else if (event.typed) void readHistory();
-      else { transcript.append(event.role, event.text, true); bubble.append(event.role, event.text); void controls.setAmbient(true); }
+      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(); bubble.reset(); void readHistory(); }
+      if (previousPhase !== 'idle' && value.phase === 'idle') {
+        transcript.reset(); callTranscript.reset(); bubble.reset(); callBubble.clear(); void readHistory();
+        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;
-      void controls.setAmbient(showAmbient(active));
+      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('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;
+      $('transcript-mic').hidden = value.phase !== 'talking' || receiveOnly;
+      $('settings-mic').hidden = value.phase !== 'talking' || receiveOnly;
       $('active-actions').hidden = !active;
       $('share').disabled = value.phase !== 'talking';
       $('compose').querySelector('button').disabled = !value.identity || value.phase === 'connecting';
       status(value.message ?? '');
-      $('status').hidden = !value.message || /^(点|正在听|只听模式|只听已结束|语音已结束|已发送)/.test(value.message);
-      $('call-badge').hidden = !active;
-      $('call-badge').dataset.state = receiveOnly ? 'receive-only' : value.muted ? 'muted' : value.phase;
-      $('call-badge-icon').setAttribute('href', receiveOnly ? '#i-listen' : '#i-mic');
-      const callLabel = value.phase === 'connecting' ? (receiveOnly ? '正在连接只听，麦克风未启用，点此取消' : '正在连接，点此取消')
-        : receiveOnly ? '只听进行中，麦克风未启用，点此结束'
-          : 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 ? '麦克风已开启' : '';
+      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-icon').setAttribute('href', value.muted ? '#i-mic-off' : '#i-mic');
+      $('chat-mic').textContent = value.muted ? '取消静音' : '静音';
+      $('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', value.silent ? '开启播音' : '关闭播音');
       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.syncNativeSnapshot(normalizeNativeWork(identity?.nativeWork));
+      motion.setBehaviorEnabled(identity?.behaviorEnabled === true);
+      motion.syncNativeSnapshot(nativeSnapshot);
       if (justConnected) motion.signal('connected');
       if (showFailure) motion.signal('failed');
       if (identity) {
@@ -138,7 +200,8 @@ if (!window.clowderCompanion) {
         const companionLabel = companionIdentity
           ? `${companionIdentity.title} · ${companionIdentity.partnerLabel}` : identity.displayName;
         $('chat-name').textContent = threadTitle ?? companionLabel; $('menu-name').textContent = companionLabel;
-        $('pet').setAttribute('aria-label', `${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));
         if (companionIdentity) {
@@ -151,7 +214,24 @@ if (!window.clowderCompanion) {
             : `${identity.duty.displayName} · ${live} · 绑定载体 ${identity.carrier.displayName}`;
         }
       }
-      if (showFailure) void controls.show('actions');
+      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) {
+      settingsValues = values;
+      document.documentElement?.style?.setProperty?.('--pet-scale', String(values.ballSize / 72));
+      $('anchor').dataset.ballSize = String(values.ballSize);
+      motion.setBehaviorEnabled(values.behaviorEnabled);
+      $('documents').hidden = true;
+      if (latestDecisionPage) showDecisionBadge(latestDecisionPage);
     },
   });
   async function readHistory() {
@@ -159,39 +239,49 @@ if (!window.clowderCompanion) {
     loading = true;
     try {
       const history = await client.readConversation();
-      const assistantId = history.messages.findLast(message => message.role === 'assistant')?.id;
-      if (observedHistory && assistantId && assistantId !== lastAssistantId) {
-        resultPreviewUntil = Date.now() + 12_000;
-      }
-      observedHistory = true;
-      lastAssistantId = assistantId;
-      $('history').textContent = history.hasMore ? '更早聊天 ↗' : '完整聊天 ↗';
+      $('history').textContent = history.hasMore ? '在 Cat Café 中查看更早聊天 ↗' : '在 Cat Café 中查看完整聊天 ↗';
       threadTitle = history.threadTitle;
       $('chat-name').textContent = threadTitle;
       bubble.load(history.messages);
-      void controls.setAmbient(showAmbient(conversation.phase !== 'idle'));
+      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; }
   }
+  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);
+      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; }
+  }
   function showDecisionBadge(page) {
+    latestDecisionPage = page;
     const badge = decisionBadge(page);
-    $('pending-badge').hidden = !badge.visible;
+    $('pending-badge').hidden = !badge.visible || settingsValues?.proactivePolicy !== 'quiet-badge';
     $('pending-count').textContent = badge.label;
     $('pending-badge').title = badge.title;
     $('pending-badge').setAttribute('aria-label', badge.title);
     $('menu-pending').textContent = badge.label;
+    $('menu-pending').dataset.state = badge.state;
   }
   async function readDecisions(more = false) {
     if (decisionLoading) return;
     decisionLoading = true;
-    if (!more && controls.panel === 'decisions') $('decision-status').textContent = '正在读取待决事项…';
+    if (!more && controls.panel === 'decisions') $('decision-status').textContent = '正在读取待办…';
     try {
       const page = await client.readDecisions(more ? decisionOffset : 0, 10);
       if (page.status !== 'available') throw new Error('Decision source unavailable');
       showDecisionBadge(page);
-      motion.setPendingDecision(page.approvalCount + page.otherNeedsMeCount > 0);
+      motion.setPendingDecision((page.approvals?.length ?? 0) + (page.otherNeedsMe?.length ?? 0) > 0);
       if (controls.panel !== 'decisions') return;
       const list = $('decision-list');
       if (!more) { list.replaceChildren(); list.scrollTop = 0; }
@@ -218,17 +308,18 @@ if (!window.clowderCompanion) {
         }
       }
       decisionOffset = page.page.offset + page.page.limit;
-      $('decision-status').textContent = page.approvalCount + page.otherNeedsMeCount === 0
+      const badge = decisionBadge(page);
+      $('decision-reload').textContent = '刷新';
+      $('decision-status').textContent = badge.state === 'empty'
         ? '现在没有待你处理的事项'
-        : `${page.approvalCount} 项审批事项，另有 ${page.otherNeedsMeCount} 项待处理`;
+        : '已显示读取到的待办 · 暂无总数';
       $('decision-more').hidden = !page.page.hasMoreApprovals && !page.page.hasMoreNeedsMe;
     } catch {
       showDecisionBadge(undefined);
       motion.setPendingDecision(null);
-      if (controls.panel === 'decisions') $('decision-status').textContent = '待决事项暂不可读 · 请稍后刷新';
+      if (controls.panel === 'decisions') $('decision-status').textContent = '待办暂不可读 · 请稍后刷新';
     } finally { decisionLoading = false; }
   }
-  $('call-badge').onclick = () => void conversation.end();
   $('share-badge').onclick = toggleScreen;
   $('pending-badge').onclick = () => void controls.show('decisions');
   $('decision-reload').onclick = () => void readDecisions();
@@ -236,24 +327,28 @@ if (!window.clowderCompanion) {
   $('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;
+  async function submitMessage(event, inputId) {
+    event.preventDefault(); const input = $(inputId); const text = input.value;
     if (await conversation.send(text)) {
       motion.signal('received');
-      if ($('message').value === text) $('message').value = '';
+      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.hostStopped(event.reason);
     if (event.kind === 'view-dismiss') controls.dismiss();
   });
   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 readDecisions(); }, 15000);
-  void conversation.refresh(); void readHistory(); void readDecisions(); void controls.show('none');
+  void conversation.refresh(); void readHistory(); void readDecisions(); void settingsView.controller.load(); void controls.show('none');
   window.addEventListener('beforeunload', () => {
-    clearInterval(statusMonitor); clearInterval(historyMonitor); clearInterval(decisionMonitor);
+    clearInterval(statusMonitor); clearInterval(historyMonitor); clearInterval(transcriptMonitor); clearInterval(decisionMonitor);
     unsubscribe(); nativeTravel.close(); motion.close(); void conversation.end();
   });
 }