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

package/README.md

@@ -26,12 +26,21 @@ borrowing today's selected companion.
 
 ## Host integration
 
-This surface requires the additive desktop bridge **1.3.0**. The Host computes
+This surface requires the additive desktop bridge **1.4.0**. The Host computes
 placement within the display work area, keeps the cat as its stable anchor, and
-owns bounded drag gestures and transparent-area hit testing. Older 1.0-only
-Hosts reject this manifest before installation. Media admission and capture
+owns bounded drag gestures and transparent-area hit testing. Hosts below 1.4
+reject this manifest before installation. Media admission and capture
 remain in the trusted Host; this package receives neither streams nor provider
 SDP. Hiding releases media; the existing Clowder **聊聊** entry restores the cat.
+Bridge 1.4 adds one untrusted first-visible-subtitle observation containing only
+an epoch-millisecond time, the current call fence and a Host-correlatable source
+reference. It does not claim compositor paint, an unoccluded window or reading.
+Message and native-item references use the same bounded, single-line opaque ID
+contract as the transcript surfaces that supply them. A Host
+`invalid_request` rejects and remembers that candidate for the current call so
+another current reference may be observed without retrying the rejected one.
+Other failures retry after 1 and 2 seconds, then leave the call's
+first-visible result unknown; later text never backfills a manufactured success.
 
 Xianxian uses one layered sitting body or one VP9 clip at a time. Expiring Host
 facts with task, result and event identities select tool work, workspace fetch,

package/manifest.json

