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

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

@@ -74,8 +74,8 @@ export function assignSeats(pack, wants, prev = new Map()) {
 
 /**
  * The zones layout for `nodes` (buildOrgView's) on a pack: everyone but the missing at their seat. The same shape as
- * the desks layout (rooms → desks with a seat), in logical units, plus `mode: "zones"`, the pack's areas and graph, the
- * seats given (`seats`, the next call's `prev`), `crowd` and `over` (the areas over capacity).
+ * the desks layout (rooms → desks with a seat), in logical units, plus `mode: "zones"`, the pack's areas and graph (and
+ * its `straight`, #2634), the seats given (`seats`, the next call's `prev`), `crowd` and `over` (the areas over capacity).
  */
 export function zonesLayout(pack, nodes, prev = new Map(), { night = false } = {}) {
   // At night (#2568) the idle go to bed: the area asleep people go to while it has a free seat; the rest doze where they are.
@@ -89,7 +89,7 @@ export function zonesLayout(pack, nodes, prev = new Map(), { night = false } = {
     return { key: `zone/${n.name}`, node: n, x: s.x - 24, y: s.y - 52, w: 48, h: 66, seat: { x: s.x, y: s.y }, wp: null, area: s.area, slot: s.slot, night: sleepers.has(n.name) };
   });
   return { mode: "zones", rooms: [{ key: "\u0000zones", name: null, lobby: false, x: 0, y: 0, w: LOGICAL.w, h: LOGICAL.h, desks }], areas: pack.areas,
-    waypoints: pack.waypoints || [], edges: pack.edges || [], door: pack.door, width: LOGICAL.w, height: LOGICAL.h, seats, crowd, over };
+    waypoints: pack.waypoints || [], edges: pack.edges || [], straight: pack.straight === true, door: pack.door, width: LOGICAL.w, height: LOGICAL.h, seats, crowd, over };
 }
 
 // ── Walking ──
@@ -108,6 +108,16 @@ export function headingAt(pts, t) {
   }
   return null;
 }
+/**
+ * #2634: a polyline with each diagonal leg made an L — across first, then up or down — so a character set's three
+ * walking strips always fit; legs already across or up/down are kept, and no point repeats (no zero-length leg).
+ */
+export function straighten(pts) {
+  const out = [];
+  const add = (x, y) => { const l = out[out.length - 1]; if (!l || l.x !== x || l.y !== y) out.push({ x, y }); };
+  for (const p of pts) { const l = out[out.length - 1]; if (l && l.x !== p.x && l.y !== p.y) add(p.x, l.y); add(p.x, p.y); }
+  return out;
+}
 // ── Night (#2568) ──
 
 /** Bedtime on the viewer's clock: from FROM o'clock to TO o'clock the idle sleep (anyone with work still gets up for it). */
