@agentprojectcontext/apx 1.81.0 → 1.89.1

package/src/interfaces/desktop/mascot-preload.js

@@ -0,0 +1,32 @@
+// Preload for the mascot (blob) window — a tiny, separate surface from the
+// main voice HUD. Exposes only what the pet needs: its blob preset + name,
+// window-drag helpers, click-through toggling, and a stream of notifications.
+"use strict";
+const { contextBridge, ipcRenderer } = require("electron");
+
+contextBridge.exposeInMainWorld("mascot", {
+  // First paint — which blob to wear, the agent's name, the resolved theme.
+  getConfig: () => ipcRenderer.invoke("mascot-get-config"),
+
+  // Free-drag support: renderer computes a grab offset from the live bounds,
+  // then streams absolute screen positions while the pointer moves.
+  getBounds: () => ipcRenderer.invoke("mascot-get-bounds"),
+  setPos: (x, y) => ipcRenderer.send("mascot-set-pos", { x, y }),
+  savePos: () => ipcRenderer.send("mascot-save-pos"),
+
+  // Click on the blob (no drag) toggles the voice HUD.
+  poke: () => ipcRenderer.invoke("mascot-poke"),
+
+  // Right-click on the blob opens a native context menu (built in main).
+  menu: () => ipcRenderer.invoke("mascot-menu"),
+
+  // Click-through: ignore the mouse over transparent pixels, re-enable it over
+  // the blob/bubble so they stay draggable and clickable.
+  setIgnore: (ignore) => ipcRenderer.send("mascot-set-ignore", { ignore }),
+
+  // Notifications relayed from the cross-channel event feed in main.
+  onNotify: (fn) => ipcRenderer.on("mascot-notify", (_e, msg) => fn(msg)),
+
+  // Avatar updates use the same authenticated event feed as notifications.
+  onAvatar: (fn) => ipcRenderer.on("mascot-avatar", (_e, key) => fn(key)),
+});

package/src/interfaces/desktop/mascot.css

