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

package/manifest.json

@@ -1,6 +1,6 @@
 {
   "pluginId": "official.companion",
-  "version": "0.1.0-alpha.4",
+  "version": "0.1.0-alpha.6",
   "contractVersion": "0.1.0",
   "name": "猫猫球",
   "icon": {
@@ -37,10 +37,10 @@
       "type": "desktop-window",
       "id": "companion",
       "role": "companion",
-      "bridgeVersion": "1.1.0",
+      "bridgeVersion": "1.3.0",
       "surface": {
         "entrypoint": "renderer/index.html",
-        "integrity": "sha256-xYeE8V8E5IA/XsLIkbLATsVze+7Fea6eGkjJIdUTKzM="
+        "integrity": "sha256-s7/ld37FUql3GVoL0uRSVMJnL8IcY3S22GQEYGlvGJ0="
       },
       "presentation": {
         "width": 300,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clowder-ai/companion",
-  "version": "0.1.0-alpha.4",
+  "version": "0.1.0-alpha.6",
   "description": "The desktop voice body for your Clowder companion",
   "license": "MIT",
   "type": "module",
@@ -26,8 +26,8 @@
     "prepack": "pnpm build"
   },
   "devDependencies": {
-    "@clowder-ai/plugin-contract": "0.1.0-beta.17",
-    "@clowder-ai/plugin-sdk": "0.1.0-beta.13"
+    "@clowder-ai/plugin-contract": "0.1.0-beta.18",
+    "@clowder-ai/plugin-sdk": "0.1.0-beta.14"
   },
   "repository": {
     "type": "git",

package/plugin.yaml

@@ -1,6 +1,6 @@
 {
   "pluginId": "official.companion",
-  "version": "0.1.0-alpha.4",
+  "version": "0.1.0-alpha.6",
   "contractVersion": "0.1.0",
   "name": "猫猫球",
   "icon": {
@@ -37,10 +37,10 @@
       "type": "desktop-window",
       "id": "companion",
       "role": "companion",
-      "bridgeVersion": "1.1.0",
+      "bridgeVersion": "1.3.0",
       "surface": {
         "entrypoint": "renderer/index.html",
-        "integrity": "sha256-xYeE8V8E5IA/XsLIkbLATsVze+7Fea6eGkjJIdUTKzM="
+        "integrity": "sha256-s7/ld37FUql3GVoL0uRSVMJnL8IcY3S22GQEYGlvGJ0="
       },
       "presentation": {
         "width": 300,

package/renderer/client.mjs

@@ -36,6 +36,8 @@ 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'),
+        readDecisions: (offset = 0, limit = 20) => invoke({ kind: 'decisions.read', offset, limit }, 'decisions'),
+        inspectF221: (proposalId) => invoke({ kind: 'f221.inspect', proposalId }, 'decision-trial'),
         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'),

package/renderer/decision-view.mjs

@@ -0,0 +1,30 @@
+/** F246 remains the decision truth; linked F310 receipts are enrichment, not another item. */
+export function decisionBadge(page) {
+  if (!page || page.status !== 'available')
+    return { visible: true, label: '?', title: '待决事项暂不可读' };
+  const total = page.approvalCount + page.otherNeedsMeCount;
+  return {
+    visible: total > 0,
+    label: total > 99 ? '99+' : String(total),
+    title: `${page.approvalCount} 项审批事项，${page.otherNeedsMeCount} 项其他待处理`,
+  };
+}
+
+export function decisionRows(page) {
+  if (!page || page.status !== 'available') return [];
+  const state = {
+    open: '待你决定', accepted: '已接纳 · 待核结果', rejected: '已拒绝',
+    closed_without_decision: '已关闭',
+  };
+  return [
+    ...page.approvals.map(item => ({
+      title: item.summary || '待决策事项',
+      meta: `${item.sourceFeatureId} · ${state[item.resolution] ?? '状态待核'} · ${item.materializationState === 'outcome_unknown' ? '结果未知' : item.materializationState === 'failed' ? '执行失败' : item.linkedNeedsMe ? '已关联任务' : '原处卡片'}`,
+      proposalId: item.proposalId,
+      previewable: item.sourceFeatureId === 'F221' &&
+        /^[0-9a-f]{8}-[0-9a-f]{4}-[1-8][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i.test(item.proposalId) &&
+        item.resolution === 'open' && item.materializationState === 'not_started',
+    })),
+    ...page.otherNeedsMe.map(item => ({ title: item.summary || '待处理事项', meta: '其他待处理 · 请向猫猫询问详情' })),
+  ];
+}

package/renderer/index.html

@@ -17,8 +17,12 @@
       <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>
+        <button id="pending-badge" hidden aria-label="查看待决事项" title="查看待决事项"><span id="pending-count">?</span></button>
       </div>
     </div>
+    <section id="bubble" class="floating" aria-label="最近的两句话" hidden>
+      <p id="bubble-first" hidden></p><p id="bubble-second" hidden></p>
+    </section>
     <section id="actions" class="floating" aria-label="找猫猫" hidden>
       <p id="status" role="status" hidden></p>
       <div class="action-row">
@@ -34,6 +38,7 @@
     <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="decisions"><span aria-hidden="true">◇</span><span>待你看</span><span id="menu-pending" class="menu-status">—</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>
@@ -50,6 +55,13 @@
       <small><span id="connection-scope">交流保存在同一段聊天中</span> <button id="history">完整聊天 ↗</button></small>
     </section>
     <p id="announcement" class="sr-only" role="status"></p>
+    <section id="decisions" class="floating" aria-label="待你看" hidden>
+      <header><strong>待你看</strong><button id="decision-reload" type="button">刷新</button></header>
+      <p id="decision-status" role="status">正在读取待决事项…</p>
+      <ul id="decision-list"></ul>
+      <button id="decision-more" type="button" hidden>查看更多</button>
+      <small>这里只查看原处事项。要决定时请打开对应卡片。</small>
+    </section>
   </main>
   <script type="module" src="./surface.mjs"></script>
 </body></html>

package/renderer/pet-controls.mjs

@@ -1,13 +1,14 @@
 /** Transient controls. The Host owns native placement, movement and hiding. */
-export function bindPetControls(client, { action, error, changed }) {
+export function bindPetControls(client, { action, error, changed, moved = () => {} }) {
   const $ = id => document.getElementById(id);
   const body = $('pet');
-  let panel = 'none', layoutRevision = 0, drag, suppressClick = false;
+  let panel = 'none', ambient = false, layoutRevision = 0, drag, suppressClick = false;
   async function show(next) {
+    if (next === 'none' && ambient) next = 'bubble';
     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'));
+    for (const id of ['actions', 'menu', 'chat', 'bubble', 'decisions']) $(id).hidden = id !== next;
+    body.setAttribute('aria-expanded', String(!['none', 'bubble'].includes(next)));
     const node = $(next);
     const revision = ++layoutRevision;
     try {
@@ -16,6 +17,7 @@ export function bindPetControls(client, { action, error, changed }) {
       $('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 === 'decisions') $('decision-reload').focus({ preventScroll: true });
       if (next === 'menu') $('menu').querySelector('button').focus({ preventScroll: true });
       changed(next);
     } catch (cause) { error(cause); }
@@ -31,15 +33,21 @@ export function bindPetControls(client, { action, error, changed }) {
   };
   body.onpointerdown = event => {
     if (event.button !== 0) return;
-    drag = { id: event.pointerId, x: event.screenX, y: event.screenY };
+    const current = { id: event.pointerId, x: event.screenX, y: event.screenY, armed: false };
+    drag = current;
     body.setPointerCapture(event.pointerId);
-    void client.drag('start').catch(error);
+    void client.drag('start').then(() => { if (drag === current) current.armed = true; }).catch(error);
   };
   body.onpointermove = event => {
-    if (drag && Math.hypot(event.screenX - drag.x, event.screenY - drag.y) >= 6) suppressClick = true;
+    if (!drag) return;
+    const dx = event.screenX - drag.x, dy = event.screenY - drag.y;
+    if (Math.hypot(dx, dy) < 6) return;
+    suppressClick = true;
+    if (drag.armed) moved(dx, dy);
+    drag.x = event.screenX; drag.y = event.screenY;
   };
   for (const name of ['pointerup', 'pointercancel']) body.addEventListener(name, () => {
-    drag = undefined; void client.drag('end').catch(error);
+    drag = undefined; moved('stop'); void client.drag('end').catch(error);
   });
   document.addEventListener('pointerdown', event => {
     if (!event.target.closest('#anchor, .floating')) void show('none');
@@ -50,6 +58,7 @@ export function bindPetControls(client, { action, error, changed }) {
   document.querySelectorAll('[data-action]').forEach(button => button.onclick = () => {
     const kind = button.dataset.action;
     if (kind === 'write' || kind === 'history') { void show('chat'); return; }
+    if (kind === 'decisions') { void show('decisions'); return; }
     if (kind === 'dismiss') { void show('none'); return; }
     action(kind);
   });
@@ -61,7 +70,15 @@ export function bindPetControls(client, { action, error, changed }) {
       if (previous && previous !== size && entry.target.id === panel && !entry.target.hidden) void show(panel);
     }
   });
-  for (const id of ['actions', 'menu', 'chat']) observer.observe($(id));
+  for (const id of ['actions', 'menu', 'chat', 'bubble', 'decisions']) observer.observe($(id));
   window.addEventListener('beforeunload', () => observer.disconnect());
-  return { get panel() { return panel; }, show, dismiss() { if (drag) suppressClick = true; void show('none'); } };
+  return {
+    get panel() { return panel; }, show,
+    setAmbient(enabled) {
+      if (ambient === enabled) return Promise.resolve();
+      ambient = enabled;
+      return ['none', 'bubble'].includes(panel) ? show('none') : Promise.resolve();
+    },
+    dismiss() { if (drag) suppressClick = true; void show('none'); },
+  };
 }

package/renderer/pet-motion.mjs

@@ -0,0 +1,132 @@
+// F229 pet.json frame durations, plus the three F258 rows pinned in source-lock.json.
+const atlas = {
+  idle: { row: 0, frames: [1200, 400, 400, 500, 500, 800] },
+  'running-right': { row: 1, frames: [120, 120, 120, 120, 120, 120, 120, 220] },
+  'running-left': { row: 2, frames: [120, 120, 120, 120, 120, 120, 120, 220] },
+  waving: { row: 3, frames: [140, 140, 140, 280] },
+  jumping: { row: 4, frames: [140, 140, 140, 140, 280] },
+  failed: { row: 5, frames: [140, 140, 140, 140, 140, 140, 140, 240] },
+  waiting: { row: 6, frames: [150, 150, 150, 150, 150, 260] },
+  running: { row: 7, frames: [120, 120, 120, 120, 120, 220] },
+  review: { row: 8, frames: [150, 150, 150, 150, 150, 280] },
+};
+const additional = {
+  sleeping: { file: 'xianxian-sleeping-row.png', frames: [700, 700, 700, 700, 700, 700] },
+  working: { file: 'xianxian-working-row.png', frames: [520, 560, 520, 640, 520, 560, 520, 640] },
+  staged_thought: { file: 'xianxian-staged-thought-row.png', frames: [1200, 500, 700, 900, 1200, 500] },
+};
+const signals = { connected: 'waving', received: 'jumping', answered: 'review', failed: 'failed' };
+const staticSkins = { 'ragdoll-v1': 'ragdoll-v1.png', 'yarn-ball': 'yarn-ball.png' };
+
+/** All animation choices come from Host state or a completed local gesture. */
+export class PetMotion {
+  constructor(element, options = {}) {
+    this.element = element;
+    const setTimer = options.setTimer ?? globalThis.setTimeout;
+    const clearTimer = options.clearTimer ?? globalThis.clearTimeout;
+    this.setTimer = (callback, delay) => setTimer.call(globalThis, callback, delay);
+    this.clearTimer = id => clearTimer.call(globalThis, id);
+    this.reducedMotion = options.reducedMotion ?? globalThis.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false;
+    this.skin = 'xianxian-codex';
+    this.phase = 'idle';
+    this.base = 'idle';
+    this.action = '';
+    this.frame = 0;
+    this.moving = false;
+    this.oneShot = false;
+  }
+  setContext({ skin, phase, nativeActivity, muted }) {
+    const selectedSkin = ['xianxian-codex', 'yanyan-codex', ...Object.keys(staticSkins)].includes(skin) ? skin : 'xianxian-codex';
+    const changedSkin = selectedSkin !== this.skin;
+    const changedPhase = phase !== this.phase;
+    this.skin = selectedSkin;
+    this.phase = phase;
+    const requested = nativeActivity === 'tool_running' ? 'working' : nativeActivity === 'reasoning' ? 'staged_thought'
+      : ['talking', 'connecting'].includes(phase) && !muted ? 'waiting' : 'idle';
+    const nextBase = this.resolve(requested);
+    const changedBase = nextBase !== this.base;
+    this.base = nextBase;
+    if (phase !== 'idle') this.cancelRest();
+    if (phase === 'idle' && changedPhase) { this.moving = false; this.oneShot = false; }
+    if (!this.moving && !this.oneShot && (changedSkin || changedBase || changedPhase || !this.action)) this.play(this.base);
+    if (phase === 'idle' && this.action === 'idle') this.armRest();
+  }
+  signal(kind) {
+    const requested = signals[kind];
+    if (!requested || this.moving || this.reducedMotion || staticSkins[this.skin]) return;
+    this.cancelRest();
+    this.oneShot = true;
+    this.play(this.resolve(requested));
+  }
+  move(dx, dy) {
+    if (!Number.isFinite(dx) || !Number.isFinite(dy) || Math.hypot(dx, dy) < 6) return;
+    this.moving = true;
+    this.oneShot = false;
+    this.cancelRest();
+    this.play(this.resolve(Math.abs(dx) >= Math.abs(dy) ? dx < 0 ? 'running-left' : 'running-right' : 'running'));
+  }
+  stopMove() {
+    if (!this.moving) return;
+    this.moving = false;
+    this.play(this.base);
+    if (this.phase === 'idle') this.armRest();
+  }
+  close() { this.cancelFrame(); this.cancelRest(); }
+  resolve(action) {
+    if (staticSkins[this.skin]) return 'idle';
+    if (this.skin !== 'xianxian-codex' && action in additional)
+      return action === 'sleeping' ? 'idle' : 'review';
+    return action;
+  }
+  play(action) {
+    if (this.action === action) return;
+    this.cancelFrame();
+    this.action = action;
+    this.frame = 0;
+    this.paint();
+    this.scheduleFrame();
+  }
+  paint() {
+    const { style, dataset } = this.element;
+    dataset.skin = this.skin;
+    dataset.action = this.action;
+    const staticFile = staticSkins[this.skin];
+    if (staticFile) {
+      style.backgroundImage = `url("./skins/${staticFile}")`;
+      style.backgroundSize = 'contain';
+      style.backgroundPosition = 'center';
+      return;
+    }
+    const extra = this.skin === 'xianxian-codex' ? additional[this.action] : undefined;
+    style.backgroundImage = `url("./skins/${extra?.file ?? `${this.skin}.webp`}")`;
+    style.backgroundSize = extra ? '960px 130px' : '960px 1170px';
+    style.backgroundPosition = `${-120 * this.frame}px ${-130 * (atlas[this.action]?.row ?? 0)}px`;
+  }
+  scheduleFrame() {
+    if (this.reducedMotion || staticSkins[this.skin]) return;
+    const frames = additional[this.action]?.frames ?? atlas[this.action]?.frames;
+    if (!frames) return;
+    this.frameTimer = this.setTimer(() => {
+      this.frameTimer = undefined;
+      if (this.frame + 1 === frames.length && this.oneShot) {
+        this.oneShot = false;
+        this.action = '';
+        this.play(this.base);
+        if (this.phase === 'idle') this.armRest();
+        return;
+      }
+      this.frame = (this.frame + 1) % frames.length;
+      this.paint();
+      this.scheduleFrame();
+    }, frames[this.frame]);
+  }
+  cancelFrame() { if (this.frameTimer !== undefined) this.clearTimer(this.frameTimer); this.frameTimer = undefined; }
+  armRest() {
+    if (this.restTimer !== undefined || this.action === 'sleeping') return;
+    this.restTimer = this.setTimer(() => {
+      this.restTimer = undefined;
+      if (this.phase === 'idle' && !this.moving && !this.oneShot) this.play(this.resolve('sleeping'));
+    }, 45_000);
+  }
+  cancelRest() { if (this.restTimer !== undefined) this.clearTimer(this.restTimer); this.restTimer = undefined; }
+}

package/renderer/recent-bubble.mjs

@@ -0,0 +1,39 @@
+/** A compact projection of Host history plus the current unsaved voice caption. */
+export class RecentBubble {
+  constructor(rows) {
+    this.rows = rows;
+    this.history = [];
+    this.live = new Map();
+  }
+  load(messages) {
+    this.history = messages.slice(-2);
+    this.render();
+  }
+  append(role, text) {
+    if (!['user', 'assistant'].includes(role) || typeof text !== 'string') return;
+    this.live.set(role, `${this.live.get(role) ?? ''}${text}`.slice(-240));
+    this.render();
+  }
+  finish(role) {
+    this.live.delete(role);
+    this.render();
+  }
+  reset() {
+    this.live.clear();
+    this.render();
+  }
+  hasContent() {
+    return this.history.length > 0 || this.live.size > 0;
+  }
+  render() {
+    const live = [...this.live].map(([role, text]) => ({ role, name: role === 'user' ? '你' : '猫猫', text }));
+    const entries = [...this.history.slice(-Math.max(0, 2 - live.length)), ...live].slice(-2);
+    for (const [index, row] of this.rows.entries()) {
+      const entry = entries[index];
+      row.hidden = !entry;
+      row.textContent = entry ? `${String(entry.name).slice(0, 28)}：${String(entry.text).slice(-120)}` : '';
+      row.dataset ??= {};
+      row.dataset.role = entry?.role ?? '';
+    }
+  }
+}

package/renderer/style.css

@@ -10,9 +10,8 @@ button:disabled { opacity: .45; cursor: default; }
 .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 { width: 120px; height: 130px; display: block; border: 0; padding: 0; background: url("./skins/xianxian-codex.webp") 0 0 / 960px 1170px; 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; }
@@ -20,9 +19,14 @@ button:disabled { opacity: .45; cursor: default; }
 #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; }
+#pending-badge { background: #9b6841 !important; font-size: 11px; font-weight: 700; }
 @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; }
+#bubble { width: 240px; max-height: 80px; overflow: hidden; padding: 8px 11px; pointer-events: none; }
+#bubble p { margin: 0; font-size: 11px; line-height: 1.45; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+#bubble p + p { margin-top: 4px; }
+#bubble [data-role="user"] { color: var(--cafe-text-secondary); }
 .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); }
@@ -61,3 +65,14 @@ button:disabled { opacity: .45; cursor: default; }
 #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); }
+#decisions { width: 320px; min-height: 180px; padding: 8px 12px 12px; display: flex; flex-direction: column; overflow: hidden; }
+#decisions header { display: flex; align-items: center; justify-content: space-between; flex: none; }
+#decisions header strong { font-size: 13px; }
+#decisions header button, #decision-more { font-size: 11px; color: var(--cafe-text-secondary); }
+#decision-status, #decisions small { color: var(--cafe-text-secondary); font-size: 11px; line-height: 1.5; flex: none; }
+#decision-status { margin: 7px 0 4px; }
+#decision-list { list-style: none; margin: 4px 0 8px; padding: 0; max-height: 290px; min-height: 55px; flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; }
+#decision-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: 4px; border-top: 1px solid var(--cafe-border-subtle); padding: 9px 2px; line-height: 1.45; overflow-wrap: anywhere; }
+#decision-list li strong { grid-column: 1; display: block; font-size: 12px; font-weight: 600; }
+#decision-list li span { grid-column: 1; display: block; color: var(--cafe-text-secondary); font-size: 10px; margin-top: 2px; }
+#decision-list li button { grid-column: 2; grid-row: 1 / span 2; padding: 5px 6px; font-size: 10px; white-space: nowrap; }

package/renderer/surface.mjs

@@ -4,13 +4,20 @@ import { explainError } from './errors.mjs';
 import { VoicePeer } from './peer.mjs';
 import { ScreenShare } from './screen-share.mjs';
 import { TranscriptView } from './transcript-view.mjs';
+import { RecentBubble } from './recent-bubble.mjs';
+import { PetMotion } from './pet-motion.mjs';
 import { bindPetControls } from './pet-controls.mjs';
+import { decisionBadge, decisionRows } from './decision-view.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 bubble = new RecentBubble([$('bubble-first'), $('bubble-second')]);
+const motion = new PetMotion($('pet'));
 let sharing = false, pendingScreen = false, loading = false, latestHistory, previousPhase = 'idle';
+let decisionLoading = false, decisionOffset = 0;
+let threadTitle;
 
 if (!window.clowderCompanion) {
   $('actions').hidden = false; $('status').hidden = false;
@@ -20,9 +27,10 @@ if (!window.clowderCompanion) {
   const client = createCompanionClient(window.clowderCompanion);
   const controls = bindPetControls(client, {
     error: error => status(explainError(error)),
-    changed: panel => { if (panel === 'chat') void readHistory(); },
+    moved: (dx, dy) => dx === 'stop' ? motion.stopMove() : motion.move(dx, dy),
+    changed: panel => { if (panel === 'chat') void readHistory(); if (panel === 'decisions') void readDecisions(); },
     action(kind) {
-      if (kind === 'begin') { transcript.reset(); void conversation.begin(); void controls.show('none'); }
+      if (kind === 'begin') { transcript.reset(); bubble.reset(); void conversation.begin(); void controls.show('none'); }
       if (kind === 'stop') void conversation.end();
       if (kind === 'mute') conversation.muteMic();
       if (kind === 'speaker') conversation.muteSpeaker();
@@ -44,25 +52,33 @@ if (!window.clowderCompanion) {
     $('share-badge').title = sharing ? `正在共享：${value.label}，点此停止` : '正在选屏，点此取消';
   });
   function toggleScreen() {
+    if (conversation.phase !== 'talking') {
+      status('先点语音聊，连上后可选择窗口或屏幕');
+      $('status').hidden = false;
+      void controls.show('actions');
+      return;
+    }
     void (sharing || pendingScreen ? screen.stop('屏幕共享已停止') : screen.start()).catch(error => status(explainError(error)));
   }
   const conversation = new CompanionConversation({
     client, createPeer: callback => new VoicePeer(callback, client), stopScreen: () => screen.stop(),
     transcript: event => {
-      if (event.type === 'turn-done') { transcript.finish(event); void readHistory(); }
+      if (event.type === 'turn-done') { transcript.finish(event); bubble.finish(event.role); if (event.role === 'assistant') motion.signal('answered'); void readHistory(); }
       else if (event.typed) void readHistory();
-      else transcript.append(event.role, event.text, true);
+      else { transcript.append(event.role, event.text, true); bubble.append(event.role, event.text); void controls.setAmbient(true); }
     },
     render(value) {
       const showFailure = value.failed && previousPhase !== 'idle' && value.phase === 'idle';
-      if (previousPhase !== 'idle' && value.phase === 'idle') { transcript.reset(); void readHistory(); }
+      const justConnected = previousPhase !== 'talking' && value.phase === 'talking';
+      if (previousPhase !== 'idle' && value.phase === 'idle') { transcript.reset(); bubble.reset(); void readHistory(); }
       previousPhase = value.phase;
       const active = value.phase !== 'idle';
+      void controls.setAmbient(active && bubble.hasContent());
       $('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';
+      $('share').disabled = value.phase !== 'talking';
       $('compose').querySelector('button').disabled = !value.identity || value.phase === 'connecting';
       status(value.message ?? '');
       $('status').hidden = !value.message || /^(点|正在听|语音已结束|已发送)/.test(value.message);
@@ -73,10 +89,12 @@ if (!window.clowderCompanion) {
       label('mic', value.muted ? '取消静音' : '静音'); $('mic').setAttribute('aria-pressed', String(value.muted));
       label('speaker', value.silent ? '开启播音' : '关闭播音');
       const identity = value.identity;
+      motion.setContext({ skin: identity?.skin, phase: value.phase, nativeActivity: identity?.nativeActivity ?? 'none', muted: value.muted });
+      if (justConnected) motion.signal('connected');
+      if (showFailure) motion.signal('failed');
       if (identity) {
-        $('chat-name').textContent = identity.displayName; $('menu-name').textContent = identity.displayName;
+        $('chat-name').textContent = threadTitle ?? identity.displayName; $('menu-name').textContent = identity.displayName;
         $('pet').setAttribute('aria-label', `${identity.displayName}：点击交流，右键更多，拖动移动`);
-        $('pet').dataset.skin = identity.skin;
         $('documents').querySelector('.menu-status').textContent = identity.documentsAllowed ? '开启' : '暂停';
         $('documents').setAttribute('aria-pressed', String(identity.documentsAllowed));
         $('connection-scope').textContent = identity.duty.catId === identity.carrier.catId ? '交流保存在同一段聊天中' : `${identity.duty.displayName} · 实时语音由${identity.carrier.displayName}承载`;
@@ -85,24 +103,83 @@ if (!window.clowderCompanion) {
     },
   });
   async function readHistory() {
-    if (loading || controls.panel !== 'chat') return;
+    if (loading || (controls.panel !== 'chat' && conversation.phase === 'idle')) return;
     loading = true;
     try {
       const history = await client.readConversation();
       $('history').textContent = history.hasMore ? '更早聊天 ↗' : '完整聊天 ↗';
+      threadTitle = history.threadTitle;
+      $('chat-name').textContent = threadTitle;
+      bubble.load(history.messages);
+      void controls.setAmbient(conversation.phase !== 'idle' && bubble.hasContent());
       const serialized = JSON.stringify(history.messages);
       if (serialized !== latestHistory) { latestHistory = serialized; transcript.load(history.messages); }
     } catch { $('chat-status').textContent = '聊天记录暂未更新 · 正在说的话仍会显示'; }
     finally { loading = false; }
   }
+  function showDecisionBadge(page) {
+    const badge = decisionBadge(page);
+    $('pending-badge').hidden = !badge.visible;
+    $('pending-count').textContent = badge.label;
+    $('pending-badge').title = badge.title;
+    $('pending-badge').setAttribute('aria-label', badge.title);
+    $('menu-pending').textContent = badge.label;
+  }
+  async function readDecisions(more = false) {
+    if (decisionLoading) return;
+    decisionLoading = true;
+    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);
+      if (controls.panel !== 'decisions') return;
+      const list = $('decision-list');
+      if (!more) { list.replaceChildren(); list.scrollTop = 0; }
+      for (const row of decisionRows(page)) {
+        const item = document.createElement('li');
+        const title = document.createElement('strong');
+        const meta = document.createElement('span');
+        title.textContent = row.title; meta.textContent = row.meta;
+        item.append(title, meta); list.append(item);
+        if (row.previewable) {
+          const button = document.createElement('button');
+          button.type = 'button'; button.textContent = '查看确认演练';
+          button.onclick = async () => {
+            try {
+              const result = await client.inspectF221(row.proposalId);
+              $('decision-status').textContent = result.status === 'trial_confirmed'
+                ? '确认演练已完成；没有写回提案'
+                : result.status === 'stale' ? '提案已变化，请重新查看原处卡片'
+                  : result.status === 'dismissed' ? '已取消演练；提案没有变化'
+                    : '确认演练暂不可用；请在原处处理';
+            } catch { $('decision-status').textContent = '确认演练暂不可用；请在原处处理'; }
+          };
+          item.append(button);
+        }
+      }
+      decisionOffset = page.page.offset + page.page.limit;
+      $('decision-status').textContent = page.approvalCount + page.otherNeedsMeCount === 0
+        ? '现在没有待你处理的事项'
+        : `${page.approvalCount} 项审批事项，另有 ${page.otherNeedsMeCount} 项待处理`;
+      $('decision-more').hidden = !page.page.hasMoreApprovals && !page.page.hasMoreNeedsMe;
+    } catch {
+      showDecisionBadge(undefined);
+      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();
+  $('decision-more').onclick = () => void readDecisions(true);
   $('history').onclick = () => void client.openConversation().then(result => {
     if (result.delivery === 'unconfirmed') status('打开聊天尚未确认 · 请从 Clowder 查看');
   }).catch(error => status(explainError(error)));
   $('compose').onsubmit = async event => {
     event.preventDefault(); const text = $('message').value;
     if (await conversation.send(text)) {
+      motion.signal('received');
       if ($('message').value === text) $('message').value = '';
       latestHistory = undefined; void readHistory();
     }
@@ -111,7 +188,12 @@ if (!window.clowderCompanion) {
     if (event.kind === 'media-stopped') void conversation.hostStopped(event.reason);
     if (event.kind === 'view-dismiss') controls.dismiss();
   });
-  const monitor = setInterval(() => { void conversation.refresh(); void readHistory(); }, 3000);
-  void conversation.refresh(); void controls.show('none');
-  window.addEventListener('beforeunload', () => { clearInterval(monitor); unsubscribe(); void conversation.end(); });
+  const statusMonitor = setInterval(() => void conversation.refresh(), 1000);
+  const historyMonitor = setInterval(() => void readHistory(), 3000);
+  const decisionMonitor = setInterval(() => { if (controls.panel !== 'decisions') void readDecisions(); }, 15000);
+  void conversation.refresh(); void readDecisions(); void controls.show('none');
+  window.addEventListener('beforeunload', () => {
+    clearInterval(statusMonitor); clearInterval(historyMonitor); clearInterval(decisionMonitor);
+    unsubscribe(); motion.close(); void conversation.end();
+  });
 }

package/renderer/transcript-view.mjs

@@ -32,6 +32,16 @@ export class TranscriptView {
   nearBottom() {
     return this.container.scrollHeight - this.container.scrollTop - this.container.clientHeight < 32;
   }
+  visibleHistoryAnchor() {
+    const viewport = this.container.getBoundingClientRect?.();
+    if (!viewport) return null;
+    for (const [id, row] of this.historyRows) {
+      const rect = row.getBoundingClientRect?.();
+      if (rect && rect.bottom > viewport.top && rect.top < viewport.bottom)
+        return { id, offset: rect.top - viewport.top };
+    }
+    return null;
+  }
   reset() {
     for (const row of this.activeRows.values()) row.remove();
     this.activeRows.clear();
@@ -39,6 +49,8 @@ export class TranscriptView {
   }
   load(messages) {
     const pinned = this.nearBottom();
+    const readingPosition = this.container.scrollTop;
+    const anchor = pinned ? null : this.visibleHistoryAnchor();
     const previous = this.historyRows;
     this.historyRows = new Map();
     const rows = messages.map(message => {
@@ -51,5 +63,13 @@ export class TranscriptView {
     });
     this.container.replaceChildren(...rows, ...this.activeRows.values());
     if (pinned) this.container.scrollTop = this.container.scrollHeight;
+    else if (anchor) {
+      const row = this.historyRows.get(anchor.id) ?? rows[0];
+      const rect = row?.getBoundingClientRect?.();
+      const viewport = this.container.getBoundingClientRect?.();
+      this.container.scrollTop = rect && viewport
+        ? this.container.scrollTop + rect.top - viewport.top - anchor.offset
+        : readingPosition;
+    } else this.container.scrollTop = readingPosition;
   }
 }

package/source-lock.json

@@ -47,6 +47,24 @@
         "purpose": "Restore the complete original grey-point cat silhouette on transparent alpha; remove the cropped room background.",
         "author": "codex-astra"
       }
+    },
+    {
+      "source": "packages/web/public/visible-cafe/skins/xianxian/sleeping-row.png",
+      "sourceCommit": "569196d723bcfaa3e4c162312a2081e479ed5579",
+      "destination": "assets/skins/xianxian-sleeping-row.png",
+      "sha256": "1f15086d9836b6a1174349bc7814c3d4871a6019cd4aa896456fb2776fe6aa05"
+    },
+    {
+      "source": "packages/web/public/visible-cafe/skins/xianxian/working-row.png",
+      "sourceCommit": "569196d723bcfaa3e4c162312a2081e479ed5579",
+      "destination": "assets/skins/xianxian-working-row.png",
+      "sha256": "28862148bb7c0c42391f0c28399ac1314ecc6f4f61cab802933ed3c81ee593d6"
+    },
+    {
+      "source": "packages/web/public/visible-cafe/skins/xianxian/staged-thought-row.png",
+      "sourceCommit": "569196d723bcfaa3e4c162312a2081e479ed5579",
+      "destination": "assets/skins/xianxian-staged-thought-row.png",
+      "sha256": "e9286ce2c234911d9b45835849e1a2a853598d0d0260ecf7d24430a95847725f"
     }
   ]
 }