@songsid/agend 2.3.2-beta.1 → 2.3.2-beta.10

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/chat-strings.js

@@ -116,7 +116,7 @@ register("chat", {
     file_empty: "empty file", file_too_large: "over {0} MB", file_too_large_public: "over {0} MB — the most the public link carries in one upload", file_too_many: "at most {0} files per message", file_too_much: "the files together would be over {0} MB", removeFile: "Remove", putBack: "Put back", 
     noMessages: "Type a task below.",
     pick: "Choose an agent to start chatting.", noAgents: "Create an agent to start chatting.", newAgent: "New agent", notFound: "No instance called “{0}”", notFoundHint: "It may have been deleted or renamed.", backToList: "Choose an agent",
-    details: "Instance details", start: "Start instance", stopInstance: "Stop instance", restart: "Restart instance", delete: "Delete instance…",
+    details: "Instance details", fullWidth: "Full width", start: "Start instance", stopInstance: "Stop instance", restart: "Restart instance", delete: "Delete instance…",
     started: "{0} started", stoppedInst: "{0} stopped", restarted: "{0} restarted", instanceDeleted: "{0} was deleted",
     deleteTitle: "Delete {0}?", deleteHelp: "This removes the instance from the fleet and stops it. Its working directory is kept. Type “delete {0}” to confirm.", deleteGo: "Delete", cancel: "Cancel",
     loadFailed: "Failed to load", tour: "Chat tour", tourBtnTitle: "Show the chat tour on an agent's chat", tourNoAgent: "Choose an agent before opening the chat tour.",
@@ -255,7 +255,7 @@ register("chat", {
     file_empty: "空檔案", file_too_large: "超過 {0} MB", file_too_large_public: "超過 {0} MB，這是公開連結單次上傳的上限", file_too_many: "每則訊息最多 {0} 個檔案", file_too_much: "檔案合計會超過 {0} MB", removeFile: "移除", putBack: "放回輸入框", 
     noMessages: "直接在下方輸入任務。",
     pick: "選一個 Agent 開始聊天。", noAgents: "先建立一個 Agent，再開始聊天。", newAgent: "新增 Agent", notFound: "沒有叫「{0}」的 instance", notFoundHint: "它可能已被刪除或改名。", backToList: "選擇 Agent",
-    details: "Instance 詳細資料", start: "啟動 instance", stopInstance: "停止 instance", restart: "重新啟動 instance", delete: "刪除 instance…",
+    details: "Instance 詳細資料", fullWidth: "全寬", start: "啟動 instance", stopInstance: "停止 instance", restart: "重新啟動 instance", delete: "刪除 instance…",
     started: "{0} 已啟動", stoppedInst: "{0} 已停止", restarted: "{0} 已重新啟動", instanceDeleted: "{0} 已刪除",
     deleteTitle: "要刪除 {0} 嗎？", deleteHelp: "這會把 instance 從 fleet 移除並停止它，工作目錄會保留。請輸入「delete {0}」確認。", deleteGo: "刪除", cancel: "取消",
     loadFailed: "載入失敗", tour: "聊天導覽", tourBtnTitle: "在 Agent 的聊天上開啟聊天導覽", tourNoAgent: "請先選一個 Agent，再開啟聊天導覽。",

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

@@ -8,9 +8,10 @@
 // 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";
+import { BUILT_IN_SKINS } from "./fleet-office-skin.js";
 
 register("orge", {
   en: {
@@ -48,7 +49,7 @@ register("orge", {
 });
 const te = (k, ...v) => t(`orge.${k}`, ...v);
 export const MAX_OFFICES = 20;
-const STYLES = ["pixel", "studio"];
+const STYLES = BUILT_IN_SKINS;
 
 /** A file's bytes as base64 (in slices: a large picture never goes through one huge string call). */
 export function base64Of(bytes) {
@@ -147,8 +148,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,14 +161,14 @@ 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 = () => {
     if (draft.length >= MAX_OFFICES) return;
     const id = newOfficeId(new Set(draft.map((o) => o.id)));
-    setDraft((d) => [...d, { id, name: te("newName"), skin: "pixel", members: [], layout: null }]);
+    setDraft((d) => [...d, { id, name: te("newName"), skin: "cozy", members: [], layout: null }]);   // #2631: a new office is cozy
     setOpen(id);
   };
   // Everything is frozen from Save until its answer (and a 409's re-read) is in (#2424 review): no edit made meanwhile
@@ -191,7 +195,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>`}
@@ -201,7 +206,7 @@ export function OfficeEditor({ offices, rev, view, store, packs = [], ask = () =
           <input type="text" class="oe-name" maxlength="60" value=${o.name} onInput=${(e) => set(o.id, { name: e.target.value })} /></label>
         <label class="oe-field"><span class="oe-label">${te("styleLabel")}</span>
           <select class="tb-select oe-style" value=${o.skin} onChange=${(e) => set(o.id, { skin: e.target.value })}>
-            ${STYLES.map((s) => html`<option key=${s} value=${s}>${t(`orgo.style_${s}`)}</option>`)}
+            ${STYLES.filter((s) => !packs.some((pk) => pk.id === s)).map((s) => html`<option key=${s} value=${s}>${t(`orgo.style_${s}`)}</option>`)}
             ${packs.map((pk) => html`<option key=${`pack:${pk.id}`} value=${pk.id}>${pk.name}</option>`)}
             ${STYLES.includes(o.skin) || packs.some((pk) => pk.id === o.skin) ? null : html`<option key=${o.skin} value=${o.skin}>${te("styleUnknown", o.skin)}</option>`}</select></label>
         <button type="button" class="btn btn-sm oe-members-btn" aria-expanded=${open === o.id ? "true" : "false"} onClick=${() => setOpen(open === o.id ? null : o.id)}>
@@ -220,5 +225,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

@@ -4,13 +4,18 @@
 // overridesBetween), saved with the whole list and the rev read (PUT /ui/offices; a change made meanwhile is a 409).
 // Reset goes back to the pack's own positions. A "show coordinates" overlay draws the 1280×720 logical grid.
 //
+// #2665: an item with a `night` (#2568) has a night handle too — its night strip drawn faint on the canvas (as the
+// seats' figures, #2558), a moon, and a thin line to its day place. One that sleeps in place shows it on its day place
+// (and it follows the item); dragged away, the item has its own night place; its Reset puts back the pack's.
+//
 // Every handle is a button for the keyboard too: Tab to it, the arrow keys move it (Shift: by 10), Delete removes a
 // waypoint; the selected waypoint's corridors are listed with a way to join or unjoin each. Never offered to a guest,
 // 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", {
@@ -18,7 +23,8 @@ register("orgl", {
     edit: "Edit layout", title: "Edit layout", coords: "Show coordinates", addWaypoint: "Add waypoint", removeWaypoint: "Remove waypoint",
     joinTo: "Join to", join: "Join", unjoin: "Unjoin {0}", corridors: "Corridors", none: "Nothing selected: pick a seat, an item, the door or a waypoint.",
     reset: "Reset to the pack's layout", save: "Save layout", cancel: "Cancel", saved: "Layout saved.", hint: "Drag, or use the arrow keys (Shift: by 10).",
-    seat: "Seat {0} in {1}", furniture: "Item {0}", door: "Door", waypoint: "Waypoint {0}", at: "{0} at {1}, {2}",
+    seat: "Seat {0} in {1}", furniture: "Item {0}", night: "Item {0} (night)", door: "Door", waypoint: "Waypoint {0}", at: "{0} at {1}, {2}",
+    nightReset: "Back to the pack's night place",
     changed: "Someone changed the offices meanwhile. Your layout is kept: Save again puts it on the current list.",
     failed: "The layout was not saved ({0}).", rateLimited: "Too many saves. Try again in a minute.",
     stale: "This office was removed or its style changed meanwhile: this layout can no longer be saved. Cancel closes it.",
@@ -27,7 +33,8 @@ register("orgl", {
     edit: "編輯配置", title: "編輯配置", coords: "顯示座標", addWaypoint: "新增路徑點", removeWaypoint: "移除路徑點",
     joinTo: "連到", join: "連接", unjoin: "取消連接 {0}", corridors: "走道", none: "尚未選取：請選座位、家具、門或路徑點。",
     reset: "還原成 pack 的配置", save: "儲存配置", cancel: "取消", saved: "配置已儲存。", hint: "拖曳，或用方向鍵移動（Shift：一次 10）。",
-    seat: "{1} 的座位 {0}", furniture: "家具 {0}", door: "門", waypoint: "路徑點 {0}", at: "{0}，位置 {1}, {2}",
+    seat: "{1} 的座位 {0}", furniture: "家具 {0}", night: "家具 {0}（夜間）", door: "門", waypoint: "路徑點 {0}", at: "{0}，位置 {1}, {2}",
+    nightReset: "回到 pack 的夜間位置",
     changed: "有人在這期間修改了辦公室。你的配置已保留：再按一次儲存，會套用到目前的清單。",
     failed: "配置沒有儲存（{0}）。", rateLimited: "儲存太頻繁，請一分鐘後再試。",
     stale: "這個辦公室在這期間被移除，或它的風格已改變：這份配置無法再儲存。按取消關閉。",
@@ -38,11 +45,21 @@ const tl = (k, ...v) => t(`orgl.${k}`, ...v);
 // ── The pure part ──
 
 const clamp = (v, lo, hi) => Math.max(lo, Math.min(hi, Math.round(v)));
-/** Every handle on a pack: { key, kind, label, x, y } — seats by area, furniture, the door, the waypoints. */
+/** An item's night place (#2665): its own, or (in place) its day place; `own` whether it has one. */
+const nightAt = (f) => (f.night.x !== null && f.night.x !== undefined && f.night.y !== null && f.night.y !== undefined ? { x: f.night.x, y: f.night.y, own: true } : { x: f.x, y: f.y, own: false });
+/**
+ * Every handle on a pack: { key, kind, label, x, y } — seats by area, furniture, each item's night place (#2665: an
+ * item with a `night`; `day` its day place, `inPlace` while it sleeps there), the door, the waypoints.
+ */
 export function handlesOf(pack) {
   const out = [];
   for (const [name, a] of Object.entries(pack.areas)) a.seats.forEach((s, i) => out.push({ key: `seat:${name}:${i}`, kind: "seat", label: tl("seat", i + 1, name), x: s.x, y: s.y }));
   for (const f of pack.furniture) out.push({ key: `furn:${f.id}`, kind: "furniture", label: tl("furniture", f.id), x: f.x, y: f.y });
+  for (const f of pack.furniture) {
+    if (!f.night) continue;
+    const n = nightAt(f);
+    out.push({ key: `night:${f.id}`, kind: "night", label: tl("night", f.id), x: n.x, y: n.y, day: { x: f.x, y: f.y }, inPlace: !n.own });
+  }
   out.push({ key: "door", kind: "door", label: tl("door"), x: pack.door.x, y: pack.door.y });
   for (const w of pack.waypoints) out.push({ key: `wp:${w.id}`, kind: "waypoint", label: tl("waypoint", w.id), x: w.x, y: w.y });
   return out;
@@ -58,6 +75,7 @@ export function moveHandle(pack, key, x, y) {
     return { ...pack, areas: { ...pack.areas, [a]: { ...area, seats: area.seats.map((s, j) => (j === i ? p : s)) } } };
   }
   if (kind === "furn") return { ...pack, furniture: pack.furniture.map((f) => (f.id === a ? { ...f, ...inCanvas() } : f)) };
+  if (kind === "night") return { ...pack, furniture: pack.furniture.map((f) => (f.id === a && f.night ? { ...f, night: { ...f.night, ...inCanvas() } } : f)) };
   if (kind === "door") return { ...pack, door: inCanvas() };
   if (kind === "wp") return { ...pack, waypoints: pack.waypoints.map((w) => (w.id === a ? { ...w, ...inCanvas() } : w)) };
   return pack;
@@ -80,12 +98,23 @@ export function toggleEdge(pack, a, b) {
   const has = (e) => (e[0] === a && e[1] === b) || (e[0] === b && e[1] === a);
   return { ...pack, edges: pack.edges.some(has) ? pack.edges.filter((e) => !has(e)) : [...pack.edges, [a, b]] };
 }
+/** #2665: item `id`'s night place back to the pack's (`base`): its own x/y, or in place again. */
+export function resetNight(pack, base, id) {
+  const o = base.furniture.find((f) => f.id === id);
+  if (!o || !o.night) return pack;
+  return { ...pack, furniture: pack.furniture.map((f) => (f.id === id && f.night ? { ...f, night: { ...f.night, x: o.night.x, y: o.night.y } } : f)) };
+}
 /** What Save keeps: the overrides between the pack and the edited layout (null: the pack's own). */
 export const layoutOverrides = (base, edited) => overridesBetween(base, edited);
 
 // ── The overlay ──
 
 const GRID = 80, LABEL = 160;
+/**
+ * A night handle's moon (#2665): a crescent centred near (x, y). Night handles are drawn under the others: one in place
+ * is a wider ring round its item's square (the item stays grabbable), its moon at the ring's corner.
+ */
+const moonPath = (x, y) => `M ${x + 1} ${y - 5} A 5 5 0 1 0 ${x + 1} ${y + 5} A 4 4 0 1 1 ${x + 1} ${y - 5} Z`;
 const KEY_STEP = { ArrowLeft: [-1, 0], ArrowRight: [1, 0], ArrowUp: [0, -1], ArrowDown: [0, 1] };
 
 /**
@@ -96,7 +125,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);
@@ -130,6 +159,7 @@ export function LayoutEditor({ base, start, place = null, stale = "", onChange,
   };
   const add = () => { const at = selected ? { x: selected.x + 40, y: selected.y } : { x: LOGICAL.w / 2, y: LOGICAL.h / 2 }; const r = addWaypoint(edited, at.x, at.y); change(r.pack); setSel(`wp:${r.id}`); };
   const wpSel = selected && selected.kind === "waypoint" ? selected.key.slice(3) : null;
+  const nightSel = selected && selected.kind === "night" ? selected.key.slice(6) : null;
   const save = async () => {
     if (busy) return;
     setBusy(true); setMsg("");
@@ -149,49 +179,57 @@ 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>
+      ${nightSel ? html`<button type="button" class="btn btn-sm ol-night-reset" onClick=${() => change(resetNight(edited, base, nightSel))} disabled=${busy}>${tl("nightReset")}</button>` : null}
+      ${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}>
         ${grid}
         ${Object.values(edited.areas).map((a) => html`<rect key=${`a:${a.name}`} class="ol-area" x=${a.rect.x} y=${a.rect.y} width=${a.rect.w} height=${a.rect.h} />`)}
         ${edited.edges.map((e) => { const p = at.get(e[0]), q = at.get(e[1]); return p && q ? html`<line key=${`e:${edgeKey(e)}`} class="ol-edge" x1=${p.x} y1=${p.y} x2=${q.x} y2=${q.y} />` : null; })}
-        ${handles.map((h) => html`<g key=${h.key} class=${`ol-handle ol-${h.kind}${sel === h.key ? " on" : ""}`} data-handle=${h.key} tabindex="0" role="button"
+        ${handles.filter((h) => h.kind === "night" && !h.inPlace).map((h) => html`<line key=${`nl:${h.key}`} class="ol-night-line" x1=${h.day.x} y1=${h.day.y} x2=${h.x} y2=${h.y} />`)}
+        ${[...handles.filter((h) => h.kind === "night"), ...handles.filter((h) => h.kind !== "night")].map((h) => html`<g key=${h.key} class=${`ol-handle ol-${h.kind}${sel === h.key ? " on" : ""}`} data-handle=${h.key} tabindex="0" role="button"
             aria-label=${tl("at", h.label, h.x, h.y)} aria-pressed=${sel === h.key ? "true" : "false"}
             onPointerDown=${down(h.key)} onKeyDown=${keyOn(h)} onFocus=${() => setSel(h.key)}>
           ${h.kind === "door" ? html`<rect x=${h.x - 9} y=${h.y - 9} width="18" height="18" transform=${`rotate(45 ${h.x} ${h.y})`} />`
             : h.kind === "furniture" ? html`<rect x=${h.x - 8} y=${h.y - 8} width="16" height="16" />`
+            : h.kind === "night" ? html`<circle cx=${h.x} cy=${h.y} r=${h.inPlace ? 15 : 8} /><path class="ol-moon" d=${h.inPlace ? moonPath(h.x + 10, h.y - 10) : moonPath(h.x, h.y)} />`
             : html`<circle cx=${h.x} cy=${h.y} r=${h.kind === "seat" ? 9 : 7} />`}
           ${coords && sel === h.key ? html`<text class="ol-coord" x=${h.x + 12} y=${h.y - 10}>${h.x}, ${h.y}</text>` : null}
         </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;