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

package/renderer/living-body.mjs

@@ -0,0 +1,147 @@
+import { isLivingClip, livingClipFor, placeLivingClip } from './living-geometry.mjs';
+export { isLivingClip } from './living-geometry.mjs';
+const setHidden = (node, hidden) => {
+  if (!node) return;
+  node.toggleAttribute?.('hidden', hidden);
+  node.hidden = hidden;
+};
+
+/** One visible body: a layered sit or one muted clip, with a bounded sleep/wake hand-off. */
+export class LivingBody {
+  constructor({ root, sit, video, transitionVideo, setTimer = globalThis.setTimeout, clearTimer = globalThis.clearTimeout }) {
+    this.root = root;
+    this.sit = sit;
+    this.video = video;
+    this.standby = transitionVideo;
+    this.setTimer = (callback, delay) => setTimer.call(globalThis, callback, delay);
+    this.clearTimer = id => clearTimer.call(globalThis, id);
+    this.action = '';
+    this.revision = 0;
+  }
+
+  show(action, { reducedMotion = false, onEnded = () => {} } = {}) {
+    const dockEdge = this.root.dataset.dockEdge;
+    const dockZone = this.root.dataset.dockZone;
+    if (this.action === action && this.reducedMotion === reducedMotion && this.dockEdge === dockEdge && this.dockZone === dockZone) return;
+    const previous = this.action;
+    this.action = action;
+    this.reducedMotion = reducedMotion;
+    this.dockEdge = dockEdge;
+    this.dockZone = dockZone;
+    const revision = ++this.revision;
+    this.cancelFade();
+    this.root.dataset.pose = this.pose(action);
+    this.root.dataset.direction = action === 'running-left' || (action === 'peek' && dockEdge === 'left') ? 'left' : 'right';
+    const clip = !reducedMotion ? livingClipFor(action, dockZone) : null;
+    if (!clip) {
+      this.hideVideos();
+      setHidden(this.sit, false);
+      return;
+    }
+    const crossfade = previous === 'sleeping' && action === 'waking' && this.standby;
+    if (crossfade) this.crossfade(clip, revision, onEnded);
+    else this.showClip(this.video, clip, revision, onEnded);
+  }
+
+  pose(action) {
+    if (action === 'failed') return 'scared';
+    if (action === 'waiting') return 'listening';
+    if (['sleeping', 'pending_decision', 'held', 'working', 'fetching', 'studying'].includes(action))
+      return action === 'pending_decision' ? 'pending' : action;
+    return 'sit';
+  }
+
+  showClip(video, clip, revision, onEnded) {
+    this.retireVideo(this.standby);
+    this.configure(video, clip, revision, onEnded);
+    video.style.opacity = '1';
+    setHidden(this.sit, true);
+    setHidden(video, false);
+    this.play(video, revision, onEnded);
+  }
+
+  crossfade(clip, revision, onEnded) {
+    const outgoing = this.video;
+    const incoming = this.standby;
+    this.configure(incoming, clip, revision, onEnded);
+    incoming.style.transition = `opacity ${clip.crossfadeMs}ms linear`;
+    outgoing.style.transition = `opacity ${clip.crossfadeMs}ms linear`;
+    incoming.style.opacity = '0';
+    outgoing.style.opacity = '1';
+    setHidden(this.sit, true);
+    setHidden(outgoing, false);
+    setHidden(incoming, false);
+    this.play(incoming, revision, onEnded);
+    incoming.style.opacity = '1';
+    outgoing.style.opacity = '0';
+    this.video = incoming;
+    this.standby = outgoing;
+    this.fadeTimer = this.setTimer(() => {
+      this.fadeTimer = undefined;
+      if (revision !== this.revision) return;
+      this.retireVideo(outgoing);
+    }, clip.crossfadeMs);
+  }
+
+  configure(video, clip, revision, onEnded) {
+    video.onended = null;
+    video.pause();
+    video.src = `./skins/xianxian-living/clips/${clip.name}.webm`;
+    video.loop = clip.loop === true;
+    video.playbackRate = clip.rate ?? 1;
+    const placement = placeLivingClip(this.action, clip, this.root.dataset.dockEdge);
+    video.style.width = `${placement.width}px`;
+    video.style.height = `${placement.height}px`;
+    video.style.left = `${placement.left}px`;
+    video.style.top = `${placement.top}px`;
+    video.style.animation = clip.endGround
+      ? `living-wake-anchor ${clip.durationMs}ms linear forwards` : 'none';
+    if (clip.endGround) {
+      video.style.setProperty?.('--living-left-start', `${placement.left}px`);
+      video.style.setProperty?.('--living-top-start', `${placement.top}px`);
+      video.style.setProperty?.('--living-left-end', `${placement.endLeft}px`);
+      video.style.setProperty?.('--living-top-end', `${placement.endTop}px`);
+    }
+    try { video.currentTime = 0; } catch { /* New source is not yet seekable. */ }
+    video.onended = () => { if (revision === this.revision) onEnded(); };
+  }
+
+  play(video, revision, onEnded) {
+    void video.play().catch(() => {
+      if (revision !== this.revision) return;
+      this.hideVideos();
+      setHidden(this.sit, false);
+      onEnded();
+    });
+  }
+
+  hideVideos() {
+    for (const video of [this.video, this.standby]) {
+      this.retireVideo(video);
+    }
+  }
+
+  retireVideo(video) {
+    if (!video) return;
+    video.onended = null;
+    video.pause();
+    setHidden(video, true);
+  }
+
+  cancelFade() {
+    if (this.fadeTimer !== undefined) this.clearTimer(this.fadeTimer);
+    this.fadeTimer = undefined;
+  }
+
+  close() {
+    this.revision++;
+    this.cancelFade();
+    this.hideVideos();
+  }
+
+  hide() {
+    this.close();
+    setHidden(this.sit, true);
+    this.action = '';
+  }
+}