@@ -249,8 +259,8 @@ export function createMail({ max = MAIL.MAX } = {}) {
 
 /**
  * Where each character is. `sync(targets, now, graph, still)`: targets name → { x, y }; someone new is already there;
- * someone whose target moved walks from where they are now along the graph (routeVia) — or is there at once when
- * `still` (reduced motion); someone gone is forgotten. `at(name, now)` → { x, y, walking } and, while walking, `heading`: the
+ * someone whose target moved walks from where they are now along the graph (routeVia; each diagonal leg an L when the
+ * graph is `straight`, #2634) — or is there at once when `still` (reduced motion); someone gone is forgotten. `at(name, now)` → { x, y, walking } and, while walking, `heading`: the
  * current step's { dx, dy }, which picks a pack's walkDown / walkUp / walkSide strip; `moving(now)`.
  */
 export function createWalkers() {
@@ -269,7 +279,8 @@ export function createWalkers() {
         const w = by.get(name);
         if (!w || still) { if (!w || w.to.x !== to.x || w.to.y !== to.y) by.set(name, { pts: null, to }); continue; }
         if (w.to.x === to.x && w.to.y === to.y) continue;
-        const here = posAt(w, now), pts = routeVia(graph, { x: here.x, y: here.y }, { x: to.x, y: to.y });
+        const here = posAt(w, now), via = routeVia(graph, { x: here.x, y: here.y }, { x: to.x, y: to.y });
+        const pts = graph.straight ? straighten(via) : via;   // #2634: timed along the longer way
         by.set(name, { pts, start: now, ms: Math.max(1, pathLength(pts) / WALK.SPEED), to });
       }
     },

package/dist/ui/fleet-office.js

@@ -34,6 +34,8 @@
 //   ("+N", in its corner, never over its name); there idle and asleep people say nothing, at most a few speak (calls
 //   first, then work), no bubble covers a name tag, and the tags show on hover or focus only. "Hide paused and stopped"
 //   (per browser) leaves the sleepers out.
+// - Share… (#2636; an admin, on the dashboard reached directly or over the public link): a link anyone can open to watch an office live, read-only,
+//   until it ends (office-share-dialog.js; the page it opens is office-share-page.js).
 // - Edit layout (an admin, a stored office on a zones skin): fleet-office-layout.js, saved as the office's overrides.
 //   An editing session (#2513 review) is bound to the office it opened on, that office's style (the pack's id and sha)
 //   and the list and rev read then: a re-read of the offices meanwhile (the stream) changes the view, never the session,
@@ -67,6 +69,7 @@ import { actsOk, createOfficeStore } from "./fleet-office-store.js";
 import { POLL_MS } from "./fleet-traffic.js";
 import { OfficeEditor, officeForSave } from "./fleet-office-editor.js";
 import { LayoutEditor, handlesOf } from "./fleet-office-layout.js";
+import { ShareButton } from "./office-share-dialog.js";
 import { applyOverrides } from "./fleet-office-pack.js";
 import { ALL_ID, LOBBY_TILE, OV, createCrossFlights, cropToRooms, fromTile, inTile, labelAt, lobbyNodes, overviewOk, tileAt, tileBox, tileLayout, visibleTiles } from "./fleet-office-overview.js";
 import { centreOn, gestureState, gestures, miniPoint, toScreen, toWorld, wheelFactor, zoomKey, zoomTo } from "./fleet-canvas-view.js";
@@ -422,15 +425,18 @@ function People({ nodes, pinned, onChange }) {
 
 /**
  * The view: `view` buildOrgView's answer; `traffic` the live items (null: Live is off); `q` the Find box's needle;
- * `lease` the tab's (its reads); `onOpen(name)` what a desk opens (the canvas's: the chat).
+ * `lease` the tab's (its reads); `onOpen(name)` what a desk opens (the canvas's: the chat; none: a desk opens nothing,
+ * as on a share link's page, #2636); `assetUrl(path)` where a skin pack's picture is read (the share's address);
+ * `opening` the office it opens on (the share's), instead of the one this browser chose last.
  */
-export function Office({ view, traffic, q = "", lease, onOpen }) {
+export function Office({ view, traffic, q = "", lease, onOpen, assetUrl, opening }) {
   const store = useMemo(() => createOfficeStore(lease ? { fetch: (path, o) => lease.fetch(path, o) } : {}), [lease]);
   const [stored, setStored] = useState([]);
   const [storedRev, setStoredRev] = useState(null);                  // the rev the list was read at (a save sends it)
   const [canEdit, setCanEdit] = useState(false);                      // an admin session (never a guest or the public link)
+  const [canShare, setCanShare] = useState(false);                    // #2636: an admin session, here or over the public link
   const [editing, setEditing] = useState(false);
-  const [choice, setChoice] = useState(() => store.choice());
+  const [choice, setChoice] = useState(() => opening ?? store.choice());
   const [filter, setFilter] = useState(() => store.filter());
   const [style, setStyle] = useState(() => store.skin());
   const [hideAsleep, setHideAsleep] = useState(() => store.hideAsleep());
@@ -517,13 +523,15 @@ export function Office({ view, traffic, q = "", lease, onOpen }) {
     return () => { if (off) off(); };
   }, [lease, store]);
   // Whether this page may edit the offices: an admin session (the host asks again on every save), never a guest page or
-  // the public link (whose sessions the host refuses outright).
+  // the public link (whose sessions the host refuses outright). #2636 follow-up (the user's choice): Share… is an admin
+  // session's here or over the public link (the host asks again too); never a guest's or a read-only one's.
   useEffect(() => {
     const body = globalThis.document?.body;
-    if (!body || body.dataset.tier === "guest" || body.dataset.publicLink === "1") return undefined;
+    if (!body || body.dataset.tier === "guest") return undefined;
+    const overLink = body.dataset.publicLink === "1";
     let live = true;
     const auth = globalThis.AgendAuth;
-    if (auth && typeof auth.canWrite === "function") Promise.resolve(auth.canWrite()).then((v) => { if (live) setCanEdit(v === true); }, () => {});
+    if (auth && typeof auth.canWrite === "function") Promise.resolve(auth.canWrite()).then((v) => { if (live) { setCanEdit(v === true && !overLink); setCanShare(v === true); } }, () => {});
     return () => { live = false; };
   }, []);
   // The stage's width (the grid wraps at it), and the theme (the tokens the canvas reads).
@@ -574,7 +582,7 @@ export function Office({ view, traffic, q = "", lease, onOpen }) {
     if (!want.length) return undefined;
     let live = true;
     const get = lease ? (path, o) => lease.fetch(path, o) : undefined;
-    for (const [k, pk] of want) loadPackSkin(pk.id, pk.sha, get ? { fetch: get } : {}).then((sk) => { if (live) setPackSkins((m) => new Map(m).set(k, sk)); });
+    for (const [k, pk] of want) loadPackSkin(pk.id, pk.sha, { ...(get ? { fetch: get } : {}), ...(assetUrl ? { url: assetUrl } : {}) }).then((sk) => { if (live) setPackSkins((m) => new Map(m).set(k, sk)); });
     return () => { live = false; };
   }, [neededKey]);
   const loading = !!packInfo && !packSkins.has(packKey);
@@ -877,7 +885,7 @@ export function Office({ view, traffic, q = "", lease, onOpen }) {
     return () => root.classList.remove("oo-immersive");
   }, [fs]);
   /** A desk opens its chat: out of fullscreen first (the chat is beside the view, or instead of it). */
-  const open = (name) => { if (fsRef.current) exitFs(); onOpen(name); };
+  const open = (name) => { if (!onOpen) return; if (fsRef.current) exitFs(); onOpen(name); };
 
   // ── Drawing: the back and front layers are pictures of the scene at the view's resolution (remade when the office
   // or the zoom changes, never on a pan); each frame draws the matte, the layers, the people and the items in the air ──
@@ -1149,6 +1157,8 @@ export function Office({ view, traffic, q = "", lease, onOpen }) {
       ${canEdit && storedRev !== null ? html`<button type="button" class="btn btn-sm oo-edit" onClick=${() => { if (!overview) setEditing(true); }} disabled=${!!layout || overview}
         title=${overview ? to("overviewNoEdit") : undefined}>${t("orge.edit")}</button>` : null}
       ${canLayout ? html`<button type="button" class="btn btn-sm oo-layout" onClick=${openLayout}>${t("orgl.edit")}</button>` : null}
+      ${canShare ? html`<${ShareButton} offices=${stored} current=${overview ? "all" : custom ? custom.id : null} disabled=${!!layout}
+        get=${lease ? (path, o) => lease.fetch(path, o) : undefined} />` : null}
     </div>
     ${editing && !overview ? html`<${OfficeEditor} offices=${stored} rev=${storedRev} view=${view} store=${store} packs=${packs}
       ask=${ask} current=${() => shown.current} onSaved=${adopt} onClose=${() => setEditing(false)} />` : null}
@@ -1169,12 +1179,12 @@ export function Office({ view, traffic, q = "", lease, onOpen }) {
         <strong>${tipText.primary}</strong>${tipText.secondary ? html` <span class="muted mono">${tipText.secondary}</span>` : null}
         <div>${tipText.sub}</div><div class="muted">${caption(officePose(tipDesk.node.state), tipDesk.node.state)}</div>
         ${tipDesk.office ? html`<div class="muted oo-tip-office">${tipDesk.office}</div>` : null}
-        ${tipDesk.node.i && lastType.current === "touch" ? html`<div class="muted">${to("tapAgain")}</div>` : null}
+        ${tipDesk.node.i && onOpen && lastType.current === "touch" ? html`<div class="muted">${to("tapAgain")}</div>` : null}
       </div>` : null}
       <ul class="oo-desks" aria-label=${to("desks")}>${people.map((d) => {
         const nt = nodeText(d.node), cap = caption(officePose(d.node.state), d.node.state), where = d.office ? ` · ${d.office}` : "";
         return html`<li key=${d.key}>${d.node.i
-          ? html`<button type="button" class="oo-desk" data-name=${d.node.name} data-key=${d.key} aria-label=${`${nt.full}${where} · ${cap}. ${t("orgc.openChat")}`}
+          ? html`<button type="button" class="oo-desk" data-name=${d.node.name} data-key=${d.key} aria-label=${`${nt.full}${where} · ${cap}.${onOpen ? ` ${t("orgc.openChat")}` : ""}`}
               onFocus=${() => setTip(d.key)} onBlur=${() => setTip(null)} onClick=${() => open(d.node.name)}>${nt.primary}</button>`
           : html`<span class="oo-desk" data-name=${d.node.name} data-key=${d.key}>${nt.full}</span>`}</li>`;
       })}</ul>

package/dist/ui/office-share-dialog.js

@@ -0,0 +1,145 @@
+// #2636: Office share links on the dashboard — the Office's Share… dialog (make one: which office, how long, whether
+// agents' own lines show; then its URL to copy) and the list of open ones (Settings → Access & security, and under the
+// dialog's form): each with its office, when it ends, whether lines show and who made it, Revoke and Revoke all.
+// GET / POST /ui/office-share, DELETE /ui/office-share/<id|all> (web-api.ts): an admin session on the dashboard reached
+// directly only; the public link never offers these.
+import { html, useEffect, useState } from "/assets/app-html.js";
+import { t, register } from "/assets/app-i18n.js";
+import { Dialog } from "/assets/ui-dialog.js";
+import { toast } from "/assets/ui-toast.js";
+
+register("oshare", {
+  en: {
+    share: "Share…", title: "Share the office", lead: "Anyone with the link can watch this office live — names and states, nothing else — until it ends. No sign-in.",
+    office: "Office", allOffices: "All offices", how: "For", text: "Include agents' own status lines", create: "Create link", creating: "Starting the link…",
+    made: "Anyone with this link can watch until {0}.", copy: "Copy link", copied: "Link copied", open: "Open links", none: "No share links are open.",
+    ends: "until {0}", withText: "with status lines", by: "by {0}", revoke: "Revoke", revokeAll: "Revoke all", close: "Close", failed: "The link could not be made.",
+    m15: "15 minutes", m30: "30 minutes", h1: "1 hour", h2: "2 hours", h4: "4 hours", h8: "8 hours", h24: "24 hours",
+    e_disabled: "Office share links are off on this fleet (web.office_share.enabled: false).", e_office: "That office no longer exists.",
+    e_duration: "That is longer than this fleet allows (web.office_share.max_hours).", e_too_many: "At most 10 share links can be open at once: revoke one first.",
+    e_rate: "Cloudflare is limiting new quick tunnels right now. Try again in a few minutes.", e_tunnel: "The share link's tunnel did not start ({0}). Try again later.",
+    cardTitle: "Office share links", cardHint: "Read-only links to the live Office view, made from Fleet → Org chart → Office → Share…. Each ends at its time; revoke one to end it now.",
+  },
+  "zh-TW": {
+    share: "分享…", title: "分享辦公室", lead: "拿到連結的人都能即時觀看這間辦公室（只有名稱與狀態），直到連結結束，不需要登入。",
+    office: "辦公室", allOffices: "所有辦公室", how: "時間", text: "包含 agent 自己的狀態文字", create: "建立連結", creating: "正在啟動連結…",
+    made: "拿到這個連結的人可以觀看到 {0}。", copy: "複製連結", copied: "已複製連結", open: "開啟中的連結", none: "目前沒有開啟中的分享連結。",
+    ends: "到 {0} 為止", withText: "含狀態文字", by: "由 {0} 建立", revoke: "撤銷", revokeAll: "全部撤銷", close: "關閉", failed: "無法建立連結。",
+    m15: "15 分鐘", m30: "30 分鐘", h1: "1 小時", h2: "2 小時", h4: "4 小時", h8: "8 小時", h24: "24 小時",
+    e_disabled: "這個 fleet 已關閉辦公室分享連結（web.office_share.enabled: false）。", e_office: "這間辦公室已不存在。",
+    e_duration: "超過這個 fleet 允許的時間（web.office_share.max_hours）。", e_too_many: "同時最多 10 個分享連結：先撤銷一個。",
+    e_rate: "Cloudflare 目前限制新的臨時通道，請過幾分鐘再試。", e_tunnel: "分享連結的通道沒有啟動（{0}），請稍後再試。",
+    cardTitle: "辦公室分享連結", cardHint: "即時辦公室畫面的唯讀連結，可在 Fleet → 組織圖 → 辦公室 → 分享… 建立。每個連結到時間就結束；撤銷可立即結束。",
+  },
+});
+const to = (k, ...v) => t(`oshare.${k}`, ...v);
+const DURATIONS = [["m15", 15], ["m30", 30], ["h1", 60], ["h2", 120], ["h4", 240], ["h8", 480], ["h24", 1440]];
+const JSON_HEADERS = { "Content-Type": "application/json" };
+const when = (ms) => { try { return new Intl.DateTimeFormat(undefined, { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" }).format(new Date(ms)); } catch { return ""; } };
+
+/** What a refusal says (the host's `error` and `reason`). */
+export function refusalText(d) {
+  const e = d && d.error;
+  if (e === "tunnel") return d.reason === "rate-limited" ? to("e_rate") : to("e_tunnel", d.reason || "unknown");
+  return ["disabled", "office", "duration", "too_many"].includes(e) ? to(`e_${e}`) : to("failed");
+}
+
+/** The open shares, read (and re-read after a change): { enabled, shares } or null while unread / unavailable. */
+export function useShares(get = globalThis.fetch, rev = 0) {
+  const [d, setD] = useState(null);
+  useEffect(() => {
+    let live = true;
+    get("/ui/office-share", { method: "GET", headers: JSON_HEADERS }).then((r) => (r.ok ? r.json() : null)).then((v) => { if (live) setD(v); }, () => { if (live) setD(null); });
+    return () => { live = false; };
+  }, [rev]);
+  return d;
+}
+
+/** The open shares with Revoke (and Revoke all); `names`: office id → name. */
+export function ShareList({ shares, names = {}, get = globalThis.fetch, onChange }) {
+  const [busy, setBusy] = useState(false);
+  const revoke = async (id) => {
+    setBusy(true);
+    try { await get(`/ui/office-share/${id}`, { method: "DELETE", headers: JSON_HEADERS }); } catch { /* the list is read again */ }
+    setBusy(false);
+    onChange && onChange();
+  };
+  if (!shares || !shares.length) return html`<p class="muted os-none">${to("none")}</p>`;
+  return html`<div class="os-list">
+    <ul class="os-rows">${shares.map((s) => html`<li key=${s.id} class="os-row">
+      <span class="os-what"><strong>${s.office === "all" ? to("allOffices") : names[s.office] || s.office_name || s.office}</strong>
+        <span class="muted"> · ${to("ends", when(s.expiresAt))}${s.text ? ` · ${to("withText")}` : ""}</span></span>
+      <button type="button" class="btn btn-sm" disabled=${busy} onClick=${() => revoke(s.id)}>${to("revoke")}</button>
+    </li>`)}</ul>
+    ${shares.length > 1 ? html`<button type="button" class="btn btn-sm danger os-all" disabled=${busy} onClick=${() => revoke("all")}>${to("revokeAll")}</button>` : null}
+  </div>`;
+}
+
+/** Share…: make a link for one office (the one shown, by default) or all of them. `offices`: the stored ones. */
+export function ShareDialog({ offices = [], current = null, get = globalThis.fetch, onClose }) {
+  const [office, setOffice] = useState(current && offices.some((o) => o.id === current) ? current : "all");
+  const [minutes, setMinutes] = useState(60);
+  const [text, setText] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const [made, setMade] = useState(null);
+  const [error, setError] = useState("");
+  const [rev, setRev] = useState(0);
+  const list = useShares(get, rev);
+  const names = Object.fromEntries(offices.map((o) => [o.id, o.name]));
+  const create = async () => {
+    setBusy(true); setError("");
+    try {
+      const r = await get("/ui/office-share", { method: "POST", headers: JSON_HEADERS, body: JSON.stringify({ office, minutes, text }) });
+      const d = await r.json().catch(() => ({}));
+      if (r.ok && d && typeof d.url === "string") setMade(d); else setError(refusalText(d));
+    } catch { setError(to("failed")); }
+    setBusy(false);
+    setRev((n) => n + 1);
+  };
+  const copy = async () => { try { await navigator.clipboard.writeText(made.url); toast(to("copied")); } catch { /* the link is on screen to copy by hand */ } };
+  const actions = made ? html`<button type="button" class="btn" onClick=${onClose}>${to("close")}</button>`
+    : html`<button type="button" class="btn" onClick=${onClose} disabled=${busy}>${to("close")}</button>
+      <button type="button" class="btn btn-primary" onClick=${create} disabled=${busy}>${busy ? to("creating") : to("create")}</button>`;
+  return html`<${Dialog} title=${to("title")} onClose=${onClose} busy=${busy} actions=${actions} wide=${true}>
+    <div class="os">
+      <p class="muted">${to("lead")}</p>
+      ${made ? html`<div class="os-made">
+        <input class="input mono os-url" readonly value=${made.url} aria-label=${to("copy")} onFocus=${(e) => e.target.select && e.target.select()} />
+        <button type="button" class="btn btn-sm" onClick=${copy}>${to("copy")}</button>
+        <p class="note">${to("made", when(made.share.expiresAt))}</p>
+      </div>` : html`<div class="os-form">
+        <label class="field"><span>${to("office")}</span>
+          <select class="tb-select" value=${office} onChange=${(e) => setOffice(e.target.value)} disabled=${busy}>
+            ${offices.length > 1 || !offices.length ? html`<option value="all">${to("allOffices")}</option>` : null}
+            ${offices.map((o) => html`<option key=${o.id} value=${o.id}>${o.name}</option>`)}
+          </select></label>
+        <label class="field"><span>${to("how")}</span>
+          <select class="tb-select" value=${String(minutes)} onChange=${(e) => setMinutes(Number(e.target.value))} disabled=${busy}>
+            ${DURATIONS.map(([k, m]) => html`<option key=${k} value=${String(m)}>${to(k)}</option>`)}
+          </select></label>
+        <label class="check"><input type="checkbox" checked=${text} onChange=${(e) => setText(e.target.checked)} disabled=${busy} /> ${to("text")}</label>
+        ${error ? html`<p class="err os-err" role="alert">${error}</p>` : null}
+      </div>`}
+      <h3 class="os-head">${to("open")}</h3>
+      <${ShareList} shares=${list && list.shares} names=${names} get=${get} onChange=${() => setRev((n) => n + 1)} />
+    </div>
+  <//>`;
+}
+
+/** Settings → Access & security: the open share links, with Revoke (made from the Office's Share…). */
+export function OfficeSharesCard({ get = globalThis.fetch }) {
+  const [rev, setRev] = useState(0);
+  const d = useShares(get, rev);
+  if (!d) return null;                                         // not kept on this fleet, or not this session's to see
+  return html`<section class="card os-card"><h3>${to("cardTitle")}</h3>
+    <p class="note">${d.enabled === false ? to("e_disabled") : to("cardHint")}</p>
+    <${ShareList} shares=${d.shares} get=${get} onChange=${() => setRev((n) => n + 1)} />
+  </section>`;
+}
+
+/** The Office toolbar's Share… button (shown to an admin on the dashboard reached directly, when the fleet offers it). */
+export function ShareButton({ offices, current, get, disabled = false }) {
+  const [open, setOpen] = useState(false);
+  return html`<button type="button" class="btn btn-sm oo-share" disabled=${disabled} onClick=${() => setOpen(true)}>${to("share")}</button>
+    ${open ? html`<${ShareDialog} offices=${offices} current=${current} get=${get} onClose=${() => setOpen(false)} />` : null}`;
+}

package/dist/ui/office-share-page.js

@@ -0,0 +1,116 @@
+// #2636: an Office share link's page (/o/<token> on the share tunnel, src/office-share.ts) — the live Office view for
+// people outside the fleet, read-only, with no sign-in. The same Office as Fleet → Org chart → Office (fleet-office.js),
+// fed by the share's own reads instead of the app shell's: its status and structure (/o/<t>/state, every POLL_MS while
+// the page is shown), the offices, acts and skin packs (the Office's own reads, sent to the share's addresses by the
+// lease's fetch). Nothing opens a chat, edits or writes; there is no other page. When the share ends (revoked, expired,
+// its office deleted) its reads answer 404 and the page says so and stops.
+import { html, render, useEffect, useMemo, useState } from "/assets/app-html.js";
+import { appStore, useStore } from "/assets/app-store.js";
+import { createLease } from "/assets/app-ctx.js";
+import { t, register } from "/assets/app-i18n.js";
+import { buildOrgView } from "./fleet-org.js";
+import { createTrafficStore, POLL_MS } from "./fleet-traffic.js";
+import { Office } from "./fleet-office.js";
+import { ALL_ID } from "./fleet-office-overview.js";
+
+register("share", {
+  en: { title: "Office", live: "Live view", ends: "until {0}", readOnly: "Read-only: names and states only.", ended: "This Office link has ended.", loading: "Loading the office…", offline: "Can't reach the office right now. Trying again…" },
+  "zh-TW": { title: "辦公室", live: "即時畫面", ends: "到 {0} 為止", readOnly: "唯讀：只顯示名稱與狀態。", ended: "這個辦公室連結已結束。", loading: "正在載入辦公室…", offline: "目前連不上辦公室，正在重試…" },
+});
+const to = (k, ...v) => t(`share.${k}`, ...v);
+
+/** The share's own address: `/o/<token>` (the page's path). */
+export function shareBase(pathname) {
+  const m = /^\/o\/([A-Za-z0-9_-]{43})\/?$/.exec(pathname || "");
+  return m ? `/o/${m[1]}` : null;
+}
+
+/** The Office's reads, at the share's addresses (anything else is not the share's to answer: refused here). */
+export function shareUrl(base, path) {
+  const p = String(path);
+  if (p === "/ui/offices") return `${base}/offices`;
+  if (p === "/ui/office-acts") return `${base}/office-acts`;
+  if (p === "/ui/office-skins" || p.startsWith("/ui/office-skins/") || p.startsWith("/ui/office-skins?")) return `${base}${p.slice(3)}`;
+  return null;
+}
+
+/** A lease whose fetch reads the share's addresses (createLease's timers), refusing any other. */
+export function shareLease(base, timers = globalThis) {
+  return createLease({
+    setTimeout: (...a) => timers.setTimeout(...a), clearTimeout: (h) => timers.clearTimeout(h),
+    setInterval: (...a) => timers.setInterval(...a), clearInterval: (h) => timers.clearInterval(h),
+    fetch: (path, opts) => {
+      const url = shareUrl(base, path);
+      return url ? timers.fetch(url, opts) : Promise.resolve(new Response("", { status: 404 }));
+    },
+  });
+}
+
+/** The share's /state into the app store's shape (the status frame's, as app-store.js takes it). */
+export function appFromState(d) {
+  const instances = Array.isArray(d && d.instances) ? d.instances : [];
+  const exec = {}, awaiting = {};
+  for (const i of instances) {
+    exec[i.name] = (i.execution_state !== undefined ? i.execution_state : i.state) ?? null;
+    if (i.state === "awaiting_input") awaiting[i.name] = "";
+  }
+  return { ready: true, instances, exec, awaiting, needs: Array.isArray(d && d.needs) ? d.needs : [], connection: "polling" };
+}
+
+const clock = (ms) => {
+  try { return new Intl.DateTimeFormat(undefined, { hour: "2-digit", minute: "2-digit" }).format(new Date(ms)); } catch { return ""; }
+};
+
+export function SharePage({ base, timers = globalThis, pollMs = POLL_MS }) {
+  const lease = useMemo(() => shareLease(base, timers), [base]);
+  const traffic = useMemo(createTrafficStore, []);
+  const [state, setState] = useState({ phase: "loading" });   // loading | live | ended | offline
+  const [items, setItems] = useState([]);
+  useEffect(() => {
+    let stopped = false;
+    const read = async () => {
+      try {
+        const r = await timers.fetch(`${base}/state`, { method: "GET", headers: { Accept: "application/json" } });
+        if (stopped || !lease.current()) return;
+        if (r.status === 404) { stopped = true; setState({ phase: "ended" }); return; }
+        if (!r.ok) { setState((s) => (s.phase === "live" ? s : { phase: "offline" })); return; }
+        const d = await r.json();
+        if (stopped || !lease.current()) return;
+        appStore.set((s) => ({ ...s, ...appFromState(d) }));
+        if (d.traffic && traffic.load(d.traffic)) setItems(traffic.items());
+        setState({ phase: "live", org: d.org, office: typeof d.office === "string" ? d.office : null, ends: typeof d.ends === "number" ? d.ends : null });
+      } catch { if (!stopped) setState((s) => (s.phase === "live" ? s : { phase: "offline" })); }
+    };
+    void read();
+    const hs = [
+      lease.interval(() => { if (!stopped && !globalThis.document?.hidden) void read(); }, pollMs),
+      lease.interval(() => { if (traffic.sweep()) setItems(traffic.items()); }, 1000),
+    ];
+    return () => { stopped = true; for (const h of hs) lease.clear(h); };
+  }, [lease]);
+  useEffect(() => () => lease.dispose(), [lease]);
+  const app = useStore(appStore);
+  const view = useMemo(() => (state.phase === "live" ? buildOrgView(state.org, app) : null), [state, app.instances, app.needs]);
+  if (state.phase === "ended") return html`<main class="share-page share-ended"><p>${to("ended")}</p></main>`;
+  return html`<main class="share-page">
+    <header class="share-head">
+      <strong>${to("title")}</strong>
+      <span class="muted">${to("live")}${state.ends ? ` · ${to("ends", clock(state.ends))}` : ""}</span>
+      <span class="muted share-note">${to("readOnly")}</span>
+    </header>
+    ${state.phase === "offline" ? html`<p class="note share-note" role="status">${to("offline")}</p>` : null}
+    ${view ? html`<div class="share-stage"><${Office} view=${view} traffic=${items} lease=${lease} assetUrl=${(p) => shareUrl(base, p) || p}
+      opening=${state.office === "all" ? ALL_ID : state.office || undefined} /></div>`
+      : html`<p class="muted share-loading" role="status">${to("loading")}</p>`}
+  </main>`;
+}
+
+/** Mount on the page (the module's entry): the share's address from the path, else nothing to show. */
+export function mount(root = globalThis.document?.getElementById("app")) {
+  const base = shareBase(globalThis.location?.pathname);
+  if (!root || !base) return;
+  globalThis.document.body.dataset.webTransport = "poll";
+  render(html`<${SharePage} base=${base} />`, root);
+}
+
+if (globalThis.document?.getElementById?.("app")?.dataset?.share === "1") mount();

package/dist/ui/panel-settings.js

@@ -46,6 +46,7 @@ import { startTour } from "./chat-tour.js";
 import "./chat-strings.js";
 import { AppearanceSection } from "./settings-appearance.js";
 import { GuestsCard } from "./settings-guests.js";
+import { OfficeSharesCard } from "./office-share-dialog.js";
 import { syncStage, useDraft } from "./settings-draft.js";
 import { WebAuthorityCard } from "./settings-web-authority.js";
 import { SignInList } from "./backend-signin.js";
@@ -952,10 +953,11 @@ function Classic({ ctx, search, openDialog }) {
   })}</div>`;
 }
 
-const configuredNoticeMode = (value, route) => value === false ? false : value === "dm" || route === "dm" ? "dm" : true;
-const noticeMode = (v) => v === "dm" ? "dm" : v === "false" || v === false ? false : true;
-const noticeChoices = () => [{ value: "true", label: tn("noticeTopic") }, { value: "dm", label: tn("noticeDm") }, { value: "false", label: tn("noticeOff") }];
-const noticeLabel = (v) => tn(v === "dm" ? "noticeDm" : v === false ? "noticeOff" : "noticeTopic");
+// Sign-in notices and daily tips post in the topic or not at all: the DM choice was withdrawn (hmsg-d1809f2a,
+// hmsg-3b8ac2af), and an old "dm" reads as on.
+const noticeMode = (v) => v !== "false" && v !== false;
+const noticeChoices = () => [{ value: "true", label: tn("noticeTopic") }, { value: "false", label: tn("noticeOff") }];
+const noticeLabel = (v) => tn(v ? "noticeTopic" : "noticeOff");
 
 /** General's form, from the saved defaults (`d`) and ClassicBot's (`c`). */
 function generalForm(d, c, fleet = {}, schema = {}) {
@@ -971,7 +973,7 @@ function generalForm(d, c, fleet = {}, schema = {}) {
     // #2347 §10 review: unset startup concurrency is automatic (deriveSpawnConcurrency: 2–10 by free memory and cores),
     // not 10 — an empty field, and a save that leaves it unset (the defaults merge replaces `startup` whole).
     concurrency: startup.concurrency == null ? "" : String(startup.concurrency), stagger: String(startup.stagger_delay_ms ?? 500),
-    tips: String(configuredNoticeMode(d.tips, fleet.web?.notice_delivery?.tips)),
+    tips: String(noticeMode(d.tips)),
     replyTriggers: Boolean(d.reply_triggers ?? schema.reply_triggers_default),
     classicReplyTriggers: Boolean(c.reply_triggers ?? d.reply_triggers ?? schema.reply_triggers_default), classicReplyTriggersInherit: !hasOwn(c, "reply_triggers"),
     classicBackend: c.backend || d.backend || "claude-code",
@@ -1029,7 +1031,7 @@ function General({ ctx, part = "all" }) {
     }, {
       backend: d.backend || "claude-code", model: d.model || undefined, locale: d.locale || null, auto_pause_after: d.auto_pause_after ?? 0,
       agent_mode: d.agent_mode || "mcp", tool_set: TOOL_SETS.includes(d.tool_set) ? d.tool_set : null, tool_progress: d.tool_progress ?? "off",
-      tips: configuredNoticeMode(d.tips, ctx.fleet.web?.notice_delivery?.tips), cross_instance_visibility: visibilityDefault(d), reply_triggers: Boolean(d.reply_triggers ?? schema.reply_triggers_default), reply_completion_guard: d.reply_completion_guard ?? true, log_level: d.log_level || "info",
+      tips: d.tips ?? true, cross_instance_visibility: visibilityDefault(d), reply_triggers: Boolean(d.reply_triggers ?? schema.reply_triggers_default), reply_completion_guard: d.reply_completion_guard ?? true, log_level: d.log_level || "info",
       dashboard: Object.fromEntries(DASHBOARD_FEATURES.filter((k) => k !== "office").map((k) => [k, dashboardDefault(d, k)])),
       office_access: dashboardDefault(d, "office"),
       hang_detector: { enabled: hang.enabled !== false, timeout_minutes: hang.timeout_minutes ?? HANG_TIMEOUT_DEFAULT_MINUTES },
@@ -1190,7 +1192,7 @@ function WebSection({ ctx, staged, part = "all" }) {
   // serves their reads there).
   const overPublicLink = globalThis.document?.body?.dataset?.publicLink === "1";
   const original = useMemo(() => ({
-    notify: configuredNoticeMode(web.notify_login, web.notice_delivery?.login),
+    notify: noticeMode(web.notify_login),
     echo: web.echo_to_channel ?? true,
     log: web.log_tab === true,                                                  // #1218: off by default
     usagePub: web.usage_report_on_public_link === true,                         // #2122: off by default
@@ -1353,7 +1355,9 @@ function WebSection({ ctx, staged, part = "all" }) {
       ${named || f.autoOpen ? html`<label class=${fc("check", "autoOpen")}><input id="publicAutoOpen" type="checkbox" checked=${f.autoOpen} onChange=${(e) => set("autoOpen")(e.target.checked)} /><span>${tn("publicAutoOpen")}</span><${Impact} schema=${schema} field="web.public_link.auto_open" /></label>
       <p class="note">${tn("publicAutoOpenHint")}</p><${Feedback} error=${errors.autoOpen} />` : null}
     </section>`) : null}
-    ${has("access") && !overPublicLink ? html`<${PublicTunnelToken} /><${GuestsCard} ctx=${ctx} staged=${staged} /><${WebAuthorityCard} ctx=${ctx} staged=${staged} />` : null}
+    ${has("access") && !overPublicLink ? html`<${PublicTunnelToken} />` : null}
+    ${has("access") ? html`<${OfficeSharesCard} />` : null}
+    ${has("access") && !overPublicLink ? html`<${GuestsCard} ctx=${ctx} staged=${staged} /><${WebAuthorityCard} ctx=${ctx} staged=${staged} />` : null}
     ${has("chat") ? lock(html`<section class="card"><h3>${tn("webChat")}</h3>
       <label class=${fc("check", "echo")}><input id="webEchoToChannel" type="checkbox" checked=${f.echo} onChange=${(e) => set("echo")(e.target.checked)} /><span>${tn("webEcho")}</span><${Impact} schema=${schema} field="web.echo_to_channel" /></label>
       <p class="note">${tn("webEchoHint")}</p>

package/dist/ui/settings-registry.js

@@ -33,8 +33,8 @@ const ROWS = [
   // Fleet · Agents
   ["agents.new", "agents", "#newAgentBtn", "settings.newAgent", null, ["new agent", "create", "add agent", "instance"], ["新增 agent", "建立", "新 agent"]],
   ["agents.provider-keys", "agents", ".s-provider-keys", "settings.providerKeys", "web.provider_secrets", ["api key", "provider", "openai", "anthropic", "token", "secret"], ["API 金鑰", "金鑰", "供應商", "token"]],
-  ["defaults.tips", "agent-defaults", "#g-tips", "settings.dailyTips", "defaults.tips", ["daily tips", "dm", "notices"], ["每日提示", "私訊"]],
-  ["web.notify-login", "access", "#webNotifyLogin", "settings.webNotifyLogin", "web.notify_login", ["sign in", "login", "dm", "notices"], ["登入通知", "私訊"]],
+  ["defaults.tips", "agent-defaults", "#g-tips", "settings.dailyTips", "defaults.tips", ["daily tips", "notices"], ["每日提示"]],
+  ["web.notify-login", "access", "#webNotifyLogin", "settings.webNotifyLogin", "web.notify_login", ["sign in", "login", "notices"], ["登入通知"]],
   // Fleet · Agent defaults
   ["defaults.locale", "agent-defaults", "#g-locale", "settings.language", "defaults.locale", ["language", "bot language", "reply language", "locale"], ["語言", "回覆語言", "bot 語言"]],
   ["defaults.backend", "agent-defaults", "#g-be", "settings.defaultBackend", "defaults.backend", ["backend", "cli", "claude", "codex", "kiro"], ["後端", "CLI"]],

package/dist/ui/settings-strings.js

@@ -4,10 +4,10 @@ import { register } from "/assets/app-i18n.js";
 
 register("settings", {
   en: {
-    noticeTopic: "Topic", noticeDm: "Direct message (topic fallback)", noticeOff: "Off",
+    noticeTopic: "Topic", noticeOff: "Off",
     webNotifyLogin: "Web sign-in notices", dailyTips: "Daily tips",
-    webNotifyLoginHint: "DM the signing-in operator or public-link owner; local guest notices go to the owning connection’s first configured admin. Missing account or failed DM falls back to the topic. Off suppresses operator notices only; guest and public-link security notices remain in the topic. Existing default: Topic; new fleets: DM.",
-    dailyTipsHint: "DM the General connection’s first configured admin, with topic fallback. Default: Topic. /tips still posts where invoked.",
+    webNotifyLoginHint: "Posted in the topic. Off suppresses operator notices only; guest and public-link security notices still post. Default: Topic.",
+    dailyTipsHint: "Posted in the General topic. Default: Topic. /tips still posts where invoked.",
     title: "Settings",
     myAgents: "My Agents",
     bots: "Bots",
@@ -679,10 +679,10 @@ register("settings", {
     se_externalEmojiHint: "使用其他伺服器的 emoji，bot 在要加反應的頻道需有「使用外部表情符號」權限。",
     se_unavailable: "無法使用",
     se_hint: "留空即使用預設值。預覽由 AgEnD 依 bot 實際 react 的方式解析。進度前綴不是反應，而是進度訊息開頭的 emoji。",
-    noticeTopic: "頻道", noticeDm: "私訊（失敗時改送頻道）", noticeOff: "關閉",
+    noticeTopic: "頻道", noticeOff: "關閉",
     webNotifyLogin: "網頁登入通知", dailyTips: "每日提示",
-    webNotifyLoginHint: "私訊登入的管理者或公開連結擁有者；本機訪客登入通知送給所屬連線的第一位設定管理員。帳號不明或私訊失敗時改送原頻道。關閉只停用管理者登入通知；訪客與公開連結安全通知仍送頻道。既有預設：頻道；新 fleet：私訊。",
-    dailyTipsHint: "私訊 General 所屬連線的第一位設定管理員，失敗時改送頻道。預設：頻道。/tips 仍送至呼叫的聊天室。",
+    webNotifyLoginHint: "發在頻道。關閉只停用管理者登入通知；訪客與公開連結安全通知仍會發出。預設：頻道。",
+    dailyTipsHint: "發在 General 頻道。預設：頻道。/tips 仍送至呼叫的聊天室。",
     title: "設定",
     myAgents: "我的 Agent",
     bots: "機器人",

package/dist/ui/shared/app.css

@@ -2504,3 +2504,31 @@ html.oo-immersive .p-fleet > .panel-body { z-index: 50; }
 .msg.user .msg-reactions { justify-content: flex-end; }
 .msg-reactions .reaction { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 24px; padding: 0 6px;
   border: 1px solid var(--border); border-radius: var(--r-full); background: var(--surface-2); font-family: var(--font-emoji); font-size: 15px; line-height: 1; }
+
+/* #2636: an Office share link's page (office-share-page.js) — the Office alone, filling the window under a one-line head. */
+.share-page { display: flex; flex-direction: column; min-height: 100dvh; background: var(--bg); color: var(--text); }
+.share-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--border); }
+.share-head .share-note { margin-left: auto; }
+.share-stage { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; padding: var(--s-2); }
+.share-loading, .share-page > .note { padding: var(--s-4); }
+.share-ended { align-items: center; justify-content: center; padding: var(--s-6); text-align: center; }
+@media (max-width: 640px) { .share-head .share-note { margin-left: 0; flex-basis: 100%; } }
+
+/* #2636: Office share links — the Share… dialog and the open links (office-share-dialog.js; Settings → Access & security). */
+.os { display: flex; flex-direction: column; gap: var(--s-3); }
+.os > p { margin: 0; }
+.os-form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); align-items: end; }
+.os-form .check, .os-form .note { grid-column: 1 / -1; margin: 0; }
+.os-made { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
+.os-url { flex: 1 1 260px; min-width: 0; min-height: 40px; padding: var(--s-2) var(--s-3); border: 1px solid var(--border-strong); border-radius: var(--r-sm);
+  background: var(--bg); color: var(--text); font-size: var(--fs-sm); outline: none; }
+.os-url:focus { border-color: var(--focus); box-shadow: 0 0 0 3px var(--accent-dim); }
+.os-made .note { flex-basis: 100%; margin: 0; }
+.os-head { margin: var(--s-2) 0 0; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-2); }
+.os-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
+.os-row { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-3); border: 1px solid var(--border); border-radius: var(--r-sm); }
+.os-what { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: var(--fs-sm); }
+.os-all { margin-top: var(--s-2); }
+.os-none { margin: 0; }
+.os-form .os-err { grid-column: 1 / -1; margin: 0; padding: var(--s-2) var(--s-3); border: 1px solid var(--danger); border-radius: var(--r-sm); }
+@media (max-width: 480px) { .os-form { grid-template-columns: 1fr; } }

package/dist/web-api.d.ts

@@ -200,6 +200,20 @@ export interface WebApiContext {
     readonly officeWrites?: OfficeWriteLimiter;
     /** #2578: the agents' live acts in the Office view (office_set); absent: /ui/office-acts is not offered. */
     readonly officeActs?: Pick<OfficeActs, "live">;
+    /** #2636: Office share links (office-share-service.ts): the open ones, making and ending one. */
+    readonly officeShares?: {
+        enabled(): boolean;
+        list(): import("./office-share.js").OfficeShare[];
+        create(opts: {
+            office: string;
+            minutes?: number;
+            text?: boolean;
+            owner: string;
+        }): Promise<import("./office-share-service.js").OfficeShareMade>;
+        revoke(id: string): number;
+    };
+    /** #2636: a share was made or ended from the page — said in General (who, which office, until when). */
+    officeShareNotice?(event: "created" | "revoked", who: string, share: import("./office-share.js").OfficeShare | null, count: number): void;
     /** #2513: the Office view's uploaded skin packs (web-office-skins/); absent: /ui/office-skins is not offered. */
     readonly officeSkins?: OfficeSkinStore;
     /** How often a person may upload or delete a skin pack (absent: no limit). */