@songsid/agend 2.3.5-alpha.3 → 2.3.5-alpha.5

package/dist/ui/chat-time.js

@@ -1,80 +1,3 @@
-// #1770: the time a chat line shows, read in the fleet's zone (the one chat-logs, fleet.log and the #1586 DMs use) —
-// "17:38" today, "Yesterday 17:38", "10/11 17:38" earlier this year, "2025/10/11 17:38" before. The hour and minute keep
-// the browser's own format (12- or 24-hour), as they always had. No imports: the thread, the preview panel and the
-// tests read it as it is.
-
-const cache = new Map();
-/** One formatter per (kind, zone, locale): a thread may label 500 lines on every render. */
-function fmt(kind, tz, locale) {
-  const key = `${kind}|${tz || ""}|${locale || ""}`;
-  let f = cache.get(key);
-  if (!f) {
-    const o = kind === "hm" ? { hour: "2-digit", minute: "2-digit" }
-      : kind === "ymd" ? { year: "numeric", month: "numeric", day: "numeric", hour: "numeric", minute: "numeric", second: "numeric", hourCycle: "h23" }
-      : { year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit", timeZoneName: "short" };
-    f = new Intl.DateTimeFormat(kind === "ymd" ? "en-US" : (locale || []), { ...o, timeZone: tz || undefined });
-    cache.set(key, f);
-  }
-  return f;
-}
-/** `tz` when this browser knows it, else undefined (the browser's own zone): a label must still be drawn. */
-function known(tz) {
-  if (!tz) return undefined;
-  try { fmt("ymd", tz); return tz; } catch { return undefined; }
-}
-/** The fleet's zone, as the page was served it (<body data-fleet-tz>); undefined when absent or unknown here. */
-export function fleetTz() { return known(globalThis.document?.body?.dataset?.fleetTz); }
-
-const toMs = (ts) => (typeof ts === "number" ? ts : Date.parse(String(ts || "")));
-function wall(ms, tz) {
-  const p = {};
-  for (const x of fmt("ymd", tz).formatToParts(ms)) p[x.type] = Number(x.value);
-  return p;
-}
-
-/**
- * The label for `ts` (ISO string or epoch ms), "" when it cannot be read. opts: tz (default the fleet's), now (epoch ms),
- * yesterday(hm) → the word for "yesterday" around hm (default: hm alone), locale (tests).
- */
-export function chatTime(ts, opts = {}) {
-  const ms = toMs(ts);
-  if (!Number.isFinite(ms)) return "";
-  const tz = "tz" in opts ? known(opts.tz) : fleetTz();
-  const hm = fmt("hm", tz, opts.locale).format(ms);
-  const d = wall(ms, tz), today = wall(opts.now ?? Date.now(), tz);
-  if (d.year === today.year && d.month === today.month && d.day === today.day) return hm;
-  const y = new Date(Date.UTC(today.year, today.month - 1, today.day - 1));
-  if (d.year === y.getUTCFullYear() && d.month === y.getUTCMonth() + 1 && d.day === y.getUTCDate()) return opts.yesterday ? opts.yesterday(hm) : hm;
-  return d.year === today.year ? `${d.month}/${d.day} ${hm}` : `${d.year}/${d.month}/${d.day} ${hm}`;
-}
-
-/** The full date, time and zone of `ts`, for a tooltip; "" when it cannot be read. */
-export function chatTimeFull(ts, opts = {}) {
-  const ms = toMs(ts);
-  if (!Number.isFinite(ms)) return "";
-  return fmt("full", "tz" in opts ? known(opts.tz) : fleetTz(), opts.locale).format(ms);
-}
-
-/** Milliseconds until the fleet's next midnight (when "today" labels change), at most an hour (a DST day self-corrects). */
-export function msToNextDay(now = Date.now(), tz = fleetTz()) {
-  const w = wall(now, known(tz));
-  const into = ((w.hour * 60 + w.minute) * 60 + w.second) * 1000 + (now % 1000);
-  return Math.max(1000, Math.min(3_600_000, 86_400_000 - into + 1000));
-}
-
-/**
- * Call `fn` when the fleet's day may have changed — at its next midnight, then again for each one after (an hour at
- * most between looks, so a DST day or a late timer corrects itself). Each subscriber holds its own timer, and no
- * module-wide state: the unsubscribe it returns leaves nothing armed.
- */
-export function onDayChange(fn) {
-  let timer = null, live = true;
-  const arm = () => {
-    timer = setTimeout(() => {
-      timer = null;
-      try { fn(); } finally { if (live) arm(); }
-    }, msToNextDay());
-  };
-  arm();
-  return () => { live = false; if (timer !== null) { clearTimeout(timer); timer = null; } };
-}
+// Hub PR A (#3226): this module moved to /assets/chat-time.js (src/ui/shared/), shared by the fleet and the Hub. A tab opened
+// before the move still imports it from here: the same module (one instance), re-exported.
+export * from "/assets/chat-time.js";

package/dist/ui/chat-tour.js

@@ -9,7 +9,7 @@
 // the agent (#1369 review).
 import { t, onLang } from "/assets/app-i18n.js";
 import { shellStore, closeDrawer } from "/assets/app-shell.js";
-import "./chat-strings.js";
+import "/assets/chat-strings.js";
 
 const TOUR_KEY = "agend_tour_done";
 const byId = (id) => document.getElementById(id);

package/dist/ui/credential-profile-select.js

@@ -0,0 +1,54 @@
+import { html } from "/assets/app-html.js";
+import { register, t } from "/assets/app-i18n.js";
+import { identityText } from "./account-identity.js";
+
+/**
+ * Claude accounts on a paired Windows computer ("credential profiles"). AgEnD only ever shows and sends a profile NAME; the sign-in itself
+ * stays on that computer, and a Runtime reports nothing but each name and whether it is signed in. No path, e-mail or token is read here.
+ */
+register("claudeAccount", {
+  en: { label:"Claude account", none:"This computer's default sign-in", default:"default", signedOut:"not signed in", unchecked:"not checked", notReported:"not reported",
+    old:"Update the Runtime on that computer to choose a Claude account for this agent.",
+    empty:"No Claude accounts reported yet. On that computer run agend-runtime login claude-code NAME, then choose Detect again in that computer's CLI diagnostics (Settings → Runtime).",
+    hint:"The account is chosen by name; its sign-in stays on that computer. A name that does not exist or is not signed in there is refused, never replaced by another account.",
+    changeNote:"Changing the account starts a new conversation." },
+  "zh-TW": { label:"Claude 帳號", none:"這台電腦的預設登入", default:"預設", signedOut:"尚未登入", unchecked:"未確認", notReported:"未回報",
+    old:"請更新那台電腦上的 Runtime，才能為這個 Agent 選擇 Claude 帳號。",
+    empty:"尚未回報任何 Claude 帳號。請在那台電腦執行 agend-runtime login claude-code 名稱，再到設定 → Runtime，在該電腦的「CLI 診斷」按「重新偵測」。",
+    hint:"帳號以名稱選擇，登入資料只保留在那台電腦。不存在或尚未登入的名稱會被拒絕，不會改用其他帳號。",
+    changeNote:"更換帳號會開始新的對話。" },
+});
+export const accountText = (key, ...values) => t(`claudeAccount.${key}`, ...values);
+
+/** What a computer reports: whether its Runtime can choose an account, each account's name and signed-in yes/no, and its default name. */
+export function credentialProfileView(machine) {
+  const capable = machine?.runtimeInfo?.capabilities?.includes("credential-profiles") === true;
+  const report = machine?.inventory?.credentialProfiles;
+  const profiles = Array.isArray(report?.profiles) ? report.profiles.filter(row => row && typeof row.name === "string") : [];
+  // The default sign-in's own account (the computer's Claude Code, as its last detection saw it), for the "default sign-in" choice.
+  const claude = Array.isArray(machine?.inventory?.clis) ? machine.inventory.clis.find(cli => cli?.id === "claude-code") : undefined;
+  const defaultName = typeof report?.default === "string" ? report.default : "";
+  return { capable, profiles, defaultName, machineIdentity: identityText(profiles.find(row => row.name === defaultName)?.identity ?? claude?.identity) };
+}
+export const credentialProfileState = loggedIn => loggedIn === true ? "signedIn" : loggedIn === false ? "signedOut" : "unchecked";
+/** The choice exists only for Claude Code on a paired computer. */
+export const offersClaudeAccount = (machine, backend) => !!machine && backend === "claude-code";
+
+/**
+ * `value` is the chosen name ("" = the computer's own sign-in). A signed-out account is listed but cannot be chosen; one that is
+ * "not checked" can, because the Runtime asks the CLI again before anything starts and refuses if it is not signed in.
+ */
+export function ClaudeAccountSelect({ machine, backend, value, onChange, id, disabled = false, changeNote = false }) {
+  if (!offersClaudeAccount(machine, backend)) return null;
+  const view = credentialProfileView(machine), known = view.profiles.some(row => row.name === value);
+  const locked = disabled || !view.capable;
+  return html`<div class="claude-account-field"><label class="field"><span>${accountText("label")}</span>
+    <select id=${id} value=${value || ""} disabled=${locked} onChange=${event => onChange(event.target.value)}>
+      <option value="">${accountText("none")}${view.machineIdentity ? ` · ${view.machineIdentity}` : ""}</option>
+      ${view.profiles.map(row => html`<option key=${row.name} value=${row.name} disabled=${row.loggedIn === false}>${row.name}${row.identity ? ` · ${identityText(row.identity)}` : ""}${row.loggedIn === false ? ` · ${accountText("signedOut")}` : row.loggedIn === null ? ` · ${accountText("unchecked")}` : ""}${row.name === view.defaultName ? ` · ${accountText("default")}` : ""}</option>`)}
+      ${value && !known ? html`<option key=${value} value=${value}>${value} · ${accountText("notReported")}</option>` : null}
+    </select></label>
+    ${!view.capable ? html`<p class="note claude-account-old" role="status">${accountText("old")}</p>`
+      : !view.profiles.length ? html`<p class="note claude-account-empty">${accountText("empty")}</p>` : html`<p class="note">${accountText("hint")}</p>`}
+    ${changeNote ? html`<p class="note claude-account-change">${accountText("changeNote")}</p>` : null}</div>`;
+}

package/dist/ui/fleet-office-dialogue.d.ts

@@ -0,0 +1,30 @@
+// Types for fleet-office-dialogue.js (#2861): the Office's dialogue box — the page's module, read by tests.
+export const DLG: { TEXT_MAX: number; FRESH_MS: number; HOLD_MS: number; FADE_MS: number; SLIDE_MS: number; WAIT_MS: number; CPS: number; MAX: number };
+export interface DialogPerson { name: string; account: string | null }
+export interface Conversation { id: number; instance: string; person: DialogPerson | null; text: string | null; reply: string | null; heardAt: number; answeredAt: number | null; shownAt: number | null; replyShownAt: number | null }
+export interface DialogLayout {
+  narrow: boolean; box: { x: number; y: number; w: number; h: number };
+  portrait: { h: number; foot: number; maxW: number; left: number; right: number };
+  pad: number; font: number; lineH: number; nameH: number; statusH: number; face: number; text: { x: number; y: number; w: number; lines: number };
+}
+export interface DialogStage { phase: "heard" | "working" | "answered"; speaker: "left" | "right"; slide: number; alpha: number; typedAt: number; done: boolean }
+export function clip(text: unknown, max?: number): string;
+export function createDialogue(): {
+  heard(instance: string, person: DialogPerson | null, text: string | null, t: number): Conversation | null;
+  answered(instance: string, text: string | null, t: number): Conversation | null;
+  sweep(t: number, still?: boolean): boolean; list(): Conversation[]; size(): number; rev(): number; clear(): void;
+};
+export function pickFront(list: Conversation[], shown: (name: string) => boolean, asleep: (name: string) => boolean): { front: Conversation | null; more: number };
+export function messageOf(m: unknown, serverNow: number): ({ kind: "heard"; instance: string; person: DialogPerson; text: string; files: boolean } | { kind: "answered"; instance: string; text: string; files: boolean }) | null;
+export function talkOf(d: unknown): Array<{ instance: string; kind: "heard" | "answered"; at: number }>;
+export function portraitState(state: string): "idle" | "working" | "needs";
+export function portraitSrc(pack: unknown, who: { agent?: string; state?: string; account?: string | null } | null): string | null;
+export function boxLayout(W: number, H: number): DialogLayout;
+export function fitBox(L: DialogLayout, n: number, status: boolean): DialogLayout;
+export function wrap(measure: (s: string) => number, text: string, maxW: number, max: number): string[];
+export function typed(lines: string[], n: number): string[];
+export function stageOf(c: Conversation, t: number, working: boolean, still: boolean): DialogStage;
+export function boxColours(dialogBox: unknown, pal: Record<string, string>): { background: string; border: string; text: string; name: string; sub: string };
+export function drawBox(ctx: unknown, v: unknown, t: number, env: unknown): boolean;
+export function onBox(L: DialogLayout | null, stage: DialogStage | null, x: number, y: number): boolean;
+export function createFaces(load?: (src: string) => unknown): (src: string, done?: () => void) => unknown;

package/dist/ui/fleet-office-dialogue.js

@@ -0,0 +1,382 @@
+// #2861 (design: hxhsandy): the Office's dialogue box — a visual-novel box at the foot of the stage when a person talks
+// to an agent shown there. docs/design/office-dialogue-2861.md.
+//
+// - Heard: a person's message (the stream's `message`, role "user") → the box slides up: their portrait on the left,
+//   their name, their words (the first TEXT_MAX characters, typed out).
+// - Working: while the agent works, its portrait on the right and a status line (its own office_set line, else
+//   "Working…").
+// - Answered: its reply (role "agent") replaces the line (TEXT_MAX), the speaker is the agent; the box fades HOLD_MS
+//   later. Concurrent conversations queue, newest first; the box shows the first one it may and "+N" for the rest.
+// - On a share link (`share`: the host's `talk`, never any text): a faceless visitor, "Received a message", "Replied".
+// - Only news: a message stamped within FRESH_MS of the server's clock (a replay on reconnect, a poll's catch-up, is not).
+// - Drawn on the Office's canvas, in the stage's CSS px, after the scene (it never pans or zooms with it), so it needs no
+//   CSS rule (a tab opened before an upgrade keeps its old app.css: the box is still right).
+// - Reduced motion: no slide, no typing, no fade.
+// Off unless the Office bar's Dialogue box is ticked (per browser): then nothing here runs at all.
+import { own, PORTRAIT_STATES } from "./fleet-office-pack.js";
+
+export const DLG = {
+  TEXT_MAX: 120,
+  /** A message older than this on the server's clock is not news (a replay, a catch-up). */
+  FRESH_MS: 90_000,
+  /** How long an answer stays before it fades. */
+  HOLD_MS: 6000,
+  FADE_MS: 500,
+  SLIDE_MS: 220,
+  /** A conversation with no answer goes after this. */
+  WAIT_MS: 180_000,
+  /** Typed out at this many characters a second. */
+  CPS: 40,
+  /** At most this many conversations are kept (the oldest go). */
+  MAX: 24,
+};
+
+const GRAPHEMES = typeof Intl !== "undefined" && Intl.Segmenter ? new Intl.Segmenter(undefined, { granularity: "grapheme" }) : null;
+const chars = (s) => (GRAPHEMES ? [...GRAPHEMES.segment(s)].map((x) => x.segment) : [...s]);
+
+/**
+ * What the box says of a message: one line of plain words — whitespace folded, a code block as "…", the markdown marks
+ * at a line's start (#, >, *, -) and emphasis marks dropped — cut to `max` characters with "…".
+ */
+export function clip(text, max = DLG.TEXT_MAX) {
+  let s = String(text ?? "").replace(/```[\s\S]*?(```|$)/g, " … ");
+  s = s.split("\n").map((l) => l.replace(/^\s*(?:#{1,6}\s+|>\s?|[*+-]\s+|\d+\.\s+)/, "")).join(" ");
+  s = s.replace(/(\*\*|__|~~|`)/g, "").replace(/\s+/g, " ").trim();
+  const c = chars(s);
+  return c.length > max ? `${c.slice(0, max - 1).join("").trimEnd()}…` : s;
+}
+
+/**
+ * The conversations: `heard(instance, person, text, t)` a person's message (`person` { name, account } — null on a
+ * share: no one named); `answered(instance, text, t)` the agent's reply (none heard: nothing); `sweep(t)` drops what is
+ * over; `list()` newest first. `t` is the page's monotonic clock. Each change bumps `rev()`.
+ */
+export function createDialogue() {
+  const convs = new Map();
+  let seq = 0, rev = 0;
+  return {
+    heard(instance, person, text, t) {
+      if (typeof instance !== "string" || !instance) return null;
+      convs.delete(instance);
+      const c = { id: ++seq, instance, person: person || null, text: text == null ? null : clip(text), reply: null, heardAt: t, answeredAt: null, shownAt: null, replyShownAt: null };
+      convs.set(instance, c);
+      while (convs.size > DLG.MAX) convs.delete(convs.keys().next().value);
+      rev++;
+      return c;
+    },
+    answered(instance, text, t) {
+      const c = convs.get(instance);
+      if (!c || c.answeredAt !== null) return null;
+      c.reply = text == null ? null : clip(text);
+      c.answeredAt = t;
+      rev++;
+      return c;
+    },
+    /**
+     * Drop what is over; whether anything went. An answer shown: HOLD_MS (and its fade) from when the box first showed
+     * it (stageOf's replyShownAt) — never from when it came, so one queued behind another is seen in full when its turn
+     * comes; an answer never shown (its agent not drawn here, or waiting in the queue): WAIT_MS after it came. A
+     * conversation never answered: WAIT_MS after it was heard.
+     */
+    sweep(t, still = false) {
+      let gone = false;
+      for (const [k, c] of convs) {
+        const over = c.answeredAt === null ? t >= c.heardAt + DLG.WAIT_MS
+          : c.replyShownAt !== null ? t >= c.replyShownAt + DLG.HOLD_MS + (still ? 0 : DLG.FADE_MS) : t >= c.answeredAt + DLG.WAIT_MS;
+        if (over) { convs.delete(k); gone = true; }
+      }
+      if (gone) rev++;
+      return gone;
+    },
+    list: () => [...convs.values()].sort((a, b) => b.heardAt - a.heardAt || b.id - a.id),
+    size: () => convs.size,
+    rev: () => rev,
+    clear() { if (convs.size) { convs.clear(); rev++; } },
+  };
+}
+
+/**
+ * The conversation the box shows and how many more wait: the newest whose agent is shown here (`shown(name)`) and
+ * awake (`asleep(name)` false: paused, stopped, or in bed at bedtime — it waits until they wake to work, or expires);
+ * `more`: the others shown here.
+ */
+export function pickFront(list, shown, asleep) {
+  const here = list.filter((c) => shown(c.instance));
+  const front = here.find((c) => !asleep(c.instance)) || null;
+  return { front, more: front ? here.length - 1 : 0 };
+}
+
+/**
+ * A stream `message` as the box takes it: { kind: "heard", instance, person, text } (a person's: role "user") or
+ * { kind: "answered", instance, text } (the agent's reply: role "agent"), when it is news — stamped within FRESH_MS of
+ * the server's time `serverNow`; else null. A status line is never one.
+ */
+export function messageOf(m, serverNow) {
+  if (!m || typeof m !== "object" || typeof m.instance !== "string" || !m.instance) return null;
+  if (m.role !== "user" && m.role !== "agent") return null;
+  const at = typeof m.ts === "string" ? Date.parse(m.ts) : NaN;
+  if (!Number.isFinite(at) || Math.abs(serverNow - at) > DLG.FRESH_MS) return null;
+  const files = Array.isArray(m.attachments) && m.attachments.length > 0;
+  const said = m.click && typeof m.click.label === "string" ? m.click.label : typeof m.text === "string" ? m.text : "";
+  const text = said.trim() ? said : files ? "" : null;
+  if (text === null) return null;
+  if (m.role === "agent") return { kind: "answered", instance: m.instance, text, files: files && !said.trim() };
+  const name = typeof m.sender === "string" && m.sender.trim() ? m.sender.trim() : "";
+  const account = typeof m.from === "string" && /^[^\s:]{1,64}:[^\s:]{1,128}$/.test(m.from) ? m.from : null;
+  return { kind: "heard", instance: m.instance, person: { name, account }, text, files: files && !said.trim() };
+}
+
+/** A share's `talk` (the host's: { now, items: [{ instance, kind, at }] }), checked: the items that are news. */
+export function talkOf(d) {
+  if (!d || typeof d !== "object" || typeof d.now !== "number" || !Array.isArray(d.items)) return [];
+  return d.items.filter((x) => x && typeof x === "object" && typeof x.instance === "string" && x.instance && (x.kind === "heard" || x.kind === "answered")
+    && typeof x.at === "number" && Number.isFinite(x.at) && Math.abs(d.now - x.at) <= DLG.FRESH_MS).sort((a, b) => a.at - b.at);
+}
+
+/** The expression a portrait shows for a state: its own, else idle, else any it has. */
+const expressionOf = (p, state) => (p ? own(p, state) || own(p, "idle") || PORTRAIT_STATES.map((k) => own(p, k)).find(Boolean) || null : null);
+/** A state's expression: working, a call (needs, crashed, looks stuck), else idle. */
+export const portraitState = (state) => (state === "working" ? "working" : state === "needs" || state === "crashed" || state === "stuck" ? "needs" : "idle");
+/**
+ * The pack's portrait file for an agent ({ agent: name, state }) or a person ({ account }), or null: an agent's
+ * byInstance, else the pack's default; a person's byUser (the default is the agents').
+ */
+export function portraitSrc(pack, who) {
+  const p = pack && pack.portraits;
+  if (!p || !who) return null;
+  if (who.agent) return expressionOf(own(p.byInstance, who.agent) || p.default || null, portraitState(who.state));
+  if (who.account) return expressionOf(own(p.byUser, who.account), "idle");
+  return null;
+}
+
+/**
+ * Where everything goes on a stage `W`×`H` (CSS px): the box (centred, at most 960 wide, at the foot), the portraits'
+ * height and their two feet (left: the person, right: the agent — standing behind the box, VN style), the text's
+ * place and lines, the name plate.
+ */
+export function boxLayout(W, H) {
+  const narrow = W < 560;
+  const m = narrow ? 8 : 16, w = Math.max(160, Math.min(960, W - 2 * m)), h = Math.round(Math.min(narrow ? 120 : 132, Math.max(narrow ? 100 : 96, H * (narrow ? 0.24 : 0.2))));
+  const x = Math.round((W - w) / 2), y = Math.round(H - m - h);
+  const ph = Math.round(Math.max(h * 1.4, Math.min(narrow ? 220 : 340, H * 0.42))), foot = Math.round(y + h * 0.55);
+  const pad = narrow ? 12 : 18, font = narrow ? 14 : 15, lineH = Math.round(font * 1.4), statusH = narrow ? 18 : 20;
+  const nameH = 22;
+  return { narrow, box: { x, y, w, h }, portrait: { h: Math.min(ph, foot - 8), foot, maxW: Math.round(w * (narrow ? 0.36 : 0.3)), left: Math.round(x + w * 0.14), right: Math.round(x + w * 0.86) },
+    pad, font, lineH, nameH, statusH, face: narrow ? 52 : 64,
+    text: { x: x + pad, y: y + pad + 4, w: w - 2 * pad, lines: Math.max(2, Math.floor((h - 2 * pad - 4 - statusH) / lineH)) } };
+}
+/**
+ * The layout with its box as tall as its words need (`n` lines, and the agent's line when `status`), at least two
+ * lines' worth, still standing on the stage's foot: the portraits' feet and the text move with its top.
+ */
+export function fitBox(L, n, status) {
+  const want = Math.round(L.pad * 2 + 4 + Math.max(2, n) * L.lineH + (status ? L.statusH : 0));
+  const h = Math.min(L.box.h, Math.max(want, L.narrow ? 64 : 72)), dy = L.box.h - h;
+  if (dy <= 0) return L;
+  return { ...L, box: { ...L.box, y: L.box.y + dy, h }, portrait: { ...L.portrait, foot: L.portrait.foot + dy, h: Math.min(L.portrait.h, L.portrait.foot + dy - 8) },
+    text: { ...L.text, y: L.text.y + dy } };
+}
+
+const CJK = /[⺀-鿿가-힯豈-﫿＀-￯　-〿]/;
+/**
+ * `text` in lines at most `maxW` wide (measured), at most `max` lines (the last cut with "…" when there is more):
+ * words for Latin text, any character for CJK; a word wider than a line is broken by character.
+ */
+export function wrap(measure, text, maxW, max) {
+  const tokens = [];
+  for (const g of chars(String(text ?? ""))) {
+    const last = tokens[tokens.length - 1];
+    if (/\s/.test(g)) { tokens.push(" "); continue; }
+    if (CJK.test(g) || !last || last === " " || CJK.test(last[last.length - 1] || "")) tokens.push(g);
+    else tokens[tokens.length - 1] = last + g;
+  }
+  const lines = [];
+  let cur = "";
+  const push = () => { lines.push(cur.trimEnd()); cur = ""; };
+  for (const tk of tokens) {
+    if (tk === " ") { if (cur) cur += " "; continue; }
+    if (measure(cur + tk) <= maxW) { cur += tk; continue; }
+    if (cur.trim()) push();
+    if (measure(tk) <= maxW) { cur = tk; continue; }
+    for (const g of chars(tk)) { if (cur && measure(cur + g) > maxW) push(); cur += g; }
+  }
+  if (cur.trim()) push();
+  if (lines.length <= max) return lines;
+  const out = lines.slice(0, max);
+  let lastLine = out[max - 1];
+  while (lastLine && measure(`${lastLine}…`) > maxW) lastLine = chars(lastLine).slice(0, -1).join("");
+  out[max - 1] = `${lastLine.trimEnd()}…`;
+  return out;
+}
+
+/** The first `n` characters of `lines`, line by line (what the typing has reached). */
+export function typed(lines, n) {
+  const out = [];
+  let left = n;
+  for (const l of lines) {
+    if (left <= 0) break;
+    const c = chars(l);
+    out.push(c.slice(0, left).join(""));
+    left -= c.length;
+  }
+  return out;
+}
+const lengthOf = (lines) => lines.reduce((a, l) => a + chars(l).length, 0);
+
+/**
+ * What the box is now, from its conversation `c` at `t`: { phase: "heard" | "working" | "answered", speaker
+ * ("left": the person, "right": the agent), slide (0–1: how far it has risen), alpha, typedAt (when the speaker's line
+ * began typing), done (gone) }. `working`: the agent works now. Reduced motion (`still`): risen, whole, no fade.
+ */
+export function stageOf(c, t, working, still) {
+  if (c.shownAt === null) c.shownAt = t;
+  if (c.answeredAt !== null && c.replyShownAt === null) c.replyShownAt = t;
+  const phase = c.answeredAt !== null ? "answered" : working ? "working" : "heard";
+  const slide = still ? 1 : Math.min(1, (t - c.shownAt) / DLG.SLIDE_MS);
+  const fadeFrom = c.answeredAt !== null ? Math.max(c.answeredAt, c.replyShownAt) + DLG.HOLD_MS : Infinity;
+  const alpha = t < fadeFrom ? 1 : still ? 0 : Math.max(0, 1 - (t - fadeFrom) / DLG.FADE_MS);
+  return { phase, speaker: phase === "answered" ? "right" : "left", slide: 1 - (1 - slide) ** 3, alpha, typedAt: phase === "answered" ? c.replyShownAt : c.shownAt, done: alpha <= 0 };
+}
+
+/** The box's colours: the pack's dialogBox, else the dashboard's tokens. */
+export function boxColours(dialogBox, pal) {
+  const d = dialogBox || {};
+  return { background: d.background || pal.surface, border: d.border || pal.border, text: d.text || pal.text, name: d.name || pal.accent, sub: pal.text2 };
+}
+
+const roundRect = (ctx, x, y, w, h, r) => {
+  ctx.beginPath();
+  if (typeof ctx.roundRect === "function") ctx.roundRect(x, y, w, h, r);
+  else ctx.rect(x, y, w, h);
+};
+/** A 9-slice frame `im` over (x, y, w, h): `s` image px a side, drawn `k` CSS px an image px (unsmoothed). */
+function nineSlice(ctx, im, s, x, y, w, h, k) {
+  const iw = im.naturalWidth || im.width, ih = im.naturalHeight || im.height, d = s * k;
+  if (!iw || !ih || w < 2 * d || h < 2 * d) return false;
+  const sx = [0, s, iw - s, iw], sy = [0, s, ih - s, ih], dx = [x, x + d, x + w - d, x + w], dy = [y, y + d, y + h - d, y + h];
+  for (let i = 0; i < 3; i++) for (let j = 0; j < 3; j++) {
+    const sw = sx[i + 1] - sx[i], sh = sy[j + 1] - sy[j], dw = dx[i + 1] - dx[i], dh = dy[j + 1] - dy[j];
+    if (sw > 0 && sh > 0 && dw > 0 && dh > 0) ctx.drawImage(im, sx[i], sy[j], sw, sh, dx[i], dy[j], dw, dh);
+  }
+  return true;
+}
+
+/**
+ * One face where a portrait stands (its feet at (cx, foot)): a portrait (`{ kind: "portrait", im }`, its height `h`,
+ * at most `maxW` wide, bottom-anchored), else a framed square (`face` px) sitting just above the box — a picture
+ * (`image`), an emoji, or an initial on the identity colour. `dim`: the one not speaking.
+ */
+function drawFace(ctx, face, cx, L, top, dim, env) {
+  if (!face) return;
+  ctx.save();
+  ctx.globalAlpha *= dim ? 0.55 : 1;
+  if (face.kind === "portrait" && face.im) {
+    const iw = face.im.naturalWidth || face.im.width, ih = face.im.naturalHeight || face.im.height;
+    if (iw && ih) {
+      const k = Math.min(L.portrait.h / ih, L.portrait.maxW / iw), w = iw * k, h = ih * k;
+      ctx.imageSmoothingEnabled = k < 1;                        // a pixel-art portrait scaled up stays crisp
+      ctx.drawImage(face.im, Math.round(cx - w / 2), Math.round(L.portrait.foot - h), Math.round(w), Math.round(h));
+    }
+    ctx.restore();
+    return;
+  }
+  const s = L.face, x = Math.round(cx - s / 2), y = Math.round(top - s - 6);
+  ctx.fillStyle = env.pal.surface2; ctx.strokeStyle = env.pal.border; ctx.lineWidth = 2;
+  roundRect(ctx, x, y, s, s, 10); ctx.fill(); ctx.stroke();
+  ctx.save(); roundRect(ctx, x + 3, y + 3, s - 6, s - 6, 8); ctx.clip();
+  if (face.kind === "image" && face.im) { ctx.imageSmoothingEnabled = true; ctx.drawImage(face.im, x + 3, y + 3, s - 6, s - 6); }
+  else {
+    if (face.kind === "initial") { ctx.fillStyle = face.color || env.pal.accent; ctx.fillRect(x + 3, y + 3, s - 6, s - 6); }
+    ctx.fillStyle = face.kind === "initial" ? "#ffffff" : env.pal.text;
+    ctx.font = `${face.kind === "emoji" ? 400 : 700} ${Math.round(s * (face.kind === "emoji" ? 0.5 : 0.44))}px system-ui, "Apple Color Emoji", "Segoe UI Emoji", sans-serif`;
+    ctx.textAlign = "center"; ctx.textBaseline = "middle";
+    ctx.fillText(face.text || "?", x + s / 2, y + s / 2 + 1);
+  }
+  ctx.restore();
+  ctx.restore();
+}
+
+/**
+ * Draw the box on `ctx` (its transform: CSS px of the stage) — `v`: { L (boxLayout), stage (stageOf), left/right faces,
+ * name (the plate), lines (the speaker's whole text, wrapped), status (the agent's line while it works, or null),
+ * statusName, more, colours, frame ({ im, slice, k }) }. Whether it is still moving (rising, typing or fading).
+ */
+export function drawBox(ctx, v, t, env) {
+  const { L, stage } = v, b = L.box;
+  if (stage.done) return false;
+  const rise = Math.round((1 - stage.slide) * (b.h + 40));
+  ctx.save();
+  ctx.globalAlpha = stage.alpha;
+  ctx.translate(0, rise);
+  // The portraits stand behind the box: the person's on the left, the agent's on the right (once it works or answers).
+  drawFace(ctx, v.left, L.portrait.left, L, b.y, stage.speaker !== "left", env);
+  if (v.right) drawFace(ctx, v.right, L.portrait.right, L, b.y, stage.speaker !== "right", env);
+  const c = v.colours;
+  ctx.save();
+  // Opaque (the portraits stand behind it and must not show through); a pack's frame is drawn over the fill.
+  ctx.fillStyle = c.background; roundRect(ctx, b.x, b.y, b.w, b.h, 12); ctx.fill();
+  if (!(v.frame && v.frame.im && nineSlice(ctx, v.frame.im, v.frame.slice, b.x, b.y, b.w, b.h, v.frame.k))) {
+    ctx.strokeStyle = c.border; ctx.lineWidth = 2; roundRect(ctx, b.x + 1, b.y + 1, b.w - 2, b.h - 2, 11); ctx.stroke();
+  }
+  ctx.restore();
+  // The name plate: over the box's top edge, on the speaker's side.
+  ctx.font = "700 13px system-ui, sans-serif";
+  const nw = Math.min(b.w * 0.6, Math.ceil(ctx.measureText(v.name).width) + 20), nx = stage.speaker === "left" ? b.x + 14 : b.x + b.w - 14 - nw, ny = b.y - Math.round(L.nameH / 2);
+  ctx.fillStyle = c.background; ctx.strokeStyle = c.name; ctx.lineWidth = 2;
+  roundRect(ctx, nx, ny, nw, L.nameH, 6); ctx.fill(); ctx.stroke();
+  ctx.fillStyle = c.name; ctx.textAlign = "left"; ctx.textBaseline = "middle";
+  ctx.fillText(fit(ctx, v.name, nw - 16), nx + 10, ny + L.nameH / 2 + 1);
+  // The words, typed out.
+  const n = env.still ? Infinity : Math.floor(((t - stage.typedAt) * DLG.CPS) / 1000);
+  ctx.font = `400 ${L.font}px system-ui, sans-serif`; ctx.fillStyle = c.text; ctx.textBaseline = "top";
+  const shown = typed(v.lines, n);
+  shown.forEach((l, i) => ctx.fillText(l, L.text.x, L.text.y + 6 + i * L.lineH));
+  // The agent's line while it works; "+N" for the conversations waiting.
+  ctx.font = `italic 600 ${L.narrow ? 12 : 13}px system-ui, sans-serif`; ctx.textBaseline = "bottom";
+  if (v.status) { ctx.fillStyle = c.name; ctx.textAlign = "right"; ctx.fillText(fit(ctx, v.status, b.w - 2 * L.pad), b.x + b.w - L.pad, b.y + b.h - Math.round(L.pad * 0.75)); }
+  ctx.font = `600 ${L.narrow ? 11 : 12}px system-ui, sans-serif`;
+  if (v.more > 0) {
+    ctx.font = "700 13px system-ui, sans-serif";
+    const tag = `+${v.more}`, tw = ctx.measureText(tag).width + 18, th = 22, tx = stage.speaker === "left" ? b.x + b.w - tw - L.pad : b.x + L.pad, ty = b.y + L.pad - 4;
+    ctx.fillStyle = c.name; roundRect(ctx, tx, ty, tw, th, th / 2); ctx.fill();
+    ctx.fillStyle = c.background; ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.fillText(tag, tx + tw / 2, ty + th / 2 + 1);
+  }
+  ctx.restore();
+  return stage.slide < 1 || n < lengthOf(v.lines) || stage.alpha < 1;
+}
+/** `s` cut to `w` px with "…". */
+function fit(ctx, s, w) {
+  if (ctx.measureText(s).width <= w) return s;
+  let c = chars(s);
+  while (c.length > 1 && ctx.measureText(`${c.join("")}…`).width > w) c = c.slice(0, -1);
+  return `${c.join("")}…`;
+}
+
+/** Whether (x, y) — the stage's CSS px — is on the box (with the slide it has now). */
+export const onBox = (L, stage, x, y) => !!L && !!stage && !stage.done && stage.alpha > 0.2
+  && x >= L.box.x && x < L.box.x + L.box.w && y >= L.box.y + Math.round((1 - stage.slide) * (L.box.h + 40)) - L.nameH / 2 && y < L.box.y + L.box.h + (1 - stage.slide) * (L.box.h + 40);
+
+/**
+ * Pictures the box draws that are not a pack's: an avatar's `/ui/img/…` (avatarOf's), read once each; `get(src, done)`
+ * the picture or null (not in yet: `done` once it is).
+ */
+export function createFaces(load = defaultLoad) {
+  const seen = new Map();
+  return (src, done) => {
+    if (!src) return null;
+    const had = seen.get(src);
+    if (had) { if (had.im === undefined && done) had.waiting.add(done); return had.im || null; }
+    const e = { im: undefined, waiting: new Set(done ? [done] : []) };
+    seen.set(src, e);
+    Promise.resolve(load(src)).catch(() => null).then((im) => { e.im = im || null; for (const fn of e.waiting) { try { fn(); } catch { /* the page's */ } } e.waiting.clear(); });
+    return null;
+  };
+}
+function defaultLoad(src) {
+  return new Promise((resolve) => {
+    if (typeof Image !== "function") { resolve(null); return; }
+    const im = new Image();
+    im.onload = () => resolve(im); im.onerror = () => resolve(null);
+    im.src = src;
+  });
+}

package/dist/ui/fleet-office-pack.d.ts

@@ -20,7 +20,13 @@ export interface CheckedPack {
   room: { floor?: string; wall?: string }; desk: { back?: string; front?: string; lit?: string };
   /** #2661: the Office levels' words — titles from each level up, and titles pinned on instances or NPCs. */
   levels?: { titles?: Array<{ from: number; name: string }>; fixed?: Record<string, { title: string; hideLevel: boolean }> };
+  /** #2861: the dialogue box's faces — each an expression (idle, working, needs) → file. */
+  portraits?: { default?: PackPortrait; byInstance: Record<string, PackPortrait>; byUser: Record<string, PackPortrait>; npc: Record<string, PackPortrait> };
+  /** #2861: the dialogue box's look — a 9-slice frame and colours (#rrggbb). */
+  dialogBox?: { frame?: string; slice?: number; background?: string; border?: string; text?: string; name?: string };
 }
+/** #2861: a portrait's files by the state it is shown in (at least one). */
+export type PackPortrait = Partial<Record<"idle" | "working" | "needs", string>>;
 export interface LayoutOverrides {
   pack: string;
   seats?: Record<string, Array<[number, number]>>;
@@ -45,6 +51,9 @@ export function checkStrip(v: unknown, at?: string, scale?: number): PackStrip;
 export function checkSkinPack(x: unknown, opts?: { kept?: boolean }): { ok: true; pack: CheckedPack } | { ok: false; error: string };
 export function skinPackOk(x: unknown): CheckedPack | null;
 export function packImages(pack: CheckedPack): string[];
+export function packSceneImages(pack: CheckedPack): string[];
+export function packPortraitImages(pack: CheckedPack): string[];
+export const PORTRAIT_STATES: string[];
 export function packStrips(pack: CheckedPack): Array<{ at: string; strip: PackStrip }>;
 export function checkLayoutOverrides(x: unknown): { ok: true; overrides: LayoutOverrides } | { ok: false; error: string };
 export function applyOverrides(pack: CheckedPack, ov: LayoutOverrides | null | undefined): { ok: true; pack: CheckedPack } | { ok: false; error: string };