@songsid/agend 2.3.0-beta.21 → 2.3.0-beta.22

package/dist/ui/settings-strings.js

@@ -13,6 +13,18 @@ register("settings", {
     publicLinkHint: "Explicit admin consent on every request. Cloudflare handles TLS; link users have full web-admin access. HTML previews get a second temporary tunnel unless web.preview_on_public_link is false.",
     publicTtl: "Public link minutes (1–480)",
     publicProtocol: "Tunnel protocol",
+    namedHostname: "Fixed public hostname (optional)",
+    namedOriginPort: "Named tunnel origin port",
+    namedHostnameInvalid: "Enter a DNS hostname or HTTPS root URL.",
+    namedPortInvalid: "Use an integer port from 1024 to 65535.",
+    namedTunnelHint: "Blank hostname uses a quick tunnel. Named routes point to this loopback port. Opening, expiry and sign-in still apply.",
+    namedTunnelSetup: "How to set this up",
+    namedToken: "Cloudflare connector token",
+    namedTokenHint: "Stored privately, never shown again. Format checked locally; Cloudflare credentials and routing are checked when opening. Saving or clearing closes the current public link.",
+    namedTokenSet: "Set token",
+    namedTokenClear: "Clear token",
+    awaitingConfirmation: "Waiting for confirmation.",
+    namedTokenSaved: "Token change saved. Reopen the public link.",
     webEcho: "Web echo",
     webEchoHint: "Copies web messages to the bound Telegram or Discord topic. ClassicBot rooms follow it unless a room sets its own.",
     webUsagePublic: "Usage report over the public link", webUsagePublicHint: "Fleet → Usage (up to 400 days of each agent's tokens, requests, messages and API-equivalent amounts) is offered over the temporary public link too. Off by default; guests never see it. Applies at once.",
@@ -379,6 +391,33 @@ register("settings", {
     modProposedBy: "{0} proposes",
     modReview: "Review",
     modDismiss: "Dismiss",
+    appIconTitle: "App icon",
+    appIconLead: "Shown on browser tabs and phone home screens. Square, 512\u00a0px or more.",
+    appIconCurrent: "The app icon now",
+    appIconDefault: "The AgEnD icon (default)",
+    appIconCustom: "Your icon",
+    appIconPreview: "The new icon",
+    appIconChoose: "Choose image…",
+    appIconUse: "Use this icon",
+    appIconCancel: "Cancel",
+    appIconReset: "Restore default",
+    appIconSaved: "App icon changed",
+    appIconResetDone: "App icon back to the default",
+    appIconLow: "Smaller than 512\u00a0px: it is enlarged and may look soft.",
+    appIconNotAnImage: "That file could not be read as an image.",
+    appIconLoadFailed: "The app icon could not be read.",
+    appIconReadOnly: "Only an admin's session can change it.",
+    appIconWho: "Anyone who can open this address sees it: no private pictures.",
+    appIconIos: "On an iPhone, add the home-screen shortcut again to see a change.",
+    appIconError_app_icon_too_large: "The image is too large ({0}).",
+    appIconError_app_icon_not_png: "The host takes a PNG ({0}).",
+    appIconError_app_icon_unreadable: "The image could not be used: {0}.",
+    appIconError_app_icon_admin_only: "Only an admin's session can change the app icon.",
+    appIconError_app_icon_needs_a_signed_in_person: "Sign in to change the app icon.",
+    appIconError_app_icon_busy: "Another icon is being made; try again in a moment.",
+    appIconError_app_icon_superseded: "The icon was reset meanwhile; choose the picture again.",
+    appIconError_app_icon_not_reset: "The default could not be restored ({0}).",
+    appIconError_other: "The app icon was not changed ({0}).",
     cssTitle: "Custom CSS (yours only)",
     cssLead: "Applies to your screens only.",
     cssLoadFailed: "Couldn't load your custom CSS. Reload the page to try again.",
@@ -574,6 +613,18 @@ register("settings", {
     publicLinkHint: "每次都需管理員明確啟用。Cloudflare 終止 TLS；登入者具有完整網頁管理權限。HTML 預覽會另開一條臨時通道，除非設定 web.preview_on_public_link: false。",
     publicTtl: "公開連結分鐘數（1–480）",
     publicProtocol: "Tunnel 協定",
+    namedHostname: "固定公開網域（選用）",
+    namedOriginPort: "Named tunnel 本機連接埠",
+    namedHostnameInvalid: "請輸入 DNS 網域名稱或 HTTPS 根網址。",
+    namedPortInvalid: "請使用 1024 到 65535 的整數連接埠。",
+    namedTunnelHint: "網域留空時使用 quick tunnel。Named 路由需指向此本機連接埠；仍須開啟連結，並遵守到期及登入規則。",
+    namedTunnelSetup: "設定教學",
+    namedToken: "Cloudflare 連接器 token",
+    namedTokenHint: "私密儲存，不會讀回。儲存時只檢查格式，開啟時才確認憑證與路由。設定或清除會關閉目前的公開連結。",
+    namedTokenSet: "設定 token",
+    namedTokenClear: "清除 token",
+    awaitingConfirmation: "等待確認中。",
+    namedTokenSaved: "Token 變更已儲存，請重新開啟公開連結。",
     webEcho: "Web 同步",
     webEchoHint: "將網頁訊息複製到綁定的 Telegram 或 Discord 主題。ClassicBot 聊天室也照這個設定，除非該聊天室另外設定。",
     webUsagePublic: "透過公開連結提供用量報告", webUsagePublicHint: "Fleet → 用量（最多 400 天、每個 agent 的 token、請求、訊息與依牌價換算的 API 等值）也會透過臨時公開連結提供。預設關閉；訪客一律看不到。變更立即生效。",
@@ -914,6 +965,33 @@ register("settings", {
     modProposedBy: "{0} 提議",
     modReview: "檢視",
     modDismiss: "略過",
+    appIconTitle: "App 圖示",
+    appIconLead: "顯示在瀏覽器分頁和手機主畫面。正方形，512\u00a0px 以上。",
+    appIconCurrent: "目前的 App 圖示",
+    appIconDefault: "AgEnD 圖示（預設）",
+    appIconCustom: "你的圖示",
+    appIconPreview: "新的圖示",
+    appIconChoose: "選擇圖片…",
+    appIconUse: "使用這個圖示",
+    appIconCancel: "取消",
+    appIconReset: "恢復預設",
+    appIconSaved: "App 圖示已更換",
+    appIconResetDone: "App 圖示已恢復預設",
+    appIconLow: "小於 512\u00a0px：會被放大，可能不夠清晰。",
+    appIconNotAnImage: "無法把這個檔案讀成圖片。",
+    appIconLoadFailed: "讀不到 App 圖示的設定。",
+    appIconReadOnly: "只有管理者的 session 能更換。",
+    appIconWho: "能打開這個網址的人都看得到：請別用私人照片。",
+    appIconIos: "iPhone 主畫面要刪掉捷徑重新加入才會換。",
+    appIconError_app_icon_too_large: "圖片太大（{0}）。",
+    appIconError_app_icon_not_png: "主機只接受 PNG（{0}）。",
+    appIconError_app_icon_unreadable: "這張圖無法使用：{0}。",
+    appIconError_app_icon_admin_only: "只有管理者的 session 能更換 App 圖示。",
+    appIconError_app_icon_needs_a_signed_in_person: "請先登入再更換 App 圖示。",
+    appIconError_app_icon_busy: "另一張圖示正在處理中，請稍後再試。",
+    appIconError_app_icon_superseded: "圖示剛被恢復成預設，請重新選擇圖片。",
+    appIconError_app_icon_not_reset: "無法恢復預設（{0}）。",
+    appIconError_other: "App 圖示沒有更換（{0}）。",
     cssTitle: "自訂 CSS（只套用在你自己）",
     cssLead: "只套用在你的畫面。",
     cssLoadFailed: "無法載入你的自訂 CSS。請重新整理頁面再試一次。",

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

@@ -34,7 +34,7 @@
 // org canvas reads /ui/traffic when it has no stream).
 // #2233: backend_login — a dashboard sign-in started, moved or ended (no details: the page reads its own view).
 // tasks — the task board changed: the card numbers a write touched (SSE only: the board reads again when it is shown).
-const EVENTS = ["status", "message", "agent_reply_live", "delivery", "deliveries", "prompt", "prompts", "prompt_resolved", "activity", "needs", "reply_buttons", "steps_tick", "clock", "traffic", "delegation", "backend_login", "tasks"];
+const EVENTS = ["status", "message", "agent_reply_live", "delivery", "deliveries", "prompt", "prompts", "prompt_resolved", "activity", "needs", "reply_buttons", "reactions", "steps_tick", "clock", "traffic", "delegation", "backend_login", "tasks"];
 const MAX_HELD = 1000;                    // live events held during one catch-up read; more → read again afterwards
 const RETRY_DELAYS = [1000, 2000, 4000];  // after the first failed catch-up read; then it waits for Retry
 const POLL_LIMIT_MS = 10000;              // a poll that has not answered by then counts as failed
@@ -128,6 +128,7 @@ export function createStream(opts) {
         if (Array.isArray(d.deliveries)) emit("deliveries", d.deliveries);
         if (Array.isArray(d.prompts)) emit("prompts", d.prompts);
         if (Array.isArray(d.reply_buttons)) for (const u of d.reply_buttons) emit("reply_buttons", u);   // #1266
+        if (Array.isArray(d.reactions)) for (const u of d.reactions) emit("reactions", u);               // #2305
         if (Array.isArray(d.needs)) emit("needs", { items: d.needs });
         return true;
       } catch { return false; /* the next tick, or the catch-up's retry, tries again */ }

package/dist/ui/shared/app.css

@@ -124,6 +124,17 @@ html:has(.shell), html:has(.shell) body { overflow: hidden; }
 .idc.id-bar { position: relative; }
 .idc.id-bar::before { content: ""; position: absolute; left: 0; top: var(--s-2); bottom: var(--s-2); width: 3px; background: var(--id); pointer-events: none; }
 .idc.id-name .inst-name { color: var(--id-name); }
+/* #2330: the same straight bar for every other coloured left edge (a 3px border-left curved into a rounded box's
+   corners). `.lbar` is the utility; the places below join its selector list instead of carrying a class. A place sets
+   --lbar-color (status variants too) and adds the 3px the border took to its own padding-left, so its text stays put.
+   A short box that clips to its corners (.msg-quote) moves the bar in (--lbar-left) and shortens it (--lbar-inset) so
+   the corner never cuts its ends round.
+   tests/web-left-bar-2330.test.ts keeps a coloured border-left off rounded boxes. */
+.lbar, .reply-bar, .msg-quote, .p-log .log-item.k-error, .p-log .log-item.s-failed, .org-node, .us-basis, .us-partial, .cmd-card.bad, .tb-tile { position: relative; }
+.lbar::before, .reply-bar::before, .msg-quote::before, .p-log .log-item.k-error::before, .p-log .log-item.s-failed::before, .org-node::before,
+.us-basis::before, .us-partial::before, .cmd-card.bad::before, .tb-tile::before {
+  content: ""; position: absolute; left: var(--lbar-left, 0); top: var(--lbar-inset, var(--s-2)); bottom: var(--lbar-inset, var(--s-2)); width: 3px;
+  background: var(--lbar-color, var(--accent)); pointer-events: none; }
 .idc-swatches, .idc-places { border: 0; padding: 0; margin: 0 0 var(--s-3); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
 .idc-swatches legend, .idc-places legend { font-weight: var(--fw-semibold); margin-bottom: 6px; width: 100%; }
 .idc-swatch { --sw: var(--sw-dark); width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; background: var(--sw); cursor: pointer; padding: 0; }
@@ -139,6 +150,14 @@ html:has(.shell), html:has(.shell) body { overflow: hidden; }
 .s-ap-group { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text); margin: var(--s-4) 0 var(--s-2); }
 .s-ap-group:first-child { margin-top: 0; }
 .s-ap-title { display: flex; align-items: center; gap: var(--s-2); }
+/* #2308: the app icon card — the icon now (home-screen size, and tab size) beside the one chosen, before it is used. */
+.s-app-icon-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-4); margin: var(--s-2) 0; }
+.s-app-icon-row figure { margin: 0; display: grid; justify-items: center; gap: var(--s-1); }
+.s-app-icon-row figure.s-app-icon-now { grid-template-columns: auto auto; align-items: end; column-gap: var(--s-3); }
+.s-app-icon-row figure.s-app-icon-now figcaption { grid-column: 1 / -1; }
+.s-app-icon-row figcaption { font-size: var(--fs-sm); color: var(--text-2); }
+.s-app-icon-big { width: 96px; height: 96px; border-radius: 22%; border: 1px solid var(--border); background: var(--surface-2); object-fit: cover; }
+.s-app-icon-small { width: 32px; height: 32px; border-radius: 6px; object-fit: cover; }
 /* The fields' placeholders show the defaults: readable, not the browser's faint grey (dark mode). */
 .s-appearance input::placeholder { color: var(--text-3); opacity: 1; }
 /* A card title in Chinese is never upper-cased ("AGENT 的主題"): the small caps are a Latin convention. */
@@ -284,7 +303,7 @@ html:has(.shell), html:has(.shell) body { overflow: hidden; }
 .p-log .log-item.turn-start { margin-top: var(--s-4); }
 .p-log .log-item.k-user { background: var(--user-bubble); }
 .p-log .log-item.k-turn_end, .p-log .log-item.k-state, .p-log .log-item.k-event { background: transparent; color: var(--text-3); padding-block: 2px; font-size: var(--fs-sm); }
-.p-log .log-item.k-error, .p-log .log-item.s-failed { border-left: 3px solid var(--danger); }
+.p-log .log-item.k-error, .p-log .log-item.s-failed { --lbar-color: var(--danger); padding-left: calc(var(--s-3) + 3px); }
 .p-log .log-head { display: flex; align-items: baseline; gap: var(--s-2); min-width: 0; }
 .p-log .log-icon { flex: none; }
 .p-log .log-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@@ -633,8 +652,8 @@ img.amb-p { object-fit: contain; }
   background: var(--surface); box-shadow: var(--shadow-1); opacity: 0; pointer-events: none; transition: opacity var(--t-fast); }
 .msg:hover > .msg-actions, .msg:focus-within > .msg-actions { opacity: 1; pointer-events: auto; }
 @media (hover: none) { .msg-actions { display: none; } }
-.msg-quote { display: flex; align-items: center; gap: 4px; max-width: 100%; margin: 0 0 4px; padding: 2px var(--s-2); border: 0;
-  border-left: 3px solid var(--border-strong, var(--border)); border-radius: var(--r-sm); background: transparent; color: var(--text-3);
+.msg-quote { display: flex; align-items: center; gap: 4px; max-width: 100%; margin: 0 0 4px; padding: 2px var(--s-2) 2px calc(var(--s-2) + 3px); border: 0;
+  --lbar-color: var(--border-strong, var(--border)); --lbar-inset: 4px; --lbar-left: 2px; border-radius: var(--r-sm); background: transparent; color: var(--text-3);
   font: inherit; font-size: var(--fs-sm); text-align: left; cursor: pointer; overflow: hidden; }
 .msg.user .msg-quote { margin-left: auto; }
 .msg-quote:hover, .msg-quote:focus-visible { color: var(--text-2); background: var(--surface-2); outline: none; }
@@ -760,8 +779,8 @@ img.amb-p { object-fit: contain; }
 .guest-note { margin: 2px 0 0; font-size: var(--fs-xs); color: var(--text-3); text-align: center; }
 .pending-files { display: flex; flex-wrap: wrap; gap: var(--s-2); padding: var(--s-2) var(--s-2) 0; }
 /* #2272: replying — the bar above the composer (who and what is answered; ✕ / Esc cancels). */
-.reply-bar { display: flex; align-items: center; gap: var(--s-2); min-width: 0; margin: var(--s-2) var(--s-2) 0; padding: 4px var(--s-2) 4px var(--s-3);
-  border-left: 3px solid var(--accent); border-radius: var(--r-sm); background: var(--surface-2); font-size: var(--fs-sm); }
+.reply-bar { display: flex; align-items: center; gap: var(--s-2); min-width: 0; margin: var(--s-2) var(--s-2) 0; padding: 4px var(--s-2) 4px calc(var(--s-3) + 3px);
+  --lbar-color: var(--accent); border-radius: var(--r-sm); background: var(--surface-2); font-size: var(--fs-sm); }
 .reply-bar .reply-mark { color: var(--accent); }
 .reply-bar .reply-label { font-weight: var(--fw-semibold); white-space: nowrap; }
 .reply-bar .reply-text { flex: 1; min-width: 0; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@@ -1281,10 +1300,10 @@ textarea.s-yaml { white-space: pre; overflow-x: auto; }
 .org-team-head h3 { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-md); font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
 .org-team-desc { color: var(--text-2); font-size: var(--fs-sm); overflow-wrap: anywhere; }
 .org-team-sub { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-3); font-size: var(--fs-xs); }
-.org-node { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; padding: var(--s-3); border-radius: var(--r-md); background: var(--surface); border-left: 3px solid transparent; }
-.org-node.st-needs, .org-node.st-stuck { border-left-color: var(--warn); }
-.org-node.st-crashed { border-left-color: var(--danger); }
-.org-node.st-working { border-left-color: var(--ok); }
+.org-node { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; padding: var(--s-3) var(--s-3) var(--s-3) calc(var(--s-3) + 3px); border-radius: var(--r-md); background: var(--surface); --lbar-color: transparent; }
+.org-node.st-needs, .org-node.st-stuck { --lbar-color: var(--warn); }
+.org-node.st-crashed { --lbar-color: var(--danger); }
+.org-node.st-working { --lbar-color: var(--ok); }
 .org-node.st-missing { opacity: 0.7; }
 .org-node-head { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
 .org-names { flex: 1; min-width: 0; display: flex; flex-direction: column; }
@@ -1377,16 +1396,17 @@ strong.org-name { font-size: var(--fs-sm); color: var(--text); }
 .oc { --fx-task: #b794f6; --fx-send: #2dd4bf; --fx-report: #f472b6; --fx-broadcast: #fb923c; --fx-team: #cbd5e1; }
 @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .oc { --fx-task: #7c3aed; --fx-send: #0f766e; --fx-report: #be185d; --fx-broadcast: #c2410c; --fx-team: #475569; } }
 :root[data-theme="light"] .oc { --fx-task: #7c3aed; --fx-send: #0f766e; --fx-report: #be185d; --fx-broadcast: #c2410c; --fx-team: #475569; }
-.oc-flow { fill: none; stroke-width: 2.5; stroke-linecap: round; }
+/* #2329: a line's stroke width is its own attribute (fleet-traffic.js strokeOf): its head and its trimmed ends are sized from it. */
+.oc-flow { fill: none; stroke-linecap: round; }
 .oc-flow-halo { fill: none; stroke: var(--bg); stroke-width: 6; stroke-linecap: round; opacity: 0.85; }
 .oc-flow.h-task { stroke: var(--fx-task); } .oc-flow.h-send { stroke: var(--fx-send); } .oc-flow.h-report { stroke: var(--fx-report); }
-.oc-flow.h-broadcast { stroke: var(--fx-broadcast); } .oc-flow.h-team { stroke: var(--fx-team); stroke-width: 3.5; }
+.oc-flow.h-broadcast { stroke: var(--fx-broadcast); } .oc-flow.h-team { stroke: var(--fx-team); }
 .oc-flow.ph-live { stroke-dasharray: 7 6; animation: oc-dash 0.9s linear infinite; }
 .oc-flow.ph-queued { stroke-dasharray: 2 5; opacity: 0.8; }
 .oc-flow.ph-fading { stroke: var(--text-3); animation: oc-fade 12s ease-out forwards; }
 /* #1918 review: the work — a delegation in progress (a slow dash, kept until its report), its report coming back, none. */
-.oc-flow.ph-work { stroke-dasharray: 10 7; stroke-width: 3; animation: oc-dash 2.4s linear infinite; }
-.oc-flow.ph-return { stroke-width: 3; animation: oc-fade 2.4s ease-out forwards; }
+.oc-flow.ph-work { stroke-dasharray: 10 7; animation: oc-dash 2.4s linear infinite; }
+.oc-flow.ph-return { animation: oc-fade 2.4s ease-out forwards; }
 .oc-flow.ph-stale { stroke: var(--text-3); stroke-dasharray: 3 6; animation: oc-fade 12s ease-out forwards; }
 .oc-ah.h-task { fill: var(--fx-task); } .oc-ah.h-send { fill: var(--fx-send); } .oc-ah.h-report { fill: var(--fx-report); }
 .oc-ah.h-broadcast { fill: var(--fx-broadcast); } .oc-ah.h-team { fill: var(--fx-team); } .oc-ah.h-fading { fill: var(--text-3); }
@@ -1483,9 +1503,9 @@ strong.org-name { font-size: var(--fs-sm); color: var(--text); }
 .us-csv { margin-left: auto; }
 .us-custom { display: flex; flex-wrap: wrap; align-items: end; gap: var(--s-2) var(--s-3); font-size: var(--fs-sm); }
 .us-custom label { display: inline-flex; flex-direction: column; gap: 2px; color: var(--text-2); }
-.us-basis { font-size: var(--fs-sm); color: var(--text); padding: var(--s-2) var(--s-3); border-left: 3px solid var(--accent); background: var(--surface-2); border-radius: var(--r-sm); }
+.us-basis { font-size: var(--fs-sm); color: var(--text); padding: var(--s-2) var(--s-3) var(--s-2) calc(var(--s-3) + 3px); --lbar-color: var(--accent); background: var(--surface-2); border-radius: var(--r-sm); }
 .us-fresh { font-size: var(--fs-xs); }
-.us-partial { font-size: var(--fs-sm); padding: var(--s-2) var(--s-3); border-left: 3px solid var(--warn); background: var(--warn-bg); border-radius: var(--r-sm); }
+.us-partial { font-size: var(--fs-sm); padding: var(--s-2) var(--s-3) var(--s-2) calc(var(--s-3) + 3px); --lbar-color: var(--warn); background: var(--warn-bg); border-radius: var(--r-sm); }
 .us-unpriced { font-size: var(--fs-xs); }
 .us-scan { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
 .us-totals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); margin: 0; }
@@ -1551,7 +1571,7 @@ strong.org-name { font-size: var(--fs-sm); color: var(--text); }
 .cmd-palette .cmd-arg { color: var(--text-3); }
 .cmd-palette .cmd-none { color: var(--text-3); cursor: default; }
 .cmd-card { display: flex; flex-direction: column; gap: var(--s-2); margin-bottom: var(--s-2); padding: var(--s-2) var(--s-3); border-radius: var(--r-md); background: var(--surface); font-size: var(--fs-sm); }
-.cmd-card.bad { border-left: 3px solid var(--danger); }
+.cmd-card.bad { --lbar-color: var(--danger); padding-left: calc(var(--s-3) + 3px); }
 .cmd-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
 .cmd-name { font-weight: var(--fw-semibold); }
 .cmd-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--font-ui); color: var(--text-2); }
@@ -1900,12 +1920,12 @@ strong.org-name { font-size: var(--fs-sm); color: var(--text); }
 .tb-count { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--text-3); }
 .tb-drop-line { height: 3px; border-radius: 2px; background: var(--accent); }
 
-.tb-tile { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-3); border-radius: var(--r-md); background: var(--bg); border: 1px solid var(--border); border-left: 3px solid var(--text-3); cursor: pointer; font-size: var(--fs-sm); min-width: 0; }
+.tb-tile { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-3) var(--s-3) var(--s-3) calc(var(--s-3) + 2px); border-radius: var(--r-md); background: var(--bg); border: 1px solid var(--border); --lbar-color: var(--text-3); cursor: pointer; font-size: var(--fs-sm); min-width: 0; }
 .tb-tile:hover { border-color: var(--border-strong); }
-.tb-tile.st-claimed { border-left-color: var(--accent); }
-.tb-tile.st-blocked { border-left-color: var(--danger); }
-.tb-tile.st-review { border-left-color: var(--warn); }
-.tb-tile.st-done { border-left-color: var(--ok); }
+.tb-tile.st-claimed { --lbar-color: var(--accent); }
+.tb-tile.st-blocked { --lbar-color: var(--danger); }
+.tb-tile.st-review { --lbar-color: var(--warn); }
+.tb-tile.st-done { --lbar-color: var(--ok); }
 .tb-tile.dragging { opacity: 0.4; }
 .tb-tile.flash { animation: tb-flash 1.6s var(--ease); }
 @keyframes tb-flash { from { box-shadow: 0 0 0 3px var(--accent-dim); background: var(--accent-dim); } to { box-shadow: none; } }
@@ -2006,3 +2026,9 @@ strong.org-name { font-size: var(--fs-sm); color: var(--text); }
   .tb-tile.flash { animation: none; }
   .tb-chev { transition: none; }
 }
+
+/* #2305: the agent's reactions to a message (its minimal reply), under the bubble — on the person's side for theirs. */
+.msg-reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
+.msg.user .msg-reactions { justify-content: flex-end; }
+.msg-reactions .reaction { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 24px; padding: 0 6px;
+  border: 1px solid var(--border); border-radius: var(--r-full); background: var(--surface-2); font-family: var(--font-emoji); font-size: 15px; line-height: 1; }

package/dist/ui/signin.html

@@ -6,9 +6,11 @@
 <meta name="referrer" content="no-referrer">
 <meta name="robots" content="noindex">
 <title>AgEnD — Sign in</title>
+<!--app-icon-->
 <link rel="icon" href="/favicon.ico" sizes="16x16 32x32 64x64">
 <link rel="icon" href="/favicon.svg" type="image/svg+xml" sizes="any">
 <link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">
+<!--/app-icon-->
 <script src="/assets/theme.js"></script>
 <link rel="stylesheet" href="/assets/tokens.css">
 <style>

package/dist/web-api.d.ts

@@ -4,6 +4,7 @@ import type { CachedImage } from "./web-images.js";
 import type { SettingsExecution } from "./settings-transaction.js";
 import type { PaneContextSource } from "./pane-context-cache.js";
 import type { OwnerCssStore } from "./web-owner-css-store.js";
+import { type AppIconStore } from "./web-app-icon.js";
 import type { ModStore } from "./web-mod-store.js";
 import type { WebEffectService } from "./web-effect-service.js";
 import type { ThemeStore } from "./web-theme-store.js";
@@ -130,9 +131,10 @@ export interface WebApiContext {
      * (#1320 part B). Resolves the entries and adapters itself; returns how
      * many channels were posted to. Never rejects the web send on failure.
      */
-    sendClassicWebEcho?(instance: string, text: string, sender?: string): Promise<number>;
+    sendClassicWebEcho?(instance: string, text: string, sender?: string, copies?: import("./web-reactions.js").WebEchoCopy[]): Promise<number>;
     /** #1920 §5.2: a web message's channel copy was sent — guests of that channel may see it now. */
-    webMessageInChannel?(instance: string, messageId: string): void;
+    /** #2305: `copies`, the copies' own message ids, so a reaction to the web message is put on them too. */
+    webMessageInChannel?(instance: string, messageId: string, copies?: readonly import("./web-reactions.js").WebEchoCopy[]): void;
     /** false: definitely not delivered (the instance's IPC is gone, or it was restarted meanwhile). */
     deliverToInstance(instanceName: string, payload: Record<string, unknown>, options?: {
         stillCurrent?: () => boolean;
@@ -177,6 +179,8 @@ export interface WebApiContext {
     readonly webPrefs?: WebPrefsStore;
     /** #1629 r4 §3: each person's own CSS (human sessions only; never the public link, never an agent). */
     readonly ownerCss?: OwnerCssStore;
+    /** #2308: the person's own app icon; changed by a signed-in admin only (never the public link, a guest or the token). */
+    readonly appIcon?: AppIconStore;
     /** #1629: every instance's theme (web-themes.json), read by the page; a person's reset and lock. */
     readonly themeStore?: ThemeStore;
     readonly webAppearance?: WebAppearance;

package/dist/web-api.js

@@ -5,6 +5,8 @@ import { withSpawnHoldReply } from "./spawn-hold-reply.js";
 import { binaryProbe } from "./binary-probe.js";
 import { settingsRequestExecution, settingsWrite, isSettingsReplay } from "./settings-request-capability.js";
 import { readBoundedWebBody } from "./web-body.js";
+import { APP_ICON_MAX_BYTES } from "./web-app-icon.js";
+import { withAppIconLinks } from "./web-icons.js";
 import { MOD_MAX_BYTES } from "./web-mod-bundle.js";
 import { buildModBundle } from "./web-mod-export.js";
 import { AGENT_WIDGET_SLOTS, checkWidgetData, checkWidgetSpec } from "./web-widget.js";
@@ -264,6 +266,104 @@ function stillAuthorized(req, res, url, ctx) {
     json(res, 401, { error: WEB_TOKEN_INVALID_MESSAGE });
     return false;
 }
+/**
+ * #2308: the app icon. GET: its state, for the settings card (a signed-in person's session). PUT (one PNG, at most
+ * 5 MiB) and DELETE (back to the bundled icon): a signed-in admin's session only — never the CLI's token, a read-only
+ * session, a guest or the public link; checked again once the body has arrived.
+ */
+function handleAppIcon(req, res, url, ctx, method) {
+    const store = ctx.appIcon;
+    if (!store) {
+        json(res, 404, { error: "The app icon is not kept on this fleet" });
+        return true;
+    }
+    const reading = method === "GET" || method === "HEAD";
+    if (!reading && method !== "PUT" && method !== "DELETE") {
+        res.setHeader("Allow", "GET, PUT, DELETE");
+        json(res, 405, { error: "method not allowed" });
+        return true;
+    }
+    if (gatewayRequestContext(req)) {
+        json(res, reading ? 404 : 403, { error: "app_icon_not_over_public_link" });
+        return true;
+    }
+    const who = () => {
+        const verdict = evaluateWebRequest(req, url, ctx.webToken ?? null, ctx.webSessions, { touch: false });
+        if (verdict.kind !== "allow")
+            return { status: 401, error: WEB_TOKEN_INVALID_MESSAGE };
+        if (verdict.via !== "session" || !verdict.session || verdict.session.tier === "guest")
+            return { status: 403, error: "app_icon_needs_a_signed_in_person" };
+        if (!reading && verdict.session.tier !== "admin")
+            return { status: 403, error: "app_icon_admin_only" };
+        return { person: webPersonKey(verdict.session.owner) };
+    };
+    const first = who();
+    if ("status" in first) {
+        json(res, first.status, { error: first.error });
+        return true;
+    }
+    const state = () => { const s = store.current(); return s ? { custom: true, version: s.version, updatedAt: s.updatedAt } : { custom: false, version: "default", updatedAt: null }; };
+    if (reading) {
+        json(res, 200, state());
+        return true;
+    }
+    if (method === "DELETE") {
+        const reset = store.reset();
+        if (!reset.ok) {
+            json(res, reset.status, { error: reset.error, ...(reset.detail ? { detail: reset.detail } : {}) });
+            return true;
+        }
+        json(res, 200, state());
+        return true;
+    }
+    // Still allowed, still answering, the store still open: asked after each await (the body; the conversion).
+    const again = () => {
+        if (!permitWebContinuation(req, res, ctx))
+            return null;
+        if (res.destroyed)
+            return null;
+        const now = who();
+        if ("status" in now) {
+            json(res, now.status, { error: now.error });
+            return null;
+        }
+        return now.person;
+    };
+    (async () => {
+        let bytes;
+        try {
+            bytes = await readBoundedWebBody(req, APP_ICON_MAX_BYTES);
+        }
+        catch {
+            json(res, 413, { error: "app_icon_too_large", detail: "at most 5 MiB" });
+            return;
+        }
+        if (!again())
+            return;
+        // #2308 review: decoding and making the sizes is seconds of CPU at worst — a worker thread's, not the fleet loop's.
+        const prepared = await store.prepare(bytes);
+        if (!prepared.ok) {
+            json(res, prepared.status, { error: prepared.error, ...(prepared.detail ? { detail: prepared.detail } : {}) });
+            return;
+        }
+        const person = again();
+        if (!person)
+            return;
+        const saved = store.commit(prepared.prepared, person);
+        if (!saved.ok) {
+            json(res, saved.status, { error: saved.error, ...(saved.detail ? { detail: saved.detail } : {}) });
+            return;
+        }
+        json(res, 200, state());
+    })().catch((err) => {
+        ctx.logger.error({ err: err.message }, "App icon request failed");
+        try {
+            json(res, 500, { error: "App icon request failed" });
+        }
+        catch { /* already answered */ }
+    });
+    return true;
+}
 /**
  * #1629 r4 §3: the owner-CSS routes (see their call site). `who()`, asked first and again after any body: the person a
  * signed-in human session is, or the status to answer.
@@ -1451,6 +1551,8 @@ export function handleWebRequest(req, res, url, ctx) {
             deliveries: history ? history.deliveries() : [],
             // #1266: a reply's buttons that ended after the page saw the reply (the message itself is not sent again).
             reply_buttons: history ? history.buttonStates() : [],
+            // #2305: the instance's reactions, likewise (a reaction is no new message).
+            reactions: history ? history.reactionStates() : [],
             // And the fleet prompts open on the dashboard (C4): prompt events are stream-only too.
             prompts: ctx.listWebPrompts?.() ?? [],
             // #1386: "Needs you" rides the passive channels only — no endpoint of its own to poll.
@@ -2103,6 +2205,9 @@ export function handleWebRequest(req, res, url, ctx) {
     if (path === "/ui/owner-css.css" || path === "/ui/owner-css" || path.startsWith("/ui/owner-css/")) {
         return handleOwnerCss(req, res, url, ctx, path, method);
     }
+    // #2308: the app icon (handleAppIcon: its state for a signed-in person; changing it, an admin's session only).
+    if (path === "/ui/app-icon")
+        return handleAppIcon(req, res, url, ctx, method);
     // #1629 r4-5: mods — a person's import, uninstall and export (handleMods: sessions only, never the public link).
     if (path === "/ui/mods" || path.startsWith("/ui/mods/"))
         return handleMods(req, res, url, ctx, path, method);
@@ -3296,9 +3401,10 @@ function handleSendMessage(req, res, ctx) {
             // the fleet-wide switch is off for a room that is unset) resolved at send time inside sendClassicWebEcho.
             const canClassicEcho = ctx.isClassicInstance?.(instance) === true && !!ctx.sendClassicWebEcho;
             const settleClassicEcho = canClassicEcho ? ctx.reserveWebChannelEcho?.(instance, async () => {
-                const posted = await ctx.sendClassicWebEcho(instance, formatWebChannelEcho(person.name, preview, t("web.echo_full_text"), { guest: !!guest }), person.name);
+                const copies = [];
+                const posted = await ctx.sendClassicWebEcho(instance, formatWebChannelEcho(person.name, preview, t("web.echo_full_text"), { guest: !!guest }), person.name, copies);
                 if (posted > 0)
-                    ctx.webMessageInChannel?.(instance, messageId); // #1920 §5.2: the room saw it
+                    ctx.webMessageInChannel?.(instance, messageId, copies); // #1920 §5.2: the room saw it (#2305: its copies)
             }) : undefined;
             const settleEcho = canEcho ? ctx.reserveWebChannelEcho?.(instance, async () => {
                 // A replacement adapter or edited binding is not the route we reserved.
@@ -3307,7 +3413,11 @@ function handleSendMessage(req, res, ctx) {
                     || ctx.fleetConfig?.instances[instance]?.topic_id !== topicId)
                     return;
                 const sent = await syncAdapter.sendText(String(groupId), formatWebChannelEcho(person.name, preview, t("web.echo_full_text"), { guest: !!guest }), { threadId: String(topicId), format: "text", allowedMentions: { parse: [] } });
-                ctx.webMessageInChannel?.(instance, messageId); // #1920 §5.2: the topic saw it
+                const copyId = sent && typeof sent === "object" && typeof sent.messageId === "string" ? sent.messageId : "";
+                // #1920 §5.2: the topic saw it. #2305: and where it is, for a reaction to the web message.
+                const reacting = syncAdapter;
+                ctx.webMessageInChannel?.(instance, messageId, copyId && typeof reacting.react === "function"
+                    ? [{ adapter: reacting, chatId: String(groupId), threadId: String(topicId), messageId: copyId }] : []);
                 return sent;
             }) : undefined;
             let delivered;
@@ -3686,7 +3796,7 @@ export function serveAppShell(req, res, ctx, mode) {
         const effectOrigin = gatewayRequestContext(req)?.expectedOrigin ?? dashboardOriginFor(typeof req.headers.host === "string" ? req.headers.host : undefined, isSecureRequest(req));
         const effectFrame = shellEffect(req, ctx, mode) && effectOrigin ? `${effectOrigin}/effect-bootstrap` : null;
         const frameSrc = [previewFrames, effectFrame].filter(Boolean).join(" ");
-        sendPanelHtml(res, html.replace('<html lang="en">', shellHtmlTag(ctx, mode, viewer)).replace("<body>", shellBodyTag(req, ctx, mode, viewer)), 200, {}, { ...(frameSrc ? { frameSrc } : {}), mediaSrc });
+        sendPanelHtml(res, withAppIconLinks(html).replace('<html lang="en">', shellHtmlTag(ctx, mode, viewer)).replace("<body>", shellBodyTag(req, ctx, mode, viewer)), 200, {}, { ...(frameSrc ? { frameSrc } : {}), mediaSrc });
     }
     catch {
         json(res, 500, { error: "app.html not found" });