@songsid/agend 2.3.0 → 2.3.2-beta.1

package/dist/ui/chat-effects.js

@@ -13,7 +13,7 @@ import { getAppEffects, wakeEffects, effectsLoaded, onEffectsAwake } from "./eff
 
 register("chatFx", {
   en: { stock: "Off: the page layout could not be verified ({0}). Reload and report this code if it persists.", transport: "Off: the isolated effect frame could not start. Reload to try again.", enableHere: "Turn effects on here", playMotion: "Play effects anyway", leaveSafe: "Leave safe mode", viewerShow: "Show themes, effects and widgets here", clock: "Off: the page timing clock is unavailable. Reload to try again.", gatesUnknown: "Off: the playback conditions could not be verified.", resource: "Off: this effect could not be loaded or verified. Reload to try again.", frontQueue: "Waiting for a foreground slot.", consent: "This page has older playback information. Reload to use the isolated effect player.", previewMissing: "Off: the isolated effect frame is unavailable. Reload to try again.", unsupported: "Off: this browser lacks required Canvas Worker or layout support.", calibration: "Starting the effect.", baseline: "This page has older playback information. Reload to try again.", safetyUnknown: "Stopped: this device's safety history could not be verified. Reload to check it.", rawReason: "Playback blocked: {0}", missingRow: "Playback state is unavailable (runtime_unavailable).", region: "Off: this effect does not declare the chat region.", blocked: "Placed effects are blocked for this viewer:", deviceSetting: "Open device preferences", webSetting: "Open Web settings", reloadHint: "Reload page",
-    title: "Effects", loading: "Checking effects…", empty: "No effects in this chat.", failed: "Effects stopped because their resources could not be verified. Reload the page to try again.", reload: "Reload page", pause: "Pause", resume: "Resume", remove: "Remove from chat", removeFailed: "Could not remove this effect. Reload the page to check its state.", css: "Agent foreground effects are paused while your custom CSS is on or cannot be verified.", setting: "Open Web appearance settings", running: "Running", starting: "Starting", off: "Stopped", resumeFailed: "This effect cannot resume: the page or its safety history is not ready. Reload the page or choose another effect.", queued: "Waiting for a slot", unknown: "Playback is off or unavailable here.", budget: "Paused to protect page responsiveness. Resume keeps the three-pauses safety limit.", pauseHelp: "Resume keeps this device’s automatic-pause history and three-pause safety limit.", paused: "Paused", low: "Reduced quality",
+    title: "Effects", loading: "Checking effects…", empty: "No effects in this chat.", failed: "Effects stopped because their resources could not be verified. Reload the page to try again.", reload: "Reload page", pause: "Pause", resume: "Resume", remove: "Remove from chat", removeFailed: "Could not remove this effect. Reload the page to check its state.", css: "Agent foreground effects are paused while your custom CSS is on or cannot be verified.", setting: "Open Settings → Look", running: "Running", starting: "Starting", off: "Stopped", resumeFailed: "This effect cannot resume: the page or its safety history is not ready. Reload the page or choose another effect.", queued: "Waiting for a slot", unknown: "Playback is off or unavailable here.", budget: "Paused to protect page responsiveness. Resume keeps the three-pauses safety limit.", pauseHelp: "Resume keeps this device’s automatic-pause history and three-pause safety limit.", paused: "Paused", low: "Reduced quality",
     typing: "Waiting while you type — it plays when you leave the message box.", covered: "Waiting while a menu or panel covers the chat.",
     dialogOpen: "Paused while this dialog is open.", wasRunning: "Was running; paused while this dialog is open.", modal: "Waiting while a dialog is open.",
     off3: "Turned off on this device after three automatic pauses. Resume cannot restart it here.", interrupted: "Stopped: the page closed while it was playing. Resume to play it again.",
@@ -21,7 +21,7 @@ register("chatFx", {
     hiddenTab: "Waiting until this tab is visible.", offscreen: "Waiting until the chat is on screen.",
     safeMode: "Off in safe mode.", publicLink: "Off on a public link.", disabled: "Effects are switched off." },
   "zh-TW": { stock: "已關閉：無法驗證頁面版面（{0}）。請重新載入；若持續發生，請回報此代碼。", transport: "已關閉：無法啟動隔離效果框架。請重新載入再試。", enableHere: "在這裡開啟效果", playMotion: "仍然播放效果", leaveSafe: "離開安全模式", viewerShow: "在這裡顯示主題、效果與小工具", clock: "已關閉：頁面計時無法使用。請重新載入再試。", gatesUnknown: "已關閉：無法確認播放條件。", resource: "已關閉：無法載入或驗證此效果。請重新載入再試。", frontQueue: "等待前景空位。", consent: "這個頁面的播放資訊已過期。請重新載入以使用隔離效果播放器。", previewMissing: "已關閉：隔離效果框架無法使用。請重新載入再試。", unsupported: "已關閉：這個瀏覽器缺少 Canvas Worker 或版面驗證支援。", calibration: "正在啟動效果。", baseline: "這個頁面的播放資訊已過期，請重新載入再試。", safetyUnknown: "已停止：無法確認這台裝置的安全紀錄。請重新載入確認。", rawReason: "播放受阻：{0}", missingRow: "無法取得播放狀態（runtime_unavailable）。", region: "已關閉：此效果未宣告聊天區域。", blocked: "放置的效果目前無法在這個畫面播放：", deviceSetting: "開啟裝置偏好設定", webSetting: "開啟網頁設定", reloadHint: "重新載入頁面",
-    title: "效果", loading: "正在確認效果…", empty: "這個聊天沒有放置效果。", failed: "無法確認效果資源，已停止播放。重新載入頁面後再試。", reload: "重新載入頁面", pause: "暫停", resume: "恢復", remove: "從聊天移除", removeFailed: "無法移除效果。請重新載入頁面確認狀態。", css: "自訂 CSS 開啟或無法確認時，代理的前景效果會暫停。", setting: "開啟網頁外觀設定", running: "播放中", starting: "啟動中", off: "已停止", resumeFailed: "頁面或安全紀錄尚未就緒，無法恢復此效果。請重新載入頁面，或選擇其他效果。", queued: "等待空位", unknown: "這裡已關閉播放，或無法播放效果。", budget: "為維持頁面順暢，已暫停效果。恢復仍保留三次暫停的安全上限。", pauseHelp: "恢復仍保留這台裝置的自動暫停紀錄與三次暫停安全上限。", paused: "已暫停", low: "降低畫質",
+    title: "效果", loading: "正在確認效果…", empty: "這個聊天沒有放置效果。", failed: "無法確認效果資源，已停止播放。重新載入頁面後再試。", reload: "重新載入頁面", pause: "暫停", resume: "恢復", remove: "從聊天移除", removeFailed: "無法移除效果。請重新載入頁面確認狀態。", css: "自訂 CSS 開啟或無法確認時，代理的前景效果會暫停。", setting: "開啟設定 → 外觀", running: "播放中", starting: "啟動中", off: "已停止", resumeFailed: "頁面或安全紀錄尚未就緒，無法恢復此效果。請重新載入頁面，或選擇其他效果。", queued: "等待空位", unknown: "這裡已關閉播放，或無法播放效果。", budget: "為維持頁面順暢，已暫停效果。恢復仍保留三次暫停的安全上限。", pauseHelp: "恢復仍保留這台裝置的自動暫停紀錄與三次暫停安全上限。", paused: "已暫停", low: "降低畫質",
     typing: "輸入時暫停，離開訊息輸入框就會播放。", covered: "選單或面板蓋住聊天時暫停。",
     dialogOpen: "開著這個對話框時暫停。", wasRunning: "原本在播放；開著這個對話框時暫停。", modal: "有對話框開著時暫停。",
     off3: "已自動暫停三次，這台裝置已關閉此效果，無法在這裡恢復。", interrupted: "播放時頁面被關閉而停止。按「恢復」再播放一次。",
@@ -64,7 +64,7 @@ export function effectRowText(row, { ownOpen = false, wasRunning = false, doc =
 /** Fixed local actions: no server/Worker-provided destination or raw reason in a URL. */
 export function effectReasonAction(reason) {
   if (reason === "preview_not_consented" || reason === "preview_unavailable") return { reload: true, label: "chatFx.reloadHint" };
-  if (["disabled", "owner_css"].includes(reason)) return { href: "/settings/appearance", label: "chatFx.setting" };
+  if (["disabled", "owner_css"].includes(reason)) return { href: "/settings/look", label: "chatFx.setting" };
   if (["transport_unavailable", "baseline_unsupported", "baseline_unavailable", "baseline_timeout", "runtime_unavailable", "resource_unavailable", "resource_timeout", "clock_unavailable", "safety_unknown"].includes(reason)) return { reload: true, label: "chatFx.reloadHint" };
   return null;
 }
@@ -155,7 +155,7 @@ export function ChatEffects({ name, lease, element, store, open, onClose, onPlay
   return html`${!open && localViewer() && effects.length ? html`<div class="chat-fx-notice"><label><input type="checkbox" checked=${themesShown()} onChange=${e => setThemesShown(e.currentTarget.checked)} /> ${t("chatFx.viewerShow")}</label></div>` : null}${!open && state?.error && !effects.length ? html`<div class="chat-fx-notice" role="status">${effectRowText({ reason: state.error })} <${ReasonAction} reason=${state.error} /></div>` : null}${!open && state?.reason ? html`<div class="chat-fx-notice" role="status">${effectRowText({ reason: state.reason })} <${ReasonAction} reason=${state.reason} /></div>` : null}${!open && blocked.length ? html`<div class="chat-fx-notice" role="status"><strong>${t("chatFx.blocked")}</strong>
     ${blocked.map(({ p, row }) => html`<span key=${p.id}>${p.manifest.title}: ${effectRowText(row)} ${["paused", "host_budget"].includes(row?.reason) ? html`<small>${t(row.reason === "host_budget" ? "chatFx.budget" : "chatFx.pauseHelp")}</small>` : null} <${ReasonAction} reason=${row?.reason} /></span>`)}</div>` : null}${open ? html`<${Dialog} title=${t("chatFx.title")} onClose=${onClose} busy=${busy}>
       ${state?.error ? html`<p>${t("chatFx.failed")}</p><button type="button" class="btn" onClick=${() => location.reload()}>${t("chatFx.reload")}</button>` : null}
-      ${css ? html`<p>${t("chatFx.css")}</p><button type="button" class="btn" onClick=${() => { onClose(); navigate("/settings/appearance"); }}>${t("chatFx.setting")}</button>` : null}
+      ${css ? html`<p>${t("chatFx.css")}</p><button type="button" class="btn" onClick=${() => { onClose(); navigate("/settings/look"); }}>${t("chatFx.setting")}</button>` : null}
       ${!effects.length && !state?.error ? html`<p>${t(state?.unavailable ? "chatFx.unknown" : state?.loading || !state ? "chatFx.loading" : "chatFx.empty")}</p>` : null}
       ${effects.map(p => { const row = rows.find(r => r.id === p.id); return html`<section key=${p.id}><h3>${p.manifest.title}</h3><p>${effectRowText(row, { ownOpen: open, wasRunning: before.current?.get(p.id) === true })}${row?.quality === "low" ? ` · ${t("chatFx.low")}` : ""}</p>
         <${ReasonAction} reason=${row?.reason} onClose=${onClose} />

package/dist/ui/chat-render.js

@@ -627,7 +627,9 @@
     if (!Array.isArray(attachments)) return "";
     var cards = !!(opts && opts.htmlCards);
     // #1589: { inlinePreviews: true } (not on the public link) plays media and offers text inline, after the file list.
-    var inline = !!(opts && opts.inlinePreviews);
+    // #2547: { textPreviews: true } offers the text cards (Markdown, CSV/TSV, JSON, code, text) on the public link too:
+    // the same capped, same-origin read and the same rendering (nothing in the file ever runs); media stays local.
+    var inline = !!(opts && opts.inlinePreviews), texts = inline || !!(opts && opts.textPreviews);
     var out = [], after = [];
     attachments.forEach(function (a) {
       // #1565: a file from before the fleet restarted that could not be served again — its name, marked unavailable;
@@ -639,7 +641,8 @@
       if (!a || typeof a.id !== "string" || !/^[0-9a-f]{32}$/.test(a.id)) return;
       if (cards && isHtmlAttachment(a)) after.push('<div class="html-card" data-att="' + a.id + '"></div>');
       var url = "/ui/file/" + a.id;
-      var kind = inline ? attachmentPreviewType(a) : null;
+      var kind = texts ? attachmentPreviewType(a) : null;
+      if ((kind === "video" || kind === "audio") && !inline) kind = null;
       if (kind === "video") after.push('<div data-trust="media" class="att-media"><video class="att-video" controls preload="metadata" src="' + url + '"></video></div>');
       else if (kind === "audio") after.push('<div data-trust="media" class="att-media"><audio class="att-audio" controls preload="metadata" src="' + url + '"></audio></div>');
       else if (kind) after.push('<div class="text-card" data-att="' + a.id + '" data-type="' + kind + '"></div>');

package/dist/ui/chat-strings.js

@@ -49,7 +49,7 @@ register("chat", {
     cmd_wake: "Wake a paused instance", cmd_save: "Save the conversation to a file",
     tourTitle: "Welcome to web chat", tourStep: "{0} of {1}", tourBack: "Back", tourNext: "Next", tourDone: "Got it", tourSkip: "Skip",
     tour1: "Pick an instance in the list to chat with it. On a phone, ☰ opens the list.",
-    tour2: "This is the agent's conversation. If it also has a Telegram or Discord chat, web echo (Settings → Web) decides whether what you send here shows there too.",
+    tour2: "This is the agent's conversation. If it also has a Telegram or Discord chat, web echo (Settings → Chat & connections) decides whether what you send here shows there too.",
     tour3: "Attach files and images with 📎, or paste or drop them on the chat.",
     tour4: "While the agent works, Stop reply appears in the message box: it interrupts the current reply. The instance itself keeps running.",
     tour5: "A “needs you” badge means the agent is waiting on its terminal, for example a permission question. Answer it from the buttons in its chat.",
@@ -190,7 +190,7 @@ register("chat", {
     cmd_wake: "喚醒已暫停的 instance", cmd_save: "把對話存成檔案",
     tourTitle: "歡迎使用網頁聊天", tourStep: "{0} / {1}", tourBack: "上一步", tourNext: "下一步", tourDone: "知道了", tourSkip: "略過",
     tour1: "在清單裡選一個 instance，就能跟它對話。手機上請按 ☰ 打開清單。",
-    tour2: "這是這個 Agent 的對話。如果它也有 Telegram 或 Discord 聊天，在這裡送出的訊息是否也出現在那裡，由「設定 → 網頁」的網頁轉發決定。",
+    tour2: "這是這個 Agent 的對話。如果它也有 Telegram 或 Discord 聊天，在這裡送出的訊息是否也出現在那裡，由「設定 → 聊天與連線」的網頁轉發決定。",
     tour3: "按 📎 附上檔案和圖片，也可以直接貼上或拖到聊天裡。",
     tour4: "Agent 工作時，輸入框會出現「中止回覆」：中斷目前的回覆，instance 本身會繼續運行。",
     tour5: "看到「等你回應」標記，表示 Agent 在終端機上等你，例如權限詢問。到它的聊天裡按按鈕回應即可。",

package/dist/ui/chat-thread.js

@@ -14,7 +14,7 @@ import { chatTime, chatTimeFull, onDayChange } from "./chat-time.js";
 import { textLinkSegments } from "/assets/app-route.js";
 
 const R = () => globalThis.AgendChatRender;
-/** #1589: the public link shows attachments as downloads only (its page says so: <body data-public-link="1">). */
+/** #1589: the public link plays no media in the page (its page says so: <body data-public-link="1">); #2547: its text cards show. */
 const PUBLIC_LINK = () => globalThis.document?.body?.dataset?.publicLink === "1";
 /** #1589: how much of a text attachment is shown before "Show all". */
 export const TEXT_PREVIEW_LINES = 200;
@@ -146,7 +146,7 @@ export function createThread(list, scroller, opts) {
     // #2272: reply to it — a hover strip at its top right (phones: swipe left or long-press; R on a focused message).
     const key = msgKey(x);
     const act = opts.canReply?.() === false ? "" : `<div data-trust="thread-control" class="msg-actions"><button type="button" class="chip-btn icon-only" data-act="reply" data-arg="${escAttr(key)}" title="${escAttr(tr("chat.reply"))}" aria-label="${escAttr(tr("chat.reply"))}">${REPLY}</button></div>`;
-    return `<div class="msg ${u ? "user" : "agent"}" data-key="${escAttr(key)}" tabindex="-1">${act}<div class="meta"><span class="sender">${escAttr(x.sender)}</span>${time}${ticks}</div>${quoteHtml(x.replyTo)}<div class="body">${clicked ? clickHtml(x.click) : `<div class="md">${renderedMarkdown(x.text, x.role === "agent", opts.emojis, opts.mentions)}</div>`}${R().attachmentsHtml(x.attachments, { htmlCards: x.role === "agent", goneTitle: tr("chat.attGone"), goneLabel: tr("chat.attUnavailable"), inlinePreviews: !PUBLIC_LINK() })}${buttons}</div>${R().reactionsHtml(x.reactions, tr("chat.reactedBy", x.instance || ""))}${tools}</div>`;
+    return `<div class="msg ${u ? "user" : "agent"}" data-key="${escAttr(key)}" tabindex="-1">${act}<div class="meta"><span class="sender">${escAttr(x.sender)}</span>${time}${ticks}</div>${quoteHtml(x.replyTo)}<div class="body">${clicked ? clickHtml(x.click) : `<div class="md">${renderedMarkdown(x.text, x.role === "agent", opts.emojis, opts.mentions)}</div>`}${R().attachmentsHtml(x.attachments, { htmlCards: x.role === "agent", goneTitle: tr("chat.attGone"), goneLabel: tr("chat.attUnavailable"), inlinePreviews: !PUBLIC_LINK(), textPreviews: true })}${buttons}</div>${R().reactionsHtml(x.reactions, tr("chat.reactedBy", x.instance || ""))}${tools}</div>`;
   }
   /**
    * A message this page is sending (chat-store.js): its own bubble at once, dimmed with "Sending…" until the server

package/dist/ui/first-run.js

@@ -5,7 +5,7 @@ import { html } from "/assets/app-html.js";
 import { register, t } from "/assets/app-i18n.js";
 import { appStore, createStore, useStore } from "/assets/app-store.js";
 import { navigate } from "/assets/app-nav.js";
-import { settingsPath } from "/assets/app-route.js";
+import { sectionPath } from "/assets/app-route.js";
 import { Icon } from "/assets/ui-icons.js";
 
 register("firstRun", {
@@ -52,7 +52,7 @@ export function useFirstRun() {
 export function FirstRunCard({ onConnect }) {
   const shown = useFirstRun();
   if (!shown) return null;
-  const connect = onConnect || (() => { local.set({ wizard: true }); navigate(settingsPath("bots")); });
+  const connect = onConnect || (() => { local.set({ wizard: true }); navigate(sectionPath("bots")); });
   return html`<section class="card first-run" aria-labelledby="first-run-title">
     <h3 id="first-run-title"><${Icon} name="plug" size=${14} /> ${t("firstRun.title")}</h3>
     <p>${t("firstRun.body")}</p>

package/dist/ui/fleet-canvas-view.js

@@ -0,0 +1,114 @@
+// The Fleet canvases' shared view (#1918's org chart canvas, fleet-canvas.js; #2540's Office, fleet-office.js): the pure
+// pan and zoom math and the pointer gestures, so both feel the same. A view is { k, x, y }: a world point (wx, wy) is
+// drawn at (x + wx·k, y + wy·k) in the viewport's CSS px.
+//
+// - One pointer pans once it has moved a few px (so a tap still opens what it is on); two pinch: the world point under
+//   their old midpoint goes to the new one, scaled by how their span changed (a two-finger move pans too). The pointer
+//   is captured only once it drags: a capture at once would send the tap's click to the viewport, not what was tapped.
+//   The click that ends a drag or a pinch opens nothing.
+// - The wheel zooms about the pointer; + / − / 0 zoom in, out and fit (with no Alt, Ctrl or Meta held).
+
+export const K_MIN = 0.2, K_MAX = 2.5;
+/** `k` kept in [lo, hi] (the org canvas's range by default). */
+export const clampK = (k, lo = K_MIN, hi = K_MAX) => Math.min(hi, Math.max(lo, k));
+
+/**
+ * The view that shows region `r` in a `size` viewport: as large as fits (at most `maxK`), centred across, from the top.
+ * `minK`: never smaller than this (a phone's opening); a region that is then wider than the viewport starts at its left.
+ * `widthOnly`: fit the width, let the height run on (the opening: the rest is below).
+ */
+export function fitView(r, size, { margin = 24, minK = K_MIN, maxK = 1.25, widthOnly = false } = {}) {
+  const across = (size.w - 2 * margin) / r.w, down = widthOnly ? Infinity : (size.h - 2 * margin) / r.h;
+  const k = clampK(Math.max(minK, Math.min(across, down, maxK)));
+  const x = r.w * k > size.w - 2 * margin ? margin - r.x * k : size.w / 2 - (r.x + r.w / 2) * k;
+  return { k, x, y: margin - r.y * k };
+}
+/** The view at scale `k` with the viewport point (cx, cy) on the same world point as in `v`. */
+export function zoomTo(v, k, cx, cy) {
+  return { k, x: cx - (cx - v.x) * (k / v.k), y: cy - (cy - v.y) * (k / v.k) };
+}
+/** Zoom by `f` about the viewport point (cx, cy): the canvas point under it stays under it. */
+export function zoomAt(v, f, cx, cy) { return zoomTo(v, clampK(v.k * f), cx, cy); }
+/** A pinch step at scale `k`: the world point under the old midpoint goes to the new midpoint. */
+export function pinchTo(v, from, to, k) {
+  const wx = (from.mid.x - v.x) / v.k, wy = (from.mid.y - v.y) / v.k;
+  return { k, x: to.mid.x - wx * k, y: to.mid.y - wy * k };
+}
+/** A pinch step: the canvas point under the old midpoint goes to the new midpoint, the zoom scaled by the spans' ratio. */
+export function pinchView(v, from, to) { return pinchTo(v, from, to, clampK(v.k * (to.dist / from.dist))); }
+/** Viewport CSS px → world units, and back. */
+export const toWorld = (v, sx, sy) => ({ x: (sx - v.x) / v.k, y: (sy - v.y) / v.k });
+export const toScreen = (v, wx, wy) => ({ x: v.x + wx * v.k, y: v.y + wy * v.k });
+/** The view at the same scale with world point (wx, wy) in the middle of a `size` viewport. */
+export const centreOn = (v, size, wx, wy) => ({ k: v.k, x: size.w / 2 - wx * v.k, y: size.h / 2 - wy * v.k });
+/**
+ * The world point a click on an overview at `rect` (its client box) shows, for an overview of world box `box` drawn
+ * whole and centred in it (an SVG viewBox's xMidYMid meet); null when it has no size.
+ */
+export function miniPoint(rect, box, clientX, clientY) {
+  if (!rect || !rect.width || !rect.height) return null;
+  const scale = Math.min(rect.width / box.w, rect.height / box.h);
+  return { x: box.x + (clientX - rect.left - (rect.width - box.w * scale) / 2) / scale, y: box.y + (clientY - rect.top - (rect.height - box.h * scale) / 2) / scale };
+}
+/** The wheel's zoom factor (a notch is about 15%; a trackpad's small deltas zoom a little). */
+export const wheelFactor = (e) => Math.exp(-e.deltaY * 0.0015);
+/** What a key does to the view: "in", "out", "fit" (0), or null (any other key, or with Alt, Ctrl or Meta). */
+export function zoomKey(e) {
+  if (e.altKey || e.ctrlKey || e.metaKey) return null;
+  if (e.key === "+" || e.key === "=") return "in";
+  if (e.key === "-" || e.key === "_") return "out";
+  if (e.key === "0") return "fit";
+  return null;
+}
+
+// ── The pointer gestures: the state lives in the caller's ref (it outlives a render), the handlers are made per render ──
+
+export const SLOP = 5;
+/** A fresh gesture state: the pointers down, how far the one has moved, the pinch's last span, whether to swallow the click. */
+export const gestureState = () => ({ pts: new Map(), moved: 0, span: null, swallow: false });
+/**
+ * The handlers for state `d`: `el()` the element measured and captured; `pan(dx, dy)` and `pinch(from, to)` move the
+ * view. `move` returns whether it was a drag or a pinch (not a hover). `busy()`: a drag or pinch is under way.
+ */
+export function gestures(d, { el, pan, pinch }) {
+  const spanOf = () => {
+    const [a, b] = [...d.pts.values()], r = el().getBoundingClientRect();
+    return { mid: { x: (a.x + b.x) / 2 - r.left, y: (a.y + b.y) / 2 - r.top }, dist: Math.hypot(a.x - b.x, a.y - b.y) };
+  };
+  return {
+    down(e) {
+      if (e.pointerType === "mouse" && e.button !== 0) return;
+      d.pts.set(e.pointerId, { x: e.clientX, y: e.clientY });
+      if (d.pts.size === 1) { d.moved = 0; d.swallow = false; d.span = null; }
+      else if (d.pts.size === 2) { d.swallow = true; d.span = spanOf(); }
+    },
+    move(e) {
+      const prev = d.pts.get(e.pointerId);
+      if (!prev) return false;
+      d.pts.set(e.pointerId, { x: e.clientX, y: e.clientY });
+      if (d.pts.size === 1) {
+        d.moved += Math.abs(e.clientX - prev.x) + Math.abs(e.clientY - prev.y);
+        if (d.moved < SLOP) return false;
+        if (!d.swallow) { d.swallow = true; try { el().setPointerCapture(e.pointerId); } catch { /* gone already */ } }
+        pan(e.clientX - prev.x, e.clientY - prev.y);
+        return true;
+      }
+      if (d.pts.size !== 2) return true;
+      d.swallow = true;
+      const next = spanOf();
+      if (d.span && d.span.dist > 0 && next.dist > 0) pinch(d.span, next);
+      d.span = next;
+      return true;
+    },
+    up(e) {
+      d.pts.delete(e.pointerId);
+      // Back to one finger: it pans on at once (the pinch already swallows the click); two again: a new span.
+      d.span = d.pts.size === 2 ? spanOf() : null;
+      if (d.pts.size === 1) d.moved = SLOP;
+      // The click that ends a drag comes after this: let it be swallowed, then forget.
+      if (d.swallow && !d.pts.size) setTimeout(() => { if (!d.pts.size) d.swallow = false; }, 0);
+    },
+    clickCapture(e) { if (d.swallow) { e.preventDefault(); e.stopPropagation(); } },
+    busy: () => d.swallow && d.pts.size > 0,
+  };
+}

package/dist/ui/fleet-canvas.js

@@ -32,6 +32,7 @@ import { Office } from "./fleet-office.js";
 import { OC, REST_KEY, SUM_LINE, canvasLayout, hits, needle, openingRegion, summaryRows } from "./fleet-canvas-layout.js";
 import { createTrafficStore, FAR_K, HEAD, POLL_MS, sendingBy, trafficEdges } from "./fleet-traffic.js";
 import { routeScene } from "./fleet-route-scene.js";
+import { K_MAX, K_MIN, fitView, gestureState, gestures, miniPoint, pinchView, wheelFactor, zoomAt, zoomKey } from "./fleet-canvas-view.js";
 import { createRouteClient } from "./fleet-route.js";
 
 register("orgc", {
@@ -62,32 +63,9 @@ const tc = (k, ...v) => t(`orgc.${k}`, ...v);
 
 export { OC, REST_KEY, SUM_LINE, canvasLayout, openingRegion, summaryRows };
 
-// ── The view: pan, zoom, fit (pure helpers; the component applies them) ──
+// ── The view: pan, zoom, fit and the gestures (fleet-canvas-view.js, shared with the Office view) ──
 
-export const K_MIN = 0.2, K_MAX = 2.5;
-const clampK = (k) => Math.min(K_MAX, Math.max(K_MIN, k));
-/**
- * The view that shows region `r` in a `size` viewport: as large as fits (at most `maxK`), centred across, from the top.
- * `minK`: never smaller than this (a phone's opening); a region that is then wider than the viewport starts at its left.
- * `widthOnly`: fit the width, let the height run on (the opening: the rest is below).
- */
-export function fitView(r, size, { margin = 24, minK = K_MIN, maxK = 1.25, widthOnly = false } = {}) {
-  const across = (size.w - 2 * margin) / r.w, down = widthOnly ? Infinity : (size.h - 2 * margin) / r.h;
-  const k = clampK(Math.max(minK, Math.min(across, down, maxK)));
-  const x = r.w * k > size.w - 2 * margin ? margin - r.x * k : size.w / 2 - (r.x + r.w / 2) * k;
-  return { k, x, y: margin - r.y * k };
-}
-/** A pinch step: the canvas point under the old midpoint goes to the new midpoint, the zoom scaled by the spans' ratio. */
-export function pinchView(v, from, to) {
-  const k = clampK(v.k * (to.dist / from.dist));
-  const wx = (from.mid.x - v.x) / v.k, wy = (from.mid.y - v.y) / v.k;
-  return { k, x: to.mid.x - wx * k, y: to.mid.y - wy * k };
-}
-/** Zoom by `f` about the viewport point (cx, cy): the canvas point under it stays under it. */
-export function zoomAt(v, f, cx, cy) {
-  const k = clampK(v.k * f);
-  return { k, x: cx - (cx - v.x) * (k / v.k), y: cy - (cy - v.y) * (k / v.k) };
-}
+export { K_MIN, K_MAX, fitView, pinchView, zoomAt };
 
 // ── Per device ──
 
@@ -316,7 +294,7 @@ function Canvas({ view, folded, onFold, q, jump, traffic }) {
   const L = useMemo(() => canvasLayout(view, folded, { narrow, label: (s, n) => `${n} ${STATE_LABEL(s)}` }), [view, folded, narrow]);
   const svgRef = useRef(null), worldRef = useRef(null), miniRef = useRef(null), miniViewRef = useRef(null);
   const vp = useRef(null);
-  const drag = useRef({ pts: new Map(), moved: 0, span: null, swallow: false });
+  const drag = useRef(gestureState());
   const size = () => {
     const r = svgRef.current ? svgRef.current.getBoundingClientRect() : null;
     return r && r.width > 0 && r.height > 0 ? { w: r.width, h: r.height } : { w: 960, h: 600 };
@@ -364,58 +342,20 @@ function Canvas({ view, folded, onFold, q, jump, traffic }) {
   });
 
   const open = openChat;
-  // The click that ends a drag or a pinch opens nothing and folds nothing.
-  const onClickCapture = (e) => { if (drag.current.swallow) { e.preventDefault(); e.stopPropagation(); } };
+  // The click that ends a drag or a pinch opens nothing and folds nothing (fleet-canvas-view.js gestures).
+  const g = gestures(drag.current, { el: () => svgRef.current, pan: (dx, dy) => set({ ...vp.current, x: vp.current.x + dx, y: vp.current.y + dy }),
+    pinch: (from, to) => set(pinchView(vp.current, from, to)) });
+  const onClickCapture = g.clickCapture;
   const onWheel = (e) => {
     e.preventDefault();
     const r = svgRef.current.getBoundingClientRect();
-    set(zoomAt(vp.current, Math.exp(-e.deltaY * 0.0015), e.clientX - r.left, e.clientY - r.top));
-  };
-  // One pointer pans (after a few pixels, so a tap still opens a card); two pinch: the canvas point under their old
-  // midpoint goes to the new one, scaled by how their span changed (so a two-finger move pans too). The pointer is
-  // captured only once it drags: a capture at once would send the tap's click to the canvas, not the card.
-  const spanOf = () => {
-    const [a, b] = [...drag.current.pts.values()], r = svgRef.current.getBoundingClientRect();
-    return { mid: { x: (a.x + b.x) / 2 - r.left, y: (a.y + b.y) / 2 - r.top }, dist: Math.hypot(a.x - b.x, a.y - b.y) };
-  };
-  const onPointerDown = (e) => {
-    if (e.pointerType === "mouse" && e.button !== 0) return;
-    const d = drag.current;
-    d.pts.set(e.pointerId, { x: e.clientX, y: e.clientY });
-    if (d.pts.size === 1) { d.moved = 0; d.swallow = false; d.span = null; }
-    else if (d.pts.size === 2) { d.swallow = true; d.span = spanOf(); }
-  };
-  const onPointerMove = (e) => {
-    const d = drag.current, prev = d.pts.get(e.pointerId);
-    if (!prev) return;
-    d.pts.set(e.pointerId, { x: e.clientX, y: e.clientY });
-    if (d.pts.size === 1) {
-      d.moved += Math.abs(e.clientX - prev.x) + Math.abs(e.clientY - prev.y);
-      if (d.moved < 5) return;
-      if (!d.swallow) { d.swallow = true; try { svgRef.current.setPointerCapture(e.pointerId); } catch { /* gone already */ } }
-      set({ ...vp.current, x: vp.current.x + e.clientX - prev.x, y: vp.current.y + e.clientY - prev.y });
-      return;
-    }
-    if (d.pts.size !== 2) return;
-    d.swallow = true;
-    const next = spanOf();
-    if (d.span && d.span.dist > 0 && next.dist > 0) set(pinchView(vp.current, d.span, next));
-    d.span = next;
-  };
-  const onPointerUp = (e) => {
-    const d = drag.current;
-    d.pts.delete(e.pointerId);
-    // Back to one finger: it pans on at once (the pinch already swallows the click); two again: a new span.
-    d.span = d.pts.size === 2 ? spanOf() : null;
-    if (d.pts.size === 1) d.moved = 5;
-    // The click that ends a drag comes after this: let it be swallowed, then forget.
-    if (d.swallow && !d.pts.size) setTimeout(() => { if (!d.pts.size) d.swallow = false; }, 0);
+    set(zoomAt(vp.current, wheelFactor(e), e.clientX - r.left, e.clientY - r.top));
   };
+  const onPointerDown = g.down, onPointerMove = g.move, onPointerUp = g.up;
   const onKeyDown = (e) => {
     if (e.altKey || e.ctrlKey || e.metaKey) return;
-    if (e.key === "+" || e.key === "=") { e.preventDefault(); zoomBy(1.25); return; }
-    if (e.key === "-" || e.key === "_") { e.preventDefault(); zoomBy(0.8); return; }
-    if (e.key === "0") { e.preventDefault(); fit(); return; }
+    const z = zoomKey(e);
+    if (z) { e.preventDefault(); if (z === "fit") fit(); else zoomBy(z === "in" ? 1.25 : 0.8); return; }
     const dir = { ArrowLeft: [-1, 0], ArrowRight: [1, 0], ArrowUp: [0, -1], ArrowDown: [0, 1] }[e.key];
     const card = e.target && e.target.closest ? e.target.closest(".oc-node") : null;
     if (card && (e.key === "Enter" || e.key === " ")) {
@@ -436,12 +376,10 @@ function Canvas({ view, folded, onFold, q, jump, traffic }) {
     if (c) show(c, false);
   };
   const onMini = (e) => {
-    const m = miniRef.current, r = m.getBoundingClientRect(), box = miniBox(L);
-    if (!r.width || !r.height) return;
-    const scale = Math.min(r.width / box.w, r.height / box.h);
-    const wx = box.x + (e.clientX - r.left - (r.width - box.w * scale) / 2) / scale, wy = box.y + (e.clientY - r.top - (r.height - box.h * scale) / 2) / scale;
+    const w = miniPoint(miniRef.current.getBoundingClientRect(), miniBox(L), e.clientX, e.clientY);
+    if (!w) return;
     const s = size(), v = vp.current;
-    set({ k: v.k, x: s.w / 2 - wx * v.k, y: s.h / 2 - wy * v.k });
+    set({ k: v.k, x: s.w / 2 - w.x * v.k, y: s.h / 2 - w.y * v.k });
   };
 
   const box = miniBox(L);

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

@@ -2,8 +2,10 @@
 // editor). An admin session adds an office, renames it, chooses its style (Desks / Studio), picks who is in it (whole
 // teams, or one instance at a time; none: everyone) and deletes one — then saves the whole list with the rev it read
 // (PUT /ui/offices; a change made meanwhile is a 409: read again, nothing overwritten). A stored office's layout (seats,
-// paths) is kept as it is; drawing one is for a later editor. Never offered to a guest, the public link or a read-only
-// session (the host refuses them too).
+// paths) and its layout overrides (Edit layout, fleet-office-layout.js) are kept as they are. Skin packs (#2513): the
+// packs the host keeps are styles to choose; an admin uploads one here (its manifest.json and its PNGs, picked together
+// or as a folder — sent at once, checked by the host, which keeps it whole) or deletes one. Never offered to a guest,
+// the public link or a read-only session (the host refuses them too).
 import { html, useMemo, useState } from "/assets/app-html.js";
 import { t, register } from "/assets/app-i18n.js";
 import { Dialog } from "/assets/ui-dialog.js";
@@ -22,6 +24,10 @@ register("orge", {
     rateLimited: "Too many saves. Try again in a minute.",
     failed: "The offices were not saved ({0}).", layoutKept: "Its seats and paths are kept.",
     styleUnknown: "{0} (not available here: drawn as Desks)",
+    packs: "Skin packs", packsLead: "Styles drawn from an artist's pictures. Pick a pack's manifest.json and all its PNG files together (or its folder).",
+    packsNone: "No skin packs yet.", upload: "Upload a skin pack", uploadFolder: "Upload a folder", uploading: "Uploading…", uploaded: "Skin pack “{0}” uploaded.",
+    uploadFailed: "The skin pack was not uploaded: {0}", noManifest: "no manifest.json among the files", badManifest: "manifest.json is not JSON",
+    removePack: "Delete {0}", removedPack: "Skin pack “{0}” deleted.", removeFailed: "The skin pack was not deleted ({0}).",
   },
   "zh-TW": {
     edit: "編輯辦公室", title: "辦公室", lead: "這個 fleet 的每個人在辦公室檢視中都會看到這些辦公室。沒有選任何成員的辦公室會顯示全部。",
@@ -34,12 +40,79 @@ register("orge", {
     rateLimited: "儲存太頻繁，請一分鐘後再試。",
     failed: "辦公室沒有儲存（{0}）。", layoutKept: "它的座位與路徑會保留。",
     styleUnknown: "{0}（這裡沒有：以辦公桌顯示）",
+    packs: "外觀包", packsLead: "用畫師的圖片畫出的風格。請把外觀包的 manifest.json 和所有 PNG 檔一起選取（或選整個資料夾）。",
+    packsNone: "還沒有外觀包。", upload: "上傳外觀包", uploadFolder: "上傳資料夾", uploading: "上傳中…", uploaded: "已上傳外觀包「{0}」。",
+    uploadFailed: "外觀包沒有上傳：{0}", noManifest: "檔案中沒有 manifest.json", badManifest: "manifest.json 不是 JSON",
+    removePack: "刪除 {0}", removedPack: "已刪除外觀包「{0}」。", removeFailed: "外觀包沒有刪除（{0}）。",
   },
 });
 const te = (k, ...v) => t(`orge.${k}`, ...v);
 export const MAX_OFFICES = 20;
 const STYLES = ["pixel", "studio"];
 
+/** A file's bytes as base64 (in slices: a large picture never goes through one huge string call). */
+export function base64Of(bytes) {
+  let out = "";
+  for (let i = 0; i < bytes.length; i += 0x8000) out += String.fromCharCode.apply(null, bytes.subarray(i, i + 0x8000));
+  return btoa(out);
+}
+/**
+ * What an upload sends, from the files a person picked: { body } or { error }. A folder's files keep their path inside
+ * it (its first part, the folder's own name, dropped), so a manifest naming "sprites/idle.png" finds it.
+ */
+export async function packUpload(files) {
+  const named = [];
+  for (const f of files) {
+    const rel = typeof f.webkitRelativePath === "string" && f.webkitRelativePath ? f.webkitRelativePath.split("/").slice(1).join("/") : f.name;
+    named.push({ name: rel || f.name, file: f });
+  }
+  const man = named.find((x) => x.name === "manifest.json") || named.find((x) => x.name.endsWith("/manifest.json") || x.file.name === "manifest.json");
+  if (!man) return { error: te("noManifest") };
+  let manifest;
+  try { manifest = JSON.parse(await man.file.text()); } catch { return { error: te("badManifest") }; }
+  const out = {};
+  for (const x of named) {
+    if (x === man || !/\.png$/i.test(x.name)) continue;
+    out[x.name] = base64Of(new Uint8Array(await x.file.arrayBuffer()));
+  }
+  return { body: { manifest, files: out } };
+}
+
+function Packs({ packs, store }) {
+  const [busy, setBusy] = useState(false);
+  const [msg, setMsg] = useState("");
+  const send = async (e) => {
+    const input = e.target, files = [...(input.files || [])];
+    if (!files.length) return;
+    setBusy(true); setMsg(te("uploading"));
+    try {
+      const up = await packUpload(files);
+      if (up.error) { setMsg(te("uploadFailed", up.error)); return; }
+      const r = await store.uploadSkin(up.body);
+      if (r.ok) { setMsg(""); toast(te("uploaded", (r.pack && r.pack.name) || up.body.manifest.id)); }
+      else setMsg(te("uploadFailed", r.detail ? `${r.error} — ${r.detail}` : r.error));
+    } finally { setBusy(false); try { input.value = ""; } catch { /* a read-only value */ } }
+  };
+  const remove = async (pk) => {
+    setBusy(true); setMsg("");
+    try {
+      const r = await store.deleteSkin(pk.id);
+      if (r.ok) toast(te("removedPack", pk.name)); else setMsg(te("removeFailed", r.error || r.status));
+    } finally { setBusy(false); }
+  };
+  return html`<fieldset class="oe-packs oe-form" disabled=${busy}>
+    <legend class="oe-label">${te("packs")}</legend>
+    <p class="note">${te("packsLead")}</p>
+    ${packs.length ? html`<ul class="oe-pack-list">${packs.map((pk) => html`<li key=${pk.id} class="oe-pack" data-pack=${pk.id}>
+      <span>${pk.name}</span>${pk.name !== pk.id ? html` <span class="muted mono">${pk.id}</span>` : null}
+      <button type="button" class="btn btn-sm btn-danger oe-pack-remove" onClick=${() => remove(pk)} aria-label=${te("removePack", pk.name)}>${te("remove")}</button></li>`)}</ul>`
+      : html`<p class="note" id="oePacksNone">${te("packsNone")}</p>`}
+    <label class="btn btn-sm oe-upload">${te("upload")}<input type="file" class="sr-only oe-upload-files" multiple accept=".json,.png,application/json,image/png" onChange=${send} /></label>
+    <label class="btn btn-sm oe-upload">${te("uploadFolder")}<input type="file" class="sr-only oe-upload-dir" webkitdirectory="" multiple onChange=${send} /></label>
+    ${msg ? html`<p class="note oe-pack-msg" role="status">${msg}</p>` : null}
+  </fieldset>`;
+}
+
 /** A new office's id: unique among `taken`, the store's pattern ([A-Za-z0-9_-], never "auto"). */
 export function newOfficeId(taken, rand = Math.random) {
   for (;;) {
@@ -49,7 +122,7 @@ export function newOfficeId(taken, rand = Math.random) {
 }
 /** What is sent: the office as the host stores it (no empty layout key). */
 export function officeForSave(o) {
-  return { id: o.id, name: o.name.trim(), skin: o.skin, members: [...o.members], ...(o.layout ? { layout: o.layout } : {}) };
+  return { id: o.id, name: o.name.trim(), skin: o.skin, members: [...o.members], ...(o.layout ? { layout: o.layout } : {}), ...(o.overrides ? { overrides: o.overrides } : {}) };
 }
 
 function Members({ office, view, everyone, onChange }) {
@@ -69,7 +142,7 @@ function Members({ office, view, everyone, onChange }) {
  * the snapshot in force (the page keeps a newer one it already shows: #2431 review); `current()` that snapshot now (null:
  * not known), read when the person chooses after a 409 (#2449 review); `onClose`.
  */
-export function OfficeEditor({ offices, rev, view, store, ask = () => 0, current = () => null, onSaved, onClose }) {
+export function OfficeEditor({ offices, rev, view, store, packs = [], ask = () => 0, current = () => null, onSaved, onClose }) {
   // The draft and the rev it was read at go together (#2424 review): a list the stream re-reads meanwhile never moves
   // the rev under an older draft (a save would then overwrite what it never showed). After a 409 the person chooses
   // (#2431): keep their edits (on the newer rev: Save then replaces what was saved meanwhile, knowingly) or load the
@@ -129,7 +202,8 @@ export function OfficeEditor({ offices, rev, view, store, ask = () => 0, current
         <label class="oe-field"><span class="oe-label">${te("styleLabel")}</span>
           <select class="tb-select oe-style" value=${o.skin} onChange=${(e) => set(o.id, { skin: e.target.value })}>
             ${STYLES.map((s) => html`<option key=${s} value=${s}>${t(`orgo.style_${s}`)}</option>`)}
-            ${STYLES.includes(o.skin) ? null : html`<option key=${o.skin} value=${o.skin}>${te("styleUnknown", o.skin)}</option>`}</select></label>
+            ${packs.map((pk) => html`<option key=${`pack:${pk.id}`} value=${pk.id}>${pk.name}</option>`)}
+            ${STYLES.includes(o.skin) || packs.some((pk) => pk.id === o.skin) ? null : html`<option key=${o.skin} value=${o.skin}>${te("styleUnknown", o.skin)}</option>`}</select></label>
         <button type="button" class="btn btn-sm oe-members-btn" aria-expanded=${open === o.id ? "true" : "false"} onClick=${() => setOpen(open === o.id ? null : o.id)}>
           ${te("members")}: ${o.members.length ? te("membersN", o.members.length) : te("everyone")}</button>
         <button type="button" class="btn btn-sm btn-danger oe-remove" onClick=${() => { setDraft((d) => d.filter((x) => x.id !== o.id)); if (open === o.id) setOpen(null); }}>${te("remove")}</button>
@@ -141,6 +215,7 @@ export function OfficeEditor({ offices, rev, view, store, ask = () => 0, current
     ${draft.length >= MAX_OFFICES ? html`<span class="note">${te("tooMany", MAX_OFFICES)}</span>` : null}
     </fieldset>
     ${msg ? html`<p class="note oe-msg" role="status">${msg}</p>` : null}
+    ${store.uploadSkin ? html`<${Packs} packs=${packs} store=${store} />` : null}
     ${conflict ? html`<div class="oe-conflict">
       <button type="button" class="btn btn-sm" id="oeKeepMine" onClick=${keepMine} disabled=${busy}>${te("keepMine")}</button>
       <button type="button" class="btn btn-sm" id="oeLoadTheirs" onClick=${loadTheirs} disabled=${busy}>${te("loadTheirs")}</button>