@songsid/agend 2.3.1 → 2.3.2-beta.10

package/dist/ui/fleet-usage.js

@@ -15,16 +15,17 @@ 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.",
-    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 — on the dashboard reached directly, on the computer running AgEnD.",
-    openSettings: "Open Settings → Web on that computer",
+    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}.",
     csvFrom: "Download CSV (from {0})",
     noDaily: "No daily detail for this range: even its latest day has more rows than one answer carries, and a part of a day is never shown as the day. The rows and totals above are complete; the trend, the heatmap and the CSV need the daily detail and are not shown.",
@@ -42,16 +43,17 @@ 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 啟動起計。",
-    blocked: "公開連結上不提供", blockedHint: "只有在設定 → 網頁裡開啟「透過公開連結提供用量報告」時，公開連結才會提供用量；這個設定要在執行 AgEnD 的那台電腦上、直接開啟的儀表板裡變更。",
-    openSettings: "在那台電腦上開啟設定 → 網頁",
+    empty: "還沒有任何紀錄", emptyHint: "用量從 Claude Code、Codex、Grok、Muse、OpenCode 與 Antigravity 讀取，Kiro 則為估算，自 fleet 啟動起計。",
+    blocked: "公開連結上不提供", blockedHint: "只有在設定 → 網頁儀表板裡開啟「透過公開連結提供用量報告」時，公開連結才會提供用量；這個設定要在執行 AgEnD 的那台電腦上、直接開啟的儀表板裡變更。",
+    openSettings: "在那台電腦上開啟設定 → 網頁儀表板",
     partialDays: "每日明細從 {0} 起：這段期間更早的日子資料列太多，無法一次送出。上方的各列與總計涵蓋整段期間；趨勢、熱度圖與 CSV 則從 {0} 開始。",
     csvFrom: "下載 CSV（從 {0} 起）",
     noDaily: "這段期間沒有每日明細：連最近的一天，資料列都超過一次回答能帶的數量，而不完整的一天絕不會被當成那一天顯示。上方的各列與總計是完整的；趨勢、熱度圖與 CSV 需要每日明細，所以不顯示。",