package/renderer/living-edge.mjs

@@ -0,0 +1,16 @@
+/** Observe the Host window's current screen; never select or move a display. */
+export function detectDockedEdge(win, petRect) {
+  const left = win.screen?.availLeft;
+  const width = win.screen?.availWidth;
+  if (![win.screenX, left, width, petRect.left, petRect.width].every(Number.isFinite) || width <= 0) return null;
+  const petLeft = win.screenX + petRect.left;
+  const edge = petLeft - left <= 40 ? 'left'
+    : left + width - petLeft - petRect.width <= 40 ? 'right' : null;
+  if (!edge) return null;
+  const top = win.screen?.availTop;
+  const height = win.screen?.availHeight;
+  const vertical = [win.screenY, top, height, petRect.top, petRect.height];
+  const atBottom = vertical.every(Number.isFinite) && height > 0
+    && top + height - (win.screenY + petRect.top + petRect.height) <= 40;
+  return { edge, zone: atBottom ? 'corner' : 'mid' };
+}

package/renderer/living-geometry.mjs

@@ -0,0 +1,96 @@
+// F317 living Xianxian package v3. All values are reviewed package CSS anchors;
+// every clip uses one stage scale. content bounds are the union of decoded
+// alpha pixels and exist to size the native transparent surface, not to apply
+// per-action "looks right" scaling.
+export const LIVING_GEOMETRY = Object.freeze({
+  pet: Object.freeze({ width: 120, height: 130 }),
+  stage: Object.freeze({ size: 290, centre: 145, ground: 262.5 }),
+  surface: Object.freeze({ left: -32, top: -18, right: 143, bottom: 138 }),
+  sitContent: Object.freeze({ left: 8.8, top: 3.4, right: 94.2, bottom: 109.2 }),
+});
+
+export const LIVING_SCALE = LIVING_GEOMETRY.pet.width / LIVING_GEOMETRY.stage.size;
+export const LIVING_REFERENCE = Object.freeze({
+  centre: LIVING_GEOMETRY.stage.centre * LIVING_SCALE,
+  ground: LIVING_GEOMETRY.stage.ground * LIVING_SCALE,
+});
+
+const clip = (name, size, ground, centre, content, options = {}) => Object.freeze({
+  name, size: Object.freeze(size), ground, centre, content: Object.freeze(content), ...options,
+});
+
+const library = Object.freeze({
+  trot: clip('trot', [265, 236], 234.8, 132.5,
+    { left: 1.5, top: 2, right: 263.5, bottom: 235.5 }, { loop: true }),
+  pounce: clip('pounce', [304.8, 312.6], 303.9, 201.9,
+    { left: 3, top: 0, right: 302, bottom: 312 }, { rate: 1.5 }),
+  sleep: clip('sleep', [271.2, 168], 161, 133.2,
+    { left: 2.5, top: 2.5, right: 268.5, bottom: 166.5 }, { loop: true }),
+  wake: clip('wake', [400.2, 282.7], 244.2, 200.5,
+    { left: 3, top: 3, right: 397, bottom: 280.5 },
+    { endGround: 277.4, endCentre: 197.7, durationMs: 7_250, crossfadeMs: 250 }),
+  peek: clip('peek', [153.5, 234.3], 234.3, 76.75,
+    { left: 2.5, top: 2.5, right: 153, bottom: 234 }, { loop: true }),
+  peek_fade: clip('peek_fade', [153.5, 234.3], 234.3, 76.75,
+    { left: 2.5, top: 2.5, right: 153, bottom: 231.5 }, { loop: true }),
+  carry: clip('carry', [344.3, 290.9], 263, 198.3,
+    { left: 4, top: 4, right: 340, bottom: 288.5 }),
+  wait: clip('wait', [197.9, 252.8], 249.6, 98.4,
+    { left: 4, top: 4, right: 194, bottom: 251 }, { loop: true }),
+  think: clip('think', [266.4, 256.9], 253.7, 132.1,
+    { left: 3.5, top: 3.5, right: 262, bottom: 255 }, { loop: true }),
+});
+
+const actionClip = Object.freeze({
+  'running-left': 'trot',
+  'running-right': 'trot',
+  running: 'trot',
+  play: 'pounce',
+  sleeping: 'sleep',
+  waking: 'wake',
+  peek: 'peek',
+  delivering: 'carry',
+  review: 'carry',
+  pending_decision: 'wait',
+  working: 'think',
+  fetching: 'think',
+  studying: 'think',
+  staged_thought: 'think',
+});
+
+export const isLivingClip = action => Object.hasOwn(actionClip, action);
+
+export function livingClipFor(action, dockZone) {
+  const name = action === 'peek' && dockZone !== 'corner' ? 'peek_fade' : actionClip[action];
+  return name ? library[name] : null;
+}
+
+export function placeLivingClip(action, selected, dockEdge) {
+  const width = selected.size[0] * LIVING_SCALE;
+  const height = selected.size[1] * LIVING_SCALE;
+  const left = action === 'peek'
+    ? (dockEdge === 'left' ? LIVING_GEOMETRY.surface.left : LIVING_GEOMETRY.surface.right - width)
+    : LIVING_REFERENCE.centre - selected.centre * LIVING_SCALE;
+  const top = action === 'peek'
+    ? LIVING_GEOMETRY.surface.bottom - height
+    : LIVING_REFERENCE.ground - selected.ground * LIVING_SCALE;
+  return Object.freeze({
+    left, top, width, height,
+    endLeft: selected.endCentre === undefined
+      ? undefined : LIVING_REFERENCE.centre - selected.endCentre * LIVING_SCALE,
+    endTop: selected.endGround === undefined
+      ? undefined : LIVING_REFERENCE.ground - selected.endGround * LIVING_SCALE,
+  });
+}
+
+export function livingContentRect(selected, placement, endpoint = 'start') {
+  const left = endpoint === 'end' ? placement.endLeft : placement.left;
+  const top = endpoint === 'end' ? placement.endTop : placement.top;
+  if (!Number.isFinite(left) || !Number.isFinite(top)) return null;
+  return Object.freeze({
+    left: left + selected.content.left * LIVING_SCALE,
+    top: top + selected.content.top * LIVING_SCALE,
+    right: left + selected.content.right * LIVING_SCALE,
+    bottom: top + selected.content.bottom * LIVING_SCALE,
+  });
+}

