@vellumai/assistant 0.12.2-dev.202609170127.2eef54c → 0.12.2-dev.202609170320.2f82e57

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vellumai/assistant",
-  "version": "0.12.2-dev.202609170127.2eef54c",
+  "version": "0.12.2-dev.202609170320.2f82e57",
   "license": "MIT",
   "type": "module",
   "exports": {

package/src/desktop/desktop-wallpaper-renderer.ts

@@ -0,0 +1,132 @@
+import { readAvatarState } from "../avatar/avatar-manifest.js";
+import { readContainedAvatarRaster } from "../avatar/ensure-raster.js";
+import {
+  renderNotificationAvatarPng,
+  resolveNotificationAccentHex,
+} from "../avatar/notification-avatar.js";
+import { renderCharacterPng } from "../avatar/png-renderer.js";
+import { getResvg, isResvgAvailable } from "../avatar/resvg-lazy.js";
+import { isTemplatePlaceholder } from "../daemon/handlers/identity.js";
+import { getAssistantName } from "../daemon/identity-helpers.js";
+import { getLogger } from "../util/logger.js";
+import { getAvatarImagePath } from "../util/platform.js";
+import { escapeXmlContent } from "../util/xml.js";
+
+function wallpaperWordmark(
+  width: number,
+  height: number,
+  name: string | null,
+): string {
+  const normalized = name?.replace(/\s+/g, " ").trim();
+  const label =
+    normalized && !isTemplatePlaceholder(normalized) ? normalized : "Vellum";
+  const text = `<text id="wordmark" font-family="Liberation Sans, Arial, sans-serif" font-size="64" font-weight="700" letter-spacing="1.5">${escapeXmlContent(`${label} OS`)}</text>`;
+  const Resvg = getResvg();
+  const bounds = new Resvg(
+    `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}">${text}</svg>`,
+  ).getBBox();
+  if (!bounds || bounds.width === 0) {
+    return "";
+  }
+  const depth = 6;
+  const scale = Math.min(
+    (height * 0.06) / 64,
+    (width * 0.72) / (bounds.width + depth),
+  );
+  const x = width / 2 - (bounds.x + (bounds.width + depth) / 2) * scale;
+  const layers = Array.from({ length: depth }, (_, index) => {
+    const offset = depth - index;
+    return `<use href="#wordmark" transform="translate(${offset} ${offset})" fill="#40535b"/>`;
+  }).join("");
+  return `<defs>
+    ${text}
+    <linearGradient id="letter-face" x2="0" y2="1">
+      <stop stop-color="#ffffff"/><stop offset=".48" stop-color="#e0e9e7"/>
+      <stop offset="1" stop-color="#9eb4ba"/>
+    </linearGradient>
+  </defs>
+  <g transform="translate(${x} ${height * 0.69}) scale(${scale})">
+    <use href="#wordmark" transform="translate(9 12)" fill="#080f14" opacity=".35"/>
+    ${layers}
+    <use href="#wordmark" fill="url(#letter-face)" stroke="#e8f1ed" stroke-opacity=".4" stroke-width=".5"/>
+  </g>`;
+}
+
+export function renderDesktopWallpaper(
+  width: number,
+  height: number,
+  avatar: Buffer | null,
+  accentHex: string | null,
+  assistantName: string | null = null,
+): Buffer {
+  const accent = /^#[\da-f]{6}$/i.test(accentHex ?? "")
+    ? accentHex!
+    : "#91a6b0";
+  const cx = width / 2;
+  const cy = height * 0.46;
+  const size = Math.min(width, height) * 0.24;
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}">
+    <defs>
+      <linearGradient id="base" x2="1" y2="1">
+        <stop stop-color="#202a30"/><stop offset="1" stop-color="#10171c"/>
+      </linearGradient>
+      <radialGradient id="glow">
+        <stop stop-color="${accent}" stop-opacity=".24"/>
+        <stop offset="1" stop-color="${accent}" stop-opacity="0"/>
+      </radialGradient>
+      <radialGradient id="shadow">
+        <stop stop-color="#000" stop-opacity=".25"/>
+        <stop offset="1" stop-color="#000" stop-opacity="0"/>
+      </radialGradient>
+    </defs>
+    <path fill="url(#base)" d="M0 0H${width}V${height}H0z"/>
+    <ellipse cx="${cx}" cy="${cy}" rx="${height * 0.7}" ry="${height * 0.6}" fill="url(#glow)"/>
+    <g fill="none" stroke="${accent}">
+      <circle cx="${cx}" cy="${cy}" r="${size * 0.76}" stroke-opacity=".16"/>
+      <circle cx="${cx}" cy="${cy}" r="${size * 1.25}" stroke-opacity=".09"/>
+      <circle cx="${cx}" cy="${cy}" r="${size * 1.9}" stroke-opacity=".05"/>
+    </g>
+    ${
+      avatar
+        ? `<ellipse cx="${cx}" cy="${cy + size * 0.48}" rx="${size * 0.7}" ry="${size * 0.16}" fill="url(#shadow)"/>
+    <image x="${cx - size / 2}" y="${cy - size / 2}" width="${size}" height="${size}" href="data:image/png;base64,${avatar.toString("base64")}"/>`
+        : ""
+    }
+    ${wallpaperWordmark(width, height, assistantName)}
+  </svg>`;
+  const Resvg = getResvg();
+  return Buffer.from(new Resvg(svg).render().asPng());
+}
+
+export async function renderCurrentDesktopWallpaper(
+  width: number,
+  height: number,
+): Promise<Buffer | null> {
+  if (!isResvgAvailable()) {
+    return null;
+  }
+  const state = readAvatarState();
+  const name = getAssistantName();
+  let raster = readContainedAvatarRaster(getAvatarImagePath());
+  if (!raster && state.kind === "character" && state.traits) {
+    try {
+      raster = renderCharacterPng(
+        state.traits.bodyShape,
+        state.traits.eyeStyle,
+        state.traits.color,
+      );
+    } catch (err) {
+      getLogger("desktop-wallpaper").warn(
+        { err },
+        "Could not render wallpaper avatar",
+      );
+    }
+  }
+  return renderDesktopWallpaper(
+    width,
+    height,
+    raster ? await renderNotificationAvatarPng(state, raster) : null,
+    resolveNotificationAccentHex(state),
+    name,
+  );
+}

package/src/desktop/desktop-wallpaper-worker.ts

@@ -0,0 +1,17 @@
+import { writeFile } from "node:fs/promises";
+
+import { renderCurrentDesktopWallpaper } from "./desktop-wallpaper-renderer.js";
+
+const [width, height, output] = process.argv.slice(2);
+if (
+  !output ||
+  !Number.isFinite(Number(width)) ||
+  !Number.isFinite(Number(height))
+) {
+  throw new Error("Wallpaper dimensions and output path are required");
+}
+const png = await renderCurrentDesktopWallpaper(Number(width), Number(height));
+if (png) {
+  await writeFile(output, png);
+}
+process.exit(0);

package/src/desktop/desktop-wallpaper.test.ts

@@ -1,10 +1,18 @@
-import { mkdirSync, mkdtempSync, rmSync, writeFileSync } from "node:fs";
+import {
+  mkdirSync,
+  mkdtempSync,
+  readdirSync,
+  readFileSync,
+  rmSync,
+  writeFileSync,
+} from "node:fs";
 import { tmpdir } from "node:os";
 import { join } from "node:path";
 import {
   afterEach,
   beforeEach,
   expect,
+  mock,
   setDefaultTimeout,
   test,
 } from "bun:test";
@@ -14,11 +22,10 @@ import sharp from "sharp";
 import {
   __resetResvgCacheForTests,
   __setResvgCacheForTests,
+  getResvg,
 } from "../avatar/resvg-lazy.js";
-import {
-  renderCurrentDesktopWallpaper,
-  renderDesktopWallpaper,
-} from "./desktop-wallpaper.js";
+import { renderCurrentDesktopWallpaper } from "./desktop-wallpaper.js";
+import { renderDesktopWallpaper } from "./desktop-wallpaper-renderer.js";
 
 // Native resvg renders scan the system font database per instance, and on a
 // loaded CI runner the file's first render runs past bun's 5s default. Each
@@ -81,7 +88,7 @@ test("renders the current uploaded avatar into an opaque desktop wallpaper", asy
   expect((await sharp(result).stats()).isOpaque).toBe(true);
 });
 
-test("regenerates a character from current traits when its raster is missing", async () => {
+test("renders a missing character raster without changing persisted avatar files", async () => {
   manifest({
     kind: "character",
     source: "pool",
@@ -89,9 +96,18 @@ test("regenerates a character from current traits when its raster is missing", a
     image: null,
     accent: null,
   });
+  const avatarDir = join(workspace, "data/avatar");
+  writeFileSync(join(avatarDir, "character-traits.json"), "preserve traits");
+  writeFileSync(join(avatarDir, "character-ascii.txt"), "preserve ASCII");
+  const snapshot = () =>
+    readdirSync(avatarDir)
+      .sort()
+      .map((file) => [file, readFileSync(join(avatarDir, file))]);
+  const before = snapshot();
   const result = (await renderCurrentDesktopWallpaper(480, 300))!;
   const empty = renderDesktopWallpaper(480, 300, null, null);
   expect(await centerPixel(result)).not.toEqual(await centerPixel(empty));
+  expect(snapshot()).toEqual(before);
 });
 
 test("missing and unreadable avatars produce the same neutral background", async () => {
@@ -200,3 +216,17 @@ test("names containing XML are rendered as text without injecting SVG shapes", a
   );
   expect((await wordmarkPixels(png)).length).toBeGreaterThan(0);
 });
+
+test("renders in a child without invoking the assistant's native rasterizer", async () => {
+  const render = mock(() => {
+    throw new Error("Rendering must not run on the assistant event loop");
+  });
+  __setResvgCacheForTests({
+    available: true,
+    Resvg: render as unknown as ReturnType<typeof getResvg>,
+  });
+  const png = await renderCurrentDesktopWallpaper(1600, 900);
+  expect(render).not.toHaveBeenCalled();
+  const metadata = await sharp(png!).metadata();
+  expect([metadata.width, metadata.height]).toEqual([1600, 900]);
+});

package/src/desktop/desktop-wallpaper.ts

@@ -1,98 +1,13 @@
-import { readAvatarState } from "../avatar/avatar-manifest.js";
-import {
-  renderNotificationAvatarPng,
-  resolveNotificationAccentHex,
-} from "../avatar/notification-avatar.js";
-import { getResvg, isResvgAvailable } from "../avatar/resvg-lazy.js";
-import { isTemplatePlaceholder } from "../daemon/handlers/identity.js";
-import { getAssistantName } from "../daemon/identity-helpers.js";
-import { escapeXmlContent } from "../util/xml.js";
+import { execFile } from "node:child_process";
+import { mkdtemp, readFile, rm } from "node:fs/promises";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { promisify } from "node:util";
 
-function wallpaperWordmark(
-  width: number,
-  height: number,
-  name: string | null,
-): string {
-  const normalized = name?.replace(/\s+/g, " ").trim();
-  const label =
-    normalized && !isTemplatePlaceholder(normalized) ? normalized : "Vellum";
-  const text = `<text id="wordmark" font-family="Liberation Sans, Arial, sans-serif" font-size="64" font-weight="700" letter-spacing="1.5">${escapeXmlContent(`${label} OS`)}</text>`;
-  const Resvg = getResvg();
-  const bounds = new Resvg(
-    `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}">${text}</svg>`,
-  ).getBBox();
-  if (!bounds || bounds.width === 0) {
-    return "";
-  }
-  const depth = 6;
-  const scale = Math.min(
-    (height * 0.06) / 64,
-    (width * 0.72) / (bounds.width + depth),
-  );
-  const x = width / 2 - (bounds.x + (bounds.width + depth) / 2) * scale;
-  const layers = Array.from({ length: depth }, (_, index) => {
-    const offset = depth - index;
-    return `<use href="#wordmark" transform="translate(${offset} ${offset})" fill="#40535b"/>`;
-  }).join("");
-  return `<defs>
-    ${text}
-    <linearGradient id="letter-face" x2="0" y2="1">
-      <stop stop-color="#ffffff"/><stop offset=".48" stop-color="#e0e9e7"/>
-      <stop offset="1" stop-color="#9eb4ba"/>
-    </linearGradient>
-  </defs>
-  <g transform="translate(${x} ${height * 0.69}) scale(${scale})">
-    <use href="#wordmark" transform="translate(9 12)" fill="#080f14" opacity=".35"/>
-    ${layers}
-    <use href="#wordmark" fill="url(#letter-face)" stroke="#e8f1ed" stroke-opacity=".4" stroke-width=".5"/>
-  </g>`;
-}
+import { isResvgAvailable } from "../avatar/resvg-lazy.js";
+import { resolveWorkerCommand } from "../util/worker-process.js";
 
