@mmerterden/multi-agent-pipeline 20.34.0 → 20.35.0

package/pipeline/scripts/office-build.mjs

@@ -9,9 +9,11 @@
  * pipeline/office/index.html: the list of sprite names in pipeline/office/assets
  * (served by contract-server.mjs at /office/assets/), the strings as a JSON
  * literal, the two code files in order inside one IIFE. It also renders the
- * pixel grids in pipeline/office-art into PNG sprites in pipeline/office/assets
- * and writes pipeline/office/toolkit.json, the toolkit version shipped with
- * the page; --check holds all three to their sources.
+ * pixel grids in pipeline/office-art into PNG sprites in pipeline/office/assets,
+ * recolors the character sheets into the company's employees
+ * (office-art/employees.json) and writes pipeline/office/toolkit.json, the
+ * toolkit version shipped with the page; --check holds all of them to their
+ * sources.
  *
  *   node pipeline/scripts/office-build.mjs          write the page
  *   node pipeline/scripts/office-build.mjs --check  exit 1 when the page on
@@ -21,7 +23,7 @@
 
 import { createHash } from "node:crypto";
 import { readFileSync, readdirSync, writeFileSync } from "node:fs";
-import { deflateSync } from "node:zlib";
+import { deflateSync, inflateSync } from "node:zlib";
 import { basename, join } from "node:path";
 import { pathToFileURL } from "node:url";
 
@@ -78,6 +80,272 @@ export function encodePng(width, height, rgba) {
   ]);
 }
 