package/renderer/motion-facts.mjs

@@ -0,0 +1,108 @@
+const validId = value => typeof value === 'string' && value.length > 0 && value.length <= 256;
+const validExpiry = (value, now) => Number.isFinite(value) && value > now;
+const workKinds = new Set(['reasoning', 'tool', 'workspace', 'screen_reading']);
+const normalizeTravel = (travel, now, suppressed) => travel && validId(travel.eventId)
+  && travel.status === 'active' && Number.isFinite(travel.dx) && Number.isFinite(travel.dy)
+  && Math.hypot(travel.dx, travel.dy) >= 1 && validExpiry(travel.expiresAt, now)
+  && !suppressed.has(travel.eventId)
+  ? { eventId: travel.eventId, dx: travel.dx, dy: travel.dy, expiresAt: travel.expiresAt } : null;
+
+/** A bounded, expiring projection of Host-owned motion facts. */
+export class MotionFacts {
+  constructor({ now, setTimer, clearTimer, changed }) {
+    this.now = now;
+    this.setTimer = setTimer;
+    this.clearTimer = clearTimer;
+    this.changed = changed;
+    this.snapshot = { work: null, delivery: null, travel: null };
+    this.seenResults = new Map();
+    this.suppressedTravel = new Map();
+  }
+
+  sync(value, suppressTravel = false) {
+    const now = this.now();
+    this.prune(now);
+    const input = value && typeof value === 'object' ? value : {};
+    const work = input.work;
+    const delivery = input.delivery;
+    const travel = input.travel;
+    this.snapshot = {
+      work: work && validId(work.taskId) && work.status === 'active' && workKinds.has(work.kind)
+        && validExpiry(work.expiresAt, now)
+        ? { taskId: work.taskId, kind: work.kind, expiresAt: work.expiresAt } : null,
+      delivery: delivery && validId(delivery.resultId) && delivery.status === 'applied'
+        && validExpiry(delivery.expiresAt, now)
+        ? { resultId: delivery.resultId, expiresAt: delivery.expiresAt } : null,
+      travel: normalizeTravel(travel, now, this.suppressedTravel),
+    };
+    if (suppressTravel) this.suppressTravel();
+    this.scheduleExpiry();
+  }
+
+  syncNative(value) {
+    const now = this.now();
+    this.prune(now);
+    const input = value && typeof value === 'object' ? value : {};
+    const work = input.work;
+    const delivery = input.delivery;
+    const travel = this.snapshot.travel?.expiresAt > now ? this.snapshot.travel : null;
+    this.snapshot = {
+      work: work && validId(work.taskId) && work.status === 'active' && workKinds.has(work.kind)
+        && validExpiry(work.expiresAt, now)
+        ? { taskId: work.taskId, kind: work.kind, expiresAt: work.expiresAt } : null,
+      delivery: delivery && validId(delivery.resultId) && delivery.status === 'applied'
+        && validExpiry(delivery.expiresAt, now)
+        ? { resultId: delivery.resultId, expiresAt: delivery.expiresAt } : null,
+      travel,
+    };
+    this.scheduleExpiry();
+  }
+
+  syncTravel(value, suppressTravel = false) {
+    const now = this.now();
+    this.prune(now);
+    this.snapshot.travel = normalizeTravel(value, now, this.suppressedTravel);
+    if (suppressTravel) this.suppressTravel();
+    this.scheduleExpiry();
+  }
+
+  consumeDelivery() {
+    const delivery = this.snapshot.delivery;
+    if (!delivery || this.seenResults.has(delivery.resultId)) return null;
+    this.seenResults.set(delivery.resultId, this.now() + 3_600_000);
+    return delivery;
+  }
+
+  suppressTravel() {
+    if (!this.snapshot.travel) return;
+    this.suppressedTravel.set(this.snapshot.travel.eventId, this.now() + 3_600_000);
+    this.snapshot.travel = null;
+    this.scheduleExpiry();
+  }
+
+  close() {
+    if (this.timer !== undefined) this.clearTimer(this.timer);
+    this.timer = undefined;
+  }
+
+  scheduleExpiry() {
+    this.close();
+    const expiries = Object.values(this.snapshot).filter(Boolean).map(value => value.expiresAt);
+    if (!expiries.length) return;
+    this.timer = this.setTimer(() => {
+      this.timer = undefined;
+      const now = this.now();
+      for (const key of ['work', 'delivery', 'travel']) {
+        if (this.snapshot[key]?.expiresAt <= now) this.snapshot[key] = null;
+      }
+      this.scheduleExpiry();
+      this.changed();
+    }, Math.max(0, Math.min(...expiries) - this.now()));
+  }
+
+  prune(now) {
+    for (const collection of [this.seenResults, this.suppressedTravel]) {
+      for (const [id, expiresAt] of collection) if (expiresAt <= now) collection.delete(id);
+    }
+  }
+}

