@hayasaka7/haya-pet 0.3.12 → 0.3.14

package/CHANGELOG.md

@@ -7,6 +7,32 @@ All notable changes to HAYA Pet are documented here. This project adheres to
 > 0.2.0 npm publish; they are listed under 0.2.1, which is the first version that
 > ships them.
 
+## [0.3.14]
+
+### Changed
+- **The session-bubble folder now opens and closes with a smooth animation.**
+  Folding or unfolding the bubbles used to pop them in and out instantly; the
+  panel now grows out of (and shrinks back into) the folder button's corner with
+  a light scale-and-fade — a macOS-popover feel. The transform-origin follows the
+  panel's open direction and alignment, so it always springs from whichever corner
+  sits against the button. The animation is GPU-composited (transform + opacity
+  only, no reflow), so the folder button and the placement math stay put; the list
+  also **stays mounted while collapsed**, which preserves both the scroll position
+  and the live status spinner across a toggle, and it drops out of hit-testing once
+  hidden so the pixel-precise click-through overlay still ignores it. A
+  reduced-motion preference (`prefers-reduced-motion`) snaps the panel open/closed
+  instead of animating.
+
+## [0.3.13]
+
+### Added
+- **Right-clicking the pet now opens the tray menu.** A right-click used to behave
+  like a left-click (wave + fold/unfold the bubbles). It now pops up the same
+  menu as the system-tray icon — Show/Hide Pet, Active Sessions, Installed Pets,
+  Reset Position, update, Quit — which is far more discoverable than the tray icon
+  (often hidden in the Windows overflow). The menu is built from the one pure tray
+  model, so both entry points always match. Left-click behaviour is unchanged.
+
 ## [0.3.12]
 
 ### Fixed

package/README.md

@@ -220,6 +220,7 @@ non-observe mode keeps terminal input native.
 |---|---|
 | Single click | Wave and fold or unfold session bubbles. |
 | Double click | Jump and expand session bubbles. |
+| Right click | Open the same menu as the tray icon (sessions, pets, reset, updates, quit). |
 | Drag | Move the pet; position is saved. |
 | Drag corner grip | Resize from 0.5x to 2x; size is saved. |
 | Double-click grip | Reset to normal size. |

package/apps/companion/src/main/index.js

@@ -291,17 +291,15 @@ function loadTrayIcon() {
   return fileIcon.isEmpty() ? nativeImage.createFromDataURL(TRAY_ICON_DATA_URL) : fileIcon;
 }
 
