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

package/NOTICE

@@ -1,4 +1,7 @@
 Companion imagery and theme tokens originate in Clowder AI (MIT).
 See source-lock.json for the exact public source revision and content hashes.
+The legacy ragdoll-v1 and yarn-ball stills are AI-assisted derivatives of the
+listed public reference, restoring the complete cat silhouette and transparent
+background. Their reference and resulting hashes are recorded separately.
 The conversation transport and controls continue the F317 companion implementation
 by the Clowder AI contributors. No private runtime data or pet metadata is included.

package/README.md

@@ -0,0 +1,37 @@
+# Companion surface
+
+At rest the desktop shows only your selected cat. Click the cat for voice or text;
+right-click for history, screen sharing, household access, sound and hiding.
+Dragging moves the cat and folds its controls. Escape folds a panel without
+ending the conversation or clearing its draft.
+
+Voice requires an explicit **语音聊** click. An active microphone badge remains
+visible and ends the call in one click. Screen sharing has its own explicit
+picker and termination badge. There is no microphone action on a double-click,
+page load, body tap or drag.
+
+Typing works with voice off. The Host uses the existing owner conversation,
+configured duty cat, ordinary message routing and idempotency. The small history
+view reads a bounded recent subset; **完整聊天** opens the canonical conversation.
+No second transcript database, credentials or selectable Host identity live here.
+
+## Host integration
+
+This surface requires the additive desktop bridge **1.1.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
+remain in the trusted Host; this package receives neither streams nor provider
+SDP. Hiding releases media; the existing Clowder **聊聊** entry restores the cat.
+
+The original animated skin bytes remain unchanged. Public static skin derivatives
+and the shared color tokens retain their exact provenance in `source-lock.json`.
+
+## Verification
+
+Run the repository's contract and SDK builds, then `pnpm --filter
+@clowder-ai/companion test` and `pnpm --filter @clowder-ai/companion lint`.
+`node packages/companion/scripts/preview.mjs` serves the accepted interaction
+spike at `/spike/` and the actual built renderer with an explicitly simulated
+bridge at `/previous`. The latter covers visual states and text controls; it
+does not prove native movement, real capture or model delivery.

package/manifest.json

@@ -1,6 +1,6 @@
 {
   "pluginId": "official.companion",
-  "version": "0.1.0-alpha.2",
+  "version": "0.1.0-alpha.4",
   "contractVersion": "0.1.0",
   "name": "猫猫球",
   "icon": {
@@ -37,14 +37,14 @@
       "type": "desktop-window",
       "id": "companion",
       "role": "companion",
-      "bridgeVersion": "1.0.0",
+      "bridgeVersion": "1.1.0",
       "surface": {
         "entrypoint": "renderer/index.html",
-        "integrity": "sha256-yVHMFz5zEuDTwQO/pgNRScotBqRzGd9o9wIIhadJDNQ="
+        "integrity": "sha256-xYeE8V8E5IA/XsLIkbLATsVze+7Fea6eGkjJIdUTKzM="
       },
       "presentation": {
-        "width": 330,
-        "height": 350,
+        "width": 300,
+        "height": 270,
         "frame": false,
         "transparent": true,
         "alwaysOnTop": true,

package/package.json

@@ -1,12 +1,23 @@
 {
   "name": "@clowder-ai/companion",
-  "version": "0.1.0-alpha.2",
+  "version": "0.1.0-alpha.4",
   "description": "The desktop voice body for your Clowder companion",
   "license": "MIT",
   "type": "module",
-  "files": ["renderer", "plugin.yaml", "manifest.json", "LICENSE", "NOTICE", "source-lock.json"],
-  "exports": { "./manifest": "./manifest.json" },
-  "engines": { "node": ">=22.12.0" },
+  "files": [
+    "renderer",
+    "plugin.yaml",
+    "manifest.json",
+    "LICENSE",
+    "NOTICE",
+    "source-lock.json"
+  ],
+  "exports": {
+    "./manifest": "./manifest.json"
+  },
+  "engines": {
+    "node": ">=22.12.0"
+  },
   "scripts": {
     "build": "node scripts/build.mjs",
     "test": "node --test test/*.test.mjs",
@@ -15,8 +26,8 @@
     "prepack": "pnpm build"
   },
   "devDependencies": {
-    "@clowder-ai/plugin-contract": "0.1.0-beta.16",
-    "@clowder-ai/plugin-sdk": "0.1.0-beta.11"
+    "@clowder-ai/plugin-contract": "0.1.0-beta.17",
+    "@clowder-ai/plugin-sdk": "0.1.0-beta.13"
   },
   "repository": {
     "type": "git",

package/plugin.yaml

@@ -1,6 +1,6 @@
 {
   "pluginId": "official.companion",
-  "version": "0.1.0-alpha.2",
+  "version": "0.1.0-alpha.4",
   "contractVersion": "0.1.0",
   "name": "猫猫球",
   "icon": {
@@ -37,14 +37,14 @@
       "type": "desktop-window",
       "id": "companion",
       "role": "companion",
-      "bridgeVersion": "1.0.0",
+      "bridgeVersion": "1.1.0",
       "surface": {
         "entrypoint": "renderer/index.html",
-        "integrity": "sha256-yVHMFz5zEuDTwQO/pgNRScotBqRzGd9o9wIIhadJDNQ="
+        "integrity": "sha256-xYeE8V8E5IA/XsLIkbLATsVze+7Fea6eGkjJIdUTKzM="
       },
       "presentation": {
-        "width": 330,
-        "height": 350,
+        "width": 300,
+        "height": 270,
         "frame": false,
         "transparent": true,
         "alwaysOnTop": true,

package/renderer/client.mjs

@@ -37,6 +37,10 @@ export function createCompanionClient(bridge) {
         screenClose: () => invoke({ kind: 'screen.close' }, 'ok'),
         openConversation: () => invoke({ kind: 'conversation.open' }, 'navigation'),
         resize: (expanded) => invoke({ kind: 'view.resize', expanded }, 'ok'),
+        layout: (panel, width, height) => invoke({ kind: 'view.layout', panel, width, height }, 'layout'),
+        drag: (phase) => invoke({ kind: 'view.drag', phase }, 'ok'),
+        hide: () => invoke({ kind: 'view.hide' }, 'ok'),
+        readConversation: () => invoke({ kind: 'conversation.read' }, 'conversation'),
         subscribe: (listener) => bridge.subscribe(listener),
     };
 }

package/renderer/conversation.mjs

@@ -9,22 +9,24 @@ export class CompanionConversation {
     this.phase = 'idle';
     this.muted = false;
     this.silent = false;
+    this.failed = false;
   }
   show(message) {
     this.message = message;
-    this.render({ phase: this.phase, identity: this.identity, muted: this.muted, silent: this.silent, message });
+    this.render({ phase: this.phase, identity: this.identity, muted: this.muted, silent: this.silent, failed: this.failed, message });
   }
   current(generation) { return this.active && generation === this.generation; }
   listening() { return this.muted ? '麦克风已静音' : '正在听，直接说话就好'; }
   async begin() {
     if (this.active || this.stopping || this.changingDocuments) return;
     this.active = true;
+    this.failed = false;
     this.phase = 'connecting';
     const generation = ++this.generation;
     // Must reach the isolated preload while the click still has user activation.
     const preparation = this.client.prepare();
     this.show('正在连接…');
-    this.deadline = setTimeout(() => { if (this.current(generation)) void this.end('连接超时 · 点击开始聊天重试'); }, 60_000);
+    this.deadline = setTimeout(() => { if (this.current(generation)) void this.end('连接超时 · 点击语音聊重试', true); }, 60_000);
     try {
       const peer = this.createPeer(event => {
         if (!this.current(generation)) return;
@@ -32,7 +34,7 @@ export class CompanionConversation {
         if (event.type === 'recovering') this.show('连接暂时中断 · 正在等待恢复');
         if (event.type === 'recovered') this.show(this.listening());
         if (event.type === 'transcript' || event.type === 'turn-done') this.transcript(event);
-        if (event.type === 'error') void this.end(explainError(event));
+        if (event.type === 'error') void this.end(explainError(event), true);
       });
       this.peer = peer;
       peer.muteMic(this.muted); peer.muteSpeaker(this.silent);
@@ -44,7 +46,7 @@ export class CompanionConversation {
       this.identity = identity;
       this.show(this.message);
     } catch (error) {
-      if (this.current(generation)) await this.end(explainError(error));
+      if (this.current(generation)) await this.end(explainError(error), true);
     }
   }
   async releaseLocal(message) {
@@ -58,8 +60,9 @@ export class CompanionConversation {
     this.show(message);
     await Promise.allSettled([peer?.close(), this.stopScreen()]);
   }
-  async end(message = '语音已结束 · 麦克风已关闭') {
+  async end(message = '语音已结束 · 麦克风已关闭', failed = false) {
     if (this.stopping) return this.stopping;
+    this.failed = failed;
     const local = this.releaseLocal(message);
     const operation = Promise.all([local, this.client.stop()]);
     this.stopping = operation;
@@ -67,6 +70,17 @@ export class CompanionConversation {
     catch { this.show('麦克风已关闭 · 连接收尾尚未确认'); }
     finally { if (this.stopping === operation) this.stopping = undefined; }
   }
+  async hostStopped(reason) {
+    // Stop echoes must not erase a more useful local failure or manual ending.
+    if (!this.active) return;
+    const messages = {
+      locked: '屏幕已锁定 · 语音已停止，解锁后可点击语音聊继续',
+      suspended: '电脑已休眠 · 语音已停止，可点击语音聊继续',
+      hidden: '猫猫已收起 · 语音已停止',
+    };
+    this.failed = !Object.hasOwn(messages, reason);
+    await this.releaseLocal(messages[reason] ?? '语音连接已中断 · 麦克风已关闭，点击语音聊重试');
+  }
   async refresh() {
     if (this.refreshing) return;
     this.refreshing = true;
@@ -76,11 +90,11 @@ export class CompanionConversation {
       if (generation !== this.generation) return;
       this.identity = identity;
       if (this.active && ['closed', 'failed', 'idle'].includes(identity.phase)) {
-        await this.end('连接已结束 · 点击开始聊天继续');
+        await this.end('语音连接已中断 · 点击语音聊重试', true);
       } else this.show(this.message ?? '点开始聊天，直接对我说话');
     } catch (error) {
       if (generation === this.generation) {
-        if (this.active) await this.end(explainError(error));
+        if (this.active) await this.end(explainError(error), true);
         else this.show(explainError(error));
       }
     } finally { this.refreshing = false; }
@@ -101,7 +115,7 @@ export class CompanionConversation {
   }
   async send(text) {
     text = text.trim();
-    if (!text || !this.active || this.phase !== 'talking' || this.sending) return false;
+    if (!text || !this.identity || this.phase === 'connecting' || this.stopping || this.sending) return false;
     if (!this.pendingText || this.pendingText.text !== text) this.pendingText = { text, id: this.uuid() };
     const input = this.pendingText;
     const generation = this.generation;
@@ -109,12 +123,14 @@ export class CompanionConversation {
     try {
       await this.client.text(input.text, input.id);
       if (this.pendingText === input) this.pendingText = undefined;
-      if (!this.current(generation)) return false;
+      // Voice may have ended; an accepted message still retires this draft.
+      // Keep the newer voice status rather than announcing that we are listening.
+      if (generation !== this.generation) return true;
       this.transcript({ type: 'transcript', role: 'user', text, typed: true });
-      this.show(this.listening());
+      this.show(this.active ? this.listening() : '已发送 · 回答会留在同一段聊天中');
       return true;
     } catch (error) {
-      if (this.current(generation)) this.show(explainError(error));
+      if (generation === this.generation) this.show(explainError(error));
       return false;
     } finally { this.sending = false; }
   }

package/renderer/index.html

@@ -1,31 +1,55 @@
 <!doctype html>
 <html lang="zh-CN">
-<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
-<title>猫猫球</title><link rel="stylesheet" href="./theme.css"><link rel="stylesheet" href="./style.css"></head>
+<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>猫猫球</title><link rel="stylesheet" href="./style.css"></head>
 <body>
-  <section id="details" hidden>
-    <header><strong id="chat-name">猫猫</strong><span>本次交流</span><button type="button" id="collapse" aria-label="收起文字">收起 ⌄</button></header>
-    <div id="transcript" role="log" aria-live="polite"><p class="empty">可以直接说，也可以写一句。</p></div>
-    <form id="compose"><input id="message" aria-label="给猫猫写一句" placeholder="写一句…" maxlength="8000"><button type="submit" aria-label="发送">↑</button></form>
-  </section>
-  <div id="pet" aria-label="猫猫，拖动可以移动" role="img"></div>
-  <section id="dock" aria-label="和猫猫交流">
-  <p id="identity">猫猫球</p>
-  <div class="voice-state"><div id="orb" aria-hidden="true"></div><p id="status" role="status">点开始聊天，直接对我说话</p></div>
-  <div id="idle"><button type="button" id="begin" disabled>开始聊天</button></div>
-  <div id="controls" hidden>
-    <button type="button" id="mic" aria-label="关闭麦克风" title="关闭麦克风"><svg aria-hidden="true" viewBox="0 0 24 24"><rect x="9" y="3" width="6" height="12" rx="3"/><path d="M5 11a7 7 0 0 0 14 0M12 18v4M8 22h8"/></svg><span>静音</span></button>
-    <button type="button" id="speaker" aria-label="关闭播音" title="关闭播音"><svg aria-hidden="true" viewBox="0 0 24 24"><path d="m11 4-6 5H2v6h3l6 5zM15 8a6 6 0 0 1 0 8M18 4a11 11 0 0 1 0 16"/></svg><span>关声音</span></button>
-    <button type="button" id="write" aria-label="展开文字交流" aria-expanded="false" title="写一句 / 看文字"><svg aria-hidden="true" viewBox="0 0 24 24"><path d="M13 5H6a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2v-7M15 4l5 5M9 15l1-5 8-8 4 4-8 8z"/></svg><span>文字</span></button>
-    <button type="button" id="end" aria-label="结束语音" title="结束本次通话"><svg aria-hidden="true" viewBox="0 0 24 24"><path d="m7 7 10 10M7 17 17 7"/></svg><span>结束</span></button>
-  </div>
-  <div id="access">
-    <button type="button" id="history">打开聊天</button>
-    <button type="button" id="share" hidden title="选择窗口或屏幕后共享给当前模型；不共享系统声音">共享屏幕</button>
-    <button type="button" id="documents" title="资料查询设置；不包含屏幕共享">资料查询</button>
-  </div>
-  <p id="screen-status" role="status" hidden></p>
-  <p id="connection-scope"></p>
-  </section>
+  <svg class="icon-definitions" aria-hidden="true">
+    <symbol id="i-mic" viewBox="0 0 24 24"><rect x="9" y="3" width="6" height="12" rx="3"/><path d="M5 11a7 7 0 0 0 14 0M12 18v3M8 21h8"/></symbol>
+    <symbol id="i-keyboard" viewBox="0 0 24 24"><rect x="2.5" y="5" width="19" height="14" rx="3"/><path d="M6 9h.01M10 9h.01M14 9h.01M18 9h.01M6 12h.01M10 12h.01M14 12h.01M18 12h.01M7 15h10"/></symbol>
+    <symbol id="i-history" viewBox="0 0 24 24"><path d="M3 11a9 9 0 1 1 2.6 7.4M3 4v7h7M12 7v5l3 2"/></symbol>
+    <symbol id="i-screen" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="13" rx="2.5"/><path d="M8 21h8M12 17v4"/></symbol>
+    <symbol id="i-book" viewBox="0 0 24 24"><path d="M12 6c-3-2-6-2-9-1v14c3-1 6-1 9 1 3-2 6-2 9-1V5c-3-1-6-1-9 1v14"/></symbol>
+    <symbol id="i-moon" viewBox="0 0 24 24"><path d="M20.5 14A8.5 8.5 0 0 1 10 3.5 8.5 8.5 0 1 0 20.5 14Z"/></symbol>
+    <symbol id="i-end" viewBox="0 0 24 24"><rect x="6" y="6" width="12" height="12" rx="3"/></symbol>
+  </svg>
+  <main id="desktop" aria-label="猫猫球">
+    <div id="anchor">
+      <button id="pet" aria-label="猫猫：点击交流，右键更多，拖动移动" aria-expanded="false" aria-controls="actions menu chat"></button>
+      <div id="indicators">
+        <button id="call-badge" hidden aria-label="结束语音" title="结束语音"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="9" y="3" width="6" height="12" rx="3"/><path d="M5 11a7 7 0 0 0 14 0M12 18v4M8 22h8"/></svg></button>
+        <button id="share-badge" hidden aria-label="停止共享" title="停止共享"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="4" width="18" height="13" rx="2"/><path d="M8 21h8M12 17v4"/></svg></button>
+      </div>
+    </div>
+    <section id="actions" class="floating" aria-label="找猫猫" hidden>
+      <p id="status" role="status" hidden></p>
+      <div class="action-row">
+        <button id="begin" class="primary" data-action="begin"><svg class="icon" aria-hidden="true"><use href="#i-mic"/></svg><span class="label">语音聊</span></button>
+        <button data-action="write"><svg class="icon" aria-hidden="true"><use href="#i-keyboard"/></svg><span>打字</span></button>
+        <button id="mic" data-action="mute" hidden><svg class="icon" aria-hidden="true"><use href="#i-mic"/></svg><span class="label">静音</span></button>
+      </div>
+      <div id="active-actions" class="action-row" hidden>
+        <button data-action="share" id="share"><svg class="icon" aria-hidden="true"><use href="#i-screen"/></svg><span class="label">共享画面</span></button>
+        <button id="end" data-action="stop"><svg class="icon" aria-hidden="true"><use href="#i-end"/></svg><span>结束通话</span></button>
+      </div>
+    </section>
+    <section id="menu" class="floating" aria-label="猫猫的菜单" hidden>
+      <strong id="menu-name" class="menu-title">猫猫</strong>
+      <button data-action="history"><svg class="icon" aria-hidden="true"><use href="#i-history"/></svg><span>聊天记录</span></button>
+      <button data-action="write"><svg class="icon" aria-hidden="true"><use href="#i-keyboard"/></svg><span>打字</span></button>
+      <div class="menu-divider" role="separator"></div>
+      <button id="speaker" data-action="speaker" hidden><svg class="icon" aria-hidden="true"><use href="#i-mic"/></svg><span class="label">关闭播音</span></button>
+      <button id="menu-share" data-action="share" title="语音连接后可共享画面"><svg class="icon" aria-hidden="true"><use href="#i-screen"/></svg><span class="label">共享画面</span></button>
+      <button id="documents" data-action="documents" aria-pressed="true"><svg class="icon" aria-hidden="true"><use href="#i-book"/></svg><span>资料查询</span><span class="menu-status">开启</span></button>
+      <div class="menu-divider" role="separator"></div>
+      <button data-action="hide" class="quiet-action" title="可从 Clowder 的聊聊入口叫回来"><svg class="icon" aria-hidden="true"><use href="#i-moon"/></svg><span>收起猫猫</span></button>
+    </section>
+    <section id="chat" class="floating" aria-label="和猫猫写几句" hidden>
+      <header><strong id="chat-name">和猫猫写几句</strong><button data-action="dismiss" aria-label="收起文字">收起</button></header>
+      <div id="transcript" role="log" aria-live="polite"><p class="empty">想说什么，就写在这里。</p></div>
+      <form id="compose"><textarea id="message" aria-label="给猫猫写一句" placeholder="写一句…" rows="2" maxlength="8000"></textarea><button type="submit" class="primary">发送</button></form>
+      <small id="chat-status" role="status"></small>
+      <small><span id="connection-scope">交流保存在同一段聊天中</span> <button id="history">完整聊天 ↗</button></small>
+    </section>
+    <p id="announcement" class="sr-only" role="status"></p>
+  </main>
   <script type="module" src="./surface.mjs"></script>
 </body></html>

package/renderer/pet-controls.mjs

@@ -0,0 +1,67 @@
+/** Transient controls. The Host owns native placement, movement and hiding. */
+export function bindPetControls(client, { action, error, changed }) {
+  const $ = id => document.getElementById(id);
+  const body = $('pet');
+  let panel = 'none', layoutRevision = 0, drag, suppressClick = false;
+  async function show(next) {
+    if (panel !== next && $(next)) $(next).style.maxHeight = '500px';
+    panel = next;
+    for (const id of ['actions', 'menu', 'chat']) $(id).hidden = id !== next;
+    body.setAttribute('aria-expanded', String(next !== 'none'));
+    const node = $(next);
+    const revision = ++layoutRevision;
+    try {
+      const placed = await client.layout(next, Math.max(120, Math.ceil(node?.offsetWidth ?? 120)), Math.max(32, Math.ceil(node?.offsetHeight ?? 130)));
+      if (revision !== layoutRevision) return;
+      $('anchor').style.left = `${placed.pet.x}px`; $('anchor').style.top = `${placed.pet.y}px`;
+      if (node) { node.style.left = `${placed.panel.x}px`; node.style.top = `${placed.panel.y}px`; node.style.maxHeight = `${placed.panel.height}px`; }
+      if (next === 'chat') $('message').focus({ preventScroll: true });
+      if (next === 'menu') $('menu').querySelector('button').focus({ preventScroll: true });
+      changed(next);
+    } catch (cause) { error(cause); }
+  }
+  body.onclick = event => {
+    if (suppressClick) { suppressClick = false; return; }
+    if (event.detail > 1) return;
+    void show(panel === 'actions' ? 'none' : 'actions');
+  };
+  body.oncontextmenu = event => { event.preventDefault(); void show('menu'); };
+  body.onkeydown = event => {
+    if (event.key === 'ContextMenu' || (event.shiftKey && event.key === 'F10')) { event.preventDefault(); void show('menu'); }
+  };
+  body.onpointerdown = event => {
+    if (event.button !== 0) return;
+    drag = { id: event.pointerId, x: event.screenX, y: event.screenY };
+    body.setPointerCapture(event.pointerId);
+    void client.drag('start').catch(error);
+  };
+  body.onpointermove = event => {
+    if (drag && Math.hypot(event.screenX - drag.x, event.screenY - drag.y) >= 6) suppressClick = true;
+  };
+  for (const name of ['pointerup', 'pointercancel']) body.addEventListener(name, () => {
+    drag = undefined; void client.drag('end').catch(error);
+  });
+  document.addEventListener('pointerdown', event => {
+    if (!event.target.closest('#anchor, .floating')) void show('none');
+  });
+  document.addEventListener('keydown', event => {
+    if (event.key === 'Escape' && panel !== 'none') { event.preventDefault(); void show('none'); body.focus(); }
+  });
+  document.querySelectorAll('[data-action]').forEach(button => button.onclick = () => {
+    const kind = button.dataset.action;
+    if (kind === 'write' || kind === 'history') { void show('chat'); return; }
+    if (kind === 'dismiss') { void show('none'); return; }
+    action(kind);
+  });
+  const sizes = new WeakMap();
+  const observer = new ResizeObserver(entries => {
+    for (const entry of entries) {
+      const size = `${entry.contentRect.width}:${entry.contentRect.height}`;
+      const previous = sizes.get(entry.target); sizes.set(entry.target, size);
+      if (previous && previous !== size && entry.target.id === panel && !entry.target.hidden) void show(panel);
+    }
+  });
+  for (const id of ['actions', 'menu', 'chat']) observer.observe($(id));
+  window.addEventListener('beforeunload', () => observer.disconnect());
+  return { get panel() { return panel; }, show, dismiss() { if (drag) suppressClick = true; void show('none'); } };
+}

package/renderer/style.css

@@ -1,309 +1,63 @@
-* {
-  box-sizing: border-box;
-}
-html,
-body {
-  margin: 0;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  background: transparent;
-}
-body {
-  font:
-    13px -apple-system,
-    BlinkMacSystemFont,
-    "PingFang SC",
-    sans-serif;
-  color: var(--cafe-text);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: flex-end;
-  padding: 10px;
-}
-[hidden] {
-  display: none !important;
-}
-button,
-input {
-  font: inherit;
-}
-button {
-  cursor: pointer;
-  border: 0;
-  color: inherit;
-}
-button:focus-visible,
-input:focus-visible {
-  outline: 2px solid var(--cafe-accent);
-  outline-offset: 3px;
-}
-button:disabled {
-  opacity: 0.5;
-  cursor: default;
-}
-#pet {
-  width: 96px;
-  height: 104px;
-  flex-shrink: 0;
-  background: url("./skins/yanyan-codex.webp") 0 0 / 768px 936px;
-  animation: idle 4.8s steps(6) infinite;
-  -webkit-app-region: drag;
-  filter: drop-shadow(0 4px 5px #0003);
-}
-@keyframes idle {
-  to {
-    background-position-x: -576px;
-  }
-}
-#dock {
-  width: 100%;
-  flex-shrink: 0;
-  padding: 11px 12px 10px;
-  background: var(--cafe-surface-elevated);
-  border: 1px solid var(--cafe-border-subtle);
-  border-radius: 20px;
-  box-shadow: 0 4px 16px #0002;
-}
-.voice-state {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 7px;
-  min-height: 25px;
-}
-#orb {
-  width: 8px;
-  height: 8px;
-  flex-shrink: 0;
-  border-radius: 50%;
-  background: var(--cafe-text-muted);
-}
-body.connecting #orb {
-  background: var(--semantic-warning);
-  animation: pulse 1.5s ease-in-out infinite;
-}
-body.connected #orb {
-  background: var(--semantic-success);
-  animation: pulse 3.5s ease-in-out infinite;
-}
-@keyframes pulse {
-  50% {
-    opacity: 0.5;
-  }
-}
-#status {
-  margin: 0;
-  line-height: 1.45;
-  text-align: center;
-  font-size: 12px;
-  overflow-wrap: anywhere;
-}
-#idle {
-  padding: 7px 0 4px;
-}
-#begin {
-  width: 100%;
-  border-radius: 12px;
-  padding: 10px 20px;
-  font-weight: 600;
-  background: var(--accent-100);
-}
-#begin:hover {
-  background: var(--accent-200);
-}
-#controls {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 4px;
-  padding: 6px 0 9px;
-}
-#controls button {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 5px;
-  min-height: 51px;
-  border-radius: 11px;
-  background: transparent;
-  font-size: 11px;
-  white-space: nowrap;
-}
-#controls button:hover {
-  background: var(--cafe-surface);
-}
-#controls button[aria-pressed="true"],
-#controls button[aria-expanded="true"] {
-  background: var(--accent-100);
-  color: var(--accent-700);
-}
-#controls #end {
-  color: var(--semantic-critical);
-}
-#controls #end:hover {
-  background: var(--semantic-critical-surface);
-}
-#controls svg {
-  width: 19px;
-  height: 19px;
-  stroke: currentColor;
-  fill: none;
-  stroke-width: 1.8;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-}
-#access {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  padding-top: 7px;
-  border-top: 1px solid var(--cafe-border-subtle);
-}
-#share {
-  flex: 1;
-  min-height: 32px;
-  padding: 6px 10px;
-  border-radius: 9px;
-  font-weight: 600;
-  background: var(--accent-100);
-  color: var(--accent-700);
-}
-#share:hover {
-  background: var(--accent-200);
-}
-#share[aria-pressed="true"] {
-  background: var(--semantic-success-surface);
-  color: var(--semantic-success);
-}
-#documents {
-  background: transparent;
-  color: var(--cafe-text-secondary);
-  font-size: 11px;
-  padding: 7px 3px;
-  border-radius: 6px;
-}
-#documents:hover {
-  background: var(--cafe-surface);
-}
-#screen-status {
-  margin: 8px 0 0;
-  padding: 7px 9px;
-  font-size: 11px;
-  line-height: 1.5;
-  overflow-wrap: anywhere;
-  border-radius: 8px;
-  background: var(--semantic-warning-surface);
-  color: var(--cafe-text-secondary);
-}
-#screen-status[data-state="sharing"] {
-  background: var(--semantic-success-surface);
-}
-#connection-scope {
-  margin: 7px 0 0;
-  text-align: center;
-  font-size: 10px;
-  line-height: 1.4;
-  color: var(--cafe-text-muted);
-}
-#details {
-  align-self: stretch;
-  min-height: 0;
-  flex: 1;
-  margin-bottom: 5px;
-  background: var(--cafe-surface-elevated);
-  border: 1px solid var(--cafe-border-subtle);
-  border-radius: 18px;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  box-shadow: 0 3px 16px #0002;
-}
-#details header {
-  display: flex;
-  align-items: center;
-  gap: 9px;
-  padding: 10px 14px;
-  border-bottom: 1px solid var(--cafe-border-subtle);
-}
-#details header span {
-  color: var(--cafe-text-muted);
-  font-size: 11px;
-  flex: 1;
-}
-#collapse {
-  background: transparent;
-  font-size: 12px;
-  padding: 4px;
-  color: var(--cafe-text-secondary);
-}
-#transcript {
-  min-height: 0;
-  flex: 1;
-  overflow-y: auto;
-  padding: 10px 14px;
-  line-height: 1.65;
-}
-#transcript p {
-  margin: 0 0 12px;
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
-}
-#transcript .user {
-  color: var(--cafe-text-secondary);
-}
-#transcript .user::before,
-#transcript .assistant::before {
-  display: block;
-  margin-bottom: 3px;
-  font-size: 10px;
-  color: var(--cafe-text-muted);
-}
-#transcript .user::before {
-  content: "你";
-}
-#transcript .assistant::before {
-  content: var(--speaker-label, "猫猫");
-}
-#transcript .tool {
-  font-size: 11px;
-  color: var(--cafe-text-secondary);
-}
-.empty {
-  color: var(--cafe-text-muted);
-}
-#compose {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  border-top: 1px solid var(--cafe-border-subtle);
-  padding: 9px;
-}
-#message {
-  width: 100%;
-  min-width: 0;
-  border: 0;
-  padding: 5px 3px;
-  background: transparent;
-  color: inherit;
-}
-#compose button {
-  border-radius: 50%;
-  background: var(--accent-100);
-  min-width: 30px;
-  height: 30px;
-}
-@media (prefers-reduced-motion: reduce) {
-  #pet,
-  body.connecting #orb,
-  body.connected #orb {
-    animation: none;
-  }
-}
-#history { background: transparent; color: var(--cafe-text-secondary); padding: 7px 3px; font-size: 11px; }
-#identity { margin: 0 0 3px; text-align: center; font-weight: 600; }
-#pet[data-skin="xianxian-codex"] { background-image: url("./skins/xianxian-codex.webp"); }
-#pet[data-skin="ragdoll-v1"], #pet[data-skin="yarn-ball"] { background: url("./skins/ragdoll-v1.png") center / contain no-repeat; animation: none; }
-#pet[data-skin="yarn-ball"] { background-image: url("./skins/yarn-ball.png"); }
+@import url("./theme.css");
+* { box-sizing: border-box; }
+[hidden] { display: none !important; }
+body { margin: 0; overflow: hidden; color: var(--cafe-text); background: transparent; font: 14px -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; }
+button, textarea, input { font: inherit; }
+button { cursor: pointer; color: inherit; }
+button:focus-visible, textarea:focus-visible { outline: 2px solid var(--cafe-accent); outline-offset: 3px; }
+button:disabled { opacity: .45; cursor: default; }
+.icon-definitions { position: absolute; width: 0; height: 0; overflow: hidden; }
+.icon { width: 17px; height: 17px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
+#desktop { position: relative; width: 100vw; height: 100vh; }
+#anchor { position: absolute; left: 8px; top: 8px; width: 120px; height: 130px; }
+#pet { width: 120px; height: 130px; display: block; border: 0; padding: 0; background: url("./skins/xianxian-codex.webp") 0 0 / 960px 1170px; animation: breathe 4.8s steps(6) infinite; filter: drop-shadow(0 6px 4px #0002); touch-action: none; cursor: grab; }
+#pet.dragging { cursor: grabbing; }
+@keyframes breathe { to { background-position-x: -720px; } }
+#indicators { position: absolute; bottom: 0; right: 0; display: flex; gap: 4px; }
+#indicators button { width: 32px; height: 32px; border: 1px solid #fff9; border-radius: 50%; display: grid; place-items: center; background: #236b59; color: white; box-shadow: 0 2px 5px #0003; }
+#indicators button:hover { background: #ab4842; }
+#indicators button[data-state="connecting"] { background: #a77b36; animation: pulse 1.8s infinite; }
+#indicators button[data-state="muted"] { background: #5f6670; }
+#indicators svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
+#share-badge { background: #476dac !important; }
+@keyframes pulse { 50% { opacity: .65; } }
+.floating { position: absolute; z-index: 3; border-radius: 13px; border: 1px solid color-mix(in srgb, var(--cafe-border-subtle), transparent 30%); background: color-mix(in srgb, var(--cafe-surface-elevated) 96%, transparent); box-shadow: 0 10px 26px -10px #24272c2e, 0 2px 5px #24272c0a; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
+.floating { max-height: 500px; overflow: auto; }
+.floating button { border: 0; background: transparent; border-radius: 7px; padding: 8px 11px; font-weight: 400; }
+.floating button:hover:not(:disabled) { background: var(--cafe-surface); }
+.floating .primary { background: var(--accent-100); color: var(--accent-900); }
+#actions { padding: 5px; width: max-content;  }
+.action-row { display: flex; align-items: center; gap: 4px; }
+.action-row button { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 35px; font-size: 12px; white-space: nowrap; }
+.action-row button .icon { width: 16px; height: 16px; }
+#active-actions { border-top: 1px solid var(--cafe-border-subtle); margin-top: 5px; padding-top: 5px; }
+#status { max-width: 220px; font-size: 12px; line-height: 1.5; margin: 7px 10px; color: var(--cafe-text-secondary); }
+#menu { width: 204px; padding: 5px; }
+#menu .menu-title { display: block; padding: 7px 11px 6px; color: var(--cafe-text-muted); font-size: 10px; font-weight: 500; letter-spacing: .04em; }
+#menu button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 33px; text-align: left; font-size: 12px; line-height: 1.4; }
+#menu button .icon { color: var(--cafe-text-secondary); width: 16px; height: 16px; }
+#menu button:disabled { opacity: .36; }
+#menu .menu-status { margin-left: auto; color: var(--cafe-text-muted); font-size: 10px; }
+#menu [aria-pressed="true"] .menu-status { color: var(--accent-700); }
+#menu .menu-divider { height: 1px; margin: 4px 8px; background: color-mix(in srgb, var(--cafe-border-subtle), transparent 28%); }
+#menu .quiet-action { color: var(--cafe-text-secondary); }
+#chat { width: 320px;  display: flex; flex-direction: column; }
+#chat header { padding: 7px 9px 7px 15px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--cafe-border-subtle); }
+#chat header button { font-size: 12px; color: var(--cafe-text-secondary); }
+#transcript { height: 145px; overflow: auto; padding: 14px; line-height: 1.7; }
+#transcript p { margin: 0 0 10px; overflow-wrap: anywhere; white-space: pre-wrap; }
+#transcript p:not(.empty) { background: var(--accent-50); padding: 7px 10px; border-radius: 9px; }
+.empty { color: var(--cafe-text-muted); font-size: 13px; }
+#compose { display: flex; align-items: flex-end; padding: 10px; gap: 8px; border-top: 1px solid var(--cafe-border-subtle); }
+#message { resize: none; border: 0; min-width: 0; flex: 1; background: transparent; padding: 5px; color: inherit; line-height: 1.5; }
+#chat small { color: var(--cafe-text-muted); font-size: 10px; padding: 0 14px 10px; }
+.sr-only { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
+@media (prefers-reduced-motion: reduce) { #pet, #indicators button { animation: none; } }
+#pet[data-skin="yanyan-codex"] { background-image: url("./skins/yanyan-codex.webp"); }
+#pet[data-skin="ragdoll-v1"] { background-image: url("./skins/ragdoll-v1.png"); animation: none; background-size: contain; background-repeat: no-repeat; background-position: center; }
+#pet[data-skin="yarn-ball"] { background-image: url("./skins/yarn-ball.png"); animation: none; background-size: contain; background-repeat: no-repeat; background-position: center; }
+#transcript { height: 230px; font-size: 13px; }
+#transcript .assistant { background: transparent; }
+#transcript p[data-author]::before { content: attr(data-author); display: block; color: var(--cafe-text-muted); font-size: 10px; margin-bottom: 2px; }
+#transcript p[data-live="true"] { border-left: 2px solid var(--cafe-accent); }
+#history { padding: 0; font-size: 10px; color: var(--cafe-text-secondary); }

package/renderer/surface.mjs

@@ -4,102 +4,114 @@ import { explainError } from './errors.mjs';
 import { VoicePeer } from './peer.mjs';
 import { ScreenShare } from './screen-share.mjs';
 import { TranscriptView } from './transcript-view.mjs';
+import { bindPetControls } from './pet-controls.mjs';
 
 const $ = id => document.getElementById(id);
-const status = text => { $('status').textContent = text; };
+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 expanded = false;
-let sharing = false;
-let pendingScreen = false;
+let sharing = false, pendingScreen = false, loading = false, latestHistory, previousPhase = 'idle';
 
 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 {
   const client = createCompanionClient(window.clowderCompanion);
+  const controls = bindPetControls(client, {
+    error: error => status(explainError(error)),
+    changed: panel => { if (panel === 'chat') void readHistory(); },
+    action(kind) {
+      if (kind === 'begin') { transcript.reset(); void conversation.begin(); 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)));
+    },
+  });
   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';
+    sharing = value.sharing; pendingScreen = value.pending === true;
+    for (const id of ['share', 'menu-share']) label(id, sharing ? '停止共享' : pendingScreen ? '取消选屏' : '共享画面');
+    $('share-badge').hidden = !sharing && !pendingScreen;
+    $('share-badge').title = sharing ? `正在共享：${value.label}，点此停止` : '正在选屏，点此取消';
   });
+  function toggleScreen() {
+    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); void readHistory(); }
+      else if (event.typed) void readHistory();
+      else transcript.append(event.role, event.text, true);
+    },
     render(value) {
+      const showFailure = value.failed && previousPhase !== 'idle' && value.phase === 'idle';
+      if (previousPhase !== 'idle' && value.phase === 'idle') { transcript.reset(); void readHistory(); }
+      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);
+      $('begin').hidden = active; $('begin').disabled = !value.identity;
+      label('begin', value.failed ? '重试语音' : '语音聊');
+      $('mic').hidden = value.phase !== 'talking'; $('speaker').hidden = !active;
+      $('active-actions').hidden = !active;
+      for (const id of ['share', 'menu-share']) $(id).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 = value.muted ? 'muted' : value.phase;
+      const callLabel = value.phase === 'connecting' ? '正在连接，点此取消' : value.muted ? '麦克风已静音，点此结束' : '语音进行中，点此结束';
+      $('call-badge').title = callLabel; $('call-badge').setAttribute('aria-label', callLabel);
+      label('mic', value.muted ? '取消静音' : '静音'); $('mic').setAttribute('aria-pressed', String(value.muted));
+      label('speaker', value.silent ? '开启播音' : '关闭播音');
       const identity = value.identity;
       if (identity) {
-        $('identity').textContent = identity.displayName;
-        $('chat-name').textContent = identity.displayName;
-        $('pet').setAttribute('aria-label', `${identity.displayName}，拖动可以移动`);
+        $('chat-name').textContent = identity.displayName; $('menu-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 ? '开启' : '暂停'}`;
+        $('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;
+        $('connection-scope').textContent = identity.duty.catId === identity.carrier.catId ? '交流保存在同一段聊天中' : `${identity.duty.displayName} · 实时语音由${identity.carrier.displayName}承载`;
       }