@@ -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>`}
@@ -417,8 +421,9 @@ export function UsageTab({ lease }) {
         if (r.status === 403 || r.status === 404) {
           const body = await r.json().catch(() => null);
           if (!lease.current() || mine !== seq.current) return;              // a newer read (or another page) owns the view
-          // Over the public link: where it is turned on — Settings → Web on the dashboard reached directly.
-          setState({ blocked: r.status === 403 ? "blocked" : "off", settings: body && typeof body.settings === "string" && /^http:\/\/localhost:\d+\/settings\/web$/.test(body.settings) ? body.settings : null });
+          // Over the public link: where it is turned on — Settings → Web dashboard on the dashboard reached directly (#2347;
+          // an older AgEnD names /settings/web, which still leads there).
+          setState({ blocked: r.status === 403 ? "blocked" : "off", settings: body && typeof body.settings === "string" && /^http:\/\/localhost:\d+\/settings\/(web|web-dashboard)$/.test(body.settings) ? body.settings : null });
           return;
         }
         if (!r.ok) throw new Error(`HTTP ${r.status}`);

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,164 @@
+// #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 }));
+    },
+  });
+}
+
+/** #2662: how many times a picture refused for the share's minute (429) is asked for, in all. */
+export const IMAGE_ATTEMPTS = 4;
+/**
+ * #2662: pictures read at once. All offices may name a thousand; asked all together they would open more connections
+ * than the share's gateway keeps (32, for everyone watching) — a browser on HTTP/2 to the tunnel does not hold back.
+ */
+export const IMAGE_PARALLEL = 6;
+let reading = 0;
+const queued = [];
+async function inTurn(job) {
+  while (reading >= IMAGE_PARALLEL) await new Promise((go) => queued.push(go));
+  reading++;
+  try { return await job(); } finally { reading--; queued.shift()?.(); }
+}
+/**
+ * #2662: a skin pack's picture on the share (loadPackSkin's `image`): read with fetch, IMAGE_PARALLEL at a time, so a
+ * 429 (the share's minute of pictures, shared by everyone watching) is seen and waited out — its Retry-After (1–60 s),
+ * up to IMAGE_ATTEMPTS in all — instead of drawn as missing. The picture, or null (not found, or still refused after the
+ * last attempt).
+ */
+export async function shareImage(url, { fetch: get = globalThis.fetch, timers = globalThis, decode = blobImage } = {}) {
+  for (let attempt = 1; ; attempt++) {
+    let r, blob = null;
+    try {
+      r = await inTurn(async () => {
+        const answer = await get(url, { method: "GET" });
+        if (answer.ok) blob = await answer.blob();
+        return answer;
+      });
+    } catch { return null; }
+    if (r.ok) { try { return await decode(blob); } catch { return null; } }
+    if (r.status !== 429 || attempt >= IMAGE_ATTEMPTS) return null;
+    const after = Number.parseInt(r.headers?.get?.("Retry-After") ?? "", 10);
+    const seconds = Number.isFinite(after) ? Math.min(60, Math.max(1, after)) : 60;
+    await new Promise((resolve) => timers.setTimeout(resolve, seconds * 1000));
+  }
+}
+/** A PNG's bytes as an image to draw (the page's CSP allows blob: pictures). */
+function blobImage(blob) {
+  return new Promise((resolve) => {
+    if (typeof Image !== "function") { resolve(null); return; }
+    const src = URL.createObjectURL(blob), im = new Image();
+    im.onload = () => { URL.revokeObjectURL(src); resolve(im); };
+    im.onerror = () => { URL.revokeObjectURL(src); resolve(null); };
+    im.src = src;
+  });
+}
+
+/** 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}
+      assetImage=${(url) => shareImage(url, { fetch: (...a) => timers.fetch(...a), timers })} 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-chat.js

@@ -44,6 +44,11 @@ const writeKey = (k, v) => { try { if (v) localStorage.setItem(k, v); else local
 export const chatCardPrefs = createStore({ open: readKey(CHAT_CARD_KEY, "open"), rowHidden: readKey(CHAT_CARD_ROW_KEY, "hidden") });
 export const setChatCardOpen = (open) => { writeKey(CHAT_CARD_KEY, open ? "open" : null); chatCardPrefs.set((s) => ({ ...s, open })); };
 export const setChatCardRowHidden = (rowHidden) => { writeKey(CHAT_CARD_ROW_KEY, rowHidden ? "hidden" : null); chatCardPrefs.set((s) => ({ ...s, rowHidden })); };
+// Full width (the header's ⋯ menu): this browser's choice, like code wrap. The thread and the composer take the panel's
+// width; a person's bubble keeps its cap (app.css). A phone's column is the screen already: no item there.
+const CHAT_WIDE_KEY = "agend_chat_full_width";
+export const chatWide = createStore({ on: readKey(CHAT_WIDE_KEY, "on") });
+export const setChatWide = (on) => { writeKey(CHAT_WIDE_KEY, on ? "on" : null); chatWide.set({ on }); };
 function ChatCard({ name, card }) {
   const prefs = useStore(chatCardPrefs);
   if (!card || !prefs.open) return null;
@@ -260,6 +265,7 @@ function ChatView({ name, inst, lease, navKey, exec, awaiting }) {
   const publishCanvasPlayback = useCallback(value => setCanvasPlayback(previous =>
     !previous && !value.playing || previous?.name === value.name && previous.playing === value.playing ? previous : value), []);
   const [wrap, setWrap] = useState(codeWrap);
+  const wide = useStore(chatWide).on;
   const view = useRef(null), split = useRef(null), thread = useRef(null), bg = useRef(null), effectSurface = useRef(null);
   useLayoutEffect(() => { applyTheme(view.current, theme, mode); }, [themeKey, mode]);
   useLayoutEffect(() => {
@@ -321,6 +327,7 @@ function ChatView({ name, inst, lease, navKey, exec, awaiting }) {
     ...themeMenuItems(name),
     // #2117: its ambient — why it is not showing here (with the way to change that), and a person's Clear.
     ...ambientMenuItems(name, { publicLink: document.body.dataset.publicLink === "1", clear: clearAmbient }),
+    narrowScreen() ? null : { key: "fullWidth", checkbox: true, checked: wide, label: t("chat.fullWidth"), onSelect: () => setChatWide(!wide) },
     cwEnabled && canvasWorkerMenuAvailable(window) ? { key: "effects", label: t("cwControls.title"), onSelect: () => setDialog("effects") } : null,
     { key: "delete", label: t("chat.delete"), icon: "trash", danger: true, onSelect: () => setDialog("delete") },
   ];
@@ -333,7 +340,7 @@ function ChatView({ name, inst, lease, navKey, exec, awaiting }) {
   const sub = html`<span class="status"><span class=${`dot ${cls}`} aria-hidden="true"></span>${statusLabel(inst, exec, awaiting)}</span>
     ${inst.model ? html`<button type="button" class="hd-chip" title=${t("chat.chipModel", modelText(inst))} aria-label=${t("chat.chipModel", modelText(inst))} onClick=${() => pick("model")}>${modelText(inst)}</button>` : null}
     ${inst.effort ? html`<button type="button" class="hd-chip" title=${t("chat.chipEffort", inst.effort)} aria-label=${t("chat.chipEffort", inst.effort)} onClick=${() => pick("effort")}>${inst.effort}</button>` : null}`;
-  return html`<div class=${`panel p-chat${wrap ? " wrap-code" : ""}`} ref=${view}>
+  return html`<div class=${`panel p-chat${wrap ? " wrap-code" : ""}`} data-width=${wide ? "full" : undefined} ref=${view}>
     <${PanelHeader} title=${headerName(namesOf(inst || { name }, names.primary))} sub=${sub} nav=${guest ? null : html`<${InstanceSwitch} name=${name} current="chat" />`} notice=${html`<${ChatEffects} name=${name} lease=${lease} element=${effectSurface} store=${store} open=${dialog === "effects"} onPlayback=${publishCanvasPlayback} onClose=${() => setDialog(null)} active=${fxHere} />`}>${fxHere ? html`<${ChatEffectPosters} name=${name} lease=${lease} element=${effectSurface} />` : null}<${CardMenu} card=${card} /><${HeaderTools} navKey=${navKey} />${guest ? null : html`<${Menu} items=${items} label=${t("app.more")} />`}</${PanelHeader}>
     <${ChatCard} key=${name} name=${name} card=${card} />
     <${AgentWidget} slot="chat_header" widget=${widgetFor(name, "chat_header")} binds=${instanceBinds(inst, exec, awaiting)} />
@@ -426,7 +433,7 @@ function threadEntry(name, doc) {
       else if (reason === "busy") getAppEffects()?.stopTrial();
       else if (reason === "transport") location.reload();
       else if (reason === "localAdmin") location.href = "/signin?next=" + encodeURIComponent(location.pathname + location.search);
-      else navigate("/settings/appearance");
+      else navigate("/settings/look");
     },
     canTryEffect: x => getAppEffects()?.canTry(x) === true,
     startEffectTrial: x => { const seq = navStore.get().seq; void getAppEffects()?.startTrial(x).then(ok => { if (!ok && e.sink && navStore.get().seq === seq && document.hasFocus?.() === true && document.visibilityState === "visible") toast(t("chat.effectTrialUnavailable")); }); },

package/dist/ui/panel-details.js

@@ -12,7 +12,7 @@ import { appStore, useStore } from "/assets/app-store.js";
 import { useLease } from "/assets/app-ctx.js";
 import { PanelHeader, setTitle, statusClass, statusLabel, openDrawer } from "/assets/app-shell.js";
 import { navigate } from "/assets/app-nav.js";
-import { settingsPath } from "/assets/app-route.js";
+import { sectionPath } from "/assets/app-route.js";
 import { InstanceSwitch } from "/assets/instance-switch.js";
 import { modelText } from "/assets/instance-nav.js";
 import { HeaderTools } from "/assets/header-tools.js";
@@ -94,7 +94,7 @@ function DetailsView({ name, inst, navKey, exec, awaiting }) {
   // A ClassicBot room (classicBot.yaml) keeps Classic's split: its own Settings dialog, and only the actions Settings'
   // Classic rows have (pause / wake) — never the fleet agent's (#1561 review).
   const classic = !!(d && d.kind === "classic");
-  const editInSettings = () => { requestAgentSettings(name, classic ? "classic" : "agent"); navigate(settingsPath(classic ? "classic" : undefined)); };
+  const editInSettings = () => { requestAgentSettings(name, classic ? "classic" : "agent"); navigate(sectionPath(classic ? "classic" : undefined)); };
   const st = inst.status;
   // Until its read is in, the page does not know which kind it is: no actions yet (only Edit is offered once known).
   const items = !d ? [] : classic ? [