-function refreshTrayMenu() {
-  if (!tray) {
-    return;
-  }
-
+// Builds the native menu template from the pure tray model. Shared by the tray
+// icon and the pet's right-click context menu so both stay identical.
+function buildTrayMenuTemplate() {
   const sessions = (runtime?.listSessions() ?? []).map((session) => ({
     sessionId: session.sessionId,
     label: `${session.clientDisplayName} · ${session.projectName}`
   }));
 
-  const template = buildTrayMenu({
+  return buildTrayMenu({
     petVisible: petWindow?.isVisible() ?? true,
     displayMode: positionState.settings.displayMode,
     attachBubblesToTerminals: positionState.settings.attachBubblesToTerminals,
@@ -310,8 +308,14 @@ function refreshTrayMenu() {
     pets: pets.map((pet) => ({ id: pet.manifest.id, name: pet.manifest.name })),
     updateAvailable
   }).map(toElectronMenuItem);
+}
+
+function refreshTrayMenu() {
+  if (!tray) {
+    return;
+  }
 
-  tray.setContextMenu(Menu.buildFromTemplate(template));
+  tray.setContextMenu(Menu.buildFromTemplate(buildTrayMenuTemplate()));
 }
 
 function toElectronMenuItem(item) {
@@ -425,6 +429,16 @@ function registerRendererHandlers() {
     }
   });
 
+  // Right-click on the pet pops up the same menu as the tray icon (built from
+  // the one pure tray model), since the tray icon is often buried in the Windows
+  // overflow. Fire-and-forget: the native menu is shown and dispatched in main.
+  ipcMain.on("haya-pet:show-pet-menu", () => {
+    if (!petWindow || petWindow.isDestroyed()) {
+      return;
+    }
+    Menu.buildFromTemplate(buildTrayMenuTemplate()).popup({ window: petWindow });
+  });
+
   // The pet moves within the overlay (CSS), so the renderer reports its new
   // work-area-relative position instead of moving the window.
   ipcMain.handle("haya-pet:save-pet-position", async (_event, local) => {

package/apps/companion/src/main/preload.cjs

@@ -7,6 +7,7 @@ contextBridge.exposeInMainWorld("aiPet", {
   savePetPosition: (local) => ipcRenderer.invoke("haya-pet:save-pet-position", local),
   savePetScale: (scale) => ipcRenderer.invoke("haya-pet:save-pet-scale", scale),
   setMouseIgnore: (ignore) => ipcRenderer.send("haya-pet:set-mouse-ignore", ignore),
+  showPetMenu: () => ipcRenderer.send("haya-pet:show-pet-menu"),
   onConfig: (handler) => ipcRenderer.on("haya-pet:config", (_event, config) => handler(config)),
   onSessions: (handler) => ipcRenderer.on("haya-pet:sessions", (_event, payload) => handler(payload)),
   onPetPosition: (handler) => ipcRenderer.on("haya-pet:pet-position", (_event, pos) => handler(pos)),

package/apps/companion/src/renderer/pet-window.js

@@ -192,6 +192,11 @@ function playOneShot(action) {
 // --- Pointer interaction (click vs drag distinction lives in the controller) ---
 
 canvas.addEventListener("pointerdown", (event) => {
+  // Only the primary button drives click/drag; right-click pops the context menu
+  // (handled below) and must not also fire a wave/toggle or start a drag.
+  if (event.button !== 0) {
+    return;
+  }
   canvas.setPointerCapture(event.pointerId);
   // Hold click-through off for the whole press: a drag swaps to the running
   // frames, whose opaque pixels differ from the grabbed one, so re-running the
@@ -211,6 +216,11 @@ canvas.addEventListener("pointermove", (event) => {
 });
 
 canvas.addEventListener("pointerup", (event) => {
+  // Mirror pointerdown: ignore non-primary releases so a right-click never feeds
+  // the click controller (its pointerDown was skipped anyway).
+  if (event.button !== 0) {
+    return;
+  }
   // Click / double-click are delivered asynchronously via onAction; only the
   // synchronous drag-end is handled here.
   petPressed = false;
@@ -227,6 +237,15 @@ canvas.addEventListener("pointercancel", () => {
   animationState = clearDragAction(animationState);
 });
 
+// Right-click the pet to open the same menu as the tray icon. The native menu is
+// built and shown in the main process; preventDefault stops Electron's default
+// context menu. Only fires over opaque pet pixels (transparent areas are
+// click-through and the right-click falls to the desktop, like a left-click).
+canvas.addEventListener("contextmenu", (event) => {
+  event.preventDefault();
+  bridge?.showPetMenu?.();
+});
+
 // --- Resize grip: drag to scale the pet, double-click to reset ---
 
 let resizeDrag; // { startScale, startPointer } while a grip drag is active

package/apps/companion/src/renderer/session-bubbles.js

@@ -56,26 +56,23 @@ export function createBubbleList(container, { collapsed = false, onRender } = {}
     }
     updateFolderButton(folderButtonEl, lastBubbles, isCollapsed);
 
-    if (isCollapsed) {
-      // Drop the list while collapsed; it's rebuilt (with restored scroll) on
-      // the next expand. Collapse/expand is an explicit user action, so losing
-      // an in-progress scroll gesture there is fine.
-      if (listEl) {
-        listEl.remove();
-        listEl = undefined;
-      }
-    } else {
-      if (!listEl) {
-        // The list itself must be pointer-active (not just the bubbles): with
-        // more than three sessions it scrolls, and the scrollbar + the gaps
-        // between bubbles belong to the list element — if it stayed
-        // click-through, wheel/drag there would fall through to the desktop.
-        listEl = document.createElement("div");
-        listEl.className = "bubble-list interactive";
-        container.appendChild(listEl);
-      }
-      reconcileBubbles(listEl, lastBubbles);
+    // The list stays mounted whether open or collapsed so the collapse can
+    // animate out (a macOS-popover shrink+fade, see styles.css) instead of
+    // vanishing; this also preserves the scroll position and the spinner across
+    // a toggle. The `collapsed` class drives the transition and, once faded,
+    // drops the list from hit-testing (pointer-events + visibility), so the
+    // click-through overlay ignores it — hence it also sheds the `interactive`
+    // marker while collapsed.
+    if (!listEl) {
+      // The list itself must be pointer-active (not just the bubbles): with more
+      // than three sessions it scrolls, and the scrollbar + the gaps between
+      // bubbles belong to the list element — if it stayed click-through, wheel/
+      // drag there would fall through to the desktop.
+      listEl = document.createElement("div");
+      container.appendChild(listEl);
     }
+    reconcileBubbles(listEl, lastBubbles);
+    listEl.className = isCollapsed ? "bubble-list collapsed" : "bubble-list interactive";
 
     // Let the host reposition the panel now that its size is known. This must
     // happen BEFORE the scroll restore below: the host's placement pass is what
@@ -84,7 +81,9 @@ export function createBubbleList(container, { collapsed = false, onRender } = {}
     // scrollTop assigned to it would clamp back to 0.
     onRender?.();
 
-    if (listEl) {
+    // Restoring scroll only matters while the list is visible; a collapsed list
+    // keeps the scrollTop it had, so it reopens exactly where the user left it.
+    if (!isCollapsed) {
       applyListScroll(listEl, scrollTargetSessionId, lastScrollTop);
       lastScrollTop = listEl.scrollTop;
     }

package/apps/companion/src/renderer/styles.css

@@ -150,6 +150,25 @@ body {
   max-width: 300px;
   overflow-y: auto;
   pointer-events: auto;
+  /* Open/close grows out of the folder-button corner (transform-origin set per
+     open direction below), macOS-popover style. transform + opacity are
+     GPU-composited and don't reflow, so the button and placement math stay put. */
+  transform-origin: top left;
+  opacity: 1;
+  transform: scale(1);
+  transition: opacity 0.16s ease, transform 0.2s cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+/* Collapsed: shrink toward the anchor corner and fade out, then drop out of
+   hit-testing (visibility + pointer-events) once the fade finishes so the
+   click-through overlay ignores it. Re-expanding reverses this instantly. */
+.bubble-list.collapsed {
+  opacity: 0;
+  transform: scale(0.9);
+  pointer-events: none;
+  visibility: hidden;
+  transition: opacity 0.16s ease, transform 0.18s cubic-bezier(0.32, 0.72, 0, 1),
+    visibility 0s 0.18s;
 }
 
 /* Scrolling is by design (at most three bubbles are visible at once), so give
@@ -176,6 +195,13 @@ body {
 .bubble-list[data-open-align="left"] { left: 0; right: auto; }
 .bubble-list[data-open-align="right"] { right: 0; left: auto; }
 
+/* Anchor the grow/shrink to whichever corner sits against the folder button, so
+   the panel appears to spring out of it (and collapse back into it). */
+.bubble-list[data-open-direction="down"][data-open-align="left"] { transform-origin: top left; }
+.bubble-list[data-open-direction="down"][data-open-align="right"] { transform-origin: top right; }
+.bubble-list[data-open-direction="up"][data-open-align="left"] { transform-origin: bottom left; }
+.bubble-list[data-open-direction="up"][data-open-align="right"] { transform-origin: bottom right; }
+
 .bubble {
   display: flex;
   align-items: flex-start;
@@ -270,3 +296,13 @@ body {
 @keyframes status-spin {
   to { transform: rotate(360deg); }
 }
+
+/* Respect a reduced-motion preference: snap the folder open/closed instead of
+   animating the caret and the panel. */
+@media (prefers-reduced-motion: reduce) {
+  .caret,
+  .bubble-list,
+  .bubble-list.collapsed {
+    transition: none;
+  }
+}

package/apps/companion/test/session-bubbles.test.mjs

@@ -110,7 +110,7 @@ test("updates the folder button in place (count and urgency dot)", () => {
   }
 });
 
-test("preserves scroll position across collapse and expand", () => {
+test("keeps the list mounted but marked collapsed, preserving scroll across a toggle", () => {
   const restoreDocument = installFakeDocument();
   try {
     const container = new FakeElement("div");
@@ -120,11 +120,20 @@ test("preserves scroll position across collapse and expand", () => {
     listView.render(bubbles);
     findList(container).scrollTop = 100;
 
+    // Collapsing keeps the node mounted (so it can animate out) but marks it
+    // collapsed and drops the `interactive` marker so hit-testing ignores it.
     listView.toggle();
-    assert.equal(findList(container), undefined);
-    listView.toggle();
+    const collapsed = findList(container);
+    assert.ok(collapsed);
+    assert.ok(collapsed.className.split(" ").includes("collapsed"));
+    assert.ok(!collapsed.className.split(" ").includes("interactive"));
 
-    assert.equal(findList(container).scrollTop, 100);
+    listView.toggle();
+    const expanded = findList(container);
+    assert.ok(!expanded.className.split(" ").includes("collapsed"));
+    assert.ok(expanded.className.split(" ").includes("interactive"));
+    // The scrollTop rode through untouched since the node was never rebuilt.
+    assert.equal(expanded.scrollTop, 100);
   } finally {
     restoreDocument();
   }
@@ -254,7 +263,7 @@ function makeBubbles(sessionIds) {
 }
 
 function findList(container) {
-  return container.children.find((child) => child.className === "bubble-list interactive");
+  return container.children.find((child) => child.className.split(" ").includes("bubble-list"));
 }
 
 function findButton(container) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hayasaka7/haya-pet",
-  "version": "0.3.12",
+  "version": "0.3.14",
   "type": "module",
   "description": "Generic AI CLI pet runtime foundation.",
   "keywords": [