@clowder-ai/companion 0.1.0-alpha.3 → 0.1.0-alpha.31

package/renderer/pet-motion.mjs

@@ -0,0 +1,343 @@
+import { isLivingClip } from './living-body.mjs';
+import { MotionFacts } from './motion-facts.mjs';
+import { additional, atlas, signals, staticSkins, validId, visualAlias, workAction } from './pet-motion-assets.mjs';
+/** Select one truthful body from Host facts and local, user-controlled gestures. */
+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.now = options.now ?? Date.now;
+    this.livingBody = options.livingBody;
+    this.reducedMotion = options.reducedMotion ?? globalThis.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false;
+    this.autoPlay = options.autoPlay === true;
+    this.autoPlayIdleMs = Math.max(90_000, options.autoPlayIdleMs ?? 90_000);
+    this.autoPlayCooldownMs = Math.max(180_000, options.autoPlayCooldownMs ?? 180_000);
+    this.lastPlayAt = Number.NEGATIVE_INFINITY;
+    this.skin = 'xianxian-codex';
+    this.phase = 'idle';
+    this.base = 'idle';
+    this.action = '';
+    this.frame = 0;
+    this.dragging = false;
+    this.oneShot = false;
+    this.pendingDecision = false;
+    this.dockedEdge = null;
+    this.dockZone = null;
+    this.resting = false;
+    this.transient = null;
+    this.facts = new MotionFacts({ now: this.now, setTimer: this.setTimer, clearTimer: this.clearTimer,
+      changed: () => this.refresh() });
+    this.seenEvents = new Map();
+  }
+
+  setContext({ skin, phase, nativeActivity, muted }) {
+    const selectedSkin = ['xianxian-codex', 'yanyan-codex', ...Object.keys(staticSkins)].includes(skin)
+      ? skin : 'xianxian-codex';
+    const wasSleeping = this.action === 'sleeping' || this.resting;
+    this.context = { skin: selectedSkin, phase, nativeActivity, muted };
+    const changedSkin = selectedSkin !== this.skin;
+    this.skin = selectedSkin;
+    this.phase = phase;
+    if (phase !== 'idle' || nativeActivity !== 'none') {
+      this.resting = false;
+      this.cancelIdleTimers();
+    }
+    if (nativeActivity !== 'none' && this.transient?.action !== 'failed') this.transient = null;
+    else if (wasSleeping && ['talking', 'connecting'].includes(phase) && !muted)
+      this.transient = { action: 'waking' };
+    this.refresh(changedSkin);
+  }
+  setBehaviorEnabled(enabled) {
+    const next = enabled === true;
+    if (this.autoPlay === next) return;
+    this.autoPlay = next;
+    if (!next) {
+      if (this.autoTimer !== undefined) this.clearTimer(this.autoTimer);
+      this.autoTimer = undefined;
+      if (this.transient?.automatic) {
+        this.transient = null;
+        this.refresh();
+      }
+      return;
+    }
+    this.refresh();
+  }
+  syncSnapshot(value) {
+    this.syncFacts(value, false);
+  }
+  syncNativeSnapshot(value) {
+    this.syncFacts(value, true);
+  }
+  syncFacts(value, nativeOnly) {
+    const now = this.now();
+    this.hasNativeWork = value !== null && value !== undefined;
+    for (const [id, expiresAt] of this.seenEvents) if (expiresAt <= now) this.seenEvents.delete(id);
+    if (nativeOnly) this.facts.syncNative(value);
+    else this.facts.sync(value, this.dragging);
+    if (this.snapshot.work) {
+      this.resting = false;
+      this.cancelIdleTimers();
+      if (this.transient?.action !== 'failed') this.transient = null;
+    } else if (this.resting && (this.snapshot.delivery || this.snapshot.travel)) {
+      this.resting = false;
+      this.cancelRest();
+      this.transient = { action: 'waking' };
+    }
+    this.refresh();
+  }
+  syncTravel(value) {
+    this.facts.syncTravel(value, this.dragging);
+    if (this.resting && this.snapshot.travel) {
+      this.resting = false;
+      this.cancelRest();
+      this.transient = { action: 'waking' };
+    }
+    this.refresh();
+  }
+  setPendingDecision(value) {
+    const pending = value === true;
+    if (this.pendingDecision === pending) return;
+    this.pendingDecision = pending;
+    if (pending) {
+      this.resting = false;
+      this.transient = null;
+      this.cancelIdleTimers();
+    }
+    this.refresh();
+  }
+  setDockedEdge(value) {
+    const candidate = typeof value === 'string' ? { edge: value, zone: 'corner' } : value;
+    const edge = ['left', 'right'].includes(candidate?.edge) ? candidate.edge : null;
+    const zone = edge && ['corner', 'mid'].includes(candidate?.zone) ? candidate.zone : edge ? 'corner' : null;
+    if (this.dockedEdge === edge && this.dockZone === zone) return;
+    this.dockedEdge = edge;
+    this.dockZone = zone;
+    if (edge) this.cancelIdleTimers();
+    this.refresh(this.action === 'peek');
+  }
+  signal(kind, eventId) {
+    if (kind === 'answered') return;
+    if (kind === 'connected' && this.living()) return;
+    if (kind === 'play') {
+      if (!this.canPlay()) return;
+      this.lastPlayAt = this.now();
+      this.resting = false;
+      this.cancelIdleTimers();
+      this.transient = { action: 'play', automatic: false };
+      this.refresh();
+      return;
+    }
+    let requested = signals[kind];
+    if (kind === 'received' && (this.action === 'sleeping' || this.resting)) requested = 'waking';
+    if (!requested || this.dragging || staticSkins[this.skin]) return;
+    const now = this.now();
+    if (validId(eventId)) {
+      if (this.seenEvents.has(eventId)) return;
+      this.seenEvents.set(eventId, now + 3_600_000);
+    }
+    this.resting = false;
+    this.cancelIdleTimers();
+    this.transient = { action: requested };
+    this.refresh();
+  }
+  move(dx, dy) {
+    if (!Number.isFinite(dx) || !Number.isFinite(dy) || Math.hypot(dx, dy) < 6) return;
+    if (this.dragging) return;
+    this.dragging = true;
+    this.element.classList?.add('dragging');
+    this.element.dataset.interaction = 'held-candidate';
+    this.facts.suppressTravel();
+    this.resting = false;
+    this.transient = null;
+    this.cancelIdleTimers();
+    this.refresh();
+  }
+  stopMove() {
+    if (!this.dragging) return;
+    this.dragging = false;
+    this.element.classList?.remove('dragging');
+    delete this.element.dataset.interaction;
+    this.refresh();
+  }
+  close() {
+    this.cancelFrame();
+    this.cancelIdleTimers();
+    this.facts.close();
+    this.livingBody?.close();
+  }
+  living() { return this.skin === 'xianxian-codex' && Boolean(this.livingBody); }
+  resolve(action) {
+    if (action === 'pending_decision' && !this.living()) return 'waiting';
+    if (action === 'peek' && !this.living()) return 'idle';
+    if (staticSkins[this.skin]) return 'idle';
+    const visual = visualAlias[action] ?? action;
+    if (this.skin !== 'xianxian-codex' && visual in additional)
+      return visual === 'sleeping' ? 'idle' : 'review';
+    return action;
+  }
+  refresh(force = false) {
+    this.element.dataset.listening = String(this.listening());
+    const selection = this.select();
+    this.base = this.baseAction();
+    const action = this.resolve(selection.action);
+    const changed = action !== this.action;
+    if (changed || force || selection.oneShot !== this.oneShot) {
+      this.oneShot = selection.oneShot;
+      this.play(action, force);
+    }
+    if (action === 'idle') this.armRest();
+    else if (action !== 'sleeping') this.cancelRest();
+  }
+  select() {
+    if (this.dragging) return { action: 'held', oneShot: false };
+    if (this.transient?.action === 'failed') return { action: 'failed', oneShot: true };
+    if (this.pendingDecision) return { action: 'pending_decision', oneShot: false };
+    const work = this.activeWorkAction();
+    if (work) return { action: work, oneShot: false };
+    if (this.transient && this.transient.action !== 'play')
+      return { action: this.transient.action, oneShot: true };
+    const delivery = this.facts.consumeDelivery();
+    if (delivery) {
+      this.transient = { action: 'delivering', resultId: delivery.resultId };
+      return { action: 'delivering', oneShot: true };
+    }
+    if (!this.reducedMotion && this.snapshot.travel) {
+      const { dx, dy } = this.snapshot.travel;
+      return { action: Math.abs(dx) >= Math.abs(dy) ? dx < 0 ? 'running-left' : 'running-right' : 'running', oneShot: false };
+    }
+    if (this.transient?.action === 'play') return { action: 'play', oneShot: true };
+    if (this.dockedEdge) return { action: 'peek', oneShot: false };
+    if (this.listening()) return { action: 'waiting', oneShot: false };
+    if (this.resting) return { action: 'sleeping', oneShot: false };
+    return { action: 'idle', oneShot: false };
+  }
+  baseAction() {
+    if (this.pendingDecision) return 'pending_decision';
+    const work = this.activeWorkAction();
+    if (work) return work;
+    if (this.dockedEdge) return 'peek';
+    if (this.listening()) return 'waiting';
+    return 'idle';
+  }
+
+  listening() { return ['talking', 'connecting'].includes(this.phase) && !this.context?.muted; }
+  activeWorkAction() {
+    if (this.snapshot.work) return workAction[this.snapshot.work.kind];
+    if (!this.hasNativeWork && this.context?.nativeActivity === 'tool_running') return 'working';
+    if (!this.hasNativeWork && this.context?.nativeActivity === 'reasoning') return 'staged_thought';
+    return null;
+  }
+  play(action, force = false) {
+    if (this.action === action && !force) 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;
+    dataset.dockEdge = this.dockedEdge ?? 'none';
+    dataset.dockZone = this.dockZone ?? 'none';
+    if (this.living()) {
+      style.backgroundImage = 'none';
+      this.livingBody.show(this.action, { reducedMotion: this.reducedMotion, onEnded: () => this.completeOneShot() });
+      return;
+    }
+    this.livingBody?.hide();
+    const staticFile = staticSkins[this.skin];
+    if (staticFile) {
+      style.backgroundImage = `url("./skins/${staticFile}")`;
+      style.backgroundSize = 'contain';
+      style.backgroundPosition = 'center';
+      return;
+    }
+    const visual = visualAlias[this.action] ?? this.action;
+    const extra = this.skin === 'xianxian-codex' ? additional[visual] : 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[visual]?.row ?? 0)}px`;
+  }
+  scheduleFrame() {
+    if (this.reducedMotion) {
+      if (this.oneShot) this.frameTimer = this.setTimer(() => { this.frameTimer = undefined; this.completeOneShot(); }, 1_000);
+      return;
+    }
+    if (staticSkins[this.skin]) return;
+    if (this.living()) {
+      if (isLivingClip(this.action) || !this.oneShot) return;
+      this.frameTimer = this.setTimer(() => { this.frameTimer = undefined; this.completeOneShot(); }, 700);
+      return;
+    }
+    const visual = visualAlias[this.action] ?? this.action;
+    const frames = additional[visual]?.frames ?? atlas[visual]?.frames;
+    if (!frames) return;
+    this.frameTimer = this.setTimer(() => {
+      this.frameTimer = undefined;
+      if (this.frame + 1 === frames.length && this.oneShot) {
+        this.completeOneShot();
+        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;
+  }
+  completeOneShot() {
+    if (!this.oneShot) return;
+    this.oneShot = false;
+    this.transient = null;
+    this.action = '';
+    this.refresh();
+  }
+  canPlay() {
+    return !this.reducedMotion && !this.dragging && !this.pendingDecision && this.phase === 'idle'
+      && !this.activeWorkAction() && !this.snapshot.delivery && !this.snapshot.travel && !this.dockedEdge
+      && !staticSkins[this.skin];
+  }
+
+  armRest() {
+    if (this.restTimer === undefined && !this.resting && !this.pendingDecision && !this.dockedEdge) {
+      this.restTimer = this.setTimer(() => {
+        this.restTimer = undefined;
+        if (this.action === 'idle' && !this.dragging && !this.transient) {
+          this.resting = true;
+          this.refresh();
+        }
+      }, 45_000);
+    }
+    if (this.autoPlay && !this.reducedMotion && this.autoTimer === undefined) {
+      const delay = Math.max(this.autoPlayIdleMs, this.lastPlayAt + this.autoPlayCooldownMs - this.now());
+      this.autoTimer = this.setTimer(() => {
+        this.autoTimer = undefined;
+        if (!this.canPlay()) return;
+        this.lastPlayAt = this.now();
+        this.resting = false;
+        this.transient = { action: 'play', automatic: true };
+        this.refresh();
+      }, delay);
+    }
+  }
+
+  cancelRest() {
+    if (this.restTimer !== undefined) this.clearTimer(this.restTimer);
+    this.restTimer = undefined;
+  }
+
+  cancelIdleTimers() {
+    this.cancelRest();
+    if (this.autoTimer !== undefined) this.clearTimer(this.autoTimer);
+    this.autoTimer = undefined;
+  }
+
+  get snapshot() { return this.facts.snapshot; }
+}

package/renderer/recent-bubble.mjs

@@ -0,0 +1,93 @@
+/** 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, { showSpeaker = true } = {}) {
+    this.rows = rows;
+    this.showSpeaker = showSpeaker;
+    this.history = [];
+    this.live = new Map();
+    this.rowReferences = new WeakMap();
+  }
+  load(messages) {
+    this.history = messages.slice(-2);
+    this.render();
+  }
+  loadTranscript(rows, companionName = '猫猫') {
+    this.load(rows.map(row => ({
+      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' ? '你' : '猫猫', 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),
+      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);
+    this.render();
+  }
+  reset() {
+    this.live.clear();
+    this.render();
+  }
+  clear() {
+    this.history = [];
+    this.live.clear();
+    this.render();
+  }
+  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);
+    for (const [index, row] of this.rows.entries()) {
+      const entry = entries[index];
+      row.hidden = !entry;
+      const speaker = entry && this.showSpeaker ? `${String(entry.name).slice(0, 28)}：` : '';
+      const message = entry ? String(entry.text).slice(-120) : '';
+      row.textContent = `${speaker}${message}`;
+      if (entry && row.ownerDocument?.createElement && typeof row.replaceChildren === 'function') {
+        const speakerNode = row.ownerDocument.createElement('span');
+        const messageNode = row.ownerDocument.createElement('span');
+        const messageText = row.ownerDocument.createElement('bdi');
+        speakerNode.className = 'recent-speaker';
+        speakerNode.hidden = !speaker;
+        messageNode.className = 'recent-message';
+        messageText.className = 'recent-message-text';
+        messageText.dir = 'auto';
+        speakerNode.textContent = speaker;
+        // dir=auto resolves the first strong character. Reversing code points for
+        // this hidden-in-the-same-tick probe therefore resolves the latest strong
+        // character, which is the edge this compact tail projection must retain.
+        messageText.textContent = Array.from(message).reverse().join('');
+        messageNode.append(messageText);
+        row.replaceChildren(speakerNode, messageNode);
+        const direction = row.ownerDocument.defaultView?.getComputedStyle(messageText).direction;
+        messageText.dir = direction === 'rtl' ? 'rtl' : 'ltr';
+        messageText.textContent = message;
+        messageNode.dataset.direction = direction === 'rtl' ? 'rtl' : 'ltr';
+      }
+      row.dataset ??= {};
+      row.dataset.role = entry?.role ?? '';
+      const key = referenceKey(entry?.reference);
+      if (key) this.rowReferences.set(row, key);
+      else this.rowReferences.delete(row);
+    }
+  }
+}