@@ -0,0 +1,186 @@
+/* Mascot (blob) window — a transparent, always-on-top desktop pet.
+   The window itself is click-through (see main.js setIgnoreMouseEvents); only
+   the blob and the bubble opt back in to receiving the mouse. */
+
+:root {
+  --blob-size: 116px;      /* the walkable body */
+  --bubble-bg: rgba(20, 24, 28, 0.92);
+  --bubble-fg: #f4f7f5;
+  --bubble-ring: rgba(58, 231, 176, 0.35);   /* APX emerald */
+}
+
+* { box-sizing: border-box; }
+
+html, body {
+  margin: 0;
+  height: 100%;
+  background: transparent;   /* never paint the window ground */
+  overflow: hidden;
+  -webkit-user-select: none;
+  user-select: none;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+}
+
+/* The blob lives bottom-centre; the bubble stacks above it. */
+#stage {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 8px 10px 6px;
+  pointer-events: none;   /* transparent gutter stays click-through */
+}
+
+/* ── Blob ─────────────────────────────────────────────────────────────── */
+/* Outer element = the "walk": a gentle left↔right patrol in place. The inner
+   .blobav-anim keeps the original bob/tilt; the SVG keeps look + blink. The
+   three transforms sit on separate elements so they never fight.
+   NB: NO horizontal flip — the blob bodies have a fixed "front" (the little
+   light highlights). Mirroring them makes the pet look like it walks backwards,
+   so the patrol only translates; the body art always faces the same way. */
+#blob {
+  position: relative;
+  width: var(--blob-size);
+  height: var(--blob-size);
+  pointer-events: auto;      /* draggable + clickable */
+  cursor: grab;
+  animation: blob-walk 6.5s ease-in-out infinite;
+}
+#blob.dragging { cursor: grabbing; animation-play-state: paused; }
+#blob:active { cursor: grabbing; }
+
+@keyframes blob-walk {
+  0%   { transform: translateX(-13px); }
+  50%  { transform: translateX(13px); }
+  100% { transform: translateX(-13px); }
+}
+
+/* Ground shadow — a soft ellipse pinned to the floor. It follows the blob
+   sideways (it's a child of #blob) but never rises with it, and shrinks +
+   fades while the blob is lifted, selling the height. */
+.blob-shadow {
+  position: absolute;
+  left: 50%;
+  bottom: 4px;
+  width: 62%;
+  height: 15px;
+  transform: translateX(-50%);
+  transform-origin: center;
+  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.40) 0%, rgba(0, 0, 0, 0) 70%);
+  pointer-events: none;
+  transition: transform 0.34s cubic-bezier(0.34, 1.3, 0.64, 1), opacity 0.34s ease;
+}
+#blob.dragging .blob-shadow {
+  transform: translateX(-50%) scale(0.7);
+  opacity: 0.5;
+}
+
+/* Lift wrapper — while dragging the body rises off the floor and tilts ~15°;
+   on release it settles back with a little bounce, so it "falls" into place. */
+.blob-lift {
+  width: 100%;
+  height: 100%;
+  transform-origin: 50% 90%;
+  transition: transform 0.34s cubic-bezier(0.34, 1.4, 0.64, 1);
+}
+#blob.dragging .blob-lift {
+  transform: translateY(-20px) rotate(15deg);
+  transition: transform 0.16s ease-out;   /* snappy pick-up, bouncy drop */
+}
+
+/* ── Ported blob avatar (from web styles.css .blobav*) ────────────────── */
+.blobav { position: relative; display: inline-block; width: 100%; height: 100%; }
+.blobav-body {
+  display: block; width: 100%; height: 100%; object-fit: contain;
+  -webkit-user-select: none; user-select: none; -webkit-user-drag: none;
+  pointer-events: none;
+}
+.blobav-eyes-svg {
+  position: absolute; inset: 0; width: 100%; height: 100%;
+  overflow: visible; pointer-events: none;
+}
+.blobav-anim {
+  animation: blobav-float 5s ease-in-out infinite;
+  transform-origin: 50% 100%; will-change: transform;
+}
+.blobav-anim .blobav-look {
+  transform-box: fill-box; transform-origin: center;
+  /* Same 6.5s period as the walk so the gaze stays in phase with the stride. */
+  animation: blobav-look 6.5s ease-in-out infinite;
+}
+.blobav-anim .blobav-eyes {
+  transform-box: fill-box; transform-origin: center;
+  animation: blobav-blink 5.4s ease-in-out infinite;
+}
+@keyframes blobav-float {
+  0%   { transform: translateY(0) rotate(-3deg); }
+  50%  { transform: translateY(-6%) rotate(3deg); }
+  100% { transform: translateY(0) rotate(-3deg); }
+}
+/* The base eye positions already sit forward (see blobPresets), so Roby glances
+   both ways from there — a to-and-fro "look around": forward to the right, then
+   back the other way. Resting gaze nudged ~5px toward centre, forward peak a
+   touch softer, so nothing clips the face. */
+@keyframes blobav-look {
+  0%,12%  { transform: translateX(-5px); }
+  38%     { transform: translateX(13px); }   /* glance forward (right) */
+  62%     { transform: translateX(-5px); }
+  84%     { transform: translateX(-14px); }  /* and back the other way */
+  100%    { transform: translateX(-5px); }
+}
+@keyframes blobav-blink {
+  0%,93%,100% { transform: scaleY(1); }
+  96.5%       { transform: scaleY(.08); }
+}
+
+/* A quick, delighted hop when poked / when a message lands. */
+#blob.react { animation: blob-hop 0.5s ease-out; }
+@keyframes blob-hop {
+  0%   { transform: translateY(0); }
+  35%  { transform: translateY(-16px); }
+  60%  { transform: translateY(0); }
+  75%  { transform: translateY(-6px); }
+  100% { transform: translateY(0); }
+}
+
+/* ── Notification bubble ──────────────────────────────────────────────── */
+.bubble {
+  pointer-events: auto;
+  max-width: 210px;
+  margin-bottom: 6px;
+  padding: 9px 12px;
+  border-radius: 14px;
+  background: var(--bubble-bg);
+  color: var(--bubble-fg);
+  /* Soft drop shadow + a diffuse emerald glow (NOT a hard 1px ring — that drew
+     a line across the tail and looked broken). The glow has no edge to seam. */
+  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.34), 0 0 14px rgba(58, 231, 176, 0.22);
+  font-size: 12.5px;
+  line-height: 1.35;
+  letter-spacing: 0.1px;
+  position: relative;
+  opacity: 0;
+  transform: translateY(6px) scale(0.96);
+  transition: opacity 0.18s ease, transform 0.18s ease;
+  word-break: break-word;
+  cursor: pointer;
+}
+.bubble.show { opacity: 1; transform: translateY(0) scale(1); }
+.bubble-tail {
+  position: absolute;
+  left: 50%;
+  bottom: -8px;
+  margin-left: -8px;
+  width: 0; height: 0;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  border-top: 9px solid var(--bubble-bg);   /* clean downward point, no seam */
+}
+
+@media (prefers-reduced-motion: reduce) {
+  #blob, .blobav-anim, .blobav-anim .blobav-look, .blobav-anim .blobav-eyes {
+    animation: none !important;
+  }
+}

