@songsid/agend 2.2.0 → 2.3.0-beta.1

package/dist/ui/settings-strings.js

@@ -288,6 +288,129 @@ register("settings", {
     accessTitle: "Access",
     webChat: "Web chat",
     sec_web: "Web",
+    // #1629 r4 §3: Settings → Appearance (owner CSS).
+    sec_appearance: "Web appearance",
+    colorTitle: "Identity colours", colorLead: "Each agent's colour in the sidebar: a person's pick, the agent's own, its bot's Discord role colour, or an automatic soft colour. Change one agent's from its ⋯ menu → Colour….",
+    colorPlaces: "Where colours show, unless an agent's own setting says otherwise", colorOff: "Turn off colours",
+    colorOffLead: "Hides every identity colour on this host. The colours people picked are kept, and come back when you turn colours on again.",
+    restoreTitle: "Restore defaults", restoreLead: "Puts this host's appearance settings back to their defaults. It asks first and says what it resets.",
+    restoreConfirm: "This resets, for this host: showing agents' themes and effects, the card size and each card's own size, your sidebar widget, where colours show, and whether colours are off. It also turns your custom CSS off (its versions are kept) and its switch on this device. The colours people picked for agents, installed mods, uploaded effects and the card limits stay as they are.",
+    restoreGo: "Restore defaults", restoreDone: "Appearance settings are back to their defaults.", restoreCssFailed: "The settings are back to their defaults, but your custom CSS could not be turned off: {0}",
+    cardSizeTitle: "Identity cards",
+    cardSizeLead: "How large identity cards are drawn on all your devices. A card's own S / M / L sets that card apart.",
+    cardLimitsTitle: "Identity card upload limits",
+    cardLimitsLead: "The largest portrait and banner anyone may upload, and how many pictures each agent may keep. Empty = the default (shown greyed). A lower limit applies at once; a higher one waits for a fleet admin's confirmation. Pictures already stored stay.",
+    cardLimitsUnavailable: "Only a signed-in admin can see and change these here (or edit web.appearance in fleet.yaml).",
+    cardLimit_portrait_max_width: "Portrait width (px)", cardLimit_portrait_max_height: "Portrait height (px)", cardLimit_portrait_max_kib: "Portrait size (KiB)",
+    cardLimit_banner_max_width: "Banner width (px)", cardLimit_banner_max_height: "Banner height (px)", cardLimit_banner_max_kib: "Banner size (KiB)",
+    cardLimit_instance_quota_files: "Pictures per agent", cardLimit_instance_quota_mib: "Picture space per agent (MiB)",
+    cardLimitInForce: "In force: {0} (allowed {1}–{2})",
+    cardLimitsWhole: "Each limit is a whole number, or empty for the default.",
+    cardLimitsNoChange: "Nothing changed.",
+    cardLimitsSave: "Save limits",
+    cardLimitsSaved: "Saved.",
+    cardLimitsFailed: "Not saved: {0}",
+    themesTitle: "Agents' themes",
+    themesShow: "Show agents' themes, effects and widgets",
+    themesShowLead: "On all your devices. When it's off, every chat looks the same, and agents' pictures and ring colours are their bots' again.",
+    themesSafeMode: "This page was opened with ?safe=1: agents' themes are not shown on it.",
+    widgetTitle: "Your sidebar widget",
+    widgetLead: "A small panel under the instance list, on all your devices: the dashboard draws it from a spec and values you write here as JSON — no HTML, script or CSS. Its live values are your fleet's counts (fleet.working, fleet.needs_you, fleet.idle, fleet.stopped). Agents can't change it.",
+    widgetNotJson: "Not JSON.",
+    widgetSave: "Save widget",
+    widgetSaved: "Sidebar widget saved.",
+    widgetExample: "Start from an example",
+    widgetRemove: "Remove widget",
+    widgetRemoved: "Sidebar widget removed.",
+    modsTitle: "Mods",
+    modsLead: "A mod is one file (.agendmod.json) that carries a look: an agent's theme and pictures, its card text, widgets, effects, and custom CSS. Importing shows everything in it first; only what you tick is applied, all at once. Uninstalling removes the mod from this list; what it applied stays until you reset it.",
+    modsLoadFailed: "Couldn't load the installed mods. Reload the page to try again.",
+    modsNone: "No mods installed.",
+    modChoose: "Import a mod file…",
+    modPlan: "What this mod would change",
+    modAuthor: "By {0} (unverified)",
+    modSizeId: "{0} · id {1}",
+    modAlready: "already installed",
+    modReplace: "Replace the installed version {0}",
+    modPartTheme: "Theme (colours, font, pictures)",
+    modPartIdentity: "Card text (tagline and bio)",
+    modPartWidget_chat_header: "Chat header widget",
+    modPartWidget_details: "Details page widget",
+    modPartWidget_sidebar: "Your sidebar widget",
+    modPartEffect: "Effect: {0}",
+    modPartCss: "Custom CSS (on your screens only)",
+    modCssWarn: "Custom CSS from this file — read it before turning it on.",
+    modCssAssets: "{0} files for it ({1})",
+    modAccent: "Accent", modFont: "Font", modPictures: "{0} pictures ({1})", modPlaces: "places {0} effects",
+    modColorsLight: "Light colours", modColorsDark: "Dark colours", modBubble: "Bubbles", modWorkingLabel: "Working label",
+    modBackground: "Background picture", modBackgroundFit: "Background fit and opacity", modAvatar: "Picture (face)",
+    modPlacesEffect: "Places effect", modAllFields: "Every field, as it will be applied",
+    modStageGone: "That import was replaced or ran out of time. Showing what is staged now.",
+    modRegions: "draws on: {0}", modWants: "hears: {0}",
+    modTarget: "Apply to",
+    modTargetPick: "Choose an agent…",
+    modTargetNeeded: "Choose the agent this look goes to.",
+    modAppliedTo: "applied to {0}",
+    modInstall: "Install",
+    modCancel: "Cancel",
+    modInstalled: "Installed {0}.",
+    modFailed: "Not done: {0}",
+    modDownload: "Download",
+    modUninstall: "Uninstall",
+    modUninstallConfirm: "Uninstall {0}? Its effects leave your library unless something still uses them. What it applied stays.",
+    modUninstalled: "Uninstalled {0}.",
+    modExport: "Export a mod",
+    modExportLead: "Make a mod file from what is in force now: an agent's theme, card text and widgets, your sidebar widget, your custom CSS.",
+    modExportInstance: "Agent",
+    modExportName: "Name (a-z, 0-9, -)",
+    modExportVersion: "Version",
+    modExportTitle: "Title",
+    modExportGo: "Download the file",
+    modExportOmitted: "{0} effect(s) placed there are someone else's and were left out: only your own and shared effects travel.",
+    modProposals: "Proposed by agents",
+    modProposedBy: "{0} proposes",
+    modReview: "Review",
+    modDismiss: "Dismiss",
+    cssTitle: "Custom CSS (yours only)",
+    cssLead: "Your own stylesheet, applied to your screens only: every device where you are signed in, never anyone else's, and never on Settings. It can't load anything from the internet. Put pictures and fonts under Assets below and name them url(\"asset:<id>\").",
+    cssLoadFailed: "Couldn't load your custom CSS. Reload the page to try again.",
+    cssPublicLink: "Custom CSS isn't available on a temporary public link.",
+    cssInForce: "In force: {0}",
+    cssOnTrial: "On trial: {0}. Choose Keep, or it reverts.",
+    cssNone: "No custom CSS in force.",
+    cssSave: "Save and try",
+    cssTrying: "Custom CSS saved. Look around, then choose Keep within 15 seconds.",
+    cssOff: "Turn off (all devices)",
+    cssVersions: "Earlier versions ({0})",
+    cssCurrent: "in force",
+    cssRestore: "Use this",
+    cssAssets: "Assets",
+    cssAssetsLead: "PNG, WebP, JPEG, GIF or WOFF2. {0} of {1} files, {2} in total (at most 1 MiB). Metadata such as GPS is removed.",
+    cssAssetAdd: "Add a picture or font",
+    cssAssetCopy: "Copy reference",
+    cssCopied: "Copied {0}",
+    cssAssetRemove: "Remove",
+    cssDeviceTitle: "On this device",
+    cssDeviceOff: "Turn off custom CSS on this device",
+    cssDeviceOffLead: "Only this browser. Your other devices keep it.",
+    cssSafe: "Is something hidden or broken? Add ?safe=1 to the end of any page's address and it loads without custom CSS.",
+    cssError_at_rule: "Not saved: {0} isn't allowed.",
+    cssError_url: "Not saved: the only url() allowed is url(\"asset:<id>\") for a file in Assets.",
+    cssError_unknown_asset: "Not saved: there's no asset {0}. Add it under Assets first.",
+    cssError_function: "Not saved: {0} isn't allowed.",
+    cssError_property: "Not saved: {0} isn't allowed.",
+    cssError_script_scheme: "Not saved: javascript: and vbscript: aren't allowed.",
+    cssError_too_large: "Not saved: custom CSS can be at most 64 KiB.",
+    cssError_malformed: "Not saved: a string or url() isn't closed.",
+    cssError_nul: "Not saved: the text contains a NUL character.",
+    cssError_unserialisable: "Not saved: the CSS couldn't be read back safely.",
+    cssError_asset_type: "Not added: only PNG, WebP, JPEG, GIF or WOFF2 files are allowed.",
+    cssError_asset_unreadable: "Not added: the file couldn't be read.",
+    cssError_asset_quota: "Not added: Assets hold at most 16 files and 1 MiB in total.",
+    cssError_asset_in_use: "Not removed: a saved version still uses it.",
+    cssError_owner_css_read_only: "This sign-in can view but not change custom CSS.",
+    cssError_owner_css_needs_a_signed_in_person: "Sign in in the browser to change custom CSS.",
+    cssError_other: "Not saved ({0}).",
     webLead: "How the web dashboard behaves. A change that loosens access (longer sessions, the browser terminal back on or for longer, the public link) waits for a fleet admin to confirm it in chat (General topic) or on the host; one that tightens it applies at once.",
     webPublicRefused: "Web settings can't be changed over a temporary public link. Open the dashboard at its own address to change them.",
     webSessionTitle: "Sign-in sessions",
@@ -661,6 +784,128 @@ register("settings", {
     accessTitle: "存取",
     webChat: "網頁聊天",
     sec_web: "網頁",
+    sec_appearance: "網頁外觀",
+    colorTitle: "識別色", colorLead: "每個 agent 在側欄的顏色：有人挑選的、agent 自己的、它的 bot 在 Discord 身分組的顏色，或自動配的柔和色。要改某個 agent 的顏色，從它的 ⋯ 選單 → 顏色…。",
+    colorPlaces: "顏色顯示的位置（agent 自己另有設定時除外）", colorOff: "關閉顏色",
+    colorOffLead: "在這台主機隱藏所有識別色。有人挑過的顏色會保留，重新開啟顏色後就會回來。",
+    restoreTitle: "還原預設值", restoreLead: "把這台主機的外觀設定改回預設值。執行前會先詢問，並說明會重設哪些項目。",
+    restoreConfirm: "會重設這台主機的：是否顯示 agent 的主題與效果、卡片大小與各張卡片自己的大小、你的側欄小工具、顏色顯示的位置，以及是否關閉顏色；也會關閉你的自訂 CSS（版本會保留）以及這台裝置上的 CSS 開關。有人替 agent 挑的顏色、已安裝的 mod、上傳的效果與卡片上限都不會變。",
+    restoreGo: "還原預設值", restoreDone: "外觀設定已改回預設值。", restoreCssFailed: "設定已改回預設值，但無法關閉你的自訂 CSS：{0}",
+    cardSizeTitle: "身分卡",
+    cardSizeLead: "身分卡在你所有裝置上的顯示大小。卡片上自己的 小／中／大 可以單獨設定那張卡片。",
+    cardLimitsTitle: "身分卡上傳限制",
+    cardLimitsLead: "任何人可上傳的肖像與橫幅上限，以及每個 agent 可保留的圖片數量。留空＝預設值（以灰字顯示）。調低立即生效；調高需 fleet admin 確認。已存的圖片不受影響。",
+    cardLimitsUnavailable: "只有已登入的管理者能在這裡查看與修改（或在 fleet.yaml 編輯 web.appearance）。",
+    cardLimit_portrait_max_width: "肖像寬度（px）", cardLimit_portrait_max_height: "肖像高度（px）", cardLimit_portrait_max_kib: "肖像大小（KiB）",
+    cardLimit_banner_max_width: "橫幅寬度（px）", cardLimit_banner_max_height: "橫幅高度（px）", cardLimit_banner_max_kib: "橫幅大小（KiB）",
+    cardLimit_instance_quota_files: "每個 agent 的圖片數", cardLimit_instance_quota_mib: "每個 agent 的圖片空間（MiB）",
+    cardLimitInForce: "實際生效：{0}（允許 {1}–{2}）",
+    cardLimitsWhole: "每個限制須為整數，或留空使用預設值。",
+    cardLimitsNoChange: "沒有變更。",
+    cardLimitsSave: "儲存限制",
+    cardLimitsSaved: "已儲存。",
+    cardLimitsFailed: "未儲存：{0}",
+    themesTitle: "Agent 的主題",
+    themesShow: "顯示 agent 的主題、效果與小工具",
+    themesShowLead: "套用到你所有的裝置。關閉時每個聊天看起來都一樣，agent 的圖片與外框顏色也會換回各自 bot 的。",
+    themesSafeMode: "這個頁面是用 ?safe=1 開啟的：不顯示 agent 的主題。",
+    widgetTitle: "你的側邊欄小工具",
+    widgetLead: "實例清單下方的一個小面板，套用到你所有的裝置：儀表板依你在這裡用 JSON 寫的規格與數值繪製——沒有 HTML、腳本或 CSS。即時數值是你 fleet 的計數（fleet.working、fleet.needs_you、fleet.idle、fleet.stopped）。agent 無法變更它。",
+    widgetNotJson: "不是 JSON。",
+    widgetSave: "儲存小工具",
+    widgetSaved: "已儲存側邊欄小工具。",
+    widgetExample: "從範例開始",
+    widgetRemove: "移除小工具",
+    widgetRemoved: "已移除側邊欄小工具。",
+    modsTitle: "Mod",
+    modsLead: "Mod 是一個檔案（.agendmod.json），帶著一套外觀：agent 的主題與圖片、身分卡文字、小工具、效果，以及自訂 CSS。匯入時會先完整列出內容，只有你勾選的部分會一次套用。解除安裝會把 mod 從這個清單移除；它已套用的外觀會保留，直到你重設。",
+    modsLoadFailed: "無法載入已安裝的 mod。請重新載入頁面再試一次。",
+    modsNone: "尚未安裝任何 mod。",
+    modChoose: "匯入 mod 檔案…",
+    modPlan: "這個 mod 會變更的內容",
+    modAuthor: "作者：{0}（未經驗證）",
+    modSizeId: "{0} · id {1}",
+    modAlready: "已安裝",
+    modReplace: "取代已安裝的 {0} 版",
+    modPartTheme: "主題（顏色、字型、圖片）",
+    modPartIdentity: "身分卡文字（標語與簡介）",
+    modPartWidget_chat_header: "聊天標頭小工具",
+    modPartWidget_details: "詳細資料頁小工具",
+    modPartWidget_sidebar: "你的側邊欄小工具",
+    modPartEffect: "效果：{0}",
+    modPartCss: "自訂 CSS（只套用在你的畫面）",
+    modCssWarn: "這是檔案裡的自訂 CSS——開啟前請先讀過。",
+    modCssAssets: "附帶 {0} 個檔案（{1}）",
+    modAccent: "強調色", modFont: "字型", modPictures: "{0} 張圖片（{1}）", modPlaces: "放置 {0} 個效果",
+    modColorsLight: "淺色模式顏色", modColorsDark: "深色模式顏色", modBubble: "對話泡泡", modWorkingLabel: "工作中文字",
+    modBackground: "背景圖片", modBackgroundFit: "背景填滿方式與不透明度", modAvatar: "圖片（頭像）",
+    modPlacesEffect: "放置效果", modAllFields: "所有欄位（套用時的樣子）",
+    modStageGone: "那次匯入已被取代或已逾時。以下顯示目前暫存的內容。",
+    modRegions: "繪製於：{0}", modWants: "接收：{0}",
+    modTarget: "套用到",
+    modTargetPick: "選擇一個 agent…",
+    modTargetNeeded: "請選擇這套外觀要套用到哪個 agent。",
+    modAppliedTo: "套用於 {0}",
+    modInstall: "安裝",
+    modCancel: "取消",
+    modInstalled: "已安裝 {0}。",
+    modFailed: "未完成：{0}",
+    modDownload: "下載",
+    modUninstall: "解除安裝",
+    modUninstallConfirm: "要解除安裝 {0} 嗎？它的效果會離開你的效果庫，除非還有東西在使用。它已套用的外觀會保留。",
+    modUninstalled: "已解除安裝 {0}。",
+    modExport: "匯出 mod",
+    modExportLead: "用目前生效的外觀做成 mod 檔案：某個 agent 的主題、身分卡文字與小工具、你的側邊欄小工具、你的自訂 CSS。",
+    modExportInstance: "Agent",
+    modExportName: "名稱（a-z、0-9、-）",
+    modExportVersion: "版本",
+    modExportTitle: "標題",
+    modExportGo: "下載檔案",
+    modExportOmitted: "有 {0} 個放在那裡的效果屬於別人，已略過：只有你自己的和共用的效果會被帶走。",
+    modProposals: "Agent 提議的 mod",
+    modProposedBy: "{0} 提議",
+    modReview: "檢視",
+    modDismiss: "略過",
+    cssTitle: "自訂 CSS（只套用在你自己）",
+    cssLead: "你自己的樣式表，只套用在你自己的畫面：你登入的每一台裝置都會套用，不會影響別人，也不會套用在設定頁。它無法從網路載入任何東西；圖片和字型請放在下方的「資源」，再用 url(\"asset:<id>\") 引用。",
+    cssLoadFailed: "無法載入你的自訂 CSS。請重新整理頁面再試一次。",
+    cssPublicLink: "臨時公開連結無法使用自訂 CSS。",
+    cssInForce: "使用中：{0}",
+    cssOnTrial: "試用中：{0}。請按「保留」，否則會還原。",
+    cssNone: "目前沒有使用自訂 CSS。",
+    cssSave: "儲存並試用",
+    cssTrying: "已儲存自訂 CSS。請到各頁看看，15 秒內按「保留」。",
+    cssOff: "關閉（所有裝置）",
+    cssVersions: "先前的版本（{0}）",
+    cssCurrent: "使用中",
+    cssRestore: "改用這版",
+    cssAssets: "資源",
+    cssAssetsLead: "PNG、WebP、JPEG、GIF 或 WOFF2。目前 {0} / {1} 個檔案，共 {2}（上限 1 MiB）。會移除 GPS 等中繼資料。",
+    cssAssetAdd: "加入圖片或字型",
+    cssAssetCopy: "複製引用",
+    cssCopied: "已複製 {0}",
+    cssAssetRemove: "移除",
+    cssDeviceTitle: "這台裝置",
+    cssDeviceOff: "在這台裝置關閉自訂 CSS",
+    cssDeviceOffLead: "只影響這個瀏覽器，你的其他裝置照常套用。",
+    cssSafe: "畫面被藏起來或壞掉了嗎？在任何頁面網址的最後加上 ?safe=1，就會不套用自訂 CSS 地載入。",
+    cssError_at_rule: "未儲存：不允許使用 {0}。",
+    cssError_url: "未儲存：url() 只能用 url(\"asset:<id>\") 引用「資源」裡的檔案。",
+    cssError_unknown_asset: "未儲存：找不到資源 {0}。請先在「資源」加入它。",
+    cssError_function: "未儲存：不允許使用 {0}。",
+    cssError_property: "未儲存：不允許使用 {0}。",
+    cssError_script_scheme: "未儲存：不允許使用 javascript: 和 vbscript:。",
+    cssError_too_large: "未儲存：自訂 CSS 最多 64 KiB。",
+    cssError_malformed: "未儲存：有字串或 url() 沒有結束。",
+    cssError_nul: "未儲存：內容含有 NUL 字元。",
+    cssError_unserialisable: "未儲存：這份 CSS 無法安全地重新輸出。",
+    cssError_asset_type: "未加入：只接受 PNG、WebP、JPEG、GIF 或 WOFF2 檔案。",
+    cssError_asset_unreadable: "未加入：無法讀取這個檔案。",
+    cssError_asset_quota: "未加入：資源最多 16 個檔案、合計 1 MiB。",
+    cssError_asset_in_use: "未移除：仍有已儲存的版本在使用它。",
+    cssError_owner_css_read_only: "這個登入只能檢視、不能變更自訂 CSS。",
+    cssError_owner_css_needs_a_signed_in_person: "請在瀏覽器登入後再變更自訂 CSS。",
+    cssError_other: "未儲存（{0}）。",
     webLead: "網頁儀表板的行為。放寬存取的變更（延長 session、重新開啟或延長瀏覽器終端機、公開連結）需要 fleet admin 在聊天（General topic）或主機上確認；收緊的變更會立即套用。",
     webPublicRefused: "無法透過臨時公開連結變更網頁設定。請從儀表板本身的網址開啟後再變更。",
     webSessionTitle: "登入 session",

package/dist/ui/shared/agend-auth.js

@@ -27,6 +27,20 @@
 
   const nativeFetch = window.fetch.bind(window);
   let sessionPending = null;
+  // Observation only: no server authority, owner/CSRF data or way to restore this page's episode.
+  let ended = null;
+  const endListeners = new Set();
+  function endSession(reason) {
+    if (ended) return;
+    ended = Object.freeze({ reason });
+    const listeners = [...endListeners]; endListeners.clear();
+    for (const fn of listeners) { try { fn(ended); } catch { /* one observer cannot delay another's cleanup */ } }
+  }
+  function onSessionEnd(fn) {
+    if (typeof fn !== "function") return () => {};
+    if (ended) { try { fn(ended); } catch { /* late observers fail closed */ } return () => {}; }
+    endListeners.add(fn); return () => endListeners.delete(fn);
+  }
 
   /**
    * This page's sign-in, read once from GET /auth/session: { csrf, handle } or null (no session, or the read failed —
@@ -36,8 +50,8 @@
   function session() {
     if (!sessionPending) {
       sessionPending = nativeFetch("/auth/session", { credentials: "same-origin", cache: "no-store" })
-        .then((r) => (r.ok ? r.json() : null))
-        .then((j) => (j && typeof j.csrf === "string" ? { csrf: j.csrf, handle: typeof j.handle === "string" ? j.handle : null } : null))
+        .then((r) => { if (r.status === 401) endSession("unauthorized"); return r.ok ? r.json() : null; })
+        .then((j) => (j && typeof j.csrf === "string" ? { csrf: j.csrf, handle: typeof j.handle === "string" ? j.handle : null, canWrite: j.tier === "admin", localAdmin: j.tier === "admin" && j.surface === "local" } : null))
         .catch(() => null)
         .then((value) => { if (!value) sessionPending = null; return value; });
     }
@@ -51,6 +65,8 @@
     bannerShown = true;
     const bar = document.createElement("div");
     bar.setAttribute("role", "alert");
+    bar.setAttribute("data-trust", "session-ended");
+    bar.className = "agend-session-ended";
     bar.style.cssText = "position:fixed;top:0;left:0;right:0;z-index:2147483647;padding:10px 16px;background:#f85149;color:#fff;font:14px system-ui,sans-serif;text-align:center";
     const zh = /^zh/i.test(navigator.language || "");
     bar.append(document.createTextNode(zh ? "登入已結束。" : "Your session has ended. "));
@@ -77,15 +93,23 @@
       }
     }
     const response = await nativeFetch(input, init);
-    if (sameOrigin && response.status === 401 && !target.pathname.startsWith("/auth/")) sessionEndedBanner();
+    if (sameOrigin && response.status === 401 && !target.pathname.startsWith("/auth/")) { endSession("unauthorized"); sessionEndedBanner(); }
     return response;
   };
 
   window.AgendAuth = {
     csrf,
+    /** Host runtimes subscribe before admission. Late subscribers observe the same closed episode immediately. */
+    onSessionEnd,
+    /** Display hint from the existing session read. Every write still requires server authorization. */
+    canWrite() { return session().then(s => !ended && s?.canWrite === true); },
+    /** Display hint from the same server session response; Start still reauthorizes. No CSRF is exposed here. */
+    trialSession() { return session().then(s => !ended && s?.handle && /^[a-f0-9]{16}$/.test(s.handle) ? Object.freeze({ epoch: s.handle, localAdmin: s.localAdmin === true }) : null); },
+    sessionEnded() { return ended !== null; },
     /** #1568: the session handle of this page's sign-in, or null when there is none. */
     sessionHandle() { return session().then((s) => (s && s.handle ? s.handle : null)); },
     async signOut() {
+      endSession("sign_out");
       const value = await csrf();
       const r = await nativeFetch("/auth/logout", { method: "POST", credentials: "same-origin", headers: value ? { "X-Agend-CSRF": value } : {} });
       // A sign-out the server could not make durable is not quietly reported as done: say so before leaving.

package/dist/ui/shared/agent-widget.js

@@ -0,0 +1,248 @@
+// #1629 r4-4 (option A): widgets — an agent's in its own chat header and Details page, a person's in their sidebar —
+// drawn by the page's own components from a closed declarative spec and its values (src/web-widget.ts). Nothing from a
+// mod becomes markup, script, a handler, a URL or a style: text is text nodes, a number fills a <progress> or an SVG
+// polyline's points, and tones are fixed class tokens. Colours are the theme's tokens (and a person's own CSS). The box
+// always carries the page's own ✦ chip, so a widget never reads as AgEnD's chrome, and nothing in it can be clicked.
+//
+// What the host sends is checked again here with the same rules; a widget that fails is not drawn, and a value that
+// fails shows "—". A `bind` is a value the page already has (the instance's own state, context and cost; the fleet's
+// counts in the person's sidebar only) — nothing new is fetched for it.
+import { html } from "./app-html.js";
+import { register, t } from "./app-i18n.js";
+import { statusFacet } from "./instance-nav.js";
+import { themesShown, themesStore } from "./app-themes.js";
+import { onPrefsChanged, prefInForce, savePref } from "./app-prefs.js";
+import { createStore } from "./app-store.js";
+import { safeMode } from "./owner-css.js";
+
+register("widget", {
+  en: {
+    label: "Widget: {0}",
+    chip: "A widget — drawn by AgEnD from its owner's data",
+    byHuman: "placed by a person",
+    none: "—",
+  },
+  "zh-TW": {
+    label: "小工具：{0}",
+    chip: "小工具——由 AgEnD 依擁有者的資料繪製",
+    byHuman: "由人放置",
+    none: "—",
+  },
+});
+
+export const WIDGET_ITEM_TYPES = ["stat", "progress", "text", "list", "badge", "spark"];
+export const WIDGET_TONES = ["ok", "warn", "bad", "info", "muted"];
+const INSTANCE_BINDS = ["state", "context_pct", "cost_usd"];
+const FLEET_BINDS = ["fleet.idle", "fleet.working", "fleet.needs_you", "fleet.stopped"];
+export const SLOT_RULES = {
+  chat_header: { maxItems: 4, types: ["stat", "progress", "text", "badge"], binds: INSTANCE_BINDS },
+  details: { maxItems: 8, types: WIDGET_ITEM_TYPES, binds: INSTANCE_BINDS },
+  sidebar: { maxItems: 8, types: WIDGET_ITEM_TYPES, binds: FLEET_BINDS },
+};
+const BINDS_FOR = {
+  stat: ["context_pct", "cost_usd", ...FLEET_BINDS], progress: ["context_pct"], text: ["state"], badge: ["state"], list: [], spark: [],
+};
+const ITEM_KEYS = {
+  stat: ["type", "label", "key", "bind", "unit"], progress: ["type", "label", "key", "bind", "max"], text: ["type", "label", "key", "bind"],
+  list: ["type", "label", "key"], badge: ["type", "label", "key", "bind", "tone", "tones"], spark: ["type", "label", "key"],
+};
+const LABEL_REQUIRED = ["stat", "progress", "spark"];
+const KEY = /^[a-z][a-z0-9_]{0,31}$/;
+const NUMBER_MAX = 1e15;
+const own = (o, k) => !!o && Object.prototype.hasOwnProperty.call(o, k);
+const isObj = (v) => !!v && typeof v === "object" && !Array.isArray(v);
+
+// One line of text, as the host's canonicalText: NFC, no control, format or separator character but the zero-width
+// joiner, at least one character that draws something, 1..max graphemes.
+const FORBIDDEN = /(?!‍)[\p{Cc}\p{Cf}\p{Zl}\p{Zp}]/u;
+const VISIBLE = /[^\p{M}\p{C}\p{Z}ᅟᅠㅤﾠ⠀]/u;
+let graphemes = null;
+export function lineOk(s, max) {
+  if (typeof s !== "string" || s.normalize("NFC") !== s || FORBIDDEN.test(s) || s.trim() !== s || !VISIBLE.test(s)) return false;
+  try { graphemes ??= new Intl.Segmenter(undefined, { granularity: "grapheme" }); } catch { return false; }
+  const n = [...graphemes.segment(s)].length;
+  return n >= 1 && n <= max;
+}
+const isNumber = (v) => typeof v === "number" && Number.isFinite(v) && Math.abs(v) <= NUMBER_MAX;
+
+/** Whether `v` is a value an item of `type` can show (web-widget.ts valueFits). */
+export function valueFits(type, v) {
+  switch (type) {
+    case "stat": return isNumber(v) || lineOk(v, 24);
+    case "progress": return isNumber(v);
+    case "text": return lineOk(v, 120);
+    case "badge": return lineOk(v, 24);
+    case "list": return Array.isArray(v) && v.length >= 1 && v.length <= 6 && v.every((s) => lineOk(s, 60));
+    case "spark": return Array.isArray(v) && v.length >= 2 && v.length <= 48 && v.every(isNumber);
+    default: return false;
+  }
+}
+
+/**
+ * A widget `{ spec, data, by? }` for `slot`, checked again: `{ widget }`, or `{ problem }` (where, and what) when its
+ * spec fails — then the whole widget is not drawn. A data value that fails is left out (shown as "—").
+ */
+export function explainWidget(slot, w) {
+  const no = (problem) => ({ problem });
+  const rules = own(SLOT_RULES, slot) ? SLOT_RULES[slot] : null;
+  if (!rules) return no("slot");
+  if (!isObj(w) || !isObj(w.spec)) return no("spec: an object { v: 1, title, items }");
+  const s = w.spec;
+  const extra = Object.keys(s).find((k) => !["v", "title", "items"].includes(k));
+  if (extra) return no(`spec.${extra}: unknown key`);
+  if (s.v !== 1) return no("spec.v: must be 1");
+  if (!lineOk(s.title, 24)) return no("spec.title: 1..24 characters on one line");
+  if (!Array.isArray(s.items) || s.items.length < 1 || s.items.length > rules.maxItems) return no(`spec.items: 1..${rules.maxItems} items`);
+  const items = [];
+  for (const [i, it] of s.items.entries()) {
+    const at = `spec.items.${i}`;
+    if (!isObj(it) || !rules.types.includes(it.type)) return no(`${at}.type: ${rules.types.join(", ")}`);
+    const unknown = Object.keys(it).find((k) => !ITEM_KEYS[it.type].includes(k));
+    if (unknown) return no(`${at}.${unknown}: unknown key`);
+    if ((it.label !== undefined || LABEL_REQUIRED.includes(it.type)) && !lineOk(it.label, 24)) return no(`${at}.label: 1..24 characters`);
+    if ((it.key === undefined) === (it.bind === undefined)) return no(`${at}: exactly one of key or bind`);
+    if (it.key !== undefined && !(typeof it.key === "string" && KEY.test(it.key))) return no(`${at}.key: a-z, 0-9 and _`);
+    if (it.bind !== undefined && !(BINDS_FOR[it.type].includes(it.bind) && rules.binds.includes(it.bind))) return no(`${at}.bind: ${BINDS_FOR[it.type].filter((b) => rules.binds.includes(b)).join(", ") || "none here"}`);
+    if (it.unit !== undefined && !lineOk(it.unit, 8)) return no(`${at}.unit: 1..8 characters`);
+    if (it.max !== undefined && !(isNumber(it.max) && it.max > 0)) return no(`${at}.max: a number > 0`);
+    if (it.tone !== undefined && !WIDGET_TONES.includes(it.tone)) return no(`${at}.tone: ${WIDGET_TONES.join(", ")}`);
+    let tones;
+    if (it.tones !== undefined) {
+      if (!isObj(it.tones)) return no(`${at}.tones: { value: tone }`);
+      tones = new Map();
+      for (const [k, v] of Object.entries(it.tones)) { if (!lineOk(k, 24) || !WIDGET_TONES.includes(v)) return no(`${at}.tones: { value: ${WIDGET_TONES.join(" | ")} }`); tones.set(k, v); }
+      if (tones.size < 1 || tones.size > 8) return no(`${at}.tones: 1..8 entries`);
+    }
+    items.push({ type: it.type, label: it.label, key: it.key, bind: it.bind, unit: it.unit, max: it.max, tone: it.tone, tones });
+  }
+  const data = new Map();
+  if (isObj(w.data)) items.forEach((it, i) => { if (it.key && own(w.data, it.key) && valueFits(it.type, w.data[it.key])) data.set(`${i}`, w.data[it.key]); });
+  return { widget: { title: s.title, items, data, by: w.by === "human" ? "human" : "agent" } };
+}
+/** explainWidget's widget, or null. */
+export function checkWidget(slot, w) { return explainWidget(slot, w).widget || null; }
+
+/**
+ * What the host would refuse in a person's `{ spec, data }` for `slot` (its whole check, web-widget.ts and web-prefs.ts),
+ * or null — so the editor can say why before anything is saved.
+ */
+export function widgetProblem(slot, v) {
+  if (!isObj(v) || Object.keys(v).length !== 2 || !own(v, "spec") || !own(v, "data")) return "{ \"spec\": …, \"data\": … }";
+  const r = explainWidget(slot, v);
+  if (r.problem) return r.problem;
+  if (!isObj(v.data)) return "data: an object { key: value }";
+  for (const [k, val] of Object.entries(v.data)) {
+    const users = r.widget.items.filter((it) => it.key === k);
+    if (!users.length) return `data.${k}: no item shows this key`;
+    const bad = users.find((it) => !valueFits(it.type, val));
+    if (bad) return `data.${k}: not a value a ${bad.type} shows`;
+  }
+  const bytes = (x) => new TextEncoder().encode(JSON.stringify(x)).length;
+  if (bytes(v.spec) > 2048) return "spec: at most 2048 bytes";
+  if (bytes(v.data) > 4096) return "data: at most 4096 bytes";
+  return null;
+}
+
+/** The values the page has for one instance: its state word (a sidebar facet), context % and cost. */
+export function instanceBinds(inst, exec, awaiting) {
+  if (!inst) return {};
+  return {
+    state: statusFacet(inst, exec, awaiting),
+    context_pct: isNumber(inst.context_pct) ? Math.round(Math.max(0, Math.min(100, inst.context_pct))) : undefined,
+    cost_usd: isNumber(inst.cost) ? inst.cost : undefined,
+  };
+}
+/** The fleet's counts, for the person's sidebar widget only: how many instances are idle, working, need you, stopped. */
+export function fleetBinds(instances, exec, awaiting) {
+  const n = { "fleet.idle": 0, "fleet.working": 0, "fleet.needs_you": 0, "fleet.stopped": 0 };
+  for (const it of Array.isArray(instances) ? instances : []) {
+    const f = statusFacet(it, exec && exec[it.name], awaiting && own(awaiting, it.name) ? awaiting[it.name] : null);
+    n[f === "needs" ? "fleet.needs_you" : f === "working" ? "fleet.working" : f === "idle" ? "fleet.idle" : "fleet.stopped"] += 1;
+  }
+  return n;
+}
+
+let numbers = null;
+function fmt(v) {
+  try { numbers ??= new Intl.NumberFormat(undefined, { maximumFractionDigits: 2 }); return numbers.format(v); } catch { return String(v); }
+}
+/** An item's value: its data, or its bind; undefined when there is none (shown as "—"). */
+function valueOf(item, i, w, binds) {
+  if (item.key) return w.data.get(`${i}`);
+  const v = binds && own(binds, item.bind) ? binds[item.bind] : undefined;
+  return item.bind === "state" ? (lineOk(v, 24) ? v : undefined) : isNumber(v) ? v : undefined;
+}
+function shown(item, v) {
+  if (v === undefined) return t("widget.none");
+  if (item.bind === "cost_usd") return `$${v.toFixed(2)}`;
+  if (item.bind === "context_pct") return `${v}%`;
+  return typeof v === "number" ? fmt(v) : v;
+}
+/** The sparkline's points in a 100×24 box (numbers only; nothing else reaches the SVG). */
+export function sparkPoints(values) {
+  const lo = Math.min(...values), hi = Math.max(...values), span = hi - lo || 1;
+  return values.map((v, i) => `${((i / (values.length - 1)) * 100).toFixed(2)},${(22 - ((v - lo) / span) * 20).toFixed(2)}`).join(" ");
+}
+
+function Item({ item, v }) {
+  const label = item.label ? html`<span class="aw-label">${item.label}</span>` : null;
+  switch (item.type) {
+    case "stat":
+      return html`<div class="aw-item aw-stat">${label}<span class="aw-value">${shown(item, v)}${v !== undefined && item.unit ? html`<span class="aw-unit">${item.unit}</span>` : null}</span></div>`;
+    case "progress": {
+      const max = item.max ?? 100;
+      const pct = v === undefined ? null : Math.round((Math.max(0, Math.min(max, v)) / max) * 100);
+      // No value: no bar at all (a <progress> without one is the browser's animated "busy" bar), only "—".
+      return html`<div class="aw-item aw-progress">${label}${pct === null ? null : html`<progress class="aw-bar" max=${max} value=${Math.max(0, Math.min(max, v))} aria-label=${item.label}></progress>`}<span class="aw-value">${pct === null ? t("widget.none") : `${pct}%`}</span></div>`;
+    }
+    case "text":
+      return html`<div class="aw-item aw-text">${label}<span class="aw-value">${shown(item, v)}</span></div>`;
+    case "badge": {
+      const tone = v !== undefined && item.tones && item.tones.has(v) ? item.tones.get(v) : item.tone || "muted";
+      return html`<div class="aw-item aw-badge-item">${label}<span class=${`aw-badge aw-tone-${WIDGET_TONES.includes(tone) ? tone : "muted"}`}>${shown(item, v)}</span></div>`;
+    }
+    case "list":
+      return html`<div class="aw-item aw-list">${label}${v === undefined ? html`<span class="aw-value">${t("widget.none")}</span>` : html`<ul>${v.map((line, i) => html`<li key=${i}>${line}</li>`)}</ul>`}</div>`;
+    case "spark":
+      return html`<div class="aw-item aw-spark-item">${label}${v === undefined ? html`<span class="aw-value">${t("widget.none")}</span>`
+        : html`<svg class="aw-spark" viewBox="0 0 100 24" preserveAspectRatio="none" aria-hidden="true"><polyline points=${sparkPoints(v)} /></svg><span class="aw-value">${fmt(v[v.length - 1])}</span>`}</div>`;
+    default: return null;
+  }
+}
+
+/** One widget, checked (checkWidget's result), in `slot`. `binds`: instanceBinds or fleetBinds. */
+export function AgentWidget({ slot, widget, binds, tools = null }) {
+  if (!widget) return null;
+  return html`<section data-trust="widget" class=${`aw aw-${slot}`} aria-label=${t("widget.label", widget.title)} data-widget-slot=${slot}>
+    <div class="aw-head"><span class="aw-chip" title=${t("widget.chip")}>✦ ${widget.title}</span>
+      ${widget.by === "human" ? html`<span class="aw-by">${t("widget.byHuman")}</span>` : null}${tools}</div>
+    <div class="aw-items">${widget.items.map((item, i) => html`<${Item} key=${i} item=${item} v=${valueOf(item, i, widget, binds)} />`)}</div>
+  </section>`;
+}
+
+/** An agent's widget in `slot` ("chat_header" | "details"), checked; null when none, or agents' looks are not shown here. */
+export function widgetFor(name, slot) {
+  const s = themesStore.get();
+  if (!s.shown || !themesShown() || !own(s.widgets, name)) return null;
+  const slots = s.widgets[name];
+  return isObj(slots) && own(slots, slot) ? checkWidget(slot, slots[slot]) : null;
+}
+
+const SIDEBAR_KEY = "widget.sidebar";
+const publicLink = () => typeof document !== "undefined" && !!document.body && document.body.dataset.publicLink === "1";
+/** The person's own sidebar widget (a synced preference), raw; null when none. Never on the public link or in safe mode. */
+export function sidebarWidgetRaw() {
+  if (publicLink() || safeMode()) return null;
+  const f = prefInForce(SIDEBAR_KEY);
+  let v = f ? f.value : undefined;
+  if (!f) { try { v = JSON.parse(localStorage.getItem("agend_widget_sidebar") || "null"); } catch { v = null; } }
+  return isObj(v) ? v : null;
+}
+/** The person's sidebar widget, checked; null when none. */
+export function sidebarWidget() { const v = sidebarWidgetRaw(); return v ? checkWidget("sidebar", v) : null; }
+/** Bumped when the person's sidebar widget changes (here, or on another device), so the sidebar redraws. */
+export const sidebarWidgetStore = createStore({ n: 0 });
+const bump = () => sidebarWidgetStore.set((s) => ({ n: s.n + 1 }));
+onPrefsChanged((changed) => { if (changed.has(SIDEBAR_KEY)) bump(); });
+/** Set (or with null, remove) the person's sidebar widget on all their devices. */
+export function setSidebarWidget(value) { savePref(SIDEBAR_KEY, value); bump(); }

package/dist/ui/shared/app-i18n.js

@@ -68,6 +68,7 @@ register("app", {
     previews: "Allow HTML previews", tour: "Tour", tourTitle: "Show the web chat tour again",
     needsYou: "needs you", approxNote: "Read from the terminal, so approximate", chat: "Chat", details: "Details", log: "Log", instanceViews: "Views of {0}",
     textSize: "Text size: {0}", textSize_s: "S", textSize_m: "M", textSize_l: "L", textSize_fit: "Fit", usage: "Usage", usageHide: "Hide usage",
+    ownerCssKeep: "Keep this custom CSS?", ownerCssKeepLeft: "Reverts in {0} s", ownerCssKeepYes: "Keep", ownerCssKeepNo: "Revert",
     statusRunning: "running", statusStopped: "stopped", statusPaused: "paused", statusCrashed: "crashed", statusWorking: "working", statusStuck: "looks stuck", statusIdle: "idle",
     connReconnecting: "Can't reach AgEnD — it may be restarting. Reconnecting…", connReconnectingIn: "Can't reach AgEnD — it may be restarting. Trying again in {0} s.",
     hydrating: "Loading what is open now…", hydrateFailed: "Could not load what is open now (prompts, ticks).",
@@ -99,6 +100,7 @@ register("app", {
     previews: "允許預覽 HTML", tour: "導覽", tourTitle: "再看一次網頁聊天導覽",
     needsYou: "等你回應", approxNote: "從終端畫面判讀，僅供參考", chat: "聊天", details: "詳細資訊", log: "紀錄", instanceViews: "{0} 的檢視",
     textSize: "字級：{0}", textSize_s: "小", textSize_m: "中", textSize_l: "大", textSize_fit: "填滿", usage: "用量", usageHide: "隱藏用量",
+    ownerCssKeep: "保留這份自訂 CSS？", ownerCssKeepLeft: "{0} 秒後還原", ownerCssKeepYes: "保留", ownerCssKeepNo: "還原",
     statusRunning: "執行中", statusStopped: "已停止", statusPaused: "已暫停", statusCrashed: "已當掉", statusWorking: "工作中", statusStuck: "似乎卡住", statusIdle: "閒置",
     connReconnecting: "連不上 AgEnD——可能正在重新啟動。正在重新連線…", connReconnectingIn: "連不上 AgEnD——可能正在重新啟動。{0} 秒後再試。",
     hydrating: "正在載入目前的狀態…", hydrateFailed: "無法載入目前的狀態（提示、送達標記）。",