@@ -1,6 +1,6 @@
 {
   "pluginId": "official.companion",
-  "version": "0.1.0-alpha.21",
+  "version": "0.1.0-alpha.24",
   "contractVersion": "0.1.0",
   "name": "猫猫球",
   "icon": {
@@ -37,10 +37,10 @@
       "type": "desktop-window",
       "id": "companion",
       "role": "companion",
-      "bridgeVersion": "1.3.0",
+      "bridgeVersion": "1.4.0",
       "surface": {
         "entrypoint": "renderer/index.html",
-        "integrity": "sha256-rfOwPKO1TWQFzz7oUnWghd+p9HnVRS6e0SmUX679ezY="
+        "integrity": "sha256-EFERDKvXnOw6Mbk1Kq7ZyX7w4FdswfX5W/B0w/KTLE8="
       },
       "presentation": {
         "width": 300,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clowder-ai/companion",
-  "version": "0.1.0-alpha.21",
+  "version": "0.1.0-alpha.24",
   "description": "The desktop voice body for your Clowder companion",
   "license": "MIT",
   "type": "module",
@@ -21,14 +21,14 @@
   "scripts": {
     "build": "node scripts/build.mjs",
     "test": "node --test test/*.test.mjs",
-    "test:browser": "pnpm build && node --test test/panel-layout.browser.mjs",
+    "test:browser": "pnpm build && node --test test/*.browser.mjs",
     "typecheck": "node scripts/check.mjs",
     "lint": "node scripts/check.mjs",
     "prepack": "pnpm build"
   },
   "devDependencies": {
-    "@clowder-ai/plugin-contract": "0.1.0-beta.25",
-    "@clowder-ai/plugin-sdk": "0.1.0-beta.21",
+    "@clowder-ai/plugin-contract": "0.1.0-beta.27",
+    "@clowder-ai/plugin-sdk": "0.1.0-beta.23",
     "playwright": "1.61.1"
   },
   "repository": {

package/plugin.yaml

@@ -1,6 +1,6 @@
 {
   "pluginId": "official.companion",
-  "version": "0.1.0-alpha.21",
+  "version": "0.1.0-alpha.24",
   "contractVersion": "0.1.0",
   "name": "猫猫球",
   "icon": {
@@ -37,10 +37,10 @@
       "type": "desktop-window",
       "id": "companion",
       "role": "companion",
-      "bridgeVersion": "1.3.0",
+      "bridgeVersion": "1.4.0",
       "surface": {
         "entrypoint": "renderer/index.html",
-        "integrity": "sha256-rfOwPKO1TWQFzz7oUnWghd+p9HnVRS6e0SmUX679ezY="
+        "integrity": "sha256-EFERDKvXnOw6Mbk1Kq7ZyX7w4FdswfX5W/B0w/KTLE8="
       },
       "presentation": {
         "width": 300,

package/renderer/call-transcript-view.mjs

@@ -191,9 +191,11 @@ export class CallTranscriptView {
       this.container.scrollTop = this.container.scrollHeight;
       this.setUnread(0);
     } else if (isNew) this.setUnread(this.unread + 1);
-    return true;
+    return row;
   }
 
+  rowForMessage(messageId) { return this.durableRows.get(messageId); }
+
   appendTyped({ receipt, text }) {
     if (!this.callId || receipt?.delivery !== 'accepted' || receipt.callId !== this.callId) return false;
     const pinned = this.nearBottom();

package/renderer/client.mjs

@@ -36,6 +36,13 @@ export function createCompanionClient(bridge) {
         screenFrame: (selectionId, frame) => invoke({ kind: 'screen.frame', selectionId, frame }, 'ok'),
         screenClose: () => invoke({ kind: 'screen.close' }, 'ok'),
         openConversation: () => invoke({ kind: 'conversation.open' }, 'navigation'),
+        observePresentation: (observation) => invoke({
+            kind: 'presentation.observe',
+            event: observation.event,
+            observedAt: observation.observedAt,
+            callId: observation.callId,
+            reference: observation.reference,
+        }, 'ok'),
         readWork: () => invoke({ kind: 'work.read' }, 'work'),
         openWork: (entryRef) => invoke({ kind: 'work.open', entryRef }, 'navigation'),
         readDecisions: (offset = 0, limit = 20) => invoke({ kind: 'decisions.read', offset, limit }, 'decisions'),

package/renderer/index.html

@@ -49,6 +49,7 @@
     </section>
     <section id="actions" class="floating call-bar" aria-label="当前通话" hidden>
       <div class="call-status-line"><span class="status-dot" aria-hidden="true"></span><strong id="call-state">通话中</strong><span id="call-mic-state">麦克风已开启</span></div>
+      <p id="call-meeting" class="call-meeting" hidden><span class="meeting-status-dot" aria-hidden="true"></span><span id="call-meeting-label" class="meeting-label"></span><span id="call-meeting-source" class="meeting-source" hidden></span></p>
       <p id="call-work" class="call-work" hidden></p>
       <div id="call-share-context" class="call-share-context" hidden><svg class="icon" aria-hidden="true"><use href="#i-screen"/></svg><span><strong id="call-share-target"></strong><small>仅共享此窗口</small></span></div>
       <div class="call-recent" aria-label="最新消息">
@@ -67,6 +68,7 @@
     <section id="menu" class="floating name-card" aria-label="猫猫名片" hidden>
       <div id="menu-call-context" class="call-context" hidden>
         <span class="status-dot" aria-hidden="true"></span><strong id="menu-call-state"></strong><span id="menu-call-mic-state"></span>
+        <small id="menu-call-meeting" class="call-meeting" hidden><span class="meeting-status-dot" aria-hidden="true"></span><span id="menu-call-meeting-label" class="meeting-label"></span><span id="menu-call-meeting-source" class="meeting-source" hidden></span></small>
         <small id="menu-call-work" hidden></small>
         <div id="menu-call-actions" class="call-context-actions menu-call-actions">
           <button id="menu-mic" data-action="mute" aria-label="静音"><svg class="icon" aria-hidden="true"><use id="menu-mic-icon" href="#i-mic"/></svg></button>
@@ -111,8 +113,9 @@
     <section id="chat" class="floating" aria-label="和猫猫写几句" hidden>
       <div id="chat-call-context" class="call-context" hidden>
         <span class="status-dot" aria-hidden="true"></span><strong id="chat-call-state"></strong><span id="chat-call-mic-state"></span>
+        <small id="chat-call-meeting" class="call-meeting" hidden><span class="meeting-status-dot" aria-hidden="true"></span><span id="chat-call-meeting-label" class="meeting-label"></span><span id="chat-call-meeting-source" class="meeting-source" hidden></span></small>
         <small id="chat-call-work" hidden></small>
-        <div class="call-context-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 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><strong id="chat-name">和猫猫写几句</strong><button data-action="dismiss" aria-label="收起文字">收起</button></header>
@@ -124,6 +127,7 @@
     <section id="transcript" class="floating call-transcript" data-expanded="false" aria-label="这次通话的字幕" hidden>
       <div id="transcript-call-context" class="call-context transcript-call-context">
         <span class="status-dot" aria-hidden="true"></span><strong id="transcript-call-state"></strong><span id="transcript-call-mic-state"></span>
+        <small id="transcript-call-meeting" class="call-meeting" hidden><span class="meeting-status-dot" aria-hidden="true"></span><span id="transcript-call-meeting-label" class="meeting-label"></span><span id="transcript-call-meeting-source" class="meeting-source" hidden></span></small>
         <small id="transcript-call-work" hidden></small>
         <div class="call-context-actions">
           <button id="transcript-return" class="transcript-return" type="button" data-action="transcript-return"><span aria-hidden="true">‹</span><span>返回通话</span></button>
@@ -142,8 +146,9 @@
     <section id="settings" class="floating settings-panel" aria-label="猫猫球设置" hidden>
       <div id="settings-call-context" class="call-context" hidden>
         <span class="status-dot" aria-hidden="true"></span><strong id="settings-call-state"></strong><span id="settings-call-mic-state"></span>
+        <small id="settings-call-meeting" class="call-meeting" hidden><span class="meeting-status-dot" aria-hidden="true"></span><span id="settings-call-meeting-label" class="meeting-label"></span><span id="settings-call-meeting-source" class="meeting-source" hidden></span></small>
         <small id="settings-call-work" hidden></small>
-        <div class="call-context-actions"><button id="settings-mic" data-action="mute">静音</button><button id="settings-share" data-action="share"><span class="label">共享画面</span></button><button data-action="stop" class="destructive compact">挂断</button></div>
+        <div class="call-context-actions call-context-inline-actions"><button id="settings-mic" data-action="mute">静音</button><button id="settings-share" data-action="share"><span class="label">共享画面</span></button><button data-action="stop" class="destructive compact">挂断</button></div>
         <div id="settings-share-context" class="call-share-line" hidden><svg class="icon" aria-hidden="true"><use href="#i-screen"/></svg><span><strong id="settings-share-target"></strong><small>仅共享此窗口</small></span></div>
       </div>
       <header class="settings-head"><button id="settings-back" type="button" aria-label="返回名片">‹</button><strong id="settings-title">设置</strong></header>

package/renderer/meeting-state.mjs

@@ -0,0 +1,55 @@
+export function meetingPresentation(meeting) {
+  if (!meeting || meeting.kind === 'idle') return null;
+  if (meeting.kind === 'running') {
+    if (meeting.paused) return { label: '会议记录已暂停', sourceLabel: meeting.sourceLabel, tone: 'quiet' };
+    return meeting.sharing
+      ? { label: '听会中', sourceLabel: meeting.sourceLabel, tone: 'active' }
+      : { label: '会议记录中 · 未接入通话', sourceLabel: meeting.sourceLabel, tone: 'active' };
+  }
+  if (meeting.kind === 'stopped') return { label: '会议记录已停止', sourceLabel: null, tone: 'quiet' };
+  if (meeting.kind === 'unconfirmed') return { label: '会议记录状态未确认', sourceLabel: null, tone: 'warning' };
+  if (meeting.kind === 'needs_source') return { label: '需要确认会议所在的 App', sourceLabel: null, tone: 'warning' };
+  return null;
+}
+
+const meetingPrefixes = ['call', 'menu-call', 'chat-call', 'transcript-call', 'settings-call'];
+export function renderMeetingStatus(document, presentation) {
+  for (const prefix of meetingPrefixes) {
+    const row = document.getElementById(`${prefix}-meeting`);
+    const source = document.getElementById(`${prefix}-meeting-source`);
+    row.hidden = presentation === null;
+    row.dataset.tone = presentation?.tone ?? '';
+    document.getElementById(`${prefix}-meeting-label`).textContent = presentation?.label ?? '';
+    source.textContent = presentation?.sourceLabel ? ` · ${presentation.sourceLabel}` : '';
+    source.hidden = !presentation?.sourceLabel;
+  }
+}
+
+/** Keeps the stopped acknowledgement transient without hiding uncertain or active capture truth. */
+export class MeetingStatus {
+  constructor({ now = () => Date.now() } = {}) {
+    this.now = now;
+    this.previousKind = null;
+    this.stoppedUntil = 0;
+  }
+
+  update(meeting) {
+    const kind = meeting?.kind ?? 'idle';
+    if (kind === 'idle') {
+      this.previousKind = 'idle';
+      this.stoppedUntil = 0;
+      return null;
+    }
+    if (kind === 'stopped') {
+      if (this.previousKind !== 'stopped') {
+        this.stoppedUntil = this.previousKind !== null && this.previousKind !== 'idle'
+          ? this.now() + 10_000 : 0;
+      }
+      this.previousKind = 'stopped';
+      return this.now() < this.stoppedUntil ? meetingPresentation(meeting) : null;
+    }
+    this.previousKind = kind;
+    this.stoppedUntil = 0;
+    return meetingPresentation(meeting);
+  }
+}

package/renderer/recent-bubble.mjs

@@ -1,9 +1,16 @@
 /** A compact projection of Host history plus the current unsaved voice caption. */
+function referenceKey(reference) {
+  if (reference?.kind === 'message') return `message:${reference.messageId}`;
+  if (reference?.kind === 'native-item') return `native-item:${reference.nativeItemId}`;
+  return null;
+}
+
 export class RecentBubble {
   constructor(rows) {
     this.rows = rows;
     this.history = [];
     this.live = new Map();
+    this.rowReferences = new WeakMap();
   }
   load(messages) {
     this.history = messages.slice(-2);
@@ -14,13 +21,16 @@ export class RecentBubble {
       role: row.role,
       text: row.text,
       name: row.source?.kind === 'typed' ? '你' : row.role === 'assistant' ? companionName : '语音',
+      reference: { kind: 'message', messageId: row.messageId },
     })));
   }
-  append(role, text, name = role === 'user' ? '你' : '猫猫') {
+  append(role, text, name = role === 'user' ? '你' : '猫猫', reference) {
     if (!['user', 'assistant'].includes(role) || typeof text !== 'string') return;
     const previous = this.live.get(role);
-    this.live.set(role, { name, text: `${previous?.text ?? ''}${text}`.slice(-240) });
+    this.live.set(role, { name, text: `${previous?.text ?? ''}${text}`.slice(-240),
+      reference: reference ?? previous?.reference });
     this.render();
+    return reference ? this.rowsForReference(reference)[0] : this.rows.find(row => row.dataset?.role === role);
   }
   finish(role) {
     this.live.delete(role);
@@ -38,6 +48,10 @@ export class RecentBubble {
   hasContent() {
     return this.history.length > 0 || this.live.size > 0;
   }
+  rowsForReference(reference) {
+    const key = referenceKey(reference);
+    return key ? this.rows.filter(row => this.rowReferences.get(row) === key) : [];
+  }
   render() {
     const live = [...this.live].map(([role, value]) => ({ role, ...value }));
     const entries = [...this.history.slice(-Math.max(0, 2 - live.length)), ...live].slice(-2);
@@ -69,6 +83,9 @@ export class RecentBubble {
       }
       row.dataset ??= {};
       row.dataset.role = entry?.role ?? '';
+      const key = referenceKey(entry?.reference);
+      if (key) this.rowReferences.set(row, key);
+      else this.rowReferences.delete(row);
     }
   }
 }

package/renderer/style.css

@@ -94,8 +94,44 @@ button:disabled { opacity: .45; cursor: default; }
 .call-status-line { min-height: 24px; display: flex; align-items: center; gap: 7px; white-space: nowrap; }
 .call-status-line strong { font-size: 13px; font-weight: 600; }
 .call-status-line span:not(.status-dot) { color: var(--desktop-muted); font-size: 12px; }
-.status-dot { width: 8px; height: 8px; flex: none; border-radius: 999px; background: var(--desktop-success); }
-[data-connection-state="recovering"] .status-dot { background: var(--desktop-warning); }
+.status-dot {
+  --call-status-color: var(--desktop-success);
+  position: relative;
+  isolation: isolate;
+  z-index: 0;
+  width: 8px;
+  height: 8px;
+  flex: none;
+  border-radius: 999px;
+  background: var(--call-status-color);
+}
+.status-dot::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  border-radius: inherit;
+  background: var(--call-status-color);
+  opacity: 0;
+  pointer-events: none;
+  transform: scale(1);
+}
+[data-connection-state="connected"] .status-dot::after,
+[data-connection-state="recovering"] .status-dot::after { animation: call-status-breathe 2s ease-out infinite; }
+[data-connection-state="recovering"] .status-dot { --call-status-color: var(--desktop-warning); }
+[data-connection-state="connecting"] .status-dot,
+[data-connection-state="idle"] .status-dot { --call-status-color: var(--desktop-muted); }
+@keyframes call-status-breathe {
+  from { opacity: .38; transform: scale(1); }
+  to { opacity: 0; transform: scale(3); }
+}
+.call-meeting { min-width: 0; margin: 3px 0 0 15px; display: flex; align-items: center; gap: 5px; color: var(--desktop-muted); font-size: 12px; line-height: 1.35; }
+.call-context > .call-meeting { grid-column: 1 / -1; margin: 0; }
+.meeting-status-dot { width: 7px; height: 7px; flex: none; border-radius: 999px; background: var(--desktop-success); }
+.call-meeting[data-tone="quiet"] .meeting-status-dot { background: var(--desktop-muted); }
+.call-meeting[data-tone="warning"] .meeting-status-dot { background: var(--desktop-warning); }
+.meeting-label { flex: none; white-space: nowrap; }
+.meeting-source { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .call-work { margin: 3px 0 0 15px; color: var(--desktop-muted); font-size: 12px; }
 .call-share-context { display: flex; align-items: center; gap: 7px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--desktop-line); }
 .call-share-context > span, .call-share-line > span { display: grid; gap: 1px; min-width: 0; }
@@ -132,6 +168,7 @@ button:disabled { opacity: .45; cursor: default; }
 .call-context > small { grid-column: 2 / 4; }
 .call-share-line { grid-column: 1 / -1; display: flex; align-items: center; gap: 7px; padding-top: 6px; border-top: 1px solid var(--desktop-line); min-width: 0; }
 .call-context-actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
+.call-context-inline-actions { grid-column: 4; grid-row: 1; }
 .call-context-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 6px 9px; white-space: nowrap; }
 #menu .call-context { margin: -8px -8px 5px; }
 .menu-footer { flex: none; display: flex; align-items: center; gap: 2px; margin: 4px -8px -8px; border-top: 1px solid var(--desktop-line); padding: 4px; }
@@ -238,7 +275,7 @@ button:disabled { opacity: .45; cursor: default; }
 .settings-empty { padding: 16px; }
 .sr-only { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
 @media (prefers-reduced-motion: reduce) {
-  #pet, #indicators button, #living-sit [data-layer], #pet[data-action="idle"] #living-sit [data-layer] { animation: none; }
+  #pet, #indicators button, [data-connection-state] .status-dot::after, #living-sit [data-layer], #pet[data-action="idle"] #living-sit [data-layer] { animation: none; }
   #living-sit [data-layer="closed"] { opacity: 0; }
 }
 #pet[data-skin="yanyan-codex"] { background-image: url("./skins/yanyan-codex.webp"); }

package/renderer/surface.mjs

@@ -18,6 +18,8 @@ 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';
 const $ = id => document.getElementById(id);
 const label = (id, text) => { $(id).querySelector('.label').textContent = text; };
 const status = text => {
@@ -35,6 +37,7 @@ const callTranscript = new CallTranscriptView($('call-transcript-log'), {
 });
 const bubble = new RecentBubble([$('bubble-first'), $('bubble-second')]);
 const callBubble = new RecentBubble([$('call-bubble-first'), $('call-bubble-second')]);
+const meetingStatus = new MeetingStatus();
 const foldedChatUnread = new FoldedChatUnread(count => {
   $('call-chat-unread').hidden = count === 0;
   $('call-chat-unread').textContent = count ? String(count) : '';
@@ -60,6 +63,11 @@ if (!window.clowderCompanion) {
 } else {
   nativeTravel.start();
   const client = createCompanionClient(window.clowderCompanion);
+  const visibleText = new VisibleTextPresentation({
+    document,
+    report: observation => client.observePresentation(observation),
+    transcript, callTranscript, bubble, callBubble,
+  });
   const controls = bindPetControls(client, {
     error: (error, context) => status(context?.panel === 'settings' && error?.code === 'invalid_request' ? '这个 Host 版本还不支持猫旁设置。原来的设置入口会继续保留。' : explainError(error)),
     moved: (dx, dy) => {
@@ -72,6 +80,7 @@ if (!window.clowderCompanion) {
       setTimeout(() => motion.setDockedEdge(detectDockedEdge(window, $('pet').getBoundingClientRect())), 100);
     },
     changed: panel => {
+      visibleText.retry();
       if (panel === 'chat') foldedChatUnread.open();
       else if (previousControlPanel === 'chat' && conversation?.active) foldedChatUnread.fold();
       previousControlPanel = panel;
@@ -145,10 +154,8 @@ if (!window.clowderCompanion) {
         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);
+        visibleText.appendLive(event, speaker);
         void controls.setAmbient('actions');
       }
     },
@@ -165,7 +172,7 @@ if (!window.clowderCompanion) {
       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);
+      visibleText.setCall(value.callId);
       void controls.setAmbient(ambientPanel(active));
       $('begin').hidden = active; $('begin').disabled = !value.identity;
       $('listen').hidden = active || !canReceiveOnly; $('listen').disabled = !value.identity;
@@ -191,7 +198,8 @@ if (!window.clowderCompanion) {
         : 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';
+      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);
@@ -214,6 +222,7 @@ if (!window.clowderCompanion) {
       $('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);
       const workState = workLabel ? `${identity.displayName}${workLabel}` : '';
@@ -302,9 +311,8 @@ if (!window.clowderCompanion) {
     try {
       const reply = await client.readTranscript();
       if (!conversation.active || conversation.callId !== callId) return;
-      callTranscript.load(reply);
+      if (!visibleText.loadTranscript(callId, reply, conversation.identity?.displayName)) return;
       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 = '字幕暂未更新 · 实时内容仍会继续显示';
@@ -337,6 +345,6 @@ if (!window.clowderCompanion) {
   void conversation.refresh(); void readHistory(); void decisionPanel.read(); void settingsView.controller.load(); void controls.show('none');
   window.addEventListener('beforeunload', () => {
     clearInterval(statusMonitor); clearInterval(historyMonitor); clearInterval(transcriptMonitor); clearInterval(decisionMonitor); clearInterval(workMonitor);
-    unsubscribe(); nativeTravel.close(); motion.close(); void conversation.end();
+    unsubscribe(); visibleText.close(); nativeTravel.close(); motion.close(); void conversation.end();
   });
 }

package/renderer/transcript-view.mjs

@@ -20,6 +20,7 @@ export class TranscriptView {
     }
     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;

package/renderer/visible-text-receipt.mjs

@@ -0,0 +1,241 @@
+const MAX_PENDING = 64;
+const MAX_REPORT_ATTEMPTS = 3;
+const REPORT_RETRY_DELAYS_MS = [1_000, 2_000];
+const CLIPPING_OVERFLOW = new Set(['auto', 'clip', 'hidden', 'scroll']);
+
+function referenceKey(reference) {
+  if (reference?.kind === 'message' && typeof reference.messageId === 'string')
+    return `message:${reference.messageId}`;
+  if (reference?.kind === 'native-item' && typeof reference.nativeItemId === 'string')
+    return `native-item:${reference.nativeItemId}`;
+  return null;
+}
+
+function intersect(bounds, rect) {
+  return {
+    left: Math.max(bounds.left, rect.left),
+    top: Math.max(bounds.top, rect.top),
+    right: Math.min(bounds.right, rect.right),
+    bottom: Math.min(bounds.bottom, rect.bottom),
+  };
+}
+
+function nodeIsVisible(document, node) {
+  if (document.visibilityState !== 'visible' || node?.isConnected !== true) return false;
+  const view = document.defaultView;
+  if (!view) return false;
+  const rects = node.getClientRects?.();
+  if (!rects || rects.length === 0) return false;
+  const viewport = {
+    left: 0,
+    top: 0,
+    right: document.documentElement?.clientWidth ?? view.innerWidth,
+    bottom: document.documentElement?.clientHeight ?? view.innerHeight,
+  };
+  let visible = intersect(viewport, node.getBoundingClientRect());
+  for (let current = node; current; current = current.parentElement) {
+    if (current.hidden || current.getAttribute?.('aria-hidden') === 'true') return false;
+    const style = view.getComputedStyle?.(current);
+    if (style?.display === 'none' || style?.visibility === 'hidden' || style?.visibility === 'collapse'
+      || style?.opacity === '0') return false;
+    const clipsX = CLIPPING_OVERFLOW.has(style?.overflowX ?? style?.overflow);
+    const clipsY = CLIPPING_OVERFLOW.has(style?.overflowY ?? style?.overflow);
+    if ((clipsX || clipsY) && current !== node) {
+      const bounds = current.getBoundingClientRect?.();
+      if (bounds) visible = intersect(visible, {
+        left: clipsX ? bounds.left : visible.left,
+        right: clipsX ? bounds.right : visible.right,
+        top: clipsY ? bounds.top : visible.top,
+        bottom: clipsY ? bounds.bottom : visible.bottom,
+      });
+    }
+  }
+  return visible.right > visible.left && visible.bottom > visible.top;
+}
+
+function currentNodes(candidate) {
+  try {
+    const nodes = typeof candidate.nodes === 'function' ? candidate.nodes() : candidate.nodes;
+    return Array.isArray(nodes) ? nodes.filter(Boolean) : [];
+  } catch {
+    return [];
+  }
+}
+
+function errorCode(value) {
+  return typeof value?.code === 'string' ? value.code : undefined;
+}
+
+/**
+ * Reports the first assistant text that reaches a visible renderer surface.
+ * A post-mutation animation frame plus DOM/document/viewport checks is not a
+ * claim that the compositor painted, the window was unoccluded, or a person read it.
+ */
+export class FirstVisibleTextReceipt {
+  constructor({ document, report, now = Date.now, frame } = {}) {
+    this.document = document;
+    this.report = report;
+    this.now = now;
+    this.frame = frame ?? document?.defaultView?.requestAnimationFrame?.bind(document.defaultView);
+    this.pending = new Map();
+    this.rejected = new Set();
+    this.onVisibilityChange = () => this.retry();
+    this.onGeometryChange = () => this.retry();
+    document?.addEventListener?.('visibilitychange', this.onVisibilityChange);
+    document?.addEventListener?.('scroll', this.onGeometryChange, true);
+    document?.defaultView?.addEventListener?.('resize', this.onGeometryChange);
+  }
+
+  setCall(callId) {
+    callId ??= null;
+    if (callId === this.callId) return;
+    this.callId = callId;
+    this.pending.clear();
+    this.rejected.clear();
+    this.reported = false;
+    this.exhausted = false;
+  }
+
+  observe({ callId, reference, nodes } = {}) {
+    const key = referenceKey(reference);
+    if (!key || !callId || callId !== this.callId || this.reported || this.exhausted
+      || this.rejected.has(key)
+      || (!Array.isArray(nodes) && typeof nodes !== 'function')) return false;
+    const existing = this.pending.get(key);
+    const candidate = existing ?? { callId, reference, nodes, attempts: 0, retryAt: 0 };
+    candidate.nodes = nodes;
+    if (!existing && currentNodes(candidate).length === 0) return false;
+    this.pending.set(key, candidate);
+    while (this.pending.size > MAX_PENDING) this.pending.delete(this.pending.keys().next().value);
+    this.retry();
+    return true;
+  }
+
+  retry() {
+    if (this.scheduled || this.inFlight || this.reported || this.exhausted || !this.callId || this.pending.size === 0
+      || typeof this.frame !== 'function') return;
+    this.scheduled = true;
+    this.frame(() => {
+      this.scheduled = false;
+      void this.flush();
+    });
+  }
+
+  async flush() {
+    if (this.inFlight || this.reported || this.exhausted || !this.callId) return;
+    const entry = [...this.pending].find(([, candidate]) => currentNodes(candidate).some(node =>
+      nodeIsVisible(this.document, node)));
+    if (!entry) return;
+    const [key, candidate] = entry;
+    if (candidate.retryAt > this.now()) return;
+    const callId = this.callId;
+    const attempt = { callId, key };
+    this.inFlight = attempt;
+    candidate.attempts += 1;
+    let continueWithNext = false;
+    try {
+      const reply = await this.report({
+        event: 'first_text_visible', observedAt: this.now(), callId, reference: candidate.reference,
+      });
+      if (reply?.kind === 'ok' && this.callId === callId && this.pending.get(key) === candidate) {
+        this.reported = true;
+        this.pending.clear();
+      } else if (reply?.kind !== 'ok') {
+        continueWithNext = this.rejectCandidate(callId, key, candidate, reply);
+      }
+    } catch (error) {
+      continueWithNext = this.rejectCandidate(callId, key, candidate, error);
+    } finally {
+      if (this.inFlight === attempt) {
+        this.inFlight = undefined;
+        if (this.callId !== callId || continueWithNext) this.retry();
+      }
+    }
+  }
+
+  rejectCandidate(callId, key, candidate, failure) {
+    if (this.callId !== callId || this.pending.get(key) !== candidate) return false;
+    if (errorCode(failure) === 'invalid_request') {
+      this.pending.delete(key);
+      if (this.rejected.size >= MAX_PENDING) {
+        this.exhausted = true;
+        this.pending.clear();
+        return false;
+      }
+      this.rejected.add(key);
+      return true;
+    }
+    if (candidate.attempts >= MAX_REPORT_ATTEMPTS) {
+      // The first visible candidate was plausible but the Host never confirmed it.
+      // Preserve that result as unknown instead of reporting later text as the first.
+      this.exhausted = true;
+      this.pending.clear();
+      return false;
+    }
+    candidate.retryAt = this.now() + REPORT_RETRY_DELAYS_MS[candidate.attempts - 1];
+    return false;
+  }
+
+  close() {
+    this.document?.removeEventListener?.('visibilitychange', this.onVisibilityChange);
+    this.document?.removeEventListener?.('scroll', this.onGeometryChange, true);
+    this.document?.defaultView?.removeEventListener?.('resize', this.onGeometryChange);
+    this.pending.clear();
+    this.rejected.clear();
+  }
+}
+
+/** Owns the official companion's four subtitle projections and their receipt nodes. */
+export class VisibleTextPresentation {
+  constructor({ document, report, transcript, callTranscript, bubble, callBubble }) {
+    this.receipt = new FirstVisibleTextReceipt({ document, report });
+    Object.assign(this, { transcript, callTranscript, bubble, callBubble });
+  }
+
+  setCall(callId) {
+    this.callTranscript.setCall(callId);
+    this.receipt.setCall(callId);
+  }
+
+  appendLive(event, speaker) {
+    const reference = event.itemId
+      ? { kind: 'native-item', nativeItemId: event.itemId }
+      : undefined;
+    const stableNodes = [
+      this.transcript.append(event.role, event.text, true),
+      this.callTranscript.appendLive(event),
+    ];
+    this.bubble.append(event.role, event.text, speaker, reference);
+    this.callBubble.append(event.role, event.text, speaker, reference);
+    if (event.role === 'assistant' && reference && typeof event.text === 'string'
+      && event.text.trim().length > 0) this.receipt.observe({
+      callId: event.callId,
+      reference,
+      nodes: () => [
+        ...stableNodes,
+        ...this.bubble.rowsForReference(reference),
+        ...this.callBubble.rowsForReference(reference),
+      ],
+    });
+  }
+
+  loadTranscript(callId, reply, companionName) {
+    if (!this.callTranscript.load(reply)) return false;
+    this.callBubble.loadTranscript(reply.rows, companionName);
+    for (const row of reply.rows) {
+      if (row.role !== 'assistant' || row.text.trim().length === 0) continue;
+      const reference = { kind: 'message', messageId: row.messageId };
+      const transcriptRow = this.callTranscript.rowForMessage(row.messageId);
+      this.receipt.observe({
+        callId,
+        reference,
+        nodes: () => [transcriptRow, ...this.callBubble.rowsForReference(reference)],
+      });
+    }
+    this.receipt.retry();
+    return true;
+  }
+
+  retry() { this.receipt.retry(); }
+  close() { this.receipt.close(); }
+}