@hayasaka7/haya-pet 0.2.2 → 0.2.3

package/CHANGELOG.md

@@ -7,6 +7,15 @@ 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.2.3]
+
+### Added
+- **Drag-to-resize the pet.** Hovering the pet reveals a small grip at its
+  bottom-right corner; drag it to scale the pet between 0.5× and 2× (aspect
+  locked), double-click it to reset to 1×. The size persists across restarts,
+  like the pet position. Only the pet scales — session bubbles keep their
+  readable size and keep anchoring beside it.
+
 ## [0.2.2]
 
 ### Fixed

package/README.md

@@ -48,6 +48,8 @@ Haya Pet watches all of them and presents one ambient interface:
   stays click-through outside the pet and bubbles.
 - 🖱️ **Click / double-click / drag** — click folds/unfolds the bubbles, double-click
   expands them, drag moves the pet (position persists; bubbles stay on-screen).
+- 📏 **Resizable pet** — hover the pet and drag the corner grip to scale it
+  0.5×–2× for your screen; double-click the grip to reset. The size persists.
 - 🟢 **Live session bubbles** with per-session status icons and a folder toggle.
 - 🧠 **Normalized state model** — every client maps to a shared state vocabulary
   (`thinking`, `running_tool`, `waiting_approval`, `reviewing`, `failed`, …).
@@ -224,6 +226,8 @@ frames so everything still works.
 | Single click | waves + folds/unfolds the session bubbles |
 | Double click | jumps + expands the bubbles |
 | Drag | moves the pet; position is saved (bubbles follow, always on-screen) |
+| Drag corner grip | resizes the pet 0.5×–2× (grip appears on hover); size is saved |
+| Double-click grip | resets the pet to its normal size |
 | Tray icon → menu | show/hide, display mode, sessions, pets, **reset position**, **Quit** |
 
 ## Stop / exit the pet

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

@@ -11,9 +11,10 @@ import { createProcessSnapshotLister } from "../../../../packages/platform-core/
 import { getDefaultPaths } from "../../../../packages/platform-core/src/paths.js";
 import { getPlatformCapabilities } from "../../../../packages/platform-core/src/capabilities.js";
 import { buildBubbleViews } from "../../../../packages/session-core/src/bubble-view.js";
+import { clampScale } from "../../../../packages/pet-core/src/pet-scale.js";
 import { buildPetWindowOptions, PET_SIZE } from "./window-options.js";
 import { resolveSavedPosition } from "./display-manager.js";
-import { setSelectedPet, updateGlobalPetPosition } from "./position-store.js";
+import { getPetScale, setPetScale, setSelectedPet, updateGlobalPetPosition } from "./position-store.js";
 import { buildTrayMenu } from "./tray-menu.js";
 import { createStateFile } from "./state-file.js";
 import { discoverPets } from "./pet-loader.js";
@@ -43,6 +44,8 @@ let runtime;
 let currentWorkArea;
 let currentDisplayId;
 let petLocal = { x: 0, y: 0 };
+// User-chosen pet scale (resize grip); the pet occupies PET_SIZE × petScale.
+let petScale = 1;
 let approvalWatch;
 
 // Electron singleton: a second launch forwards to the running instance.
@@ -58,6 +61,7 @@ if (!app.requestSingleInstanceLock()) {
 
 async function bootstrap() {
   positionState = await stateFile.load();
+  petScale = clampScale(getPetScale(positionState));
   pets = await discoverPets(paths.petSearchPaths);
 
   // Clients fire no event at the moment the user ACCEPTS a permission prompt
@@ -164,9 +168,17 @@ function createPetWindow() {
   });
 }
 
