@songsid/agend 2.3.2-beta.4 → 2.3.2-beta.6

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

@@ -30,6 +30,10 @@
 //     "door": [640, 700],                             optional: where someone new walks in from (default: bottom middle)
 //     "waypoints": [{ "id": "hall", "x": 640, "y": 600 }, …], "edges": [["hall", "east"], …],
 //                                                     optional: the walkable graph (else people walk straight)
+//     "straight": true,                               optional (#2634): every walk goes across, then up or down — each
+//                                                     diagonal leg an L, so the walkSide / walkDown / walkUp strips
+//                                                     always fit (graph edges laid out across and up/down put the
+//                                                     corners on the aisles); default false
 //     "furniture": [ { "id": "rack", "sprite": STRIP, "x": 1020, "y": 140, "depth": 2,
 //                      "activeWhen": "crashed", "activeSprite": STRIP, "activeFor": "atlas", "loop": true, "label": "Rack",
 //                      "night": { "sprite": STRIP, "x": 300, "y": 420 },
@@ -190,12 +194,13 @@ function states(v, at) {
 export function checkSkinPack(x) {
   try {
     obj(x, "pack");
-    keys(x, ["format", "id", "scale", "background", "foreground", "matte", "areas", "stateZones", "door", "waypoints", "edges", "furniture", "characters", "byInstance", "props", "bubbles", "room", "desk"], "pack");
+    keys(x, ["format", "id", "scale", "background", "foreground", "matte", "areas", "stateZones", "door", "waypoints", "edges", "straight", "furniture", "characters", "byInstance", "props", "bubbles", "room", "desk"], "pack");
     if (x.format !== 1) throw new Refused("format", "1");
     if (typeof x.id !== "string" || !ID.test(x.id)) throw new Refused("id", "1–40 letters, digits, _ or -");
     if (BUILT_IN.has(x.id)) throw new Refused("id", "a built-in skin's id");
     const scale = x.scale === undefined ? 2 : int(x.scale, 1, 8, "scale");
     if (x.matte !== undefined && !matteOk(x.matte)) throw new Refused("matte", "a colour as #rrggbb");
+    if (x.straight !== undefined && typeof x.straight !== "boolean") throw new Refused("straight", "true or false");
     const areas = {};
     const rawAreas = x.areas === undefined ? {} : obj(x.areas, "areas");
     if (Object.keys(rawAreas).length > LIMIT.areas) throw new Refused("areas", `at most ${LIMIT.areas}`);
@@ -291,7 +296,7 @@ export function checkSkinPack(x) {
     const opt = (v, at) => (v === undefined ? undefined : src(v, at));
     return { ok: true, pack: {
       format: 1, id: x.id, scale, background: opt(x.background, "background"), foreground: opt(x.foreground, "foreground"), matte: x.matte === undefined ? undefined : x.matte.toLowerCase(), areas, stateZones,
-      door: x.door === undefined ? { x: LOGICAL.w / 2, y: LOGICAL.h - 10 } : point(x.door, "door"), waypoints, edges, furniture, characters, byInstance,
+      door: x.door === undefined ? { x: LOGICAL.w / 2, y: LOGICAL.h - 10 } : point(x.door, "door"), waypoints, edges, straight: x.straight === true, furniture, characters, byInstance,
       props: x.props === undefined ? {} : strips(x.props, PROPS, "props", scale), bubbles,
       room: { floor: opt(room.floor, "room.floor"), wall: opt(room.wall, "room.wall") }, desk: { back: opt(desk.back, "desk.back"), front: opt(desk.front, "desk.front"), lit: opt(desk.lit, "desk.lit") },
     } };

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

@@ -376,7 +376,7 @@ const STUDIO_FURNITURE = [
 ].sort((a, b) => a.depth - b.depth);
 /** The studio's pack: the same shape as a checked one (fleet-office-pack.js), furniture by `shape` instead of sprites. */
 export const STUDIO_PACK = {
-  format: 1, id: "studio", scale: 1, areas: STUDIO_AREAS, door: { x: HALL_X, y: 704 }, furniture: STUDIO_FURNITURE, ...studioGraph(STUDIO_AREAS),
+  format: 1, id: "studio", scale: 1, areas: STUDIO_AREAS, door: { x: HALL_X, y: 704 }, furniture: STUDIO_FURNITURE, ...studioGraph(STUDIO_AREAS), straight: false,
   stateZones: { working: "desks", idle: "lounge", needs: "alert", crashed: "alert", stuck: "alert", paused: "nap", stopped: "nap", default: "lounge" },
   characters: {}, byInstance: {}, props: {}, bubbles: {},
 };
@@ -561,9 +561,10 @@ const defaultImage = (url) => new Promise((resolve) => {
 /**
  * An uploaded pack (GET /ui/office-skins/<id>?v=<sha>) as an OfficeSkin: its manifest checked (null when it is not a
  * pack: the page then draws a built-in style and says so), its pictures loaded from their content ids (one that does
- * not load is drawn by the built-in skin). Kept per id and sha, so a pack is fetched once.
+ * not load is drawn by the built-in skin). Kept per id and sha, so a pack is fetched once. `url`: where a picture's path
+ * is read (a share link's page reads its own address, #2636).
  */
-export function loadPackSkin(id, sha, { fetch: get = globalThis.fetch, image = defaultImage } = {}) {
+export function loadPackSkin(id, sha, { fetch: get = globalThis.fetch, image = defaultImage, url = (p) => p } = {}) {
   const key = `${id}@${sha}`;
   if (loaded.has(key)) return loaded.get(key);
   const base = `/ui/office-skins/${encodeURIComponent(id)}`;
@@ -579,7 +580,7 @@ export function loadPackSkin(id, sha, { fetch: get = globalThis.fetch, image = d
       await Promise.all(packImages(c.pack).map(async (src) => {
         const fid = own(files, src);
         if (typeof fid !== "string" || !/^[0-9a-f]{32}$/.test(fid)) return;
-        const im = await image(`${base}/img/${fid}.png`);
+        const im = await image(url(`${base}/img/${fid}.png`));
         if (im) images.set(src, im);
       }));
       return spriteSkin(c.pack, images);

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/fleet-usage.js

@@ -15,14 +15,15 @@ register("fusage", {
     range: "Range", today: "Today", r7d: "7 days", month: "This month", all: "All", custom: "Custom", from: "From", to: "To", apply: "Apply",
     group: "Group by", g_instance: "Agent", g_backend: "Backend", g_model: "Model", g_profile: "Credential profile", g_team: "Team (as configured now)",
     csv: "Download CSV", basis: "API-equivalent at list price (checked {0}) — not money spent. Subscriptions are not billed per token.",
-    amount: "API-equivalent", input: "Input", output: "Output", read: "Cache read", write: "Cache write", total: "Total tokens", requests: "Requests", messages: "Messages",
+    amount: "API-equivalent", input: "Input", output: "Output", reasoning: "Reasoning", read: "Cache read", write: "Cache write", total: "Total tokens", requests: "Requests", messages: "Messages",
     notPriced: "not priced", partial: "partial", noTeam: "(no team)", unknown: "unknown",
-    f_cache_write_not_reported: "cache writes not reported (Codex) — an estimate", f_not_priced: "not priced: {0}", f_source_unknown: "read before backend and profile were recorded",
+    f_cache_write_not_reported: "cache writes not reported (Codex, Muse) — an estimate", f_not_priced: "not priced: {0}", f_source_unknown: "read before backend and profile were recorded",
+    f_estimated: "estimated from text size — Kiro records no token counts", f_includes_estimates: "includes estimates (Kiro)", f_cost_reported: "amount as the CLI reported it (no list price for this model)", estimatedPart: "of which estimated: {0}",
     scanning: "Scanning — totals may still grow.", updated: "Updated {0} · read every 10 min", since: "Collected since {0}", notYet: "Not collected yet",
     refresh: "Refresh",
     notMeasured: "Not measured", nm_credit_billed: "Kiro is credit-billed and records no tokens", nm_unsupported: "AgEnD can't read this CLI's usage yet", nm_no_data: "nothing read yet",
     shared: "shares its working directory with {0}; their transcripts can't be told apart",
-    empty: "Nothing recorded yet", emptyHint: "Usage is read from Claude Code and Codex transcripts, from when the fleet started.",
+    empty: "Nothing recorded yet", emptyHint: "Usage is read from Claude Code, Codex, Grok, Muse, OpenCode and Antigravity, and estimated for Kiro, from when the fleet started.",
     blocked: "Not offered over the public link", blockedHint: "Usage is offered over the public link only when \"Usage report over the public link\" is on in Settings → Web dashboard — on the dashboard reached directly, on the computer running AgEnD.",
     openSettings: "Open Settings → Web dashboard on that computer",
     partialDays: "Daily detail from {0}: the earlier days in this range are too many rows to send. The rows and totals above cover the whole range; the trend, the heatmap and the CSV start at {0}.",
@@ -42,14 +43,15 @@ register("fusage", {
     range: "期間", today: "今天", r7d: "7 天", month: "本月", all: "全部", custom: "自訂", from: "從", to: "到", apply: "套用",
     group: "分組", g_instance: "Agent", g_backend: "Backend", g_model: "模型", g_profile: "憑證 profile", g_team: "Team（依目前設定）",
     csv: "下載 CSV", basis: "依牌價換算的 API 等值（查證日期 {0}）——不是實際花費。訂閱方案不按 token 計費。",
-    amount: "API 等值", input: "輸入", output: "輸出", read: "快取讀取", write: "快取寫入", total: "token 總計", requests: "請求數", messages: "訊息數",
+    amount: "API 等值", input: "輸入", output: "輸出", reasoning: "推理", read: "快取讀取", write: "快取寫入", total: "token 總計", requests: "請求數", messages: "訊息數",
     notPriced: "未定價", partial: "部分", noTeam: "（不屬於任何 team）", unknown: "未知",
-    f_cache_write_not_reported: "未回報快取寫入（Codex）——是估算", f_not_priced: "未定價：{0}", f_source_unknown: "讀取時尚未記錄 backend 與 profile",
+    f_cache_write_not_reported: "未回報快取寫入（Codex、Muse）——是估算", f_not_priced: "未定價：{0}", f_source_unknown: "讀取時尚未記錄 backend 與 profile",
+    f_estimated: "依文字長度估算——Kiro 不記錄 token 數", f_includes_estimates: "含估算值（Kiro）", f_cost_reported: "金額為 CLI 自行回報（價目表沒有此模型）", estimatedPart: "其中估算：{0}",
     scanning: "掃描中——總數可能還會增加。", updated: "更新於 {0} · 每 10 分鐘讀取一次", since: "自 {0} 起收集", notYet: "尚未收集",
     refresh: "重新整理",
     notMeasured: "未量測", nm_credit_billed: "Kiro 以 credit 計費，不記錄 token", nm_unsupported: "AgEnD 目前還讀不到這個 CLI 的用量", nm_no_data: "尚未讀到任何資料",
     shared: "與 {0} 共用工作目錄，無法分辨各自的 transcript",
-    empty: "還沒有任何紀錄", emptyHint: "用量從 Claude Code 與 Codex 的 transcript 讀取，自 fleet 啟動起計。",
+    empty: "還沒有任何紀錄", emptyHint: "用量從 Claude Code、Codex、Grok、Muse、OpenCode 與 Antigravity 讀取，Kiro 則為估算，自 fleet 啟動起計。",
     blocked: "公開連結上不提供", blockedHint: "只有在設定 → 網頁儀表板裡開啟「透過公開連結提供用量報告」時，公開連結才會提供用量；這個設定要在執行 AgEnD 的那台電腦上、直接開啟的儀表板裡變更。",
     openSettings: "在那台電腦上開啟設定 → 網頁儀表板",
     partialDays: "每日明細從 {0} 起：這段期間更早的日子資料列太多，無法一次送出。上方的各列與總計涵蓋整段期間；趨勢、熱度圖與 CSV 則從 {0} 開始。",
@@ -95,11 +97,11 @@ export function keyText(group, key) {
 const writes = (r) => (r.cacheWrite5m || 0) + (r.cacheWrite1h || 0) + (r.cacheWrite || 0);
 function flagText(f, r) {
   if (f === "not_priced") return tu("f_not_priced", (r.unpriced || []).join(", "));
-  return ["cache_write_not_reported", "source_unknown"].includes(f) ? tu(`f_${f}`) : f;
+  return ["cache_write_not_reported", "source_unknown", "estimated", "includes_estimates", "cost_reported"].includes(f) ? tu(`f_${f}`) : f;
 }
 
 // ── CSV (design §4): the daily rows of this same answer; messages on their own rows (they are per agent, not per model).
-const CSV_COLUMNS = ["date", "zone", "instance", "backend", "model", "tier", "profile", "input", "output", "cache_read", "cache_write_5m", "cache_write_1h", "cache_write", "requests", "messages", "amount", "basis", "flags"];
+const CSV_COLUMNS = ["date", "zone", "instance", "backend", "model", "tier", "profile", "input", "output", "reasoning", "cache_read", "cache_write_5m", "cache_write_1h", "cache_write", "requests", "messages", "amount", "basis", "flags", "estimated"];
 /** One CSV field: quoted when it must be, and never read as a formula by a spreadsheet (=, +, -, @, tab, CR first). */
 export function csvField(v) {
   let s = v === null || v === undefined ? "" : String(v);
@@ -109,11 +111,11 @@ export function csvField(v) {
 export function usageCsv(report) {
   const lines = [CSV_COLUMNS.join(",")];
   for (const d of report.daily || []) {
-    lines.push([d.date, d.zone, d.instance, d.backend, d.model, d.tier, d.profile, d.input, d.output, d.cacheRead, d.cacheWrite5m, d.cacheWrite1h, d.cacheWrite,
-      d.requests, "", d.amount === null ? "" : d.amount.toFixed(6), report.basis, (d.flags || []).join(" ")].map(csvField).join(","));
+    lines.push([d.date, d.zone, d.instance, d.backend, d.model, d.tier, d.profile, d.input, d.output, d.reasoning, d.cacheRead, d.cacheWrite5m, d.cacheWrite1h, d.cacheWrite,
+      d.requests, "", d.amount === null ? "" : d.amount.toFixed(6), report.basis, (d.flags || []).join(" "), d.estimated ? "yes" : "no"].map(csvField).join(","));
   }
   for (const m of report.messagesDaily || []) {
-    lines.push([m.date, report.zone, m.instance, "", "", "", "", "", "", "", "", "", "", "", m.count, "", report.basis, ""].map(csvField).join(","));
+    lines.push([m.date, report.zone, m.instance, "", "", "", "", "", "", "", "", "", "", "", "", m.count, "", report.basis, "", ""].map(csvField).join(","));
   }
   return `${lines.join("\r\n")}\r\n`;
 }
@@ -151,7 +153,7 @@ export function levels(values) {
   return (v) => (!(v > 0) ? 0 : v <= cut[0] ? 1 : v <= cut[1] ? 2 : v <= cut[2] ? 3 : 4);
 }
 
-const tokensOf = (d) => d.input + d.output + d.cacheRead + d.cacheWrite5m + d.cacheWrite1h + d.cacheWrite;
+const tokensOf = (d) => d.input + d.output + (d.reasoning || 0) + d.cacheRead + d.cacheWrite5m + d.cacheWrite1h + d.cacheWrite;
 /**
  * Each day of the answer: its tokens (whether it was used at all), the priced part of its amount, whether part of it is
  * not priced, and its parts by zone (a day folded before the fleet's timezone changed keeps its own zone, §5.3).
@@ -218,7 +220,7 @@ export function thinXLabels(n, slotPx, labelWidthPx) {
 /** The trend's series: the top `TOP` agents by the measure over the range, then "others"; one value per date. */
 export function trendSeries(report, dates) {
   const priced = report.totals && report.totals.amount !== null && report.totals.amount > 0;
-  const measure = (d) => (priced ? d.amount || 0 : d.input + d.output + d.cacheRead + d.cacheWrite5m + d.cacheWrite1h + d.cacheWrite);
+  const measure = (d) => (priced ? d.amount || 0 : tokensOf(d));
   const byAgent = new Map();
   for (const d of report.daily || []) byAgent.set(d.instance, (byAgent.get(d.instance) || 0) + measure(d));
   const ranked = [...byAgent.entries()].filter(([, v]) => v > 0).sort((a, b) => b[1] - a[1] || a[0].localeCompare(b[0]));
@@ -327,6 +329,7 @@ function Row({ r, group, max, measure }) {
     <td data-label=${tu("amount")} class=${`num${r.amount === null ? " muted" : ""}`}>${amountText(r)}</td>
     <td data-label=${tu("input")} class="num">${tokens(r.input)}</td>
     <td data-label=${tu("output")} class="num">${tokens(r.output)}</td>
+    <td data-label=${tu("reasoning")} class="num">${r.reasoningReported === false ? "—" : tokens(r.reasoning || 0)}</td>
     <td data-label=${tu("read")} class="num">${tokens(r.cacheRead)}</td>
     <td data-label=${tu("write")} class="num">${r.flags.includes("cache_write_not_reported") && writes(r) === 0 ? "—" : tokens(writes(r))}</td>
     <td data-label=${tu("total")} class="num">${tokens(r.total)}</td>
@@ -379,13 +382,14 @@ export function UsageReport({ report, choice, setChoice, refresh, fetchedAt }) {
       ${report.scanning.active && (!report.scanning.caughtUp || report.scanning.pendingBytes > 0) ? html` <span class="us-scan" role="status">${tu("scanning")} <button type="button" class="btn btn-sm" onClick=${refresh}>${tu("refresh")}</button></span>` : null}</p>
     ${empty ? html`<${Empty} icon="chart" title=${tu("empty")} hint=${tu("emptyHint")} />` : html`
       <dl class="us-totals card">
-        <div class="ch-metric"><dt>${tu("amount")}</dt><dd>${amountText(report.totals)}</dd></div>
+        <div class="ch-metric"><dt>${tu("amount")}</dt><dd>${amountText(report.totals)}${report.totals.estimated
+          ? html`<span class="us-est">${report.totals.amountEstimated !== null && report.totals.amountEstimated !== undefined ? tu("estimatedPart", money(report.totals.amountEstimated)) : tu("f_includes_estimates")}</span>` : null}</dd></div>
         <div class="ch-metric"><dt>${tu("total")}</dt><dd>${tokens(report.totals.total)}</dd></div>
         <div class="ch-metric"><dt>${tu("requests")}</dt><dd>${n(report.totals.requests)}</dd></div>
         <div class="ch-metric"><dt>${tu("messages")}</dt><dd>${report.totals.messages === null ? "—" : n(report.totals.messages)}</dd></div>
       </dl>
       ${rows.length ? html`<table class="us-table"><thead><tr><th scope="col">${tu(`g_${group}`)}</th><th scope="col" class="num">${tu("amount")}</th>
-        <th scope="col" class="num">${tu("input")}</th><th scope="col" class="num">${tu("output")}</th><th scope="col" class="num">${tu("read")}</th><th scope="col" class="num">${tu("write")}</th>
+        <th scope="col" class="num">${tu("input")}</th><th scope="col" class="num">${tu("output")}</th><th scope="col" class="num">${tu("reasoning")}</th><th scope="col" class="num">${tu("read")}</th><th scope="col" class="num">${tu("write")}</th>
         <th scope="col" class="num">${tu("total")}</th><th scope="col" class="num">${tu("requests")}</th><th scope="col" class="num">${tu("messages")}</th></tr></thead>
         <tbody>${rows.map((r) => html`<${Row} key=${r.key} r=${r} group=${group} max=${max} measure=${measure} />`)}</tbody></table>`
         : html`<p class="note">${tu("noRows")}</p>`}

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();