@clowder-ai/companion 0.1.0-alpha.1 → 0.1.0-alpha.11

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,79 @@
+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']);
+
+/** 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: 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) && !this.suppressedTravel.has(travel.eventId)
+        ? { eventId: travel.eventId, dx: travel.dx, dy: travel.dy, expiresAt: travel.expiresAt } : null,
+    };
+    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-work-motion.mjs

@@ -0,0 +1,24 @@
+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,
+  };
+}

package/renderer/pet-controls.mjs

@@ -0,0 +1,84 @@
+/** 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');
+  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', 'bubble', 'decisions']) $(id).hidden = id !== next;
+    body.setAttribute('aria-expanded', String(!['none', 'bubble'].includes(next)));
+    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 === 'decisions') $('decision-reload').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;
+    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 === 'decisions') { void show('decisions'); 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', 'bubble', 'decisions']) observer.observe($(id));
+  window.addEventListener('beforeunload', () => observer.disconnect());
+  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'); },
+  };
+}