+function scaledPetSize() {
+  return {
+    width: Math.round(PET_SIZE.width * petScale),
+    height: Math.round(PET_SIZE.height * petScale)
+  };
+}
+
 function clampPetLocal(local) {
-  const maxX = Math.max(0, (currentWorkArea?.width ?? PET_SIZE.width) - PET_SIZE.width);
-  const maxY = Math.max(0, (currentWorkArea?.height ?? PET_SIZE.height) - PET_SIZE.height);
+  const size = scaledPetSize();
+  const maxX = Math.max(0, (currentWorkArea?.width ?? size.width) - size.width);
+  const maxY = Math.max(0, (currentWorkArea?.height ?? size.height) - size.height);
   return {
     x: Math.min(Math.max(local.x ?? 0, 0), maxX),
     y: Math.min(Math.max(local.y ?? 0, 0), maxY)
@@ -274,6 +286,15 @@ function registerRendererHandlers() {
     persistPetPosition();
     return petLocal;
   });
+
+  // Resize grip released (or double-clicked to reset): store the new scale and
+  // re-clamp the position so a grown pet never sticks out of the work area.
+  ipcMain.handle("haya-pet:save-pet-scale", async (_event, scale) => {
+    petScale = clampScale(scale);
+    petLocal = clampPetLocal(petLocal);
+    persistPetPosition();
+    return petScale;
+  });
 }
 
 function buildSessionPayload() {
@@ -302,7 +323,8 @@ function sendPetConfig() {
       ? { manifest: selected.manifest, spritesheetUrl: selected.spritesheetUrl }
       : undefined,
     overlayMode: capabilities.transparentOverlay === "required" ? "transparent-overlay" : "fallback-window",
-    petPosition: petLocal
+    petPosition: petLocal,
+    petScale
   });
 }
 
