@hayasaka7/haya-pet 0.1.0

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

@@ -0,0 +1,225 @@
+:root {
+  color-scheme: dark;
+  --bubble-bg: rgba(24, 26, 32, 0.92);
+  --bubble-fg: #f4f5f7;
+  --accent: #6ea8fe;
+  --kind-working: #6ea8fe;
+  --kind-attention: #f0b429;
+  --kind-failed: #e5687a;
+  --kind-done: #5cd6a0;
+  --kind-idle: rgba(255, 255, 255, 0.4);
+}
+
+* {
+  box-sizing: border-box;
+  font-family: -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  overflow: hidden;
+  user-select: none;
+}
+
+/* The pet sits at the window's top-left; the bubble panel fills the space to
+   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 {
+  position: absolute;
+  left: 0;
+  top: 0;
+  image-rendering: pixelated;
+  cursor: grab;
+}
+
+#pet-canvas:active {
+  cursor: grabbing;
+}
+
+/* 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
+   container's box is just the folder button — the list is positioned absolutely
+   relative to it, so showing/hiding the list never moves the button. */
+.bubbles {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: max-content;
+  pointer-events: none;
+}
+
+.bubbles > * {
+  pointer-events: auto;
+}
+
+/* --- Folder toggle --- */
+
+.folder-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background: var(--bubble-bg);
+  color: var(--bubble-fg);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 999px;
+  padding: 4px 10px;
+  font-size: 12px;
+  cursor: pointer;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
+}
+
+/* Monochrome disclosure caret (CSS triangle), points right when collapsed and
+   rotates down when the folder is open. */
+.caret {
+  width: 0;
+  height: 0;
+  border-top: 4px solid transparent;
+  border-bottom: 4px solid transparent;
+  border-left: 5px solid currentColor;
+  opacity: 0.7;
+  transition: transform 0.15s ease;
+}
+
+.folder-toggle[aria-expanded="true"] .caret {
+  transform: rotate(90deg);
+}
+
+.folder-count {
+  font-weight: 700;
+  font-size: 11px;
+  opacity: 0.9;
+}
+
+.folder-summary {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--kind-idle);
+}
+
+.folder-summary[data-kind="working"] { background: var(--kind-working); }
+.folder-summary[data-kind="attention"] { background: var(--kind-attention); }
+.folder-summary[data-kind="failed"] { background: var(--kind-failed); }
+.folder-summary[data-kind="done"] { background: var(--kind-done); }
+
+/* --- Bubble list --- */
+
+/* Absolutely positioned relative to the folder button so it can grow without
+   shifting the button. JS sets the open direction/alignment toward screen
+   centre, and an exact max-height so it always fits on the chosen side. */
+.bubble-list {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  width: max-content;
+  max-width: 300px;
+  overflow-y: auto;
+  pointer-events: auto;
+}
+
+.bubble-list[data-open-direction="down"] { top: calc(100% + 6px); }
+.bubble-list[data-open-direction="up"] { bottom: calc(100% + 6px); }
+.bubble-list[data-open-align="left"] { left: 0; right: auto; }
+.bubble-list[data-open-align="right"] { right: 0; left: auto; }
+
+.bubble {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  background: var(--bubble-bg);
+  color: var(--bubble-fg);
+  border-radius: 10px;
+  padding: 8px 10px;
+  font-size: 12px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
+  border-left: 3px solid transparent;
+  min-width: 180px;
+  max-width: 280px;
+}
+
+.bubble[data-kind="working"] { border-left-color: var(--kind-working); }
+.bubble[data-kind="attention"] { border-left-color: var(--kind-attention); }
+.bubble[data-kind="failed"] { border-left-color: var(--kind-failed); }
+.bubble[data-kind="done"] { border-left-color: var(--kind-done); }
+
+.bubble .body {
+  min-width: 0;
+  flex: 1;
+}
+
+.bubble .title {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.bubble .client {
+  font-weight: 600;
+}
+
+.bubble .project {
+  opacity: 0.7;
+}
+
+.bubble .activity {
+  margin-top: 2px;
+  opacity: 0.85;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* --- Status icons --- */
+
+.status-icon {
+  flex: 0 0 auto;
+  width: 16px;
+  height: 16px;
+  margin-top: 1px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 1;
+  border-radius: 50%;
+}
+
+.status-icon[data-kind="done"] {
+  color: #00210f;
+  background: var(--kind-done);
+}
+
+.status-icon[data-kind="attention"] {
+  color: #2a1d00;
+  background: var(--kind-attention);
+}
+
+.status-icon[data-kind="failed"] {
+  color: #2a0008;
+  background: var(--kind-failed);
+}
+
+.status-icon[data-kind="idle"] {
+  background: var(--kind-idle);
+}
+
+/* Working = a spinning pending circle (no glyph). */
+.status-icon[data-kind="working"] {
+  border: 2px solid rgba(110, 168, 254, 0.25);
+  border-top-color: var(--kind-working);
+  background: transparent;
+  animation: status-spin 0.8s linear infinite;
+}
+
+@keyframes status-spin {
+  to { transform: rotate(360deg); }
+}

package/apps/companion/src/renderer/task-talk-window.js

@@ -0,0 +1,141 @@
+// Layer 3 renderer: the task talk window control surface. Uses the pure
+// task-core helpers for reply-mode safety and control gating, and the adapter
+// capabilities registry to decide what is safe to show per client.
+
+import { resolveReplyMode } from "../../../../packages/task-core/src/replies.js";
+import { getAdapterCapabilities } from "../../../../packages/adapters/src/capabilities.js";
+
+export function createTalkWindow(container, bridge) {
+  let current;
+
+  function close() {
+    current = undefined;
+    container.classList.add("hidden");
+    container.innerHTML = "";
+  }
+
+  function open(bubble, mode = "peek") {
+    current = bubble;
+    container.classList.remove("hidden");
+    render(bubble, mode);
+  }
+
+  function render(bubble, mode) {
+    const capabilities = getAdapterCapabilities(bubble.clientId);
+    const replyMode = resolveReplyMode(capabilities);
+    const controls = resolveControls(bubble);
+
+    container.innerHTML = "";
+    container.append(
+      renderHeader(bubble, close),
+      renderActivity(bubble),
+      ...(bubble.state === "waiting_approval" ? [renderApproval(bubble, capabilities, bridge)] : []),
+      renderComposer(bubble, replyMode, bridge),
+      renderControls(controls, bubble, bridge)
+    );
+
+    if (mode === "peek") {
+      // Peek keeps only the essentials visible; expanded/full reuse the same
+      // building blocks with more history once a transcript store is wired.
+      container.dataset.mode = "peek";
+    }
+  }
+
+  async function resolveControls(bubble) {
+    if (bridge?.getTaskControls) {
+      return bridge.getTaskControls({ clientId: bubble.clientId, status: bubble.state });
+    }
+    return [];
+  }
+
+  return { open, close, isOpen: () => Boolean(current), current: () => current };
+}
+
+function renderHeader(bubble, close) {
+  const header = document.createElement("header");
+  const title = document.createElement("span");
+  title.innerHTML = `<strong>${bubble.clientName}</strong> · ${bubble.projectName}`;
+  const pill = document.createElement("span");
+  pill.className = "pill";
+  pill.dataset.state = bubble.state;
+  pill.textContent = bubble.statusLabel;
+  const closeBtn = document.createElement("button");
+  closeBtn.textContent = "×";
+  closeBtn.addEventListener("click", close);
+  header.append(title, pill, closeBtn);
+  return header;
+}
+
+function renderActivity(bubble) {
+  const activity = document.createElement("div");
+  activity.className = "activity";
+  activity.textContent = `${bubble.summary} · ${bubble.elapsedLabel}`;
+  return activity;
+}
+
+function renderApproval(bubble, capabilities, bridge) {
+  const panel = document.createElement("div");
+  panel.className = "approval";
+  panel.textContent = "Approval requested";
+
+  const canApprove = capabilities.canApprove !== "unsupported";
+  for (const decision of ["approve", "deny"]) {
+    const btn = document.createElement("button");
+    btn.textContent = decision === "approve" ? "Approve" : "Deny";
+    btn.disabled = !canApprove;
+    btn.addEventListener("click", () =>
+      bridge?.resolveApproval?.({ sessionId: bubble.sessionId, approvalId: bubble.approvalId, decision })
+    );
+    panel.appendChild(btn);
+  }
+  return panel;
+}
+
+function renderComposer(bubble, replyMode, bridge) {
+  const composer = document.createElement("div");
+  composer.className = "composer";
+
+  if (replyMode === "open-terminal") {
+    const note = document.createElement("button");
+    note.textContent = "Open terminal to reply";
+    note.addEventListener("click", () => bridge?.reply?.({ sessionId: bubble.sessionId, text: "", focusTerminal: true }));
+    composer.appendChild(note);
+    return composer;
+  }
+
+  const input = document.createElement("input");
+  input.type = "text";
+  input.placeholder = replyMode === "best-effort" ? "Reply (best effort)…" : "Reply…";
+
+  const send = document.createElement("button");
+  send.textContent = "Send";
+  send.addEventListener("click", () => {
+    const text = input.value.trim();
+    if (text) {
+      bridge?.reply?.({ sessionId: bubble.sessionId, text });
+      input.value = "";
+    }
+  });
+
+  composer.append(input, send);
+  return composer;
+}
+
+function renderControls(controlsPromise, bubble, bridge) {
+  const wrap = document.createElement("div");
+  wrap.className = "controls";
+
+  Promise.resolve(controlsPromise).then((controls) => {
+    for (const control of controls) {
+      if (control.id === "reply" || control.id === "approve" || control.id === "deny") {
+        continue; // rendered in the composer / approval panel
+      }
+      const btn = document.createElement("button");
+      btn.textContent = control.label;
+      btn.disabled = !control.enabled;
+      wrap.appendChild(btn);
+    }
+  });
+
+  return wrap;
+}

package/apps/companion/test/display-manager.test.mjs

@@ -0,0 +1,48 @@
+import assert from "node:assert/strict";
+import { test } from "../../../test/harness.mjs";
+import { clampWindowBounds, resolveSavedPosition } from "../src/main/display-manager.js";
+
+const displays = [
+  {
+    id: "primary",
+    primary: true,
+    scaleFactor: 1.25,
+    bounds: { x: 0, y: 0, width: 800, height: 600 },
+    workArea: { x: 0, y: 0, width: 800, height: 560 }
+  },
+  {
+    id: "secondary",
+    primary: false,
+    scaleFactor: 2,
+    bounds: { x: 800, y: 0, width: 1200, height: 900 },
+    workArea: { x: 820, y: 20, width: 1160, height: 840 }
+  }
+];
+
+test("keeps saved position inside the matching display work area", () => {
+  assert.deepEqual(
+    resolveSavedPosition({ x: 900, y: 120, width: 192, height: 208, displayId: "secondary" }, displays),
+    { x: 900, y: 120, width: 192, height: 208, displayId: "secondary", scaleFactor: 2 }
+  );
+});
+
+test("clamps window bounds to the visible work area", () => {
+  assert.deepEqual(
+    clampWindowBounds({ x: 1900, y: 880, width: 192, height: 208 }, displays[1]),
+    { x: 1788, y: 652, width: 192, height: 208 }
+  );
+});
+
+test("falls back to primary display when saved display is missing", () => {
+  assert.deepEqual(
+    resolveSavedPosition({ x: 2000, y: 2000, width: 192, height: 208, displayId: "gone" }, displays),
+    { x: 608, y: 352, width: 192, height: 208, displayId: "primary", scaleFactor: 1.25 }
+  );
+});
+
+test("uses primary display when no saved position exists", () => {
+  assert.deepEqual(
+    resolveSavedPosition(undefined, displays, { width: 384, height: 416 }),
+    { x: 416, y: 144, width: 384, height: 416, displayId: "primary", scaleFactor: 1.25 }
+  );
+});

package/apps/companion/test/interaction-controller.test.mjs

@@ -0,0 +1,107 @@
+import assert from "node:assert/strict";
+import { test } from "../../../test/harness.mjs";
+import { createInteractionController } from "../src/renderer/interaction-controller.js";
+
+// Test harness: collects emitted gestures and gives manual control over the
+// deferred single-click timer.
+function makeController(overrides = {}) {
+  const actions = [];
+  const timers = [];
+  const controller = createInteractionController({
+    onAction: (event) => actions.push(event),
+    setTimer: (fn) => {
+      timers.push(fn);
+      return timers.length - 1;
+    },
+    clearTimer: (id) => {
+      timers[id] = undefined;
+    },
+    ...overrides
+  });
+  return {
+    controller,
+    actions,
+    fireTimer: (id = 0) => timers[id] && timers[id](),
+    timerCount: () => timers.filter(Boolean).length
+  };
+}
+
+test("a single click is deferred and fires waving after the double-click window", () => {
+  const { controller, actions, fireTimer } = makeController();
+
+  controller.pointerDown({ x: 10, y: 10, time: 1000 });
+  controller.pointerUp({ x: 12, y: 11, time: 1100 });
+
+  // Nothing fires immediately — it waits to see if a second click arrives.
+  assert.deepEqual(actions, []);
+
+  fireTimer();
+  assert.deepEqual(actions, [{ type: "click", action: "waving" }]);
+});
+
+test("a double click jumps and does NOT also fire a single click", () => {
+  const { controller, actions } = makeController();
+
+  controller.pointerDown({ x: 10, y: 10, time: 1000 });
+  controller.pointerUp({ x: 10, y: 10, time: 1100 });
+  controller.pointerDown({ x: 10, y: 10, time: 1300 });
+  controller.pointerUp({ x: 10, y: 10, time: 1350 });
+
+  // Only the double-click fires; the pending single click was cancelled.
+  assert.deepEqual(actions, [{ type: "double-click", action: "jumping" }]);
+});
+
+test("the pending single click is cancelled once a double click resolves", () => {
+  const { controller, actions, fireTimer, timerCount } = makeController();
+
+  controller.pointerDown({ x: 10, y: 10, time: 1000 });
+  controller.pointerUp({ x: 10, y: 10, time: 1100 });
+  controller.pointerDown({ x: 10, y: 10, time: 1300 });
+  controller.pointerUp({ x: 10, y: 10, time: 1350 });
+
+  // Firing the (now cleared) timer must not produce a stray click.
+  fireTimer(0);
+  assert.deepEqual(actions, [{ type: "double-click", action: "jumping" }]);
+  assert.equal(timerCount(), 0);
+});
+
+test("drag is reported synchronously with the initial direction", () => {
+  const { controller } = makeController();
+
+  controller.pointerDown({ x: 10, y: 10, time: 1000 });
+  assert.deepEqual(controller.pointerMove({ x: 20, y: 10, time: 1050 }), {
+    type: "drag",
+    direction: "right",
+    action: "running-right"
+  });
+  assert.deepEqual(controller.pointerUp({ x: 30, y: 10, time: 1100 }), { type: "drag-end" });
+});
+
+test("drag direction flips immediately on reversal (incremental, not cumulative)", () => {
+  const { controller } = makeController();
+
+  controller.pointerDown({ x: 10, y: 10, time: 1000 });
+  // move far right
+  assert.equal(controller.pointerMove({ x: 60, y: 10, time: 1050 }).direction, "right");
+  // now move slightly left — still right of the start, but should read "left" now
+  assert.equal(controller.pointerMove({ x: 55, y: 10, time: 1060 }).direction, "left");
+  assert.equal(controller.pointerMove({ x: 58, y: 10, time: 1070 }).direction, "right");
+});
+
+test("movement within the drag threshold is not a drag (stays a click)", () => {
+  const { controller, actions, fireTimer } = makeController();
+
+  controller.pointerDown({ x: 10, y: 10, time: 1000 });
+  assert.equal(controller.pointerMove({ x: 13, y: 11, time: 1010 }), undefined); // < 6px
+  controller.pointerUp({ x: 13, y: 11, time: 1050 });
+  fireTimer();
+  assert.deepEqual(actions, [{ type: "click", action: "waving" }]);
+});
+
+test("a long press past clickMaxDuration is neither click nor drag", () => {
+  const { controller, actions } = makeController();
+
+  controller.pointerDown({ x: 10, y: 10, time: 1000 });
+  controller.pointerUp({ x: 10, y: 10, time: 1500 }); // 500ms > 300ms
+  assert.deepEqual(actions, []);
+});

package/apps/companion/test/panel-placement.test.mjs

@@ -0,0 +1,60 @@
+import assert from "node:assert/strict";
+import { test } from "../../../test/harness.mjs";
+import { resolvePanelPlacement } from "../src/main/panel-placement.js";
+
+const workArea = { x: 0, y: 0, width: 1920, height: 1080 };
+const panel = { width: 320, height: 240 };
+
+test("places the panel to the right when there is room", () => {
+  const result = resolvePanelPlacement({
+    pet: { x: 200, y: 400, width: 192, height: 208 },
+    panel,
+    workArea
+  });
+  assert.equal(result.side, "right");
+  assert.equal(result.x, 200 + 192 + 8);
+  assert.equal(result.y, 400);
+});
+
+test("flips to the left when the pet is near the right edge", () => {
+  const result = resolvePanelPlacement({
+    pet: { x: 1700, y: 400, width: 192, height: 208 },
+    panel,
+    workArea
+  });
+  assert.equal(result.side, "left");
+  assert.equal(result.x, 1700 - 8 - 320);
+});
+
+test("clamps the cross-axis so the panel stays on screen (bottom-right corner)", () => {
+  const result = resolvePanelPlacement({
+    pet: { x: 1700, y: 1000, width: 192, height: 208 },
+    panel,
+    workArea
+  });
+  assert.equal(result.side, "left");
+  // pet.y 1000 + panel 240 = 1240 > 1080, so it clamps up to 1080 - 240 = 840
+  assert.equal(result.y, 840);
+});
+
+test("falls back to below when neither side fits", () => {
+  const narrow = { x: 0, y: 0, width: 400, height: 1080 };
+  const result = resolvePanelPlacement({
+    pet: { x: 60, y: 50, width: 192, height: 208 },
+    panel: { width: 360, height: 200 },
+    workArea: narrow
+  });
+  assert.equal(result.side, "below");
+  assert.equal(result.y, 50 + 208 + 8);
+});
+
+test("overlaps only as a last resort on a tiny work area", () => {
+  const tiny = { x: 0, y: 0, width: 300, height: 300 };
+  const result = resolvePanelPlacement({
+    pet: { x: 50, y: 50, width: 192, height: 208 },
+    panel: { width: 320, height: 240 },
+    workArea: tiny
+  });
+  assert.equal(result.side, "overlap");
+  assert.ok(result.x >= 0 && result.y >= 0);
+});

package/apps/companion/test/position-store.test.mjs

@@ -0,0 +1,54 @@
+import assert from "node:assert/strict";
+import { test } from "../../../test/harness.mjs";
+import {
+  createDefaultPositionState,
+  parsePositionState,
+  serializePositionState,
+  updateGlobalPetPosition
+} from "../src/main/position-store.js";
+
+test("creates default position state", () => {
+  assert.deepEqual(createDefaultPositionState(), {
+    globalPet: {
+      open: true,
+      selectedPetId: undefined,
+      manual: false
+    },
+    sessions: {},
+    settings: {
+      displayMode: "hybrid",
+      attachBubblesToTerminals: true
+    }
+  });
+});
+
+test("updates global pet position as a manual placement", () => {
+  const state = updateGlobalPetPosition(createDefaultPositionState(), {
+    x: 100,
+    y: 200,
+    width: 192,
+    height: 208,
+    displayId: "primary"
+  });
+
+  assert.equal(state.globalPet.manual, true);
+  assert.equal(state.globalPet.x, 100);
+  assert.equal(state.globalPet.displayId, "primary");
+});
+
+test("serializes and parses position state", () => {
+  const state = updateGlobalPetPosition(createDefaultPositionState(), {
+    x: 100,
+    y: 200,
+    width: 192,
+    height: 208,
+    displayId: "primary"
+  });
+
+  assert.deepEqual(parsePositionState(serializePositionState(state)), state);
+});
+
+test("invalid stored position state falls back to defaults", () => {
+  assert.deepEqual(parsePositionState("{not-json}"), createDefaultPositionState());
+  assert.deepEqual(parsePositionState("{}"), createDefaultPositionState());
+});

package/apps/companion/test/state-file.test.mjs

@@ -0,0 +1,52 @@
+import assert from "node:assert/strict";
+import { test } from "../../../test/harness.mjs";
+import { createStateFile } from "../src/main/state-file.js";
+
+function fakeFs(initial) {
+  const files = new Map(initial ? Object.entries(initial) : []);
+  return {
+    files,
+    async readFile(path) {
+      if (!files.has(path)) {
+        const error = new Error("not found");
+        error.code = "ENOENT";
+        throw error;
+      }
+      return files.get(path);
+    },
+    async writeFile(path, content) {
+      files.set(path, content);
+    },
+    async mkdir() {}
+  };
+}
+
+test("returns default state when the file is missing", async () => {
+  const fs = fakeFs();
+  const store = createStateFile({ statePath: "/tmp/haya-pet/state.json", ...fs });
+  const state = await store.load();
+  assert.equal(state.globalPet.open, true);
+  assert.equal(state.settings.displayMode, "hybrid");
+});
+
+test("persists and reloads global pet position", async () => {
+  const fs = fakeFs();
+  const store = createStateFile({ statePath: "/tmp/haya-pet/state.json", ...fs });
+
+  await store.save({
+    globalPet: { open: true, x: 100, y: 200, manual: true },
+    sessions: {},
+    settings: { displayMode: "hybrid", attachBubblesToTerminals: true }
+  });
+
+  const reloaded = await store.load();
+  assert.equal(reloaded.globalPet.x, 100);
+  assert.equal(reloaded.globalPet.y, 200);
+});
+
+test("recovers from corrupt state content", async () => {
+  const fs = fakeFs({ "/tmp/haya-pet/state.json": "{ not json" });
+  const store = createStateFile({ statePath: "/tmp/haya-pet/state.json", ...fs });
+  const state = await store.load();
+  assert.equal(state.globalPet.open, true);
+});