+/**
+ * An 8-bit RGBA PNG decoded to {width, height, rgba}. Only that colour type is
+ * read (every sheet in office/assets is one); anything else throws.
+ */
+export function decodePng(buf) {
+  if (buf.subarray(0, 8).toString("hex") !== PNG_SIGNATURE) throw new Error("not a PNG file");
+  let o = 8;
+  let width = 0;
+  let height = 0;
+  const idat = [];
+  while (o + 8 <= buf.length) {
+    const len = buf.readUInt32BE(o);
+    const type = buf.toString("ascii", o + 4, o + 8);
+    const data = buf.subarray(o + 8, o + 8 + len);
+    if (type === "IHDR") {
+      width = data.readUInt32BE(0);
+      height = data.readUInt32BE(4);
+      if (data[8] !== 8 || data[9] !== 6 || data[12] !== 0)
+        throw new Error("only 8-bit RGBA, non-interlaced PNGs are read");
+    } else if (type === "IDAT") idat.push(data);
+    else if (type === "IEND") break;
+    o += 12 + len;
+  }
+  if (!width || !height) throw new Error("PNG has no IHDR");
+  const raw = inflateSync(Buffer.concat(idat));
+  const stride = width * 4;
+  if (raw.length !== (stride + 1) * height) throw new Error("PNG data has the wrong length");
+  const rgba = Buffer.alloc(stride * height);
+  for (let y = 0; y < height; y++) {
+    const filter = raw[y * (stride + 1)];
+    const line = y * (stride + 1) + 1;
+    for (let x = 0; x < stride; x++) {
+      const a = x >= 4 ? rgba[y * stride + x - 4] : 0;
+      const b = y > 0 ? rgba[(y - 1) * stride + x] : 0;
+      const c = x >= 4 && y > 0 ? rgba[(y - 1) * stride + x - 4] : 0;
+      let v = raw[line + x];
+      if (filter === 1) v += a;
+      else if (filter === 2) v += b;
+      else if (filter === 3) v += (a + b) >> 1;
+      else if (filter === 4) {
+        const p = a + b - c;
+        const pa = Math.abs(p - a);
+        const pb = Math.abs(p - b);
+        const pc = Math.abs(p - c);
+        v += pa <= pb && pa <= pc ? a : pb <= pc ? b : c;
+      } else if (filter !== 0) throw new Error(`unknown PNG filter ${filter}`);
+      rgba[y * stride + x] = v & 255;
+    }
+  }
+  return { width, height, rgba };
+}
+
+// --- the employees -----------------------------------------------------------
+// office-art/employees.json gives each person of the company a base character
+// sheet and four colours. A sheet's colours are sorted into parts by where
+// they sit in the 16x32 frame (hair above the face, the shirt below it, then
+// trousers and shoes) and skin by the face's tone; the near-black outline,
+// white, the eyes and the shoes keep their colours. Each part moves to the
+// person's colour with its shading kept.
+
+const FRAME_H = 32;
+const BANDS = [
+  ["hair", 0, 13],
+  ["face", 13, 18],
+  ["top", 18, 25],
+  ["bottom", 25, 28],
+  ["shoes", 28, 32],
+];
+const PARTS = ["hair", "skin", "top", "bottom"];
+const SKIN_NEAR = 48;
+
+const channels = (hex) => [0, 2, 4].map((i) => parseInt(hex.slice(i, i + 2), 16));
+
+function hsl(r, g, b) {
+  const [R, G, B] = [r / 255, g / 255, b / 255];
+  const max = Math.max(R, G, B);
+  const min = Math.min(R, G, B);
+  const l = (max + min) / 2;
+  const d = max - min;
+  if (!d) return [0, 0, l];
+  const s = d / (1 - Math.abs(2 * l - 1));
+  const h = max === R ? ((G - B) / d + 6) % 6 : max === G ? (B - R) / d + 2 : (R - G) / d + 4;
+  return [h * 60, s, l];
+}
+
+function rgbOf(h, s, l) {
+  const c = (1 - Math.abs(2 * l - 1)) * s;
+  const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
+  const m = l - c / 2;
+  const sector = [
+    [c, x, 0],
+    [x, c, 0],
+    [0, c, x],
+    [0, x, c],
+    [x, 0, c],
+    [c, 0, x],
+  ][Math.min(5, Math.floor(h / 60))];
+  return sector.map((v) => Math.round(Math.min(1, Math.max(0, v + m)) * 255));
+}
+
+/** The band of a sheet row: hair, face, top, bottom or shoes, by its place in the 32-row frame. */
+export function bandOf(y) {
+  return BANDS.find(([, a, b]) => y % FRAME_H >= a && y % FRAME_H < b)[0];
+}
+
+/**
+ * The middle of the face where it faces the viewer: the first row of frames
+ * (the front view; the second shows the back of the head), the face rows,
+ * away from the sides long hair covers and the collar rises into.
+ */
+export function inFaceCentre(x, y) {
+  return y >= 13 && y < 18 && x % 16 >= 5 && x % 16 <= 10;
+}
+
+/**
+ * The part of every pixel of a sheet: hair, skin, top, bottom, keep, or null
+ * for a transparent one. A pixel is judged by its colour and its row:
+ *  - near-black outline and white keep their colour everywhere;
+ *  - the face's tone is skin wherever it is (neck, arms, hands, legs);
+ *  - the hair rows are hair, the dark strand lines inside it included;
+ *  - the face rows are skin, hair (a colour of the hair rows: long hair at the
+ *    sides) or kept (eyes, mouth, the face's outline), never clothing;
+ *  - the body rows are the top, except a hair colour (a braid over the
+ *    shoulder), the leg rows are the bottom, and the shoes keep theirs.
+ */
+export function pixelParts(sheet) {
+  const { width, height, rgba } = sheet;
+  const seen = new Map();
+  for (let y = 0; y < height; y++) {
+    const band = bandOf(y);
+    for (let x = 0; x < width; x++) {
+      const o = (y * width + x) * 4;
+      if (!rgba[o + 3]) continue;
+      const hex = rgba.subarray(o, o + 3).toString("hex");
+      const counts = seen.get(hex) || {
+        hair: 0,
+        face: 0,
+        top: 0,
+        bottom: 0,
+        shoes: 0,
+        centre: 0,
+      };
+      counts[band]++;
+      if (inFaceCentre(x, y)) counts.centre++;
+      seen.set(hex, counts);
+    }
+  }
+  const info = new Map();
+  for (const [hex, counts] of seen) {
+    const rgb = channels(hex);
+    const [h, s, l] = hsl(...rgb);
+    const n = counts.hair + counts.face + counts.top + counts.bottom + counts.shoes;
+    const [band] = BANDS.map(([name]) => [name, counts[name]]).sort((p, q) => q[1] - p[1])[0];
+    info.set(hex, {
+      rgb,
+      counts,
+      n,
+      band,
+      fixed: Math.max(...rgb) < 0x18 || Math.min(...rgb) > 0xf8,
+      skinLike: h >= 8 && h <= 45 && s >= 0.25 && l >= 0.15,
+      h,
+      s,
+    });
+  }
+  // The face is the skin-like colours of its middle, where no hair hangs, that
+  // the hair rows use less (a forehead under the fringe counts). Skin elsewhere
+  // is a colour the hair rows never use that sits next to a face colour (the
+  // shading of arms and hands); a hair highlight of a skin-like hue lives in the
+  // hair rows, and a clothing colour of a skin-like hue is far from the face or
+  // lives below the waist. Hair never reaches the middle of the face.
+  const faceTones = [...info.values()].filter(
+    (c) => c.skinLike && c.counts.centre > 0 && c.counts.centre * 2 >= c.counts.hair,
+  );
+  const near = (c, f) =>
+    Math.abs(c.s - f.s) <= 0.3 && c.rgb.every((v, i) => Math.abs(v - f.rgb[i]) <= SKIN_NEAR);
+  const skin = (c) =>
+    faceTones.includes(c) ||
+    (c.skinLike && c.counts.hair === 0 && c.band !== "bottom" && faceTones.some((f) => near(c, f)));
+  const hairColour = (c) => c.counts.hair > 0 && c.counts.hair * 2 >= c.n - c.counts.hair;
+  const out = new Array(width * height).fill(null);
+  for (let y = 0; y < height; y++) {
+    const band = bandOf(y);
+    for (let x = 0; x < width; x++) {
+      const o = (y * width + x) * 4;
+      if (!rgba[o + 3]) continue;
+      const c = info.get(rgba.subarray(o, o + 3).toString("hex"));
+      let part;
+      if (c.fixed) part = "keep";
+      else if (skin(c)) part = "skin";
+      else if (band === "hair") part = "hair";
+      else if (band === "face") part = hairColour(c) && !inFaceCentre(x, y) ? "hair" : "keep";
+      else if (band === "top") part = c.band === "hair" ? "hair" : "top";
+      else if (band === "bottom") part = "bottom";
+      else part = "keep";
+      out[y * width + x] = part;
+    }
+  }
+  return out;
+}
+
+/** A part's target lightness for a source lightness: a monotone ramp around the part's mean. */
+function rampOf(l, mean, target) {
+  if (l <= mean) return target * (l / mean);
+  const top = Math.min(0.92, target + 0.35);
+  return target + (top - target) * ((l - mean) / (1 - mean));
+}
+
+/**
+ * A character sheet in one person's colours: {hair, skin, top, bottom} as
+ * "rrggbb". Returns {width, height, rgba, parts}, parts being pixelParts.
+ */
+export function recolorSheet(sheet, colours) {
+  const parts = pixelParts(sheet);
+  const { rgba } = sheet;
+  const sum = {};
+  const n = {};
+  for (let i = 0; i < parts.length; i++) {
+    const p = parts[i];
+    if (!PARTS.includes(p)) continue;
+    const [, , l] = hsl(rgba[i * 4], rgba[i * 4 + 1], rgba[i * 4 + 2]);
+    sum[p] = (sum[p] || 0) + l;
+    n[p] = (n[p] || 0) + 1;
+  }
+  const targets = {};
+  for (const p of PARTS) {
+    if (!n[p]) continue;
+    if (!/^[0-9a-f]{6}$/i.test(colours[p] || "")) throw new Error(`no ${p} colour`);
+    targets[p] = hsl(...channels(colours[p]));
+  }
+  const out = Buffer.from(rgba);
+  const memo = new Map();
+  for (let i = 0; i < parts.length; i++) {
+    const p = parts[i];
+    if (!PARTS.includes(p)) continue;
+    const o = i * 4;
+    const key = p + rgba.subarray(o, o + 3).toString("hex");
+    let to = memo.get(key);
+    if (!to) {
+      const [th, ts, tl] = targets[p];
+      const [, , l] = hsl(rgba[o], rgba[o + 1], rgba[o + 2]);
+      to = rgbOf(th, ts, Math.min(0.94, Math.max(0.03, rampOf(l, sum[p] / n[p], tl))));
+      memo.set(key, to);
+    }
+    [out[o], out[o + 1], out[o + 2]] = to;
+  }
+  return { width: sheet.width, height: sheet.height, rgba: out, parts };
+}
+
+/** The employees as the page reads them, and their sheets: "char_<slot>" -> PNG bytes. */
+export function employees() {
+  const { employees: list } = JSON.parse(readFileSync(join(ART, "employees.json"), "utf8"));
+  const sprites = new Map();
+  const slots = new Set();
+  const people = list.map((e) => {
+    if (!Number.isInteger(e.slot) || e.slot < 12 || e.slot > 99 || slots.has(e.slot))
+      throw new Error(`${e.role}: slot must be a unique integer from 12 to 99`);
+    if (!Number.isInteger(e.base) || e.base < 0 || e.base > 5)
+      throw new Error(`${e.role}: base is a character sheet from 0 to 5`);
+    slots.add(e.slot);
+    const sheet = recolorSheet(decodePng(readFileSync(join(ASSETS, `char_${e.base}.png`))), e);
+    sprites.set(`char_${e.slot}`, encodePng(sheet.width, sheet.height, sheet.rgba));
+    return { role: e.role, name: e.name, agent: e.agent, tier: e.tier, slot: e.slot };
+  });
+  return { people, sprites };
+}
+
 /** One art file as a PNG; throws on a size line, row length or letter that does not fit. */
 export function renderArt(text, colors, name = "sprite") {
   const lines = text.replace(/\r/g, "").trimEnd().split("\n");
@@ -150,11 +418,13 @@ export function build() {
   const read = (f) => readFileSync(join(SRC, f), "utf8");
   const strings = JSON.parse(read("strings.json"));
   const sprites = atlas();
+  const staff = employees();
   const script = [
     '"use strict";',
     "(() => {",
     `const ATLAS = ${JSON.stringify(sprites)};`,
     `const STRINGS = ${JSON.stringify(strings)};`,
+    `const EMPLOYEES = ${JSON.stringify(staff.people)};`,
     'const spriteUrl = (name) => "/office/assets/" + name + ".png";',
     read("world.js").trim(),
     read("app.js").trim(),
@@ -166,6 +436,7 @@ export function build() {
   const hash = createHash("sha256").update(script).update(style).update(read("shell.html"));
   // Redrawn sprites change the page too, though no source text did.
   for (const [name, png] of artSprites()) hash.update(name).update(png);
+  for (const [name, png] of staff.sprites) hash.update(name).update(png);
   const build = hash.digest("hex").slice(0, 12);
   // Text that would close the inline element early, or open an HTML comment
   // inside it, turns source into markup.
@@ -181,7 +452,7 @@ export function build() {
 
 const isMain = process.argv[1] && import.meta.url === pathToFileURL(process.argv[1]).href;
 if (isMain) {
-  const art = artSprites();
+  const art = new Map([...artSprites(), ...employees().sprites]);
   const check = process.argv.includes("--check");
   if (!check) for (const [name, png] of art) writeFileSync(join(ASSETS, `${name}.png`), png);
   const html = build();

package/pipeline/scripts/office-control.mjs

@@ -23,11 +23,11 @@
  *   status           running or not, the URL without the token, the idle
  *                    limit, remote access, the paired devices the phone
  *                    registry lists, and the last panel actions from
- *                    office-actions.jsonl. Remote access is "not available in
- *                    this installation" unless a remote layer is present: a
- *                    prefs.global.office.remote block, or a separately
- *                    installed module at ~/.claude/office-remote/. This
- *                    script only reports it; it carries no remote code.
+ *                    office-actions.jsonl. Remote access is "off" until
+ *                    office-pair pairs a phone, "configured" when
+ *                    prefs.global.office.remote is set but nothing is paired,
+ *                    and "paired" once a device is; while paired, office-on
+ *                    starts office-remote-client.mjs beside the server.
  *
  * State: one 0600 file, ~/.claude/logs/multi-agent/office/office.json, with
  * the pid, port and token file of the server this script started. The server
@@ -58,6 +58,7 @@ import { homedir } from "node:os";
 import { dirname, join } from "node:path";
 
 import { codeDigest } from "../lib/code-digest.mjs";
+import { phoneDir } from "./_phone-auth.mjs";
 import { fileURLToPath } from "node:url";
 
 const HERE = dirname(fileURLToPath(import.meta.url));
@@ -72,6 +73,7 @@ const START_SKEW_MS = 120 * 1000;
 const home = (env) => env.HOME || homedir();
 const stateDir = (env) => join(home(env), ".claude", "logs", "multi-agent", "office");
 const stateFile = (env) => join(stateDir(env), "office.json");
+const clientFile = (env) => join(stateDir(env), "remote-client.json");
 const actionsLog = (env) =>
   join(home(env), ".claude", "logs", "multi-agent", "office-actions.jsonl");
 
@@ -86,16 +88,22 @@ const readJson = (p) => {
 /** The panel page: next to this scripts directory, in a checkout and in the install. */
 export const pagePath = () => join(HERE, "..", "office", "index.html");
 
-/** Whether a remote layer is present; none ships with the pipeline. */
+/** Whether a device is paired for remote use (office-pair wrote the remote config). */
+export const remotePaired = (env = process.env) => existsSync(join(phoneDir(env), "remote.json"));
+
+/** Whether the remote layer is configured: a paired device, or a prefs block. */
 export function remoteLayer(env = process.env) {
+  if (remotePaired(env)) return true;
   const prefs = readJson(join(home(env), ".claude", "multi-agent-preferences.json"));
   const block = prefs?.global?.office?.remote;
-  if (block && typeof block === "object" && !Array.isArray(block)) return true;
-  return existsSync(join(home(env), ".claude", "office-remote"));
+  return Boolean(block && typeof block === "object" && !Array.isArray(block));
 }
 
-const remoteText = (env) =>
-  remoteLayer(env) ? "provided by a separate remote layer" : "not available in this installation";
+const remoteText = (env) => {
+  if (remotePaired(env)) return "paired: the remote client runs while the office is on";
+  if (remoteLayer(env)) return "configured, no phone paired (office-pair start)";
+  return "off: no phone paired";
+};
 
 /** The contract server: beside this script, else the install. */
 export function serverScript(env = process.env) {
@@ -127,6 +135,55 @@ function psField(pid, field) {
   return r.status === 0 ? r.stdout.trim() : "";
 }
 
+/** The remote client this script started, if it is still running. */
+function remoteClient(env) {
+  const c = readJson(clientFile(env));
+  if (!c || !Number.isInteger(c.pid) || !alive(c.pid)) return null;
+  return psField(c.pid, "command").includes("office-remote-client.mjs") ? c : null;
+}
+
+/**
+ * Start office-remote-client.mjs beside the server when a device is paired,
+ * or keep the one already running. Without a pairing nothing starts, so
+ * remote stays off by default; the client also stops by itself once the
+ * server is gone.
+ */
+export function startRemoteClient(env = process.env) {
+  if (!remotePaired(env)) return false;
+  if (remoteClient(env)) return true;
+  const script = join(HERE, "office-remote-client.mjs");
+  if (!existsSync(script)) return false;
+  const child = spawn(process.execPath, [script, "loop"], {
+    env,
+    detached: true,
+    stdio: "ignore",
+  });
+  child.unref();
+  mkdirSync(stateDir(env), { recursive: true, mode: 0o700 });
+  writeFileSync(
+    clientFile(env),
+    JSON.stringify({ pid: child.pid, startedAt: new Date().toISOString() }) + "\n",
+    { mode: 0o600 },
+  );
+  return true;
+}
+
+/** Stop the remote client this script started. */
+export function stopRemoteClient(env = process.env) {
+  const c = remoteClient(env);
+  let stopped = false;
+  if (c) {
+    try {
+      process.kill(c.pid, "SIGTERM");
+      stopped = true;
+    } catch {
+      stopped = false;
+    }
+  }
+  rmSync(clientFile(env), { force: true });
+  return stopped;
+}
+
 /**
  * Whether `pid` is still the server a state record names: its token file
  * names the same pid, the process runs contract-server.mjs, and it started
@@ -313,6 +370,7 @@ export async function officeOn({ env = process.env, open = true } = {}) {
     if (!s) throw new Error("the server stopped right after it started");
   }
   const page = `${s.url}/office`;
+  const remote = startRemoteClient(env);
   const opened = open ? openBrowser(`${page}#code=${await panelCode(s)}`, env) : false;
   return {
     running: true,
@@ -321,12 +379,14 @@ export async function officeOn({ env = process.env, open = true } = {}) {
     url: page,
     pid: s.pid,
     idleMinutes: s.idleMinutes,
+    remote,
     opened,
   };
 }
 
 /** Stop the server this script started. */
 export function officeOff({ env = process.env } = {}) {
+  stopRemoteClient(env);
   const s = readJson(stateFile(env));
   let stopped = false;
   if (isOurServer(s, s ? readJson(s.tokenFile ?? "") : null)) {