@hayasaka7/haya-pet 0.3.1 → 0.3.2

package/CHANGELOG.md

@@ -7,6 +7,16 @@ 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.2]
+
+### Changed
+- **Session bubble titles no longer run off the screen.** A long project name
+  used to stretch the bubble out to the panel's full width. The title now keeps
+  the **client name in full** (Codex, Claude Code, …) and shows the **project
+  name capped at 10 characters** with an ellipsis when it's longer (e.g.
+  `netdisk-server` → `netdisk-se...`); the complete `Client · Project` is kept
+  as a hover tooltip so nothing is lost.
+
 ## [0.3.1]
 
 ### Fixed

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

@@ -218,6 +218,15 @@ function renderBubble(bubble) {
   const title = document.createElement("div");
   title.className = "title";
 
+  // Persistent title parts (mutated in place across updates, like everything
+  // else here). The client name is always shown in full; the project name is
+  // shown compact (bubble.projectLabel) with the full name kept as a tooltip.
+  const client = document.createElement("span");
+  client.className = "client";
+  const project = document.createElement("span");
+  project.className = "project";
+  title.append(client, project);
+
   const activity = document.createElement("div");
   activity.className = "activity";
 
@@ -239,8 +248,11 @@ function applyBubble(el, bubble) {
   icon.title = bubble.statusLabel;
 
   const [title, activity] = body.children;
-  title.innerHTML = `<span class="client">${escapeHtml(bubble.clientName)}</span> ` +
-    `<span class="project">${escapeHtml(bubble.projectName)}</span>`;
+  const [client, project] = title.children;
+  client.textContent = bubble.clientName;
+  project.textContent = bubble.projectLabel ?? bubble.projectName;
+  // Hover reveals the full, untruncated "Client · Project".
+  title.title = bubble.projectName ? `${bubble.clientName} · ${bubble.projectName}` : bubble.clientName;
   activity.textContent = bubble.summary;
   activity.title = `${bubble.statusLabel} · ${bubble.elapsedLabel}`;
 }
@@ -257,10 +269,3 @@ function mostUrgentKind(bubbles) {
   }
   return best;
 }
-
-function escapeHtml(value) {
-  return String(value ?? "")
-    .replace(/&/g, "&amp;")
-    .replace(/</g, "&lt;")
-    .replace(/>/g, "&gt;");
-}

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