@@ -318,13 +340,15 @@ function persistPetPosition() {
 
   // Store the pet's absolute on-screen top-left so it can be restored on the
   // right display, mapping the in-window position back to screen coordinates.
-  positionState = updateGlobalPetPosition(positionState, {
+  // The persisted box is the *scaled* size, so display restore clamps correctly.
+  const size = scaledPetSize();
+  positionState = setPetScale(updateGlobalPetPosition(positionState, {
     x: currentWorkArea.x + petLocal.x,
     y: currentWorkArea.y + petLocal.y,
-    width: PET_SIZE.width,
-    height: PET_SIZE.height,
+    width: size.width,
+    height: size.height,
     displayId: currentDisplayId
-  });
+  }), petScale);
 
   // Debounce disk writes during drag (positionSaveDebounce, plan section 27).
   clearTimeout(persistTimer);
@@ -348,9 +372,10 @@ function focusPet() {
 function resetPosition() {
   // Drop the pet back to the bottom-right corner of its work area.
   const margin = 24;
+  const size = scaledPetSize();
   petLocal = clampPetLocal({
-    x: (currentWorkArea?.width ?? PET_SIZE.width) - PET_SIZE.width - margin,
-    y: (currentWorkArea?.height ?? PET_SIZE.height) - PET_SIZE.height - margin
+    x: (currentWorkArea?.width ?? size.width) - size.width - margin,
+    y: (currentWorkArea?.height ?? size.height) - size.height - margin
   });
   sendPetPosition();
   persistPetPosition();

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

@@ -5,6 +5,7 @@ const { contextBridge, ipcRenderer } = require("electron");
 contextBridge.exposeInMainWorld("aiPet", {
   listSessions: () => ipcRenderer.invoke("haya-pet:list-sessions"),
   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),
   onConfig: (handler) => ipcRenderer.on("haya-pet:config", (_event, config) => handler(config)),
   onSessions: (handler) => ipcRenderer.on("haya-pet:sessions", (_event, payload) => handler(payload)),

package/apps/companion/src/renderer/index.html

@@ -7,8 +7,12 @@
     <link rel="stylesheet" href="styles.css" />
   </head>
   <body>
-    <!-- Layer 1: the global pet overlay. -->
-    <canvas id="pet-canvas" class="interactive" width="192" height="208"></canvas>
+    <!-- Layer 1: the global pet overlay. The wrapper carries the position so the
+         hover-revealed resize grip travels with the canvas. -->
+    <div id="pet">
+      <canvas id="pet-canvas" class="interactive" width="192" height="208"></canvas>
+      <div id="pet-resize-grip" class="resize-grip interactive" title="Drag to resize · double-click to reset"></div>
+    </div>
 
     <!-- Layer 2: ongoing-session progress bubbles + folder toggle. -->
     <div id="bubbles" class="bubbles"></div>

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

@@ -3,6 +3,7 @@
 // is the browser glue that draws frames and forwards pointer gestures.
 
 import { CELL_HEIGHT, CELL_WIDTH, getFrameRect } from "../../../../packages/pet-core/src/atlas.js";
+import { clampScale, DEFAULT_SCALE, resolveScaleFromDrag } from "../../../../packages/pet-core/src/pet-scale.js";
 import { getActionDurationMs, getFrameAt } from "../../../../packages/pet-core/src/animator.js";
 import {
   clearDragAction,
@@ -19,10 +20,15 @@ import { createInteractionController } from "./interaction-controller.js";
 import { createBubbleList } from "./session-bubbles.js";
 
 const bridge = window.aiPet;
+const petEl = document.getElementById("pet");
 const canvas = document.getElementById("pet-canvas");
+const gripEl = document.getElementById("pet-resize-grip");
 const ctx = canvas.getContext("2d");
 const panelEl = document.getElementById("bubbles");
 
+// The sprite's natural cell size; the canvas is this times the user's scale.
+const BASE_SIZE = Object.freeze({ width: CELL_WIDTH, height: CELL_HEIGHT });
+
 const controller = createInteractionController({
   // Click is deferred so a double-click never also fires a wave. Clicking the
   // pet folds/unfolds the session bubbles; double-click forces them open.
@@ -50,6 +56,8 @@ let previousSessionStates = {};
 // The pet lives at this work-area-relative position inside the full-screen
 // overlay window; dragging moves it via CSS (the window never moves).
 let petLocal = { x: 0, y: 0 };
+// User-chosen pet scale (resize grip), persisted like the position.
+let petScale = DEFAULT_SCALE;
 // Linger bookkeeping so a finished session's bubble stays ~2s before vanishing.
 let lingerState = {};
 let lingerTimer;
@@ -60,6 +68,10 @@ function setupPet(config) {
     manifest = config.pet.manifest;
   }
 
+  if (config?.petScale !== undefined) {
+    applyPetScale(config.petScale);
+  }
+
   if (config?.petPosition) {
     applyPetPosition(config.petPosition);
   }
@@ -75,11 +87,21 @@ function setupPet(config) {
 
 function applyPetPosition(pos) {
   petLocal = clampPetLocal(pos);
-  canvas.style.left = `${petLocal.x}px`;
-  canvas.style.top = `${petLocal.y}px`;
+  petEl.style.left = `${petLocal.x}px`;
+  petEl.style.top = `${petLocal.y}px`;
   placePanel();
 }
 
+// Resizes the canvas's pixel size, so each frame re-renders at the new scale
+// (no CSS stretching). Everything that reads canvas.width/height — drag
+// clamping, panel placement — adapts automatically.
+function applyPetScale(scale) {
+  petScale = clampScale(scale);
+  canvas.width = Math.round(BASE_SIZE.width * petScale);
+  canvas.height = Math.round(BASE_SIZE.height * petScale);
+  applyPetPosition(petLocal);
+}
+
 function clampPetLocal(pos) {
   const maxX = Math.max(0, window.innerWidth - canvas.width);
   const maxY = Math.max(0, window.innerHeight - canvas.height);
@@ -148,13 +170,13 @@ function draw(action, frameIndex) {
 function drawPlaceholder(action, frameIndex) {
   ctx.fillStyle = "rgba(110, 168, 254, 0.85)";
   ctx.beginPath();
-  ctx.roundRect ? ctx.roundRect(16, 16, CELL_WIDTH - 32, CELL_HEIGHT - 32, 16) : ctx.rect(16, 16, CELL_WIDTH - 32, CELL_HEIGHT - 32);
+  ctx.roundRect ? ctx.roundRect(16, 16, canvas.width - 32, canvas.height - 32, 16) : ctx.rect(16, 16, canvas.width - 32, canvas.height - 32);
   ctx.fill();
   ctx.fillStyle = "#001233";
   ctx.font = "14px system-ui";
   ctx.textAlign = "center";
-  ctx.fillText(action, CELL_WIDTH / 2, CELL_HEIGHT / 2);
-  ctx.fillText(`frame ${frameIndex}`, CELL_WIDTH / 2, CELL_HEIGHT / 2 + 20);
+  ctx.fillText(action, canvas.width / 2, canvas.height / 2);
+  ctx.fillText(`frame ${frameIndex}`, canvas.width / 2, canvas.height / 2 + 20);
 }
 
 function playOneShot(action) {
@@ -188,6 +210,50 @@ canvas.addEventListener("pointerup", (event) => {
   }
 });
 
+// --- Resize grip: drag to scale the pet, double-click to reset ---
+
+let resizeDrag; // { startScale, startPointer } while a grip drag is active
+
+gripEl.addEventListener("pointerdown", (event) => {
+  gripEl.setPointerCapture(event.pointerId);
+  gripEl.classList.add("active");
+  resizeDrag = {
+    startScale: petScale,
+    startPointer: { x: event.clientX, y: event.clientY }
+  };
+});
+
+gripEl.addEventListener("pointermove", (event) => {
+  if (!resizeDrag) {
+    return;
+  }
+  applyPetScale(resolveScaleFromDrag({
+    startScale: resizeDrag.startScale,
+    startPointer: resizeDrag.startPointer,
+    pointer: { x: event.clientX, y: event.clientY },
+    baseSize: BASE_SIZE
+  }));
+});
+
+gripEl.addEventListener("pointerup", () => {
+  if (!resizeDrag) {
+    return;
+  }
+  resizeDrag = undefined;
+  gripEl.classList.remove("active");
+  bridge?.savePetScale?.(petScale);
+});
+
+gripEl.addEventListener("pointercancel", () => {
+  resizeDrag = undefined;
+  gripEl.classList.remove("active");
+});
+
+gripEl.addEventListener("dblclick", () => {
+  applyPetScale(DEFAULT_SCALE);
+  bridge?.savePetScale?.(DEFAULT_SCALE);
+});
+
 // Re-clamp and re-place when the work area changes (display/resolution change).
 window.addEventListener("resize", () => {
   applyPetPosition(petLocal);
@@ -247,6 +313,12 @@ let mouseIgnored;
 let lastPointer = { x: -1, y: -1 };
 
 function refreshMouseIgnore(x, y) {
+  // While the grip is captured, the pointer can briefly leave it (the pet only
+  // approximately tracks the diagonal); flipping click-through mid-drag would
+  // drop the pointerup, so hold interaction until the drag ends.
+  if (resizeDrag) {
+    return;
+  }
   if (!Number.isFinite(x) || !Number.isFinite(y)) {
     return;
   }

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

@@ -30,10 +30,14 @@ body {
    its right. The window itself is large + transparent, and pointer events are
    forwarded so only the marked .interactive regions catch clicks — everything
    else passes through to the desktop (see pet-window.js). */
-#pet-canvas {
+#pet {
   position: absolute;
   left: 0;
   top: 0;
+}
+
+#pet-canvas {
+  display: block;
   image-rendering: pixelated;
   cursor: grab;
 }
@@ -42,6 +46,26 @@ body {
   cursor: grabbing;
 }
 
+/* Resize grip: a small corner triangle that fades in while hovering the pet.
+   Dragging it scales the pet (aspect-locked); double-click resets to 1×. */
+.resize-grip {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: 14px;
+  height: 14px;
+  cursor: nwse-resize;
+  background: linear-gradient(135deg, transparent 50%, rgba(255, 255, 255, 0.75) 50%);
+  border-radius: 2px;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+
+#pet:hover .resize-grip,
+.resize-grip.active {
+  opacity: 1;
+}
+
 /* Panel container is inert; its children opt back into pointer events so the
    gaps between bubbles stay click-through. Its left/top are set by JS
    (panel-placement) so it always sits beside the pet, fully on-screen. The

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hayasaka7/haya-pet",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "type": "module",
   "description": "Generic AI CLI pet runtime foundation.",
   "license": "MIT",

package/packages/app-state/src/state.js

@@ -66,6 +66,23 @@ export function getSelectedPetId(state) {
   return state?.globalPet?.selectedPetId;
 }
 
+// Pet display scale (resize grip). Range clamping lives in pet-core's
+// pet-scale module; this layer only stores and validates the raw value.
+export function setPetScale(state, scale) {
+  return {
+    ...state,
+    globalPet: {
+      ...state.globalPet,
+      scale
+    }
+  };
+}
+
+export function getPetScale(state) {
+  const scale = state?.globalPet?.scale;
+  return Number.isFinite(scale) ? scale : undefined;
+}
+
 export function serializePositionState(state) {
   return `${JSON.stringify(state, null, 2)}\n`;
 }

package/packages/app-state/test/state.test.mjs

@@ -2,7 +2,11 @@ import assert from "node:assert/strict";
 import { test } from "../../../test/harness.mjs";
 import {
   createDefaultPositionState,
+  getPetScale,
   getSelectedPetId,
+  parsePositionState,
+  serializePositionState,
+  setPetScale,
   setSelectedPet
 } from "../src/state.js";
 
@@ -34,3 +38,36 @@ test("getSelectedPetId tolerates missing state", () => {
   assert.equal(getSelectedPetId(undefined), undefined);
   assert.equal(getSelectedPetId({}), undefined);
 });
+
+test("setPetScale stores the scale immutably", () => {
+  const state = createDefaultPositionState();
+  const next = setPetScale(state, 1.5);
+
+  assert.equal(getPetScale(next), 1.5);
+  assert.equal(getPetScale(state), undefined);
+  assert.notEqual(next.globalPet, state.globalPet);
+});
+
+test("setPetScale preserves other globalPet fields", () => {
+  const state = { ...createDefaultPositionState(), globalPet: { open: true, x: 10, y: 20, manual: true } };
+  const next = setPetScale(state, 0.75);
+
+  assert.equal(next.globalPet.x, 10);
+  assert.equal(next.globalPet.manual, true);
+  assert.equal(next.globalPet.scale, 0.75);
+});
+
+test("getPetScale returns undefined for missing or invalid values", () => {
+  assert.equal(getPetScale(undefined), undefined);
+  assert.equal(getPetScale(createDefaultPositionState()), undefined);
+  assert.equal(getPetScale(setPetScale(createDefaultPositionState(), Number.NaN)), undefined);
+  assert.equal(getPetScale({ globalPet: { scale: "big" } }), undefined);
+});
+
+test("scale survives a serialize/parse round-trip and old files parse without it", () => {
+  const withScale = parsePositionState(serializePositionState(setPetScale(createDefaultPositionState(), 1.25)));
+  assert.equal(getPetScale(withScale), 1.25);
+
+  const legacy = parsePositionState(JSON.stringify({ globalPet: { open: true, x: 1, y: 2 } }));
+  assert.equal(getPetScale(legacy), undefined);
+});

package/packages/pet-core/src/pet-scale.js

@@ -0,0 +1,34 @@
+// Pure math for the pet resize grip: the user drags the pet's bottom-right
+// corner to scale the sprite between MIN_SCALE and MAX_SCALE, aspect locked.
+
+export const MIN_SCALE = 0.5;
+export const MAX_SCALE = 2;
+export const DEFAULT_SCALE = 1;
+
+export function clampScale(value) {
+  if (!Number.isFinite(value)) {
+    return DEFAULT_SCALE;
+  }
+
+  return Math.min(Math.max(value, MIN_SCALE), MAX_SCALE);
+}
+
+// Maps a grip drag to the next scale: each axis implies a scale from how far
+// the pointer moved relative to the pet's base size, and the two are averaged
+// so the pet follows the pointer along the diagonal while staying aspect-locked.
+export function resolveScaleFromDrag({ startScale, startPointer, pointer, baseSize } = {}) {
+  const safeStart = clampScale(startScale);
+
+  if (
+    !Number.isFinite(startPointer?.x) || !Number.isFinite(startPointer?.y) ||
+    !Number.isFinite(pointer?.x) || !Number.isFinite(pointer?.y) ||
+    !Number.isFinite(baseSize?.width) || !Number.isFinite(baseSize?.height) ||
+    baseSize.width <= 0 || baseSize.height <= 0
+  ) {
+    return safeStart;
+  }
+
+  const scaleX = safeStart + (pointer.x - startPointer.x) / baseSize.width;
+  const scaleY = safeStart + (pointer.y - startPointer.y) / baseSize.height;
+  return clampScale((scaleX + scaleY) / 2);
+}

package/packages/pet-core/test/pet-scale.test.mjs

@@ -0,0 +1,94 @@
+import assert from "node:assert/strict";
+import { test } from "../../../test/harness.mjs";
+import {
+  clampScale,
+  DEFAULT_SCALE,
+  MAX_SCALE,
+  MIN_SCALE,
+  resolveScaleFromDrag
+} from "../src/pet-scale.js";
+
+const baseSize = { width: 192, height: 208 };
+
+test("scale constants define a sane range around the default", () => {
+  assert.equal(DEFAULT_SCALE, 1);
+  assert.ok(MIN_SCALE < DEFAULT_SCALE);
+  assert.ok(MAX_SCALE > DEFAULT_SCALE);
+});
+
+test("clampScale keeps in-range values and clamps out-of-range ones", () => {
+  assert.equal(clampScale(1.25), 1.25);
+  assert.equal(clampScale(MIN_SCALE), MIN_SCALE);
+  assert.equal(clampScale(MAX_SCALE), MAX_SCALE);
+  assert.equal(clampScale(0.01), MIN_SCALE);
+  assert.equal(clampScale(99), MAX_SCALE);
+});
+
+test("clampScale falls back to the default for invalid input", () => {
+  assert.equal(clampScale(undefined), DEFAULT_SCALE);
+  assert.equal(clampScale(null), DEFAULT_SCALE);
+  assert.equal(clampScale(Number.NaN), DEFAULT_SCALE);
+  assert.equal(clampScale("big"), DEFAULT_SCALE);
+});
+
+test("dragging the grip outward grows the scale", () => {
+  const next = resolveScaleFromDrag({
+    startScale: 1,
+    startPointer: { x: 500, y: 500 },
+    pointer: { x: 500 + baseSize.width / 2, y: 500 + baseSize.height / 2 },
+    baseSize
+  });
+
+  assert.equal(next, 1.5);
+});
+
+test("dragging the grip inward shrinks the scale", () => {
+  const next = resolveScaleFromDrag({
+    startScale: 1,
+    startPointer: { x: 500, y: 500 },
+    pointer: { x: 500 - baseSize.width / 4, y: 500 - baseSize.height / 4 },
+    baseSize
+  });
+
+  assert.equal(next, 0.75);
+});
+
+test("a zero drag keeps the starting scale", () => {
+  const next = resolveScaleFromDrag({
+    startScale: 1.3,
+    startPointer: { x: 10, y: 10 },
+    pointer: { x: 10, y: 10 },
+    baseSize
+  });
+
+  assert.equal(next, 1.3);
+});
+
+test("drag results are clamped to the scale range", () => {
+  const grown = resolveScaleFromDrag({
+    startScale: 1.8,
+    startPointer: { x: 0, y: 0 },
+    pointer: { x: 1000, y: 1000 },
+    baseSize
+  });
+  const shrunk = resolveScaleFromDrag({
+    startScale: 0.6,
+    startPointer: { x: 1000, y: 1000 },
+    pointer: { x: 0, y: 0 },
+    baseSize
+  });
+
+  assert.equal(grown, MAX_SCALE);
+  assert.equal(shrunk, MIN_SCALE);
+});
+
+test("invalid drag input falls back to the clamped starting scale", () => {
+  const next = resolveScaleFromDrag({
+    startScale: 1.2,
+    startPointer: { x: Number.NaN, y: 0 },
+    pointer: { x: 50, y: 50 },
+    baseSize
+  });
+
+  assert.equal(next, 1.2);
+});