package/renderer/native-window-travel.mjs

@@ -0,0 +1,89 @@
+const validPosition = value => value && Number.isFinite(value.x) && Number.isFinite(value.y);
+
+/** Observe the native window itself. Running animation follows measured desktop
+ * movement; renderer state never invents a target or claims a move succeeded. */
+export class NativeWindowTravel {
+  constructor({
+    readPosition,
+    changed,
+    now = Date.now,
+    setTimer = globalThis.setTimeout,
+    clearTimer = globalThis.clearTimeout,
+    intervalMs = 80,
+    expiresMs = 240,
+  }) {
+    this.readPosition = readPosition;
+    this.changed = changed;
+    this.now = now;
+    this.setTimer = (callback, delay) => setTimer.call(globalThis, callback, delay);
+    this.clearTimer = id => clearTimer.call(globalThis, id);
+    this.intervalMs = Math.max(32, intervalMs);
+    this.expiresMs = Math.max(this.intervalMs, expiresMs);
+    this.sequence = 0;
+    this.manual = false;
+    this.closed = false;
+    this.active = null;
+  }
+
+  start() {
+    if (this.closed || this.timer !== undefined) return;
+    this.previous = this.read();
+    this.schedule();
+  }
+
+  setManual(value) {
+    const manual = value === true;
+    if (manual === this.manual) return;
+    this.manual = manual;
+    this.previous = this.read();
+    if (manual) this.clearActive();
+  }
+
+  tick() {
+    this.timer = undefined;
+    if (this.closed) return;
+    const next = this.read();
+    const now = this.now();
+    if (next && this.previous) {
+      const dx = next.x - this.previous.x;
+      const dy = next.y - this.previous.y;
+      if (!this.manual && Math.hypot(dx, dy) >= 1) {
+        const eventId = this.active?.eventId ?? `native-${Math.trunc(now)}-${++this.sequence}`;
+        this.active = { eventId, status: 'active', dx, dy, expiresAt: now + this.expiresMs };
+        this.changed({ ...this.active });
+      } else if (this.active && this.active.expiresAt <= now) {
+        this.clearActive();
+      }
+    }
+    this.previous = next;
+    this.schedule();
+  }
+
+  close() {
+    if (this.closed) return;
+    this.closed = true;
+    if (this.timer !== undefined) this.clearTimer(this.timer);
+    this.timer = undefined;
+    this.clearActive();
+  }
+
+  read() {
+    try {
+      const value = this.readPosition();
+      return validPosition(value) ? { x: value.x, y: value.y } : null;
+    } catch {
+      return null;
+    }
+  }
+
+  schedule() {
+    if (this.closed || this.timer !== undefined) return;
+    this.timer = this.setTimer(() => this.tick(), this.intervalMs);
+  }
+
+  clearActive() {
+    if (!this.active) return;
+    this.active = null;
+    this.changed(null);
+  }
+}