package/src/interfaces/desktop/mascot.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="Content-Security-Policy"
+        content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:;">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>APX Mascota</title>
+  <link rel="stylesheet" href="mascot.css">
+</head>
+<body>
+  <!-- Bubble grows upward from the blob; the blob is anchored bottom-centre. -->
+  <div id="stage">
+    <div id="bubble" class="bubble" hidden>
+      <span id="bubble-text"></span>
+      <span class="bubble-tail"></span>
+    </div>
+
+    <div id="blob" title="APX">
+      <!-- Ground shadow: stays on the floor, follows sideways, shrinks when the
+           blob is lifted. NOT inside .blob-lift so it doesn't rise with it. -->
+      <div class="blob-shadow"></div>
+      <!-- Lift wrapper: raises + tilts the body while dragging, drops on release. -->
+      <div class="blob-lift">
+        <span class="blobav blobav-anim">
+          <img id="blob-body" class="blobav-body" alt="" draggable="false">
+          <svg id="blob-eyes" class="blobav-eyes-svg" viewBox="0 0 256 256" aria-hidden="true">
+            <g class="blobav-look">
+              <g id="blob-eyes-g" class="blobav-eyes"></g>
+            </g>
+          </svg>
+        </span>
+      </div>
+    </div>
+  </div>
+
+  <script src="mascot-blobs.js"></script>
+  <script src="mascot.js"></script>
+</body>
+</html>

package/src/interfaces/desktop/mascot.js