@@ -209,6 +209,7 @@ body {
 
 .bubble .client {
   font-weight: 600;
+  margin-right: 0.4em;
 }
 
 .bubble .project {

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

@@ -170,6 +170,34 @@ test("scrolls to a session when it newly fails", () => {
   }
 });
 
+test("shows the compact project label and keeps the full name as a tooltip", () => {
+  const restoreDocument = installFakeDocument();
+  try {
+    const container = new FakeElement("div");
+    const listView = createBubbleList(container, { onRender: createHostOnRender(container) });
+
+    listView.render([{
+      sessionId: "s1",
+      statusKind: "working",
+      statusLabel: "Working",
+      clientName: "Claude Code",
+      projectName: "netdisk-server",
+      projectLabel: "netdisk-se...",
+      summary: "running",
+      elapsedLabel: "1s"
+    }]);
+
+    const bubble = findBubble(container, "s1");
+    const title = childByClass(childByClass(bubble, "body"), "title");
+    assert.equal(childByClass(title, "client").textContent, "Claude Code");
+    assert.equal(childByClass(title, "project").textContent, "netdisk-se...");
+    // The full, untruncated name stays reachable on hover.
+    assert.equal(title.title, "Claude Code · netdisk-server");
+  } finally {
+    restoreDocument();
+  }
+});
+
 test("clears everything when no sessions remain", () => {
   const restoreDocument = installFakeDocument();
   try {

package/package.json

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

package/packages/session-core/src/bubble-view.js

@@ -1,5 +1,5 @@
 import { mapAiStateToPetAction } from "../../pet-core/src/atlas.js";
-import { buildSessionSummary, buildStatusLabel, formatElapsed } from "./summaries.js";
+import { buildSessionSummary, buildStatusLabel, formatElapsed, truncateProjectName } from "./summaries.js";
 
 // Collapses the full AI-state vocabulary into the four progress kinds the
 // bubble panel renders: a spinning "working" circle, a "done" check mark (held
@@ -36,6 +36,7 @@ export function buildBubbleView(session, now = Date.now(), options = {}) {
     clientId: session.clientId,
     clientName: session.clientDisplayName ?? session.clientId,
     projectName: session.projectName,
+    projectLabel: truncateProjectName(session.projectName),
     state: session.state,
     statusLabel: buildStatusLabel(session.state),
     statusKind: resolveBubbleStatusKind(session.state),

package/packages/session-core/src/summaries.js

@@ -26,6 +26,20 @@ export function buildSessionSummary(session) {
   return buildStatusLabel(session?.state);
 }
 
+// Compacts a project name for the session bubble title, which sits beside the
+// (always-full) client name in a narrow overlay. Names up to `maxLength`
+// characters show whole; longer ones are cut to `maxLength` and marked with an
+// ellipsis. The full name is kept elsewhere on the view model for a tooltip.
+const DEFAULT_PROJECT_NAME_LENGTH = 10;
+
+export function truncateProjectName(name, maxLength = DEFAULT_PROJECT_NAME_LENGTH) {
+  const text = typeof name === "string" ? name : "";
+  if (text.length <= maxLength) {
+    return text;
+  }
+  return `${text.slice(0, maxLength)}...`;
+}
+
 export function formatElapsed(ms) {
   const totalSeconds = Math.max(0, Math.floor((Number.isFinite(ms) ? ms : 0) / 1000));
 

package/packages/session-core/test/bubble-view.test.mjs

@@ -20,6 +20,8 @@ test("builds a bubble view model with label, summary, action, and elapsed", () =
   assert.equal(view.clientId, "codex");
   assert.equal(view.clientName, "Codex");
   assert.equal(view.projectName, "netdisk-server");
+  // The full name is preserved; projectLabel is the compact bubble display form.
+  assert.equal(view.projectLabel, "netdisk-se...");
   assert.equal(view.state, "waiting_approval");
   assert.equal(view.statusLabel, "Waiting for approval");
   assert.equal(view.summary, "waiting for command approval");
@@ -64,6 +66,12 @@ test("breaks connect-time ties by session id for a deterministic order", () => {
   assert.deepEqual(views.map((view) => view.sessionId), ["sess_a", "sess_b"]);
 });
 
+test("keeps a short project name whole in projectLabel", () => {
+  const view = buildBubbleView({ ...baseSession, projectName: "api" }, 6_000);
+  assert.equal(view.projectName, "api");
+  assert.equal(view.projectLabel, "api");
+});
+
 test("marks the selected/pinned session", () => {
   const views = buildBubbleViews([baseSession], 6_000, { selectedSessionId: "sess_a" });
   assert.equal(views[0].selected, true);

package/packages/session-core/test/summaries.test.mjs

@@ -3,7 +3,8 @@ import { test } from "../../../test/harness.mjs";
 import {
   buildStatusLabel,
   buildSessionSummary,
-  formatElapsed
+  formatElapsed,
+  truncateProjectName
 } from "../src/summaries.js";
 
 test("maps every normalized state to a human status label", () => {
@@ -36,3 +37,25 @@ test("formats elapsed durations compactly", () => {
   assert.equal(formatElapsed(65_000), "1m 5s");
   assert.equal(formatElapsed(3_725_000), "1h 2m");
 });
+
+test("keeps short project names whole", () => {
+  assert.equal(truncateProjectName("api"), "api");
+  // Exactly at the 10-character budget stays untouched (no ellipsis).
+  assert.equal(truncateProjectName("ten-charrr"), "ten-charrr");
+});
+
+test("truncates long project names to 10 characters plus an ellipsis", () => {
+  assert.equal(truncateProjectName("netdisk-server"), "netdisk-se...");
+  assert.equal(truncateProjectName("a-very-long-project-name"), "a-very-lon...");
+});
+
+test("honours a custom max length", () => {
+  assert.equal(truncateProjectName("netdisk-server", 4), "netd...");
+  assert.equal(truncateProjectName("abc", 4), "abc");
+});
+
+test("coerces missing or non-string project names to an empty string", () => {
+  assert.equal(truncateProjectName(undefined), "");
+  assert.equal(truncateProjectName(null), "");
+  assert.equal(truncateProjectName(123), "");
+});