-export function renderDesktopWallpaper(
-  width: number,
-  height: number,
-  avatar: Buffer | null,
-  accentHex: string | null,
-  assistantName: string | null = null,
-): Buffer {
-  const accent = /^#[\da-f]{6}$/i.test(accentHex ?? "")
-    ? accentHex!
-    : "#91a6b0";
-  const cx = width / 2;
-  const cy = height * 0.46;
-  const size = Math.min(width, height) * 0.24;
-  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}">
-    <defs>
-      <linearGradient id="base" x2="1" y2="1">
-        <stop stop-color="#202a30"/><stop offset="1" stop-color="#10171c"/>
-      </linearGradient>
-      <radialGradient id="glow">
-        <stop stop-color="${accent}" stop-opacity=".24"/>
-        <stop offset="1" stop-color="${accent}" stop-opacity="0"/>
-      </radialGradient>
-      <radialGradient id="shadow">
-        <stop stop-color="#000" stop-opacity=".25"/>
-        <stop offset="1" stop-color="#000" stop-opacity="0"/>
-      </radialGradient>
-    </defs>
-    <path fill="url(#base)" d="M0 0H${width}V${height}H0z"/>
-    <ellipse cx="${cx}" cy="${cy}" rx="${height * 0.7}" ry="${height * 0.6}" fill="url(#glow)"/>
-    <g fill="none" stroke="${accent}">
-      <circle cx="${cx}" cy="${cy}" r="${size * 0.76}" stroke-opacity=".16"/>
-      <circle cx="${cx}" cy="${cy}" r="${size * 1.25}" stroke-opacity=".09"/>
-      <circle cx="${cx}" cy="${cy}" r="${size * 1.9}" stroke-opacity=".05"/>
-    </g>
-    ${
-      avatar
-        ? `<ellipse cx="${cx}" cy="${cy + size * 0.48}" rx="${size * 0.7}" ry="${size * 0.16}" fill="url(#shadow)"/>
-    <image x="${cx - size / 2}" y="${cy - size / 2}" width="${size}" height="${size}" href="data:image/png;base64,${avatar.toString("base64")}"/>`
-        : ""
-    }
-    ${wallpaperWordmark(width, height, assistantName)}
-  </svg>`;
-  const Resvg = getResvg();
-  return Buffer.from(new Resvg(svg).render().asPng());
-}
+const runFile = promisify(execFile);
 
 export async function renderCurrentDesktopWallpaper(
   width: number,
@@ -101,13 +16,30 @@ export async function renderCurrentDesktopWallpaper(
   if (!isResvgAvailable()) {
     return null;
   }
-  const state = readAvatarState();
-  const name = getAssistantName();
-  return renderDesktopWallpaper(
-    width,
-    height,
-    await renderNotificationAvatarPng(state),
-    resolveNotificationAccentHex(state),
-    name,
-  );
+  const directory = await mkdtemp(join(tmpdir(), "vellum-wallpaper-"));
+  const output = join(directory, "wallpaper.png");
+  try {
+    const [executable, ...args] = resolveWorkerCommand(
+      new URL("./desktop-wallpaper-worker.ts", import.meta.url),
+      undefined,
+    );
+    await runFile(
+      executable!,
+      [...args, String(width), String(height), output],
+      {
+        timeout: 30_000,
+        killSignal: "SIGKILL",
+        maxBuffer: 64 * 1024,
+        windowsHide: true,
+      },
+    );
+    return await readFile(output).catch((error: NodeJS.ErrnoException) => {
+      if (error.code === "ENOENT") {
+        return null;
+      }
+      throw error;
+    });
+  } finally {
+    await rm(directory, { recursive: true, force: true });
+  }
 }