@@ -0,0 +1,163 @@
+// Mascot (blob) window renderer. Vanilla JS — the desktop app is not React.
+// Draws the chosen blob avatar, lets the user drag it anywhere, hops on poke,
+// and floats notification bubbles pushed from the daemon relay in main.js.
+"use strict";
+
+/* global BLOB_PRESETS, BLOB_VIEWBOX */
+
+const blobEl = document.getElementById("blob");
+const bodyEl = document.getElementById("blob-body");
+const eyesG  = document.getElementById("blob-eyes-g");
+const eyesSvg = document.getElementById("blob-eyes");
+const bubbleEl = document.getElementById("bubble");
+const bubbleText = document.getElementById("bubble-text");
+
+// ── Paint the blob from its preset ─────────────────────────────────────────
+function paintBlob(key) {
+  const p = BLOB_PRESETS[key] || BLOB_PRESETS.noche || Object.values(BLOB_PRESETS)[0];
+  if (!p) return;
+  bodyEl.src = p.src;
+  eyesSvg.setAttribute("viewBox", `0 0 ${BLOB_VIEWBOX} ${BLOB_VIEWBOX}`);
+  eyesG.innerHTML = "";
+  for (const e of p.eyes || []) {
+    const r = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+    r.setAttribute("x", e.x); r.setAttribute("y", e.y);
+    r.setAttribute("width", e.w); r.setAttribute("height", e.h);
+    r.setAttribute("rx", e.rx); r.setAttribute("fill", p.eyeColor);
+    eyesG.appendChild(r);
+  }
+}
+
+(async function init() {
+  let cfg = {};
+  try { cfg = (await window.mascot.getConfig()) || {}; } catch {}
+  paintBlob(cfg.blob || "noche");
+  if (cfg.name) blobEl.title = cfg.name;
+})();
+
+window.mascot.onAvatar((key) => paintBlob(key));
+
+// ── Click-through management ────────────────────────────────────────────────
+// The window ignores the mouse over transparent pixels (main forwards move
+// events). We re-enable it only while the pointer is over the blob or bubble,
+// so the rest of the desktop stays fully usable underneath.
+let ignoring = true;
+function setIgnore(next) {
+  if (next === ignoring) return;
+  ignoring = next;
+  window.mascot.setIgnore(next);
+}
+function overInteractive(x, y) {
+  for (const el of [blobEl, bubbleEl.hidden ? null : bubbleEl]) {
+    if (!el) continue;
+    const r = el.getBoundingClientRect();
+    if (x >= r.left && x <= r.right && y >= r.top && y <= r.bottom) return true;
+  }
+  return false;
+}
+window.addEventListener("mousemove", (e) => {
+  if (dragging) return; // stay interactive throughout a drag
+  setIgnore(!overInteractive(e.clientX, e.clientY));
+});
+
+// ── Drag anywhere + click-to-poke ───────────────────────────────────────────
+let dragging = false;
+let moved = false;
+let grabDX = 0, grabDY = 0;
+
+blobEl.addEventListener("pointerdown", async (e) => {
+  if (e.button !== 0) return;
+  e.preventDefault();
+  let b;
+  try { b = await window.mascot.getBounds(); } catch { return; }
+  grabDX = e.screenX - b.x;
+  grabDY = e.screenY - b.y;
+  dragging = true;
+  moved = false;
+  blobEl.classList.add("dragging");
+  try { blobEl.setPointerCapture(e.pointerId); } catch {}
+});
+
+blobEl.addEventListener("pointermove", (e) => {
+  if (!dragging) return;
+  const nx = Math.round(e.screenX - grabDX);
+  const ny = Math.round(e.screenY - grabDY);
+  window.mascot.setPos(nx, ny);
+  if (!moved && (Math.abs(e.movementX) > 1 || Math.abs(e.movementY) > 1)) moved = true;
+});
+
+function endDrag(e) {
+  if (!dragging) return;
+  dragging = false;
+  blobEl.classList.remove("dragging");
+  try { blobEl.releasePointerCapture(e.pointerId); } catch {}
+  if (moved) {
+    window.mascot.savePos();
+  } else {
+    // A clean click (no drag) toggles the voice HUD, with a happy hop.
+    hop();
+    window.mascot.poke();
+  }
+}
+blobEl.addEventListener("pointerup", endDrag);
+blobEl.addEventListener("pointercancel", endDrag);
+
+// Right-click → native context menu (open web chat, toggle voice, etc.).
+blobEl.addEventListener("contextmenu", (e) => {
+  e.preventDefault();
+  window.mascot.menu();
+});
+
+function hop() {
+  blobEl.classList.remove("react");
+  void blobEl.offsetWidth; // restart the animation
+  blobEl.classList.add("react");
+  setTimeout(() => blobEl.classList.remove("react"), 520);
+}
+
+// ── Notifications ───────────────────────────────────────────────────────────
+const queue = [];
+const notificationSound = new Audio("./assets/notification.mp3");
+notificationSound.preload = "auto";
+let showing = false;
+let hideTimer = null;
+
+function bubbleDuration(text) {
+  return Math.min(9000, Math.max(3500, 1500 + text.length * 45));
+}
+
+function pump() {
+  if (showing || queue.length === 0) return;
+  const msg = queue.shift();
+  showing = true;
+  bubbleText.textContent = msg.text;
+  bubbleEl.hidden = false;
+  if (msg.sound !== false) {
+    notificationSound.currentTime = 0;
+    void notificationSound.play().catch(() => {});
+  }
+  void bubbleEl.offsetWidth;
+  bubbleEl.classList.add("show");
+  hop();
+  clearTimeout(hideTimer);
+  hideTimer = setTimeout(dismiss, bubbleDuration(msg.text));
+}
+
+function dismiss() {
+  clearTimeout(hideTimer);
+  bubbleEl.classList.remove("show");
+  setTimeout(() => {
+    bubbleEl.hidden = true;
+    showing = false;
+    pump();
+  }, 200);
+}
+
+bubbleEl.addEventListener("click", dismiss);
+
+window.mascot.onNotify((msg) => {
+  const text = (msg && (msg.text || msg.message || "")).toString().trim();
+  if (!text) return;
+  queue.push({ text, sound: msg.sound !== false });
+  pump();
+});

package/src/interfaces/desktop/preload.js

@@ -22,6 +22,9 @@ contextBridge.exposeInMainWorld("apx", {
   // while the window is open / on mic-open so the first decode isn't cold.
   warmupStt: () => ipcRenderer.invoke("warmup-stt").catch(() => ({ ok: false })),
 
+  // Keep the voice engine warm too — same reason, other end of the turn.
+  warmupTts: () => ipcRenderer.invoke("warmup-tts").catch(() => ({ ok: false })),
+
   // Send final text to daemon
   sendMessage: (text, previousMessages) =>
     ipcRenderer.invoke("send-message", { text, previousMessages }),
@@ -34,6 +37,13 @@ contextBridge.exposeInMainWorld("apx", {
     return true; // optimistic; renderer waits for the event either way
   },
 
+  // Start synthesizing a sentence before the turn that will ask for it has
+  // finished streaming. Fire-and-forget: requestTts picks the audio up if it
+  // asks for that exact sentence, and nothing breaks if it doesn't.
+  prewarmTts: (text) => {
+    ipcRenderer.invoke("prewarm-tts", { text }).catch(() => {});
+  },
+
   // Daemon events (tokens, tools, done, error, tts-ready/failed)
   onDaemonEvent:        (fn) => ipcRenderer.on("daemon-event", (_e, msg) => fn(msg)),
   onDaemonConnected:    (fn) => ipcRenderer.on("daemon-connected",    fn),