+      if (showFailure) void controls.show('actions');
     },
   });
-  function details(value) {
-    expanded = value;
-    $('details').hidden = !value;
-    $('write').setAttribute('aria-expanded', String(value));
-    void client.resize(value).catch(error => status(explainError(error)));
+  async function readHistory() {
+    if (loading || controls.panel !== 'chat') return;
+    loading = true;
+    try {
+      const history = await client.readConversation();
+      $('history').textContent = history.hasMore ? '更早聊天 ↗' : '完整聊天 ↗';
+      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('屏幕共享已停止'));
+  $('call-badge').onclick = () => void conversation.end();
+  $('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;
+    event.preventDefault(); const text = $('message').value;
     if (await conversation.send(text)) {
       if ($('message').value === text) $('message').value = '';
+      latestHistory = undefined; void readHistory();
     }
   };
   const unsubscribe = client.subscribe(event => {
-    if (event.kind === 'media-stopped') void conversation.releaseLocal('语音已停止 · 点击开始聊天继续');
-  });
-  const monitor = setInterval(() => void conversation.refresh(), 3000);
-  void conversation.refresh();
-  window.addEventListener('beforeunload', () => {
-    clearInterval(monitor); unsubscribe();
-    void conversation.end();
+    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(); });
 }

package/renderer/transcript-view.mjs

@@ -2,6 +2,7 @@ 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 +12,44 @@ 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;
   }
   reset() {
+    for (const row of this.activeRows.values()) row.remove();
     this.activeRows.clear();
     this.completed.clear();
   }