package/renderer/native-work-motion.mjs

@@ -0,0 +1,39 @@
+const priority = { reasoning: 1, tool: 2, workspace_fetch: 3, workspace_dispatch: 4, screen_read: 5 };
+const semantic = {
+  reasoning: 'reasoning',
+  tool: 'tool',
+  workspace_fetch: 'workspace',
+  workspace_dispatch: 'workspace',
+  screen_read: 'screen_reading',
+};
+
+/** Normalize the Host's bounded call snapshot; never infer work from chat text. */
+export function normalizeNativeWork(value, now = Date.now()) {
+  if (!value || typeof value !== 'object' || !Array.isArray(value.active) || !Array.isArray(value.recent)) return null;
+  const active = value.active
+    .filter(entry => entry && semantic[entry.kind] && Number.isFinite(entry.expiresAt) && entry.expiresAt > now)
+    .sort((left, right) => priority[right.kind] - priority[left.kind] || right.startedAt - left.startedAt)[0];
+  const handed = [...value.recent].reverse().find(event => event?.kind === 'result'
+    && event.phase === 'result_handed_to_voice' && typeof event.resultId === 'string'
+    && event.resultId.length > 0 && Number.isFinite(event.expiresAt) && event.expiresAt > now);
+  return {
+    work: active ? { taskId: active.taskId, kind: semantic[active.kind], status: 'active', expiresAt: active.expiresAt } : null,
+    delivery: handed ? { resultId: handed.resultId, status: 'applied', expiresAt: handed.expiresAt } : null,
+    travel: null,
+  };
+}
+
+const workLabels = {
+  reasoning: '正在思考',
+  tool: '正在处理',
+  workspace: '正在处理家里的事务',
+  screen_reading: '正在查看共享画面',
+};
+
+/** Product wording for the same bounded work fact used by body motion. */
+export function nativeWorkLabel(snapshot, nativeActivity = 'none') {
+  const kind = snapshot
+    ? snapshot.work?.kind
+    : nativeActivity === 'reasoning' ? 'reasoning' : nativeActivity === 'tool_running' ? 'tool' : null;
+  return workLabels[kind] ?? '';
+}

