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

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-store.js

@@ -208,11 +208,12 @@ export function createChatStore(deps) {
     deps.setTimeout(() => { if (s.prompts[d.nonce] === p) { delete s.prompts[d.nonce]; changed(p.instance); } }, 60000);
     changed(p.instance);
   }
-  async function answerPrompt(p, action) {
+  /** `text`: #2675 — the typed answer, for an action the prompt shows a text box for. */
+  async function answerPrompt(p, action, text) {
     if (p.busy || p.resolved) return;
     p.busy = true; changed(p.instance);
     let r;
-    try { r = await api("POST", "/ui/prompt", { instance: p.instance, nonce: p.nonce, action }); }
+    try { r = await api("POST", "/ui/prompt", { instance: p.instance, nonce: p.nonce, action, ...(text !== undefined ? { text } : {}) }); }
     catch (err) { r = { error: err && err.message ? err.message : t("chat.disconnected") }; }
     if (r && r.answered) return;   // the outcome arrives as prompt_resolved
     const latest = s.prompts[p.nonce];

package/dist/ui/chat-strings.js

@@ -111,12 +111,12 @@ register("chat", {
     clicked: "Clicked:", clickShow: "Show the message these buttons were on",
     copy: "Copy", copyMessage: "Copy this reply", copied: "Copied", copyFailed: "Copy failed", wrap: "Wrap", showAll: "Show all {0} lines", showMore: "Show more", showLess: "Show less", jumpLatest: "Latest", newBelow: "{0} new",
     disconnected: "disconnected", tick_queued: "Waiting behind another message", tick_processing: "Handed to the agent", tick_delivered: "The agent has it", tick_failed: "Not delivered", tick_cancelled: "Dropped by Stop", reactedBy: "{0} reacted",
-    promptAnswering: "Answering…", promptGone: "This prompt is no longer open", promptFor: "{0}: {1}",
+    promptAnswering: "Answering…", promptGone: "This prompt is no longer open", promptTextPlaceholder: "Your answer", promptTextSend: "Send answer", promptFor: "{0}: {1}",
     working: "{0} is working…", stuck: "{0} looks stuck", stopReply: "Stop reply", stopReplyTitle: "Stop the current reply (like Esc) and drop the messages still waiting. The instance keeps running.", stopSent: "Stopped",
     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.",
@@ -250,12 +250,12 @@ register("chat", {
     clicked: "點選了：", clickShow: "顯示這些按鈕所在的訊息",
     copy: "複製", copyMessage: "複製這則回覆", copied: "已複製", copyFailed: "複製失敗", wrap: "換行", showAll: "展開全部 {0} 行", showMore: "顯示更多", showLess: "收合", jumpLatest: "最新", newBelow: "{0} 則新訊息",
     disconnected: "已斷線", tick_queued: "排在前一則訊息之後", tick_processing: "已交給 agent", tick_delivered: "agent 已收到", tick_failed: "未送達", tick_cancelled: "已被中止取消", reactedBy: "{0} 的回應",
-    promptAnswering: "回覆中…", promptGone: "這個提示已經結束", promptFor: "{0}：{1}",
+    promptAnswering: "回覆中…", promptGone: "這個提示已經結束", promptTextPlaceholder: "你的回答", promptTextSend: "送出回答", promptFor: "{0}：{1}",
     working: "{0} 處理中…", stuck: "{0} 似乎卡住了", stopReply: "中止回覆", stopReplyTitle: "中止目前的回覆（同 Esc），並取消還在排隊的訊息。instance 會繼續運行。", stopSent: "已中止",
     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

@@ -4,13 +4,15 @@
 // (PUT /ui/offices; a change made meanwhile is a 409: read again, nothing overwritten). A stored office's layout (seats,
 // paths) and its layout overrides (Edit layout, fleet-office-layout.js) are kept as they are. Skin packs (#2513): the
 // packs the host keeps are styles to choose; an admin uploads one here (its manifest.json and its PNGs, picked together
-// or as a folder — sent at once, checked by the host, which keeps it whole) or deletes one. Never offered to a guest,
+// or as a folder — sent at once, checked by the host, which keeps it whole) or deletes one; #2692: which agents may change
+// packs, whether their changes need the admin's yes, those waiting for it, and the newest log entries. Never offered to a guest,
 // the public link or a read-only session (the host refuses them too).
-import { html, useMemo, useState } from "/assets/app-html.js";
+import { html, useEffect, 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: {
@@ -28,6 +30,11 @@ register("orge", {
     packsNone: "No skin packs yet.", upload: "Upload a skin pack", uploadFolder: "Upload a folder", uploading: "Uploading…", uploaded: "Skin pack “{0}” uploaded.",
     uploadFailed: "The skin pack was not uploaded: {0}", noManifest: "no manifest.json among the files", badManifest: "manifest.json is not JSON",
     removePack: "Delete {0}", removedPack: "Skin pack “{0}” deleted.", removeFailed: "The skin pack was not deleted ({0}).",
+    agentsTitle: "Agents changing packs", agentsLead: "Agents with Office skin packs switched on (Settings → agent) may check, upload, replace, delete and restore packs. Each change is logged and told to you in General.",
+    agentsNone: "No agent may change packs.", agentsAllowed: "May change packs: {0}", approval: "Their changes",
+    approvalApply: "Apply at once", approvalApprove: "Need my yes", pendingNone: "Nothing waits for your yes.",
+    approve: "Approve", reject: "Reject", decided: "Done: {0}", decideFailed: "Not done: {0}", recent: "Recent changes", refresh: "Refresh",
+    act_upload: "upload", act_delete: "delete", act_restore: "restore", act_style: "office style",
   },
   "zh-TW": {
     edit: "編輯辦公室", title: "辦公室", lead: "這個 fleet 的每個人在辦公室檢視中都會看到這些辦公室。沒有選任何成員的辦公室會顯示全部。",
@@ -44,11 +51,16 @@ register("orge", {
     packsNone: "還沒有外觀包。", upload: "上傳外觀包", uploadFolder: "上傳資料夾", uploading: "上傳中…", uploaded: "已上傳外觀包「{0}」。",
     uploadFailed: "外觀包沒有上傳：{0}", noManifest: "檔案中沒有 manifest.json", badManifest: "manifest.json 不是 JSON",
     removePack: "刪除 {0}", removedPack: "已刪除外觀包「{0}」。", removeFailed: "外觀包沒有刪除（{0}）。",
+    agentsTitle: "會改外觀包的 agent", agentsLead: "開啟「辦公室外觀包」的 agent（設定 → agent）可以檢查、上傳、取代、刪除與還原外觀包。每次變更都會記錄，並在 General 通知你。",
+    agentsNone: "沒有 agent 能改外觀包。", agentsAllowed: "可以改外觀包：{0}", approval: "它們的變更",
+    approvalApply: "直接套用", approvalApprove: "要我核准", pendingNone: "沒有等你核准的變更。",
+    approve: "核准", reject: "拒絕", decided: "完成：{0}", decideFailed: "沒有完成：{0}", recent: "最近的變更", refresh: "重新整理",
+    act_upload: "上傳", act_delete: "刪除", act_restore: "還原", act_style: "辦公室風格",
   },
 });
 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) {
@@ -113,6 +125,46 @@ function Packs({ packs, store }) {
   </fieldset>`;
 }
 
+/**
+ * #2692: the agents that may change packs, the fleet's approval mode, the changes waiting for an admin's yes (approve /
+ * reject; judged again by the host on a yes) and the newest log entries. Read on opening, after each action, and when
+ * the packs change.
+ */
+function PackAgents({ store, packs }) {
+  const [d, setD] = useState(null);
+  const [busy, setBusy] = useState(false);
+  const [msg, setMsg] = useState("");
+  const load = async () => { const c = await store.packChanges(); if (c) setD(c); };
+  useEffect(() => { void load(); }, [packs.map((p) => `${p.id}:${p.sha}`).join(",")]);
+  if (!d) return null;
+  const mode = async (approval) => {
+    setBusy(true); setMsg("");
+    try { const r = await store.setPackApproval(approval); if (r.ok && r.changes) setD(r.changes); else setMsg(te("decideFailed", r.error)); } finally { setBusy(false); }
+  };
+  const decide = async (id, decision) => {
+    setBusy(true); setMsg("");
+    try { const r = await store.decidePackChange(id, decision); setMsg(r.ok ? te("decided", r.text) : te("decideFailed", r.detail || r.error)); await load(); } finally { setBusy(false); }
+  };
+  const what = (v) => `${te(`act_${v.action}`)} ${v.action === "style" ? `${v.office} → ${v.style}` : v.packs.map((p) => p.name !== p.id ? `${p.name} (${p.id})` : p.id).join(", ")}`;
+  return html`<fieldset class="oe-packs oe-form oe-pack-agents" disabled=${busy}>
+    <legend class="oe-label">${te("agentsTitle")}</legend>
+    <p class="note">${te("agentsLead")}</p>
+    <p class="note" id="oePackAgents">${d.agents.length ? te("agentsAllowed", d.agents.join(", ")) : te("agentsNone")}</p>
+    <label class="oe-field"><span class="oe-label">${te("approval")}</span>
+      <select class="tb-select oe-pack-approval" value=${d.approval} onChange=${(e) => mode(e.target.value)}>
+        <option value="approve">${te("approvalApprove")}</option><option value="apply">${te("approvalApply")}</option></select></label>
+    ${d.pending.length ? html`<ul class="oe-pack-list">${d.pending.map((v) => html`<li key=${v.id} class="oe-pack oe-pack-pending" data-change=${v.id}>
+      <span>${v.instance}: ${what(v)}</span>
+      <button type="button" class="btn btn-sm btn-primary oe-pack-approve" onClick=${() => decide(v.id, "approve")}>${te("approve")}</button>
+      <button type="button" class="btn btn-sm oe-pack-reject" onClick=${() => decide(v.id, "reject")}>${te("reject")}</button></li>`)}</ul>`
+      : html`<p class="note">${te("pendingNone")}</p>`}
+    ${d.log.length ? html`<details class="oe-pack-log"><summary>${te("recent")}</summary><ul class="oe-pack-list">${d.log.slice(0, 10).map((e, i) => html`<li key=${i} class="oe-pack muted">
+      <span class="mono">${e.at.slice(0, 16).replace("T", " ")}</span> <span>${e.by}: ${e.action} ${e.pack}${e.outcome ? ` — ${e.outcome}` : ""}${e.approved_by ? ` (${e.approved_by})` : ""}</span></li>`)}</ul></details>` : null}
+    <button type="button" class="btn btn-sm oe-pack-refresh" onClick=${() => { void load(); }}>${te("refresh")}</button>
+    ${msg ? html`<p class="note oe-pack-msg" role="status">${msg}</p>` : null}
+  </fieldset>`;
+}
+
 /** A new office's id: unique among `taken`, the store's pattern ([A-Za-z0-9_-], never "auto"). */
 export function newOfficeId(taken, rand = Math.random) {
   for (;;) {
@@ -147,8 +199,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 +212,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 +246,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 +257,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)}>
@@ -216,9 +272,10 @@ export function OfficeEditor({ offices, rev, view, store, packs = [], ask = () =
     </fieldset>
     ${msg ? html`<p class="note oe-msg" role="status">${msg}</p>` : null}
     ${store.uploadSkin ? html`<${Packs} packs=${packs} store=${store} />` : null}
+    ${store.packChanges ? html`<${PackAgents} packs=${packs} store=${store} />` : null}
     ${conflict ? html`<div class="oe-conflict">
       <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}>`;
 }