+  load(messages) {
+    const pinned = this.nearBottom();
+    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;
+      row.title = message.name; row.dataset.author = message.name;
+      this.historyRows.set(message.id, row);
+      return row;
+    });
+    this.container.replaceChildren(...rows, ...this.activeRows.values());
+    if (pinned) this.container.scrollTop = this.container.scrollHeight;
+  }
 }

package/source-lock.json

@@ -15,17 +15,38 @@
     {
       "source": "packages/web/public/concierge/skins/xianxian-codex/spritesheet.webp",
       "destination": "assets/skins/xianxian-codex.webp",
-      "sha256": "5f653974735a4104dfdaf1845128494a5cb5164cb2f45fecb2072a167c80e8a5"
+      "sha256": "28e6a4211acac553c982627b402865cf7c079038fc4ad7954522ce37b1db90cb",
+      "derivation": {
+        "method": "reviewed-atlas-refresh",
+        "date": "2026-09-23",
+        "referenceSha256": "5f653974735a4104dfdaf1845128494a5cb5164cb2f45fecb2072a167c80e8a5",
+        "purpose": "Synchronize the family-owned repaired atlas: preserve opaque white fur and use a fixed crop and scale for the six idle frames.",
+        "author": "codex-astra"
+      }
     },
     {
       "source": "packages/web/public/concierge/skins/ragdoll-v1/idle.png",
       "destination": "assets/skins/ragdoll-v1.png",
-      "sha256": "001c7f3660b348e2531694d9dc455378a0c007c765e0936a48e61eedf9c30025"
+      "sha256": "24e5c4dea8d6ee35bf69a5612417088ff15f08c40404cbb18bfb99caad25564e",
+      "derivation": {
+        "method": "native-imagegen",
+        "date": "2026-09-20",
+        "referenceSha256": "001c7f3660b348e2531694d9dc455378a0c007c765e0936a48e61eedf9c30025",
+        "purpose": "Restore the complete original grey-point cat silhouette on transparent alpha; remove the cropped room background.",
+        "author": "codex-astra"
+      }
     },
     {
       "source": "packages/web/public/concierge/sprites/ragdoll/idle.png",
       "destination": "assets/skins/yarn-ball.png",
-      "sha256": "001c7f3660b348e2531694d9dc455378a0c007c765e0936a48e61eedf9c30025"
+      "sha256": "24e5c4dea8d6ee35bf69a5612417088ff15f08c40404cbb18bfb99caad25564e",
+      "derivation": {
+        "method": "native-imagegen",
+        "date": "2026-09-20",
+        "referenceSha256": "001c7f3660b348e2531694d9dc455378a0c007c765e0936a48e61eedf9c30025",
+        "purpose": "Restore the complete original grey-point cat silhouette on transparent alpha; remove the cropped room background.",
+        "author": "codex-astra"
+      }
     }
   ]
 }