package/renderer/peer.mjs

@@ -10,7 +10,7 @@ export class VoicePeer {
       }
     });
   }
-  async connect() { if (!this.closed) await this.client.connectAudio(); }
+  async connect(mode) { if (!this.closed) await this.client.connectAudio(mode); }
   muteMic(muted) { void this.client.muteMicrophone(muted).catch(() => this.failed()); }
   muteSpeaker(muted) { void this.client.muteSpeaker(muted).catch(() => this.failed()); }
   failed() { if (!this.closed) this.onEvent({ type: 'error', code: 'unavailable' }); }

package/renderer/pet-controls.mjs

@@ -0,0 +1,130 @@
+/** Transient controls. The Host owns native placement, movement and hiding. */
+export function bindPetControls(client, { action, error, changed, moved = () => {} }) {
+  const $ = id => document.getElementById(id);
+  const body = $('pet');
+  const panelIds = ['actions', 'menu', 'chat', 'bubble', 'decisions', 'transcript', 'settings'];
+  const desiredSizes = new WeakMap();
+  let panel = 'none', ambientPanel = 'none', layoutRevision = 0, layoutScheduled = false, drag, suppressClick = false;
+  const measure = node => {
+    if (!node) return { width: 120, height: 130 };
+    // Host placement is an applied cap, not the panel's desired geometry.
+    // Release it synchronously while measuring so CSS height and nested flex
+    // overflow can expose their natural demand, then restore it before paint.
+    const appliedMaxHeight = node.style.maxHeight;
+    node.style.maxHeight = '';
+    const desired = {
+      width: Math.min(420, Math.max(120, Math.ceil(Math.max(node.offsetWidth, node.scrollWidth)))),
+      height: Math.min(500, Math.max(32, Math.ceil(Math.max(node.offsetHeight, node.scrollHeight)))),
+    };
+    node.style.maxHeight = appliedMaxHeight;
+    return desired;
+  };
+  async function show(next) {
+    if (next === 'none' && ambientPanel !== 'none') next = ambientPanel;
+    const previousPanel = panel;
+    const node = $(next);
+    panel = next;
+    for (const id of panelIds) $(id).hidden = id !== next;
+    body.setAttribute('aria-expanded', String(!['none', 'bubble'].includes(next)));
+    const desired = measure(node);
+    if (node) desiredSizes.set(node, `${desired.width}:${desired.height}`);
+    const revision = ++layoutRevision;
+    try {
+      const placed = await client.layout(next, desired.width, desired.height);
+      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 (previousPanel !== next) {
+        if (next === 'chat') $('message').focus({ preventScroll: true });
+        if (next === 'transcript') $('call-message').focus({ preventScroll: true });
+        if (next === 'settings') $('settings-back').focus({ preventScroll: true });
+        if (next === 'decisions') $('decision-reload').focus({ preventScroll: true });
+        if (next === 'menu') $('menu').querySelector('button').focus({ preventScroll: true });
+        changed(next);
+      }
+    } catch (cause) {
+      if (revision !== layoutRevision) return;
+      panel = previousPanel;
+      for (const id of panelIds) $(id).hidden = id !== panel;
+      body.setAttribute('aria-expanded', String(!['none', 'bubble'].includes(panel)));
+      error(cause, { panel: next });
+    }
+  }
+  function remeasure() {
+    if (layoutScheduled) return;
+    layoutScheduled = true;
+    queueMicrotask(() => {
+      layoutScheduled = false;
+      const node = $(panel);
+      if (!node || node.hidden) return;
+      const desired = measure(node);
+      const key = `${desired.width}:${desired.height}`;
+      if (desiredSizes.get(node) === key) return;
+      void show(panel);
+    });
+  }
+  body.onclick = event => {
+    if (suppressClick) { suppressClick = false; return; }
+    if (event.detail > 1) return;
+    void show(panel === 'menu' ? 'none' : 'menu');
+  };
+  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;
+    const current = { id: event.pointerId, x: event.screenX, y: event.screenY, armed: false };
+    drag = current;
+    body.setPointerCapture(event.pointerId);
+    void client.drag('start').then(() => { if (drag === current) current.armed = true; }).catch(error);
+  };
+  body.onpointermove = event => {
+    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; moved('stop'); 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 === 'transcript') { void show('transcript'); return; }
+    if (kind === 'settings') { void show('settings'); return; }
+    if (kind === 'decisions') { void show('decisions'); return; }
+    if (kind === 'dismiss') { void show('none'); return; }
+    action(kind);
+  });
+  const observer = new MutationObserver(records => {
+    const current = $(panel);
+    if (!current || current.hidden) return;
+    // Root visibility is already handled by show(). Descendant visibility and
+    // text/row mutations are content demand and may require a larger surface.
+    if (records.some(record => record.type !== 'attributes' || !panelIds.includes(record.target.id))) remeasure();
+  });
+  for (const id of panelIds) observer.observe($(id), {
+    subtree: true, childList: true, characterData: true, attributes: true, attributeFilter: ['hidden'],
+  });
+  window.addEventListener('beforeunload', () => observer.disconnect());
+  return {
+    get panel() { return panel; }, show, remeasure,
+    setAmbient(value) {
+      const next = value === true ? 'bubble' : value === false ? 'none' : value;
+      if (!['none', 'bubble', 'actions'].includes(next)) return Promise.resolve();
+      if (ambientPanel === next) return Promise.resolve();
+      ambientPanel = next;
+      return ['none', 'bubble', 'actions'].includes(panel) ? show('none') : Promise.resolve();
+    },
+    dismiss() { if (drag) suppressClick = true; void show('none'); },
+  };
+}

package/renderer/pet-motion-assets.mjs

@@ -0,0 +1,22 @@
+// F229 pet.json frame durations, plus the three F258 rows pinned in source-lock.json.
+export 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] },
+};
+export 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] },
+};
+export const visualAlias = { fetching: 'working', studying: 'staged_thought', delivering: 'review', held: 'idle' };
+export const workAction = { reasoning: 'staged_thought', tool: 'working', workspace: 'fetching', screen_reading: 'studying' };
+export const signals = { connected: 'waving', received: 'jumping', failed: 'failed' };
+export const staticSkins = { 'ragdoll-v1': 'ragdoll-v1.png', 'yarn-ball': 'yarn-ball.png' };
+export const validId = value => typeof value === 'string' && value.length > 0 && value.length <= 256;