@songsid/agend 2.3.2-beta.3 → 2.3.2-beta.5

package/dist/ui/backend-signin.js

@@ -5,12 +5,13 @@
 // session that started a sign-in gets its terminal link, access code and device code; every other admin page only that
 // one runs, on which device, and may cancel it. The stream's `backend_login` event carries nothing — it only says to
 // read again. Starting is two steps, as in chat: check (the server keeps what it found) and start (with its id).
-import { html, useEffect, useState } from "/assets/app-html.js";
+import { html, useEffect, useState, useRef } from "/assets/app-html.js";
 import { t, register } from "/assets/app-i18n.js";
 import { appStore, createStore, useStore } from "/assets/app-store.js";
 import { closeDialog, shellStore, showDialog } from "/assets/app-shell.js";
 import { Dialog } from "/assets/ui-dialog.js";
 import { toast } from "/assets/ui-toast.js";
+import { mountStructuredSignIns } from "./structured-signin.js";
 
 register("signin", {
   en: {
@@ -49,6 +50,8 @@ register("signin", {
     notOffered: "A public link is not offered for this sign-in.",
     failed: "That did not work.",
     listTitle: "Sign-ins",
+    browserRunning: "Signing in to {0} on this machine",
+    consoleFallback: "Use console fallback",
     listHint: "Each backend's login on this machine, and each credential profile an agent uses.",
     stUsable: "signed in",
     stNotSignedIn: "not signed in",
@@ -98,6 +101,8 @@ register("signin", {
     notOffered: "這次登入不提供公開連結。",
     failed: "沒有成功。",
     listTitle: "登入",
+    browserRunning: "正在這台機器登入 {0}",
+    consoleFallback: "改用主控台備援",
     listHint: "這台機器上每個 backend 的登入，以及代理使用的每個憑證設定檔。",
     stUsable: "已登入",
     stNotSignedIn: "未登入",
@@ -116,7 +121,7 @@ const tn = (k, ...v) => t(`signin.${k}`, ...v);
 const shownOf = (backend, profile) => (profile ? tn("profile", backend, profile) : backend);
 
 /** What this page knows: the current sign-in as this session may see it, and Settings' list. */
-export const signInStore = createStore({ loaded: false, login: null, targets: [] });
+export const signInStore = createStore({ loaded: false, login: null, targets: [], structured: null });
 
 let reading = null, again = false;
 /**
@@ -125,9 +130,13 @@ let reading = null, again = false;
  */
 export function refreshSignIn() {
   if (reading) { again = true; return reading; }
-  reading = fetch("/ui/backend-login", { cache: "no-store" })
-    .then((r) => (r.ok ? r.json() : null))
-    .then((b) => { if (b) signInStore.set({ loaded: true, login: b.login || null, targets: Array.isArray(b.targets) ? b.targets : [] }); return b; })
+  reading = Promise.all([
+    fetch("/ui/backend-login", { cache: "no-store" }).then(r => r.ok ? r.json() : null).catch(() => null),
+    fetch("/ui/browser-backend-signins", { cache: "no-store" }).then(r => r.ok ? r.json() : null).catch(() => null),
+  ]).then(([b, structured]) => {
+    if (b) signInStore.set({ loaded: true, login: b.login || null, targets: Array.isArray(b.targets) ? b.targets : [] });
+    signInStore.set({ structured: structured && Array.isArray(structured.selected) && Array.isArray(structured.pending) ? structured : null }); return b;
+  })
     .catch(() => null)
     .finally(() => { reading = null; if (again) { again = false; void refreshSignIn(); } });
   return reading;
@@ -140,13 +149,25 @@ export function installSignIn() {
   installed = true;
   const on = appStore.get().streamOn;
   if (typeof on === "function") on("backend_login", () => { void refreshSignIn(); });
-  void refreshSignIn();
+  void refreshSignIn().then(() => {
+    // A navigation hint from the installer, never authority to start a CLI or cancel another writer.
+    const backends = installerSignInBackends(typeof location === "undefined" ? "" : location.search);
+    if (backends && signInStore.get().structured) showDialog(BrowserSignInDialog, { backends });
+  });
   shellStore.set({ banner: SignInLine });
 }
 
+export function installerSignInBackends(search) {
+  const csv = new URLSearchParams(search).get("backend_signins");
+  if (!csv || csv.length > 100) return null;
+  const ids = csv.split(",");
+  return ids.length <= 4 && ids.every(b => ["kiro-cli", "claude-code", "codex", "antigravity"].includes(b)) ? [...new Set(ids)] : null;
+}
+
 /** Open the dialog for one login (a backend's default one, or a credential profile). */
 export function openSignIn({ backend, profile }) {
-  showDialog(SignInDialog, { backend, ...(profile ? { profile } : {}) });
+  if (!profile && ["kiro-cli", "claude-code", "codex"].includes(backend)) showDialog(BrowserSignInDialog, { backend });
+  else showDialog(SignInDialog, { backend, ...(profile ? { profile } : {}) });
 }
 
 /** Open the dialog on the running sign-in (its starter's view, or the cancel-only one). */
@@ -191,6 +212,32 @@ function Running({ login }) {
   </div>`;
 }
 
+/** The same closed controls as first setup. Profile-specific logins retain their existing flow. */
+export function BrowserSignInDialog({ backend, backends, onClose }) {
+  const root = useRef(null), close = onClose || closeDialog;
+  useEffect(() => {
+    let cards, last = "";
+    cards = mountStructuredSignIns(root.current, { endpoint: "/ui/browser-backend-signins", changed: next => {
+      if (backends) { if (backends.some(b => !next.selected.includes(b))) void cards.addBackends(backends); }
+      else if (!next.selected.includes(backend)) void cards.addBackend(backend);
+      const signature = JSON.stringify([next.login, next.pending]);
+      if (signature !== last) { last = signature; void refreshSignIn(); }
+    } });
+    return () => cards.dispose();
+  }, [backend, backends]);
+  const fallback = async (chosen = backend) => {
+    const result = await post("/ui/browser-backend-signins", { operation: "cancel" });
+    if (!result.ok) { toast(tn("failed")); return; }
+    showDialog(SignInDialog, { backend: chosen });
+  };
+  return html`<${Dialog} title=${backends ? tn("listTitle") : tn("title", backend)} onClose=${close}>
+    <div ref=${root}></div>
+    ${backends ? backends.filter(b => b !== "antigravity").map(b => html`<button type="button" class="btn" onClick=${() => fallback(b)}>${b} · ${tn("consoleFallback")}</button>`) : null}
+    <div class="s-actions">${backend ? html`<button type="button" class="btn" onClick=${() => fallback(backend)}>${tn("consoleFallback")}</button>` : null}
+    <button type="button" class="btn" onClick=${close}>${tn("close")}</button></div>
+  </${Dialog}>`;
+}
+
 export function SignInDialog({ backend, profile, resume = false, onClose }) {
   const s = useStore(signInStore);
   const [step, setStep] = useState(resume ? { kind: "login" } : { kind: "checking" });
@@ -265,7 +312,12 @@ export function SignInDialog({ backend, profile, resume = false, onClose }) {
 
 /** The line every admin page shows while a sign-in runs (the shell's banner slot). */
 export function SignInLine() {
-  const { login } = useStore(signInStore);
+  const { login, structured } = useStore(signInStore);
+  const active = structured?.login;
+  if ((!login || login.phase !== "running") && active && active.phase !== "done" && !(active.phase === "failed" && active.reason)) {
+    return html`<div data-trust="status" class="conn op-line signin-line" role="status"><span>${tn("browserRunning", active.backend)}</span>
+      <button type="button" class="btn btn-sm" onClick=${() => openSignIn({ backend: active.backend })}>${tn("open")}</button></div>`;
+  }
   if (!login || login.phase !== "running") return null;
   return html`<div data-trust="status" class="conn op-line signin-line" role="status">
     <span>${tn("running", shownOf(login.backend, login.profile), login.startedOn)}</span>
@@ -276,13 +328,14 @@ const STATE_KEY = { usable: "stUsable", not_signed_in: "stNotSignedIn", not_inst
 
 /** Settings → Agents: each login on this machine, with Sign in where the dashboard can do it. */
 export function SignInList() {
-  const { targets, loaded, login } = useStore(signInStore);
+  const { targets, loaded, login, structured } = useStore(signInStore);
   // Not over the temporary public link: only the dashboard reached directly signs a backend in, and the link does not
   // serve this read (it was a 404 in the console there, found by smoke-1939-authorize-defaults).
   const offered = signInOffered();
   useEffect(() => { if (offered) void refreshSignIn(); }, []);
   if (!offered || !loaded || !targets.length) return null;
-  const running = login && login.phase === "running";
+  const active = structured?.login;
+  const running = (login && login.phase === "running") || (active && active.phase !== "done" && !(active.phase === "failed" && active.reason));
   return html`<section class="s-group signin-list" aria-label=${tn("listTitle")}>
     <div class="list-head"><span>${tn("listTitle")}</span></div>
     <p class="sub">${tn("listHint")}</p>

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

@@ -8,7 +8,7 @@
 // the public link or a read-only session (the host refuses them too).
 import { html, useMemo, useState } from "/assets/app-html.js";
 import { t, register } from "/assets/app-i18n.js";
-import { Dialog } from "/assets/ui-dialog.js";
+import { SidePanel } from "/assets/side-panel.js";
 import { toast } from "/assets/ui-toast.js";
 import { nodeText } from "./fleet-org.js";
 
@@ -147,8 +147,11 @@ export function OfficeEditor({ offices, rev, view, store, packs = [], ask = () =
   // the rev under an older draft (a save would then overwrite what it never showed). After a 409 the person chooses
   // (#2431): keep their edits (on the newer rev: Save then replaces what was saved meanwhile, knowingly) or load the
   // newer list — never their draft thrown away unasked.
-  const [base, setBase] = useState(() => ({ rev, draft: offices.map((o) => ({ ...o, members: [...o.members] })) }));
+  // `saved`: the list the draft is measured against (as read, or the newer one loaded) — the draft holds changes when
+  // it differs (#2585: leaving the page beside the docked editor then asks first).
+  const [base, setBase] = useState(() => ({ rev, saved: JSON.stringify(offices), draft: offices.map((o) => ({ ...o, members: [...o.members] })) }));
   const draft = base.draft;
+  const dirty = JSON.stringify(draft) !== base.saved;
   const setDraft = (next) => setBase((b) => ({ ...b, draft: typeof next === "function" ? next(b.draft) : next }));
   const [open, setOpen] = useState(null);                              // the office whose members are shown
   const [busy, setBusy] = useState(false);
@@ -157,8 +160,8 @@ export function OfficeEditor({ offices, rev, view, store, packs = [], ask = () =
   const copy = (list) => list.map((o) => ({ ...o, members: [...o.members] }));
   // The choice takes the snapshot in force when it is made: the stream may have read a newer one since the 409 (#2449).
   const inForce = () => current() || conflict;
-  const keepMine = () => { const now = inForce(); setBase((b) => ({ rev: now.rev, draft: b.draft })); setConflict(null); setMsg(te("keptMine")); };
-  const loadTheirs = () => { const now = inForce(); setBase({ rev: now.rev, draft: copy(now.offices) }); setOpen(null); setConflict(null); setMsg(""); };
+  const keepMine = () => { const now = inForce(); setBase((b) => ({ rev: now.rev, saved: JSON.stringify(now.offices), draft: b.draft })); setConflict(null); setMsg(te("keptMine")); };
+  const loadTheirs = () => { const now = inForce(); setBase({ rev: now.rev, saved: JSON.stringify(now.offices), draft: copy(now.offices) }); setOpen(null); setConflict(null); setMsg(""); };
   const everyone = useMemo(() => { const m = new Map(); for (const n of [...view.top, ...view.teams.flatMap((tm) => tm.nodes), ...view.rest.nodes]) if (!m.has(n.name)) m.set(n.name, n); return [...m.values()]; }, [view]);
   const set = (id, patch) => setDraft((d) => d.map((o) => (o.id === id ? { ...o, ...patch } : o)));
   const add = () => {
@@ -191,7 +194,8 @@ export function OfficeEditor({ offices, rev, view, store, packs = [], ask = () =
   };
   const actions = html`<button type="button" class="btn" onClick=${onClose} disabled=${busy}>${te("cancel")}</button>
     <button type="button" class="btn btn-primary" id="oeSave" onClick=${save} disabled=${busy || !!conflict}>${te("save")}</button>`;
-  return html`<${Dialog} title=${te("title")} onClose=${onClose} actions=${actions} busy=${busy} wide=${true}>
+  // #2585: docked on the right on a wide desk (the page beside it in use); the centred dialog elsewhere.
+  return html`<${SidePanel} title=${te("title")} onClose=${onClose} actions=${actions} busy=${busy} dirty=${dirty}>
     <p class="note">${te("lead")}</p>
     <fieldset class="oe-form" disabled=${busy}>
     ${draft.length ? null : html`<p class="note" id="oeNone">${te("none")}</p>`}
@@ -220,5 +224,5 @@ export function OfficeEditor({ offices, rev, view, store, packs = [], ask = () =
       <button type="button" class="btn btn-sm" id="oeKeepMine" onClick=${keepMine} disabled=${busy}>${te("keepMine")}</button>
       <button type="button" class="btn btn-sm" id="oeLoadTheirs" onClick=${loadTheirs} disabled=${busy}>${te("loadTheirs")}</button>
     </div>` : null}
-  </${Dialog}>`;
+  </${SidePanel}>`;
 }

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

@@ -9,8 +9,9 @@
 // the public link or a read-only session (the host refuses their saves too).
 //
 // The pure part (handles, moving, adding and removing) is exported for tests; LayoutEditor is the overlay.
-import { html, useEffect, useLayoutEffect, useRef, useState } from "/assets/app-html.js";
+import { html, useEffect, useLayoutEffect, useMemo, useRef, useState } from "/assets/app-html.js";
 import { t, register } from "/assets/app-i18n.js";
+import { SidePanel } from "/assets/side-panel.js";
 import { LOGICAL, overridesBetween, own } from "./fleet-office-pack.js";
 
 register("orgl", {
@@ -96,7 +97,7 @@ const KEY_STEP = { ArrowLeft: [-1, 0], ArrowRight: [1, 0], ArrowUp: [0, -1], Arr
  * moves (the canvas redraws it); `onSave(overrides | null)` → { ok } or { ok: false, message }; `onClose()`. `stale` (a message): the
  * office or its style changed underneath the session — no handles, nothing to save, only Cancel.
  */
-export function LayoutEditor({ base, start, place = null, stale = "", onChange, onSave, onClose }) {
+export function LayoutEditor({ base, start, place = null, stale = "", dock = true, onChange, onSave, onClose }) {
   const [edited, setEdited] = useState(start);
   const [sel, setSel] = useState(null);
   const [coords, setCoords] = useState(true);
@@ -149,13 +150,38 @@ export function LayoutEditor({ base, start, place = null, stale = "", onChange,
   }
   const at = new Map(edited.waypoints.map((w) => [w.id, w]));
   const edgeKey = (e) => `${e[0]}\u0000${e[1]}`;
+  // #2585: the controls dock in the side panel on a wide desk (the canvas left whole for the handles), else they are
+  // the bar over the canvas as before. Esc (in the panel, or on the canvas's handles) is Cancel, never mid-save.
+  const esc = (e) => { if (e.key === "Escape" && !e.defaultPrevented && !busy) { e.preventDefault(); onClose(); } };
+  const dirty = useMemo(() => JSON.stringify(edited) !== JSON.stringify(start), [edited, start]);
+  const panel = (controls, actions, tail) => html`<${SidePanel} title=${tl("title")} dock=${dock} busy=${busy} dirty=${dirty} onClose=${onClose} actions=${actions}
+      fallback=${html`<div class="ol-bar">${controls}<span class="ol-actions">${actions}</span>${tail}</div>`}>
+    <div class="ol-side">${controls}${tail}</div>
+  </${SidePanel}>`;
   if (stale) {
-    return html`<div class="ol" role="group" aria-label=${tl("title")}><div class="ol-bar">
-      <p class="note ol-msg ol-stale" role="status">${stale}</p>
-      <span class="ol-actions"><button type="button" class="btn btn-sm ol-cancel" onClick=${onClose} disabled=${busy}>${tl("cancel")}</button></span>
-    </div></div>`;
+    return html`<div class="ol" role="group" aria-label=${tl("title")} onKeyDown=${esc}>
+      ${panel(null, html`<button type="button" class="btn btn-sm ol-cancel" onClick=${onClose} disabled=${busy}>${tl("cancel")}</button>`,
+        html`<p class="note ol-msg ol-stale" role="status">${stale}</p>`)}
+    </div>`;
   }
-  return html`<div class="ol" role="group" aria-label=${tl("title")}>
+  const controls = html`<label class="check"><input type="checkbox" class="ol-coords" checked=${coords} onChange=${() => setCoords((v) => !v)} /><span>${tl("coords")}</span></label>
+      <button type="button" class="btn btn-sm ol-add" onClick=${add} disabled=${busy}>${tl("addWaypoint")}</button>
+      <span class="muted ol-sel" aria-live="polite">${selected ? tl("at", selected.label, selected.x, selected.y) : tl("none")}</span>
+      ${wpSel ? html`<button type="button" class="btn btn-sm btn-danger ol-remove" onClick=${() => { change(removeWaypoint(edited, wpSel)); setSel(null); }} disabled=${busy}>${tl("removeWaypoint")}</button>
+        <label class="oo-pick"><span class="oo-pick-label">${tl("joinTo")}</span>
+          <select class="tb-select ol-join-to" value=${joinTo} onChange=${(e) => setJoinTo(e.target.value)}>
+            <option value="">—</option>
+            ${edited.waypoints.filter((w) => w.id !== wpSel).map((w) => html`<option key=${w.id} value=${w.id}>${w.id}</option>`)}
+          </select></label>
+        <button type="button" class="btn btn-sm ol-join" disabled=${busy || !joinTo || joinTo === wpSel} onClick=${() => { change(toggleEdge(edited, wpSel, joinTo)); setJoinTo(""); }}>${tl("join")}</button>
+        <span class="ol-corridors">${edited.edges.filter((e) => e[0] === wpSel || e[1] === wpSel).map((e) => { const other = e[0] === wpSel ? e[1] : e[0];
+          return html`<button key=${edgeKey(e)} type="button" class="btn btn-sm ol-unjoin" data-other=${other} disabled=${busy} onClick=${() => change(toggleEdge(edited, wpSel, other))}>${tl("unjoin", other)}</button>`; })}</span>` : null}`;
+  const actions = html`<button type="button" class="btn btn-sm ol-reset" onClick=${reset} disabled=${busy}>${tl("reset")}</button>
+        <button type="button" class="btn btn-sm ol-cancel" onClick=${onClose} disabled=${busy}>${tl("cancel")}</button>
+        <button type="button" class="btn btn-sm btn-primary ol-save" onClick=${save} disabled=${busy}>${tl("save")}</button>`;
+  const tail = html`<span class="muted oo-note">${tl("hint")}</span>
+      ${msg ? html`<p class="note ol-msg" role="status">${msg}</p>` : null}`;
+  return html`<div class="ol" role="group" aria-label=${tl("title")} onKeyDown=${esc}>
     <div class="ol-overlay" ref=${overlay}>
       <svg ref=${svg} class="ol-svg" viewBox=${`0 0 ${LOGICAL.w} ${LOGICAL.h}`} width="100%" height="100%"
         onPointerMove=${move} onPointerUp=${up} onPointerCancel=${up} onPointerLeave=${up}>
@@ -172,26 +198,6 @@ export function LayoutEditor({ base, start, place = null, stale = "", onChange,
         </g>`)}
       </svg>
     </div>
-    <div class="ol-bar">
-      <label class="check"><input type="checkbox" class="ol-coords" checked=${coords} onChange=${() => setCoords((v) => !v)} /><span>${tl("coords")}</span></label>
-      <button type="button" class="btn btn-sm ol-add" onClick=${add} disabled=${busy}>${tl("addWaypoint")}</button>
-      <span class="muted ol-sel" aria-live="polite">${selected ? tl("at", selected.label, selected.x, selected.y) : tl("none")}</span>
-      ${wpSel ? html`<button type="button" class="btn btn-sm btn-danger ol-remove" onClick=${() => { change(removeWaypoint(edited, wpSel)); setSel(null); }} disabled=${busy}>${tl("removeWaypoint")}</button>
-        <label class="oo-pick"><span class="oo-pick-label">${tl("joinTo")}</span>
-          <select class="tb-select ol-join-to" value=${joinTo} onChange=${(e) => setJoinTo(e.target.value)}>
-            <option value="">—</option>
-            ${edited.waypoints.filter((w) => w.id !== wpSel).map((w) => html`<option key=${w.id} value=${w.id}>${w.id}</option>`)}
-          </select></label>
-        <button type="button" class="btn btn-sm ol-join" disabled=${busy || !joinTo || joinTo === wpSel} onClick=${() => { change(toggleEdge(edited, wpSel, joinTo)); setJoinTo(""); }}>${tl("join")}</button>
-        <span class="ol-corridors">${edited.edges.filter((e) => e[0] === wpSel || e[1] === wpSel).map((e) => { const other = e[0] === wpSel ? e[1] : e[0];
-          return html`<button key=${edgeKey(e)} type="button" class="btn btn-sm ol-unjoin" data-other=${other} disabled=${busy} onClick=${() => change(toggleEdge(edited, wpSel, other))}>${tl("unjoin", other)}</button>`; })}</span>` : null}
-      <span class="ol-actions">
-        <button type="button" class="btn btn-sm ol-reset" onClick=${reset} disabled=${busy}>${tl("reset")}</button>
-        <button type="button" class="btn btn-sm ol-cancel" onClick=${onClose} disabled=${busy}>${tl("cancel")}</button>
-        <button type="button" class="btn btn-sm btn-primary ol-save" onClick=${save} disabled=${busy}>${tl("save")}</button>
-      </span>
-      <span class="muted oo-note">${tl("hint")}</span>
-      ${msg ? html`<p class="note ol-msg" role="status">${msg}</p>` : null}
-    </div>
+    ${panel(controls, actions, tail)}
   </div>`;
 }

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

@@ -199,7 +199,9 @@ export function autoLayout(rooms, { width = 960 } = {}) {
     }
   });
   const right = out.length ? Math.max(...out.map((r) => r.x + r.w)) : 0, bottom = out.length ? Math.max(...out.map((r) => r.y + r.h)) : 0;
-  return { rooms: out, waypoints, edges, width: Math.max(width, right + M), height: bottom + GAP / 2 + M };
+  // As wide as its rooms (rows wrap at `width`): a scene narrower than the stage is centred in it (clampPan), never
+  // left at the stage's left edge with the rest of the stage empty (#2585 B).
+  return { rooms: out, waypoints, edges, width: out.length ? right + M : width, height: bottom + GAP / 2 + M };
 }
 
 /**
@@ -318,7 +320,8 @@ const MAX_SEEN = 2000;
  * The items in the air. `sync(items, now, still)` takes fleet-traffic.js's store items: each new one (a message, a
  * delegation's work, its report coming back) starts one trip from its sender's desk to its receiver's; a delegation with
  * no report (stale) and anything seen before start none; `still` (reduced motion) starts none. `frame(now, L)` the
- * trips under way on layout L: { id, hue, kind, x, y, t }, finished ones dropped; a trip whose desks are not drawn goes.
+ * trips under way on layout L: { id, hue, kind, from, x, y, t } (from: who sent it — a pack can draw it as theirs),
+ * finished ones dropped; a trip whose desks are not drawn goes.
  */
 export function createFlights({ max = FLIGHT.MAX } = {}) {
   const seen = new Set();
@@ -344,7 +347,7 @@ export function createFlights({ max = FLIGHT.MAX } = {}) {
         if (!f.pts) return false;
         const t = (now - f.start) / f.ms;
         if (t >= 1) return false;
-        if (t >= 0) { const p = along(f.pts, t); out.push({ id: f.id, hue: f.hue, kind: f.kind, x: p.x, y: p.y, t }); }
+        if (t >= 0) { const p = along(f.pts, t); out.push({ id: f.id, hue: f.hue, kind: f.kind, from: f.from, x: p.x, y: p.y, t }); }
         return true;
       });
       return out;

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

@@ -130,7 +130,7 @@ export function crossPath(parts, from, to) {
 const MAX_SEEN = 2000;
 /**
  * The items in the air between tiles — fleet-office-model.js createFlights's lifecycle (each new item once; none for a
- * stale delegation or with reduced motion), on crossPath's straight line: `frame(now, parts)` → { id, hue, kind, x, y,
+ * stale delegation or with reduced motion), on crossPath's straight line: `frame(now, parts)` → { id, hue, kind, from, x, y,
  * t } in overview units; a trip with no crossing (both in one tile, or either gone) is dropped.
  */
 export function createCrossFlights({ max = FLIGHT.MAX } = {}) {
@@ -157,7 +157,7 @@ export function createCrossFlights({ max = FLIGHT.MAX } = {}) {
         if (!f.pts) return false;
         const t = (now - f.start) / f.ms;
         if (t >= 1) return false;
-        if (t >= 0) { const p = along(f.pts, t); out.push({ id: f.id, hue: f.hue, kind: f.kind, x: p.x, y: p.y, t }); }
+        if (t >= 0) { const p = along(f.pts, t); out.push({ id: f.id, hue: f.hue, kind: f.kind, from: f.from, x: p.x, y: p.y, t }); }
         return true;
       });
       return out;

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

@@ -4,7 +4,8 @@
 export interface PackStrip { src: string; frames: number; w: number; h: number; fps: number; ax: number; ay: number; dw: number; dh: number }
 export interface PackPoint { x: number; y: number }
 export interface PackArea { name: string; rect: { x: number; y: number; w: number; h: number }; seats: PackPoint[] }
-export interface PackFurniture { id: string; sprite: PackStrip; x: number; y: number; depth: number | "y"; activeWhen: string[] | null; activeSprite: PackStrip | null }
+/** `label` (#2574): its name tag, or null. */
+export interface PackFurniture { id: string; sprite: PackStrip; x: number; y: number; depth: number | "y"; activeWhen: string[] | null; activeSprite: PackStrip | null; label: string | null }
 export interface CheckedPack {
   format: 1; id: string; scale: number; background?: string; foreground?: string; matte?: string;
   areas: Record<string, PackArea>; stateZones: Record<string, string> | null; door: PackPoint;
@@ -36,4 +37,5 @@ export function checkLayoutOverrides(x: unknown): { ok: true; overrides: LayoutO
 export function applyOverrides(pack: CheckedPack, ov: LayoutOverrides | null | undefined): { ok: true; pack: CheckedPack } | { ok: false; error: string };
 export function overridesBetween(pack: CheckedPack, edited: CheckedPack): LayoutOverrides | null;
 export function poseStrip(set: Record<string, PackStrip> | null | undefined, pose: string, heading?: { dx: number; dy: number } | null): { strip: PackStrip; mirror: boolean } | null;
+export function walkStrip(f: { walk?: Record<string, PackStrip> | null; walking?: boolean; heading?: { dx: number; dy: number } | null } | null | undefined): { strip: PackStrip; mirror: boolean } | null;
 export function stripBox(st: PackStrip, x: number, y: number, mirror?: boolean): { x: number; y: number; w: number; h: number };

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

@@ -31,14 +31,27 @@
 //     "waypoints": [{ "id": "hall", "x": 640, "y": 600 }, …], "edges": [["hall", "east"], …],
 //                                                     optional: the walkable graph (else people walk straight)
 //     "furniture": [ { "id": "rack", "sprite": STRIP, "x": 1020, "y": 140, "depth": 2,
-//                      "activeWhen": "crashed", "activeSprite": STRIP } ],
+//                      "activeWhen": "crashed", "activeSprite": STRIP, "activeFor": "atlas", "loop": true, "label": "Rack",
+//                      "night": { "sprite": STRIP, "x": 300, "y": 420 },
+//                      "walk": { "walk": STRIP, "walkDown": STRIP, "walkUp": STRIP, "walkSide": STRIP } } ],
+//                                                     "label" (#2574): a name tag under it, like a person's
+//                                                     (an NPC drawn as furniture). "night" (#2568), optional: at bedtime
+//                                                     (when the viewer has it on: 00:00–06:00 their time) drawn as this
+//                                                     strip, playing, at (x, y) — its own place for either left out.
+//                                                     "walk" (#2596), optional: it strolls near its (x, y) and back
+//                                                     like an idle person, drawn walking by these strips as a
+//                                                     character set's walking poses ("walk" required); not at bedtime
+//                                                     with a "night".
 //                                                     drawn by depth: below 1000 under the people, 1000 and up over
 //                                                     them; "depth": "y" (the string) sorts it among the people by base
 //                                                     y — its anchor's y against each person's feet: someone whose feet
 //                                                     are lower down (a greater y; a tie too) is drawn after it, in
 //                                                     front. (x, y) is where the strip's anchor goes. `activeWhen` (a
 //                                                     state, or a list): while anyone shown is in it, the item plays its
-//                                                     strip (or `activeSprite`); otherwise it holds the first frame
+//                                                     strip (or `activeSprite`); otherwise it holds the first frame —
+//                                                     or, with "loop": true (#2570), plays its strip all along.
+//                                                     "activeFor" (an instance's name, or a list): only their state
+//                                                     counts, not anyone's (a room several people take turns in)
 //     "characters": { "default": { "working": STRIP, "idle": STRIP, "paused": STRIP, "needs": STRIP, "walk": STRIP,
 //                                  "walkDown": STRIP, "walkUp": STRIP, "walkSide": STRIP },
 //                     "fox": { … } },                 "default" with at least "idle" is required; a missing pose is idle.
@@ -47,6 +60,9 @@
 //                                                     walkSide, drawn as it is when moving right and mirrored when moving
 //                                                     left (so draw it facing right). A missing one is "walk", then idle
 //                                                     ("walk" itself is never mirrored)
+//                                                     A set may also have "prop": STRIP (#2562) — what its people
+//                                                     send: their messages, work and reports fly as it, in place of
+//                                                     the pack's "props" (a set without one: the pack's props)
 //     "byInstance": { "atlas": "fox" },               optional: an instance name → its character set
 //     "props": { "task": STRIP, "send": STRIP, "report": STRIP, "broadcast": STRIP },   optional traffic items
 //     "bubbles": { "en": { "working": ["On it."] }, "zh-TW": { … } }   optional: short lines per state (≤ 12 a state,
@@ -96,6 +112,10 @@ export const LOGICAL = { w: 1280, h: 720 };
 export const CHAR_DEPTH = 1000;
 export const PACK_STATES = ["needs", "crashed", "stuck", "working", "idle", "paused", "stopped", "missing"];
 const POSES = ["working", "idle", "paused", "needs", "walk", "walkDown", "walkUp", "walkSide"], PROPS = ["task", "send", "report", "broadcast"];
+/** A character set's strips: its poses, and what its people send (#2562). */
+const SET_STRIPS = [...POSES, "prop"];
+/** A furniture item's walking strips (#2596): a character set's walking poses. */
+const WALKS = ["walk", "walkDown", "walkUp", "walkSide"];
 const BUILT_IN = new Set(["pixel", "studio"]);
 const ID = /^[A-Za-z0-9_-]{1,40}$/;
 const SRC = /^[A-Za-z0-9._/-]{1,200}$/;
@@ -138,6 +158,24 @@ export function checkStrip(v, at = "strip", scale = 2) {
   return { src: src(v.src, `${at}.src`), frames: int(v.frames, 1, 32, `${at}.frames`), w, h, fps: v.fps === undefined ? 4 : num(v.fps, 0, 30, `${at}.fps`),
     ax: v.ax === undefined ? w / 2 : num(v.ax, 0, w, `${at}.ax`), ay: v.ay === undefined ? h : num(v.ay, 0, h, `${at}.ay`), dw, dh };
 }
+/** A furniture item's night (#2568): { sprite, x, y } — at bedtime it is drawn as `sprite` (playing) at (x, y), its own place when left out. */
+function nightOf(v, at, scale) {
+  if (v === undefined) return null;
+  obj(v, at); keys(v, ["sprite", "x", "y"], at);
+  return { sprite: checkStrip(v.sprite, `${at}.sprite`, scale), x: v.x === undefined ? null : num(v.x, 0, LOGICAL.w, `${at}.x`), y: v.y === undefined ? null : num(v.y, 0, LOGICAL.h, `${at}.y`) };
+}
+/** A furniture item's walk (#2596): its walking strips, picked by heading as a character set's (poseStrip); "walk" required. */
+function walkOf(v, at, scale) {
+  if (v === undefined) return null;
+  const w = strips(v, WALKS, at, scale);
+  if (!w.walk) throw new Refused(`${at}.walk`, "required");
+  return w;
+}
+/** Whose state an item's activeWhen watches (#2570): an instance's name, or a list of up to 8. */
+function names(v, at) {
+  const one = (s, here) => { if (typeof s !== "string" || !s || s.length > 200 || inherited(s) || /[\u0000-\u001f\u007f]/.test(s)) throw new Refused(here, "an instance's name"); return s; };
+  return Array.isArray(v) ? list(v, 8, at).map((s, i) => one(s, `${at}[${i}]`)) : [one(v, at)];
+}
 function strips(v, names, at, scale) {
   obj(v, at);
   keys(v, names, at);
@@ -204,20 +242,25 @@ export function checkSkinPack(x) {
     const fids = new Set();
     const furniture = list(x.furniture ?? [], LIMIT.furniture, "furniture").map((f, i) => {
       const at = `furniture[${i}]`;
-      obj(f, at); keys(f, ["id", "sprite", "x", "y", "depth", "activeWhen", "activeSprite"], at);
+      obj(f, at); keys(f, ["id", "sprite", "x", "y", "depth", "activeWhen", "activeSprite", "activeFor", "loop", "label", "night", "walk"], at);
       if (!nameOk(f.id) || fids.has(f.id)) throw new Refused(`${at}.id`, "a new name of letters, digits, _ or - (not an inherited one)");
       fids.add(f.id);
       if (f.activeSprite !== undefined && f.activeWhen === undefined) throw new Refused(`${at}.activeSprite`, "only with activeWhen");
+      if (f.activeFor !== undefined && f.activeWhen === undefined) throw new Refused(`${at}.activeFor`, "only with activeWhen");
+      if (f.loop !== undefined && typeof f.loop !== "boolean") throw new Refused(`${at}.loop`, "true or false");
+      if (f.label !== undefined && (typeof f.label !== "string" || !f.label.trim() || [...f.label].length > LIMIT.line || /[\u0000-\u001f\u007f]/.test(f.label))) throw new Refused(`${at}.label`, `1–${LIMIT.line} characters`);
       return { id: f.id, sprite: checkStrip(f.sprite, `${at}.sprite`, scale), x: num(f.x, 0, LOGICAL.w, `${at}.x`), y: num(f.y, 0, LOGICAL.h, `${at}.y`),
         depth: f.depth === "y" ? "y" : depth(f.depth ?? 0, `${at}.depth`), activeWhen: f.activeWhen === undefined ? null : states(f.activeWhen, `${at}.activeWhen`),
-        activeSprite: f.activeSprite === undefined ? null : checkStrip(f.activeSprite, `${at}.activeSprite`, scale) };
+        activeSprite: f.activeSprite === undefined ? null : checkStrip(f.activeSprite, `${at}.activeSprite`, scale),
+        activeFor: f.activeFor === undefined ? null : names(f.activeFor, `${at}.activeFor`), loop: f.loop === true, label: f.label === undefined ? null : f.label.trim(), night: nightOf(f.night, `${at}.night`, scale),
+        walk: walkOf(f.walk, `${at}.walk`, scale) };
     }).sort((a, b) => order(a) - order(b));
     const sets = obj(x.characters, "characters");
     if (Object.keys(sets).length > LIMIT.sets) throw new Refused("characters", `at most ${LIMIT.sets} sets`);
     const characters = {};
     for (const [k, v] of Object.entries(sets)) {
       if (!nameOk(k)) throw new Refused(`characters.${k}`, "a name of letters, digits, _ or - (not an inherited one)");
-      characters[k] = strips(v, POSES, `characters.${k}`, scale);
+      characters[k] = strips(v, SET_STRIPS, `characters.${k}`, scale);
       if (!characters[k].idle) throw new Refused(`characters.${k}.idle`, "required");
     }
     if (!own(characters, "default")) throw new Refused("characters.default", "required");
@@ -261,13 +304,18 @@ export function checkSkinPack(x) {
 export const skinPackOk = (x) => { const r = checkSkinPack(x); return r.ok ? r.pack : null; };
 /** Every image a pack names (what a loader fetches before spriteSkin draws). */
 export const packImages = (pack) => [...new Set([pack.background, pack.foreground, pack.room.floor, pack.room.wall, pack.desk.back, pack.desk.front, pack.desk.lit,
-  ...pack.furniture.flatMap((f) => [f.sprite.src, f.activeSprite && f.activeSprite.src]),
+  ...pack.furniture.flatMap((f) => [f.sprite.src, f.activeSprite && f.activeSprite.src, f.night && f.night.sprite.src, ...Object.values(f.walk || {}).map((st) => st.src)]),
   ...Object.values(pack.characters).flatMap((s) => Object.values(s).map((st) => st.src)), ...Object.values(pack.props).map((st) => st.src)].filter(Boolean))];
 
 /** Every frame strip a checked pack names, with where (the host checks each image is frames·w × h). */
 export function packStrips(pack) {
   const out = [];
-  for (const f of pack.furniture) { out.push({ at: `furniture.${f.id}.sprite`, strip: f.sprite }); if (f.activeSprite) out.push({ at: `furniture.${f.id}.activeSprite`, strip: f.activeSprite }); }
+  for (const f of pack.furniture) {
+    out.push({ at: `furniture.${f.id}.sprite`, strip: f.sprite });
+    if (f.activeSprite) out.push({ at: `furniture.${f.id}.activeSprite`, strip: f.activeSprite });
+    if (f.night) out.push({ at: `furniture.${f.id}.night.sprite`, strip: f.night.sprite });
+    for (const [k, st] of Object.entries(f.walk || {})) out.push({ at: `furniture.${f.id}.walk.${k}`, strip: st });
+  }
   for (const [k, set] of Object.entries(pack.characters)) for (const [pose, st] of Object.entries(set)) out.push({ at: `characters.${k}.${pose}`, strip: st });
   for (const [k, st] of Object.entries(pack.props)) out.push({ at: `props.${k}`, strip: st });
   return out;
@@ -403,6 +451,9 @@ export function poseStrip(set, pose, heading = null) {
   const st = own(set, pose) || own(set, "idle");
   return st ? { strip: st, mirror: false } : null;
 }
+/** The strip a furniture item shows while it walks (#2596: an NPC with `walk`, `walking` and `heading` set where it is
+ * drawn): its walk strip by heading, as a character's (poseStrip); null when it stands (its own sprite, as before). */
+export const walkStrip = (f) => (f && f.walking && f.walk ? poseStrip(f.walk, "walk", f.heading) : null);
 /** The box (logical units) a strip covers with its anchor at (x, y): its displayed size; mirrored about the anchor. */
 export function stripBox(st, x, y, mirror = false) {
   const kx = st.dw / st.w, ky = st.dh / st.h;

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

@@ -41,7 +41,7 @@
 // along the pack's waypoints), tags, props and bubbles are drawn each frame, furniture by depth around the people (depth "y":
 // among them by base y), then the foreground, then the crowd counts, tags and bubbles.
 import { frameAt, nameHash } from "./fleet-office-model.js";
-import { CHAR_DEPTH, LOGICAL, checkSkinPack, own, packImages, poseStrip, stripBox } from "./fleet-office-pack.js";
+import { CHAR_DEPTH, LOGICAL, checkSkinPack, own, packImages, poseStrip, stripBox, walkStrip } from "./fleet-office-pack.js";
 
 export { nameHash };
 
@@ -513,8 +513,12 @@ export function spriteSkin(pack, images, base = pixelSkin) {
     },
     drawFurniture(ctx, f, active, ms, env) {
       if (f.shape) { drawFurniture(ctx, f, active, ms, env); return; }
-      // Active: its strip (or activeSprite) plays; otherwise its first frame holds.
+      // An NPC walking (#2596): its walk strip for its heading (walkSide mirrored going left), when its picture is loaded.
+      const ws = walkStrip(f);
+      if (ws && strip(ctx, ws.strip, ms, f.x, f.y, null, ws.mirror)) return;
+      // Active: its activeSprite (or its strip) plays; otherwise its strip loops ("loop", #2570) or its first frame holds.
       if (active) strip(ctx, f.activeSprite || f.sprite, ms, f.x, f.y);
+      else if (f.loop) strip(ctx, f.sprite, ms, f.x, f.y);
       else strip(ctx, f.sprite, 0, f.x, f.y, 0);
     },
     drawCharacter(ctx, d, look, ms, env) {
@@ -530,7 +534,11 @@ export function spriteSkin(pack, images, base = pixelSkin) {
       const ps = shown({ ...look, heading: at.heading }, !!at.walking);
       return ps ? stripBox(ps.strip, at.x, at.y, ps.mirror) : base.charBox(look, at);
     },
-    drawProp(ctx, it, ms, env) { if (!strip(ctx, own(pack.props, it.hue), ms, it.x, it.y)) base.drawProp(ctx, it, ms, env); },
+    // An item in the air: its sender's own (their set's "prop", #2562), else the pack's for its kind, else the built-in one.
+    drawProp(ctx, it, ms, env) {
+      const mine = it.from ? own(setOf({ name: it.from }) || {}, "prop") : null;
+      if (!strip(ctx, mine || own(pack.props, it.hue), ms, it.x, it.y)) base.drawProp(ctx, it, ms, env);
+    },
   };
 }
 
@@ -541,7 +549,8 @@ export const BUILT_IN_SKINS = ["pixel", "studio"];
 export const skinFor = (id, packs = null) => SKINS.get(id) || (packs && packs.get(id)) || pixelSkin;
 
 const loaded = new Map();                                 // `${id}@${sha}` → Promise<OfficeSkin | null>
-const MAX_LOADED = 16;
+// Room for every pack the host keeps (web-office-skins.ts SKIN_LIMITS.packs) and a few replaced ones (each a new sha).
+const MAX_LOADED = 24;
 const defaultImage = (url) => new Promise((resolve) => {
   if (typeof Image !== "function") { resolve(null); return; }
   const im = new Image();

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

@@ -10,7 +10,7 @@
 import { AUTO_ID, filterOk, officesOk } from "./fleet-office-model.js";
 import { fitModeOk, savedOk } from "./fleet-office-view.js";
 
-const CHOICE_KEY = "agend_org_office", FILTER_KEY = "agend_org_office_filter", SKIN_KEY = "agend_org_office_skin", ASLEEP_KEY = "agend_org_office_hide_asleep";
+const CHOICE_KEY = "agend_org_office", FILTER_KEY = "agend_org_office_filter", SKIN_KEY = "agend_org_office_skin", ASLEEP_KEY = "agend_org_office_hide_asleep", NIGHT_KEY = "agend_org_office_night";
 /** #2554: "0" when All offices leaves the lobby tile out (default: shown). */
 const LOBBY_KEY = "agend_org_office_lobby";
 /** #2540: { "<office>@<style>": [k, cx, cy] (and a 1 after them: a fit) } — the last VIEWS_MAX views, the most recent last. */
@@ -30,6 +30,20 @@ export function skinListOk(d) {
 }
 
 /** `fetch`: the caller's (a lease's, so an answer after the person moved on is dropped); `storage`: default localStorage. */
+/**
+ * Agents' acts as the host sends them (GET /ui/office-acts, the `office_acts` event), checked: the well-formed ones.
+ * `now`: the host's clock when it sent them — each end is moved onto this page's clock (they may differ).
+ */
+export function actsOk(list, now) {
+  const skew = typeof now === "number" && Number.isFinite(now) ? now - Date.now() : 0;
+  const str = (v) => typeof v === "string" && v.length > 0 && v.length <= 200, num = (v) => typeof v === "number" && Number.isFinite(v);
+  return (Array.isArray(list) ? list : []).filter((a) => a && typeof a === "object" && str(a.instance) && str(a.office) && num(a.until)
+    && (a.x === undefined || num(a.x)) && (a.y === undefined || num(a.y)) && (a.person === undefined || str(a.person))
+    && (a.say === undefined || (typeof a.say === "string" && a.say.length <= 40)) && (a.pose === undefined || ["idle", "working", "needs", "paused"].includes(a.pose)))
+    .map((a) => ({ instance: a.instance, office: a.office, until: a.until - skew, ...(num(a.since) ? { since: a.since } : {}), ...(str(a.state) ? { state: a.state } : {}),
+      ...(num(a.x) && num(a.y) ? { x: a.x, y: a.y } : {}),
+      ...(a.person ? { person: a.person } : {}), ...(a.say ? { say: a.say } : {}), ...(a.pose ? { pose: a.pose } : {}) }));
+}
 export function createOfficeStore({ fetch: get = globalThis.fetch, storage } = {}) {
   const st = () => { try { return storage || globalThis.localStorage || null; } catch { return null; } };
   const read = (k) => { try { const s = st(); return s ? s.getItem(k) : null; } catch { return null; } };
@@ -57,6 +71,15 @@ export function createOfficeStore({ fetch: get = globalThis.fetch, storage } = {
         return r.ok ? { ok: true, rev: d.rev, offices: officesOk(d.offices) } : { ok: false, status: r.status, error: d.error || "offices_failed" };
       } catch { return { ok: false, status: 0, error: "offices_failed" }; }
     },
+    /** #2578: what agents are doing in the offices now (office_set): their acts, or null when they could not be read. */
+    async acts() {
+      try {
+        const r = await get("/ui/office-acts", { method: "GET", headers });
+        if (!r || !r.ok) return null;
+        const d = await r.json();
+        return actsOk(d && d.acts, d && d.now);
+      } catch { return null; }
+    },
     /** The skin packs the host keeps: { rev, packs: [{ id, name, sha }] }; null when they could not be read. */
     async skins() {
       try {
@@ -96,6 +119,9 @@ export function createOfficeStore({ fetch: get = globalThis.fetch, storage } = {
     /** Whether paused and stopped people are left out of the Office here (default: shown). */
     hideAsleep: () => read(ASLEEP_KEY) === "1",
     saveHideAsleep: (v) => write(ASLEEP_KEY, v ? "1" : "0"),
+    /** #2568: whether the idle go to bed at night (00:00–06:00 on this device's clock) here (default: off). */
+    nightOn: () => read(NIGHT_KEY) === "1",
+    saveNightOn: (v) => write(NIGHT_KEY, v ? "1" : "0"),
     /** #2554: whether All offices shows the lobby tile (the instances in no stored office) here (default: shown). */
     lobbyTile: () => read(LOBBY_KEY) !== "0",
     saveLobbyTile: (v) => write(LOBBY_KEY, v ? "1" : "0"),