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

package/dist/ui/settings-strings.js

@@ -13,6 +13,19 @@ 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.",
+    namedTokenInvalid: "Paste only the long string that starts with eyJ.",
+    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 +392,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 +614,19 @@ 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: "私密儲存，不會讀回。儲存時只檢查格式，開啟時才確認憑證與路由。設定或清除會關閉目前的公開連結。",
+    namedTokenInvalid: "請只貼上以 eyJ 開頭的長字串。",
+    namedTokenSet: "設定 token",
+    namedTokenClear: "清除 token",
+    awaitingConfirmation: "等待確認中。",
+    namedTokenSaved: "Token 變更已儲存，請重新開啟公開連結。",
     webEcho: "Web 同步",
     webEchoHint: "將網頁訊息複製到綁定的 Telegram 或 Discord 主題。ClassicBot 聊天室也照這個設定，除非該聊天室另外設定。",
     webUsagePublic: "透過公開連結提供用量報告", webUsagePublicHint: "Fleet → 用量（最多 400 天、每個 agent 的 token、請求、訊息與依牌價換算的 API 等值）也會透過臨時公開連結提供。預設關閉；訪客一律看不到。變更立即生效。",
@@ -914,6 +967,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/settings-token.js

@@ -5,6 +5,7 @@
 // hands it back — afterwards a connection shows "Token set · @bot".
 import { html, useState } from "/assets/app-html.js";
 import { t } from "/assets/app-i18n.js";
+import { useTypedText } from "/assets/text-undo.js";
 import { Icon } from "/assets/ui-icons.js";
 import { api } from "./settings-confirm.js";
 
@@ -36,10 +37,11 @@ export const botHandle = (username) => (username ? `@${String(username).replace(
  */
 export function TokenField({ id, platform, value, onInput, identity, busy, onVerify, hint }) {
   const [shown, setShown] = useState(false);
+  const [text, onText] = useTypedText(value);            // #2342: the box keeps what was typed; the parent gets it trimmed
   return html`<div class="field token-field"><label for=${id}>${tn("wizardToken")}</label>
     <div class="token-row">
       <input id=${id} type=${shown ? "text" : "password"} autocomplete="off" autocapitalize="off" spellcheck=${false} disabled=${!!busy}
-        placeholder=${platform === "discord" ? "MTA…" : "123456:ABC-DEF…"} value=${value} onInput=${(e) => onInput(e.target.value.trim())} />
+        placeholder=${platform === "discord" ? "MTA…" : "123456:ABC-DEF…"} value=${text} onInput=${(e) => onInput(onText(e.target.value))} />
       <button type="button" class="icon-btn" aria-pressed=${shown ? "true" : "false"} title=${shown ? tn("tokenHide") : tn("tokenShow")}
         aria-label=${shown ? tn("tokenHide") : tn("tokenShow")} onClick=${() => setShown(!shown)}><${Icon} name="eye" size=${16} /></button>
     </div>

package/dist/ui/settings-web-authority.js

@@ -5,10 +5,12 @@
 // them grants anything by itself — a session still needs its account's Confirm in Discord or Telegram).
 import { html, useEffect, useState } from "/assets/app-html.js";
 import { t } from "/assets/app-i18n.js";
+import { useTypedText } from "/assets/text-undo.js";
 import { toast } from "/assets/ui-toast.js";
 import { confirmDialog } from "/assets/ui-confirm.js";
 import { api } from "./settings-confirm.js";
 import { Feedback } from "./settings-dialogs.js";
+import { DEFAULT_SCHEMA, impactOf } from "./settings-model.js";
 import { resetWebAuthorization } from "/assets/web-authorize.js";
 import "./settings-strings.js";
 
@@ -26,6 +28,8 @@ export function verifiedAuthorityBody(original, f) {
 export function WebAuthorityCard({ ctx, staged, disabled = false }) {
   const [overview, setOverview] = useState(null), [failed, setFailed] = useState(false);
   const [original, setOriginal] = useState(null), [f, setF] = useState(null), [msg, setMsg] = useState(null);
+  // #2342: the hours box keeps what was typed ("01", "1.50"; its undo history); the form gets the number.
+  const [hoursText, onHoursText] = useTypedText(f ? f.hours : null, (v) => (v.trim() === "" ? null : Number(v)));
   const load = async () => {
     // What changes here (a revoke, the switch) changes this browser's own line: the chat reads it again when it shows.
     resetWebAuthorization();
@@ -46,7 +50,6 @@ export function WebAuthorityCard({ ctx, staged, disabled = false }) {
   if (!overview || !f) return card(html`<p class="note">${t("app.loading")}</p>`);
 
   const set = (patch) => setF((x) => ({ ...x, ...patch }));
-  const hoursText = f.hours === null ? "" : String(f.hours);
   const hoursError = f.hours !== null && (!Number.isFinite(f.hours) || f.hours < overview.hours.min || f.hours > overview.hours.max) ? "vaHoursRange" : "";
   const stuckOff = f.enabled && original.enabled && !overview.state.enabled;
   const warnHosts = !f.loopbackOnly && overview.lanHosts.length > 0;
@@ -55,7 +58,7 @@ export function WebAuthorityCard({ ctx, staged, disabled = false }) {
   const review = () => {
     if (hoursError) return;
     const body = verifiedAuthorityBody(original, f);
-    if (body) ctx.stage("verified_authority", { label: tn("vaTitle"), impact: "now", request: { method: "PUT", url: "/api/settings/fleet/web", body: { verified_authority: body } } });
+    if (body) ctx.stage("verified_authority", { label: tn("vaTitle"), impact: impactOf(ctx.schema || DEFAULT_SCHEMA, "web.verified_authority"), request: { method: "PUT", url: "/api/settings/fleet/web", body: { verified_authority: body } } });
     else if (staged.has("verified_authority")) ctx.unstage("verified_authority");
     setMsg(tn("readyApply"));
   };
@@ -77,7 +80,7 @@ export function WebAuthorityCard({ ctx, staged, disabled = false }) {
       ${warnHosts ? html`<p class="note s-va-warn" role="status" id="vaLanWarning">${tn("vaLanWarning", overview.lanHosts.join(", "))}</p>` : null}
       <div class="field"><label for="vaHours">${tn("vaHours", overview.hours.min, overview.hours.max)}</label>
         <input id="vaHours" type="number" min=${overview.hours.min} max=${overview.hours.max} step="any" placeholder=${tn("defaultHours", overview.hours.default)}
-          class=${hoursError ? "invalid" : ""} value=${hoursText} onInput=${(e) => set({ hours: e.target.value.trim() === "" ? null : Number(e.target.value) })} />
+          class=${hoursError ? "invalid" : ""} value=${hoursText} onInput=${(e) => set({ hours: onHoursText(e.target.value) })} />
         <${Feedback} error=${hoursError} /></div>
       <h4>${tn("vaSessionsTitle")}</h4>
       ${overview.authorized.length

package/dist/ui/settings-wizard.js

@@ -4,11 +4,12 @@
 // progress, deadline and restart recovery as every other change.
 import { html, useEffect, useRef, useState } from "/assets/app-html.js";
 import { t } from "/assets/app-i18n.js";
+import { useTypedText } from "/assets/text-undo.js";
 import { useLease } from "/assets/app-ctx.js";
 import { Dialog } from "/assets/ui-dialog.js";
 import { api } from "./settings-confirm.js";
 import { startOperation } from "./settings-apply.js";
-import { BACKENDS, DEFAULT_SCHEMA, impactOf, toYaml } from "./settings-model.js";
+import { BACKENDS, newConnectionImpact, toYaml } from "./settings-model.js";
 import { Drawer, Select } from "./settings-dialogs.js";
 import { adminUserIdError, adminUserIdPattern, botHandle, TokenEnvNote, TokenField, verifyBotToken } from "./settings-token.js";
 import { DiscordServerPicker } from "./settings-discord.js";
@@ -26,6 +27,11 @@ export function SetupWizard({ ctx, onClose }) {
   const bump = () => { rev.current++; };
   const [busy, setBusy] = useState("");
   const [err, setErr] = useState("");
+  // #2342: the typed fields keep what was typed (a space in a path, the undo history); the form gets them trimmed.
+  const [dirText, onDirText] = useTypedText(w ? w.working_directory : "");
+  const [nameText, onNameText] = useTypedText(w ? w.instance_name : "");
+  const [userText, onUserText] = useTypedText(w ? w.admin_user_id : "");
+  const [groupText, onGroupText] = useTypedText(w ? w.group_id : "");
   useEffect(() => {
     (async () => {
       const env = await api("/api/settings/quickstart/environment").catch(() => null);
@@ -115,7 +121,7 @@ export function SetupWizard({ ctx, onClose }) {
     // either if it was taken since, instead of quietly picking another.
     const body = { ...input(), channel_id: w.plan.channel_id, token_env: w.plan.token_env, token_env_generated: true, token: w.token };
     // It writes the connection and the first agent: it costs what a connection change does (the server's schema).
-    const handed = startOperation([{ label: tn("wizardTitle"), impact: impactOf((ctx && ctx.schema) || DEFAULT_SCHEMA, "fleet.channels"),
+    const handed = startOperation([{ label: tn("wizardTitle"), impact: newConnectionImpact(ctx && ctx.schema),
       request: { method: "POST", url: "/api/settings/quickstart/commit", body, sensitive: true } }]);
     if (!handed) { setErr(tn("applyBusyLocal")); return; }
     setW((x) => ({ ...x, token: "" }));
@@ -134,8 +140,8 @@ export function SetupWizard({ ctx, onClose }) {
         <p class="note">${tn("wizardAgentExistingNote")}</p></div>` : html`${which}<div class="field"><label for="wz-be">${tn("wizardBackend")}</label>
         <${Select} id="wz-be" value=${w.backend} onChange=${set("backend")} options=${w.env.backends && w.env.backends.length ? w.env.backends : BACKENDS} />
         <p class="note">${w.env.backends && w.env.backends.length ? tn("wizardBackendFound", w.env.backends.join(", ")) : tn("wizardBackendNone")}</p></div>
-      <div class="field"><label for="wz-wd">${tn("workingDir")}</label><input id="wz-wd" type="text" placeholder="/home/you/projects/app" value=${w.working_directory} onInput=${(e) => set("working_directory")(e.target.value.trim())} /></div>
-      <div class="field"><label for="wz-name">${agents.length ? tn("wizardAgentNewName") : tn("wizardAgentName")}</label><input id="wz-name" type="text" value=${w.instance_name} onInput=${(e) => set("instance_name")(e.target.value.trim())} /></div>`;
+      <div class="field"><label for="wz-wd">${tn("workingDir")}</label><input id="wz-wd" type="text" placeholder="/home/you/projects/app" value=${dirText} onInput=${(e) => set("working_directory")(onDirText(e.target.value))} /></div>
+      <div class="field"><label for="wz-name">${agents.length ? tn("wizardAgentNewName") : tn("wizardAgentName")}</label><input id="wz-name" type="text" value=${nameText} onInput=${(e) => set("instance_name")(onNameText(e.target.value))} /></div>`;
   } else if (w.step === 2) {
     body = html`<div class="seg-inline" role="group" aria-label=${tn("wizardPlatform")}>
         ${["telegram", "discord"].map((p) => html`<button key=${p} type="button" class=${`btn${w.platform === p ? " btn-primary" : ""}`} aria-pressed=${w.platform === p ? "true" : "false"}
@@ -148,12 +154,12 @@ export function SetupWizard({ ctx, onClose }) {
         <${DiscordServerPicker} idPrefix="wz" token=${w.identity && w.identity.valid ? w.token : ""} bot=${w.identity && botHandle(w.identity.username)}
           invite=${w.identity && w.identity.invite} portal=${w.identity && w.identity.portal} guilds=${w.guilds} onGuilds=${(g) => setW((x) => ({ ...x, guilds: g }))}
           guild=${w.guild_id} onGuild=${set("guild_id")} channel=${w.general_channel_id} onChannel=${set("general_channel_id")} />
-        <div class="field"><label for="wz-user">${tn("wizardAdminUser")}</label><input id="wz-user" type="text" required=${true} inputmode="numeric" pattern=${adminUserIdPattern(w.platform)} placeholder=${tn("discordUserPlaceholder")} value=${w.admin_user_id} onInput=${(e) => set("admin_user_id")(e.target.value.trim())} /></div>`
+        <div class="field"><label for="wz-user">${tn("wizardAdminUser")}</label><input id="wz-user" type="text" required=${true} inputmode="numeric" pattern=${adminUserIdPattern(w.platform)} placeholder=${tn("discordUserPlaceholder")} value=${userText} onInput=${(e) => set("admin_user_id")(onUserText(e.target.value))} /></div>`
       : html`
-        <div class="field"><label for="wz-group">${tn("groupIdField")}</label><input id="wz-group" type="text" placeholder="-1001234567890" value=${w.group_id} onInput=${(e) => set("group_id")(e.target.value.trim())} />
+        <div class="field"><label for="wz-group">${tn("groupIdField")}</label><input id="wz-group" type="text" placeholder="-1001234567890" value=${groupText} onInput=${(e) => set("group_id")(onGroupText(e.target.value))} />
           <p class="note">${tn("wizardDetectHint")}</p></div>
         <div class="dlg-inline-actions"><button type="button" class="btn btn-sm" disabled=${!!busy} onClick=${detect}>${tn("wizardDetect")}</button></div>
-        <div class="field"><label for="wz-user">${tn("wizardAdminUser")}</label><input id="wz-user" type="text" required=${true} inputmode="numeric" pattern=${adminUserIdPattern(w.platform)} placeholder=${tn("telegramUserPlaceholder")} value=${w.admin_user_id} onInput=${(e) => set("admin_user_id")(e.target.value.trim())} /></div>`}`;
+        <div class="field"><label for="wz-user">${tn("wizardAdminUser")}</label><input id="wz-user" type="text" required=${true} inputmode="numeric" pattern=${adminUserIdPattern(w.platform)} placeholder=${tn("telegramUserPlaceholder")} value=${userText} onInput=${(e) => set("admin_user_id")(onUserText(e.target.value))} /></div>`}`;
   } else {
     body = !w.plan ? html`<p class="note">${tn("wizardPlanLoading")}</p>` : html`
       <p><strong>${tn("wizardWillWrite")}</strong></p>

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

@@ -94,7 +94,7 @@ register("app", {
     search: "Search", searchTitle: "Search chats, messages between agents and tasks ({0})",
     confirmTitle: "Please confirm", confirmOk: "Continue", cancel: "Cancel",
     // The server's own wording (src/locale.ts needs.reason.*), so the web says what Discord says.
-    needs_reason_hang: "Not responding", needs_reason_exited: "Exited", needs_reason_assist: "Waiting at its terminal", needs_reason_permission: "Permission needed", needs_reason_dangerous_command: "Dangerous command waiting", needs_reason_login: "Sign-in needed", needs_reason_dialog: "Waiting at a dialog", needs_reason_terminal_input: "May be waiting for input", needs_reason_auth_paused: "Paused: sign-in needed", needs_reason_crashed: "Crashed", needs_reason_delivery_uncertain: "Could not confirm delivery", needs_reason_delivery_failed: "Delivery failed",
+    needs_reason_hang: "Not responding", needs_reason_exited: "Exited", needs_reason_assist: "Waiting at its terminal", needs_reason_permission: "Permission needed", needs_reason_dangerous_command: "Dangerous command waiting", needs_reason_login: "Sign-in needed", needs_reason_dialog: "Waiting at a dialog", needs_reason_terminal_input: "May be waiting for input", needs_reason_auth_paused: "Paused: sign-in needed", needs_reason_crashed: "Crashed", needs_reason_delivery_uncertain: "Could not confirm delivery", needs_reason_delivery_failed: "Delivery failed", needs_reason_task_review: "Waiting for your confirmation", needs_reason_task_blocked: "Blocked: asks you",
   },
   "zh-TW": {
     brand: "AgEnD", fleet: "Fleet", fleetOverview: "Fleet 概覽", view: "檢視", settings: "設定", instances: "Instances", newInstance: "新增 instance", newAgent: "新增 Agent",
@@ -129,6 +129,6 @@ register("app", {
     needsNav: "等你處理", needsTab: "待處理", needsCount: "{0} 件待處理",
     search: "搜尋", searchTitle: "搜尋聊天、agent 之間的訊息與任務（{0}）",
     confirmTitle: "請確認", confirmOk: "繼續", cancel: "取消",
-    needs_reason_hang: "沒有回應", needs_reason_exited: "已結束", needs_reason_assist: "在終端機上等待", needs_reason_permission: "需要權限", needs_reason_dangerous_command: "危險指令待確認", needs_reason_login: "需要登入", needs_reason_dialog: "停在對話框", needs_reason_terminal_input: "可能在等輸入", needs_reason_auth_paused: "已暫停：需要登入", needs_reason_crashed: "已崩潰", needs_reason_delivery_uncertain: "無法確認是否送達", needs_reason_delivery_failed: "傳送失敗",
+    needs_reason_hang: "沒有回應", needs_reason_exited: "已結束", needs_reason_assist: "在終端機上等待", needs_reason_permission: "需要權限", needs_reason_dangerous_command: "危險指令待確認", needs_reason_login: "需要登入", needs_reason_dialog: "停在對話框", needs_reason_terminal_input: "可能在等輸入", needs_reason_auth_paused: "已暫停：需要登入", needs_reason_crashed: "已崩潰", needs_reason_delivery_uncertain: "無法確認是否送達", needs_reason_delivery_failed: "傳送失敗", needs_reason_task_review: "等你確認", needs_reason_task_blocked: "卡住，在問你",
   },
 });

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

@@ -77,8 +77,8 @@ export function startNeedsNotifier({ open, env = globalThis } = {}) {
     seen.add(item.id);
     if (!notifyOn(env)) return;
     try {
-      const n = new env.Notification(item.instance, { body: item.detail ? `${reasonText(item)}: ${item.detail}` : reasonText(item), tag: item.id });
-      n.onclick = () => { try { env.focus && env.focus(); } catch { /* ignore */ } if (open) open(item.instance); n.close(); };
+      const n = new env.Notification(item.instance || reasonText(item), { body: item.detail ? `${reasonText(item)}: ${item.detail}` : reasonText(item), tag: item.id });
+      n.onclick = () => { try { env.focus && env.focus(); } catch { /* ignore */ } if (open && item.instance) open(item.instance); n.close(); };
     } catch { /* a browser that refuses at the last moment: the list still shows it */ }
   };
   const consider = (items) => {

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

@@ -24,7 +24,7 @@ export function createStore(initial) {
  *  (app-stream.js catchUp) — "catching" / "retrying" / "failed" / "ok"; `retryHydration` asks for it again.
  *  `connections`: how many chat connections the fleet has (#1519 P7: 0 is web-only — the first-run card); null until known. */
 export const appStore = createStore({ ready: false, instances: [], uptime: 0, exec: {}, awaiting: {}, connection: "connecting", needs: [], connections: null,
-  hydration: "none", retryHydration: null });
+  hydration: "none", retryHydration: null, canvasWorker: typeof document !== "undefined" && document.body?.dataset.canvasWorker === "1" });
 
 /**
  * #1920 phase 3: this page is a guest's — the server says so on <body> (data-tier="guest"). A guest sees only its own
@@ -49,7 +49,7 @@ export function applyStatus(d) {
     exec[i.name] = (i.execution_state !== undefined ? i.execution_state : i.state) ?? null;
     if (i.state === "awaiting_input") awaiting[i.name] = typeof i.interaction_summary === "string" ? i.interaction_summary : "";
   }
-  appStore.set({ ready: true, instances: d.instances, uptime: d.uptime ?? 0, exec, awaiting,
+  appStore.set({ canvasWorker: d.canvas_worker === true, ready: true, instances: d.instances, uptime: d.uptime ?? 0, exec, awaiting,
     connections: typeof d.connections === "number" ? d.connections : null,
     // #1665: the host preferences' revision (app-prefs.js re-reads them when it moves).
     prefsRev: typeof d.prefs_rev === "number" ? d.prefs_rev : null,

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; }
@@ -364,6 +383,17 @@ html:has(.shell), html:has(.shell) body { overflow: hidden; }
 .dlg-title { flex: 1; font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
 .dlg-body { padding: var(--s-2) var(--s-5) var(--s-4); overflow-y: auto; display: flex; flex-direction: column; gap: var(--s-3); }
 .dlg-actions { display: flex; justify-content: flex-end; gap: var(--s-2); padding: var(--s-3) var(--s-5) var(--s-5); }
+/* A drawer (ui-dialog.js `drawer`): on a desk, the right edge at full height, the page in view beside it. A phone keeps
+   the bottom sheet (the rules below are for 900 px and up only). */
+@media (min-width: 900px) {
+  .dlg.dlg-drawer { width: min(620px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0 0 0 auto; border-radius: 0;
+    background: var(--bg); box-shadow: var(--shadow-2); animation: dlg-drawer-in 0.18s var(--ease); }
+  .dlg-drawer .dlg-box { height: 100%; max-height: 100dvh; }
+  .dlg-drawer .dlg-head { padding: var(--s-3) var(--s-3) var(--s-3) var(--s-5); border-bottom: 1px solid var(--border); }
+  .dlg-drawer .dlg-body { flex: 1; padding-top: var(--s-4); padding-bottom: var(--s-8); }
+}
+@keyframes dlg-drawer-in { from { transform: translateX(28px); opacity: 0.6; } }
+@media (prefers-reduced-motion: reduce) { .dlg.dlg-drawer { animation: none; } }
 
 /* ── Forms ── */
 .form { display: flex; flex-direction: column; gap: var(--s-3); }
@@ -495,8 +525,19 @@ html.lb-open .scroller { overflow: hidden; }
 .lb { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
   background: rgba(0, 0, 0, 0.95); color: #fff; overflow: hidden; overscroll-behavior: contain; }
 .lb::backdrop { background: rgba(0, 0, 0, 0.6); }
-.lb-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 56px 16px 16px; box-sizing: border-box; }
-.lb-img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
+.lb-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 56px 16px 16px; box-sizing: border-box;
+  overflow: hidden; touch-action: none; }
+/* #2333: the picture at its own size, placed and scaled by a CSSOM transform from its top-left corner (image-zoom.js);
+   hidden until it has loaded and been fitted. One that fails to load is shown where the browser puts a broken one. */
+.lb-img { position: absolute; left: 0; top: 0; max-width: none; max-height: none; display: block; transform-origin: 0 0; will-change: transform;
+  visibility: hidden; cursor: zoom-in; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; }
+.lb-img.lb-ready { visibility: visible; }
+.lb-img.lb-err { position: static; max-width: 100%; max-height: 100%; visibility: visible; transform: none; cursor: default; }
+.lb-stage.lb-zoomed .lb-img { cursor: grab; }
+.lb-stage.lb-zoomed .lb-img:active { cursor: grabbing; }
+.lb-zoom { display: inline-flex; align-items: center; gap: 2px; }
+.lb .lb-level { min-width: 4.5em; justify-content: center; color: #fff; background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.3); font-variant-numeric: tabular-nums; }
+.lb .lb-fit-width.on { background: rgba(255, 255, 255, 0.22); }
 .lb-bar { position: absolute; top: 0; left: 0; right: 0; z-index: 1; display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3);
   background: rgba(0, 0, 0, 0.75); }
 .lb-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); }
@@ -633,8 +674,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 +801,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 +1322,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 +1418,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 +1525,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 +1593,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,19 +1942,22 @@ 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: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 { 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); box-shadow: var(--shadow-1); --lbar-color: transparent; cursor: pointer; font-size: var(--fs-sm); min-width: 0; }
+.tb-tile:hover { border-color: var(--border-strong); box-shadow: var(--shadow-2); }
+/* As taskhall: the shared straight bar (#2330) only while the card is under way (in progress, blocked, waiting for
+   you); none on to do or done, and a done tile is dimmed. */
+.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 { background: color-mix(in srgb, var(--bg) 60%, var(--surface)); box-shadow: none; }
+.tb-tile.st-done .tb-tile-title { color: var(--text-2); }
 .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; } }
 .tb-tile-top { display: flex; align-items: center; gap: var(--s-2); }
-.tb-size { font-size: var(--fs-xs); color: var(--text-3); }
+.tb-size { padding: 0 5px; border: 1px solid var(--border); border-radius: var(--r-sm); font-size: 11px; font-weight: var(--fw-bold); line-height: 16px; color: var(--text-3); }
 /* The tile's control: its title, a plain-looking button (Enter opens the card, Alt+arrows move it). */
-.tb-tile-title { display: block; width: 100%; padding: 0; background: none; border: 0; border-radius: var(--r-sm); color: var(--text); font: inherit; font-weight: var(--fw-medium); text-align: left; cursor: pointer; overflow-wrap: anywhere; }
+.tb-tile-title { display: block; width: 100%; padding: 0; background: none; border: 0; border-radius: var(--r-sm); color: var(--text); font: inherit; font-weight: var(--fw-semibold); line-height: 1.4; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
 .tb-tile-title:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
 .tb-tile:has(.tb-tile-title:focus-visible) { border-color: var(--focus); }
 .tb-tile-note { display: flex; gap: var(--s-1); align-items: flex-start; font-size: var(--fs-xs); color: var(--text-2); overflow-wrap: anywhere; }
@@ -1939,12 +1984,47 @@ strong.org-name { font-size: var(--fs-sm); color: var(--text); }
 .tb-sub-blocked { padding-left: 22px; font-size: var(--fs-xs); color: var(--danger); overflow-wrap: anywhere; }
 .tb-sub-more { font-size: var(--fs-xs); padding-left: var(--s-1); }
 .tb-tile-foot { display: flex; align-items: center; gap: var(--s-2); }
-.tb-tile-foot > .tb-who { flex: 1; min-width: 0; max-width: none; }
+.tb-tile-foot > .tb-who, .tb-tile-foot > .tb-person, .tb-tile-foot > .tb-people { flex: 1; min-width: 0; max-width: none; }
+.tb-people { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); }
+/* Who (fleet-task-common.js): a round initial — the instance's identity colour when it has one — then the name. */
+.tb-person { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
+.tb-person > .tb-who { min-width: 0; }
+.tb-person.none > .tb-who { color: var(--text-3); }
+.tb-av { display: inline-grid; place-items: center; width: 20px; height: 20px; flex: none; border-radius: 50%; font-size: 11px; font-weight: var(--fw-bold); line-height: 1;
+  background: color-mix(in srgb, var(--id, var(--text-3)) 16%, var(--bg)); color: var(--id-name, var(--text-2)); }
 .tb-tile-stats { display: inline-flex; gap: var(--s-2); font-size: var(--fs-xs); color: var(--text-3); }
 .tb-tile-stats > span { display: inline-flex; align-items: center; gap: 2px; }
 .tb-tile-stats > .all { color: var(--ok); }
 .tb-tile-stats > .reply { color: var(--accent); }
 
+/* #2246 step 3: who works on what (fleet-task-work.js) — the board's Instance drawer and the Details page's block. */
+.tw { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
+.tw-head { margin: 0; font-size: var(--fs-sm); }
+.tw-error { margin: 0; color: var(--danger); font-size: var(--fs-sm); }
+.tw-group { display: flex; flex-direction: column; gap: var(--s-2); }
+.tw-group-head { display: flex; align-items: center; gap: var(--s-2); margin: 0; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-2); }
+.tw-inst { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-3); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg); min-width: 0; }
+.tw-inst-head { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
+.tw-inst-head .av { width: 24px; height: 24px; font-size: 11px; }
+.tw-inst-head .av .av-dot { box-shadow: 0 0 0 2px var(--bg); }
+.tw-name { font-weight: var(--fw-semibold); font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+.tw-state { font-size: var(--fs-xs); white-space: nowrap; }
+.tw-alt { font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+.tw-desc { margin: 0; font-size: var(--fs-xs); overflow-wrap: anywhere; }
+.tw-none { margin: 0; font-size: var(--fs-xs); }
+.tw-lines { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
+.tw-line { display: flex; align-items: baseline; gap: var(--s-2); width: 100%; padding: 2px var(--s-1); background: none; border: 0; border-radius: var(--r-sm); color: var(--text); text-align: left; cursor: pointer; font-size: var(--fs-sm); min-width: 0; }
+.tw-line:hover { background: var(--surface-2); }
+.tw-line:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
+.tw-kind { flex-shrink: 0; min-width: 4.5em; font-size: 11px; font-weight: var(--fw-semibold); color: var(--text-2); }
+.tw-kind.k-doing { color: var(--accent); }
+.tw-kind.k-blocked, .tw-kind.k-back { color: var(--danger); }
+.tw-kind.k-review { color: var(--warn); }
+.tw-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.tw-note { flex-shrink: 0; font-size: var(--fs-xs); white-space: nowrap; }
+.tw-unread { flex-shrink: 0; display: inline-flex; color: var(--accent); }
+.d-board .tw-lines { margin-top: var(--s-1); }
+
 /* One card, in the app's dialog. */
 .tc { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
 .tc-head { display: flex; align-items: center; gap: var(--s-2); }
@@ -1954,7 +2034,7 @@ strong.org-name { font-size: var(--fs-sm); color: var(--text); }
 .tc-ver { font-size: var(--fs-xs); }
 .tc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); padding-bottom: var(--s-3); border-bottom: 1px solid var(--border); }
 .tc-hint { font-size: var(--fs-xs); }
-.tc-meta { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--s-2) var(--s-4); margin: 0; font-size: var(--fs-sm); align-items: center; }
+.tc-meta { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--s-2) var(--s-4); margin: 0; padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--surface); font-size: var(--fs-sm); align-items: center; }
 .tc-meta dt { color: var(--text-2); }
 .tc-meta dd { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: 0; min-width: 0; }
 .tc-value { color: var(--text); overflow-wrap: anywhere; }
@@ -1992,6 +2072,8 @@ strong.org-name { font-size: var(--fs-sm); color: var(--text); }
   .tb-col { min-height: 0; }
   .tb-form-row { grid-template-columns: minmax(0, 1fr); }
   .tb-search { flex: 1 1 100%; }
+  /* The card's sheet keeps its fields full width (the grey block is the desk drawer's). */
+  .tc-meta { padding: 0; background: none; }
   /* #2299: a phone's waiting row: pill and title on one line, the actions under them (assignee left, buttons right). */
   .tb-wait-main > .tb-pill { min-width: 0; }
   .tb-wait-actions { flex-basis: 100%; margin-left: 0; }
@@ -2002,7 +2084,22 @@ strong.org-name { font-size: var(--fs-sm); color: var(--text); }
   /* …and they do not pile down the board: an older confirmation gives way to two newer toasts; an error never does. */
   .shell:has(.tb-home, .tb-board-page) .toasts > .toast.ok:nth-last-child(n+3) { display: none; }
 }
+/* On a desk a project's columns reach the bottom of the page, as taskhall's: a card drops anywhere down a column, and
+   an empty column still reads as one. The page's column, the board and its scroller pass the height down as flex. */
+@media (min-width: 900px) {
+  .col:has(> .tb > .tb-board-page) { display: flex; flex-direction: column; min-height: 100%; }
+  .tb:has(> .tb-board-page) { flex: 1; }
+  .tb-board-page { display: flex; flex-direction: column; flex: 1; }
+  .tb-board-page > .tb-scroll { display: flex; flex-direction: column; flex: 1; }
+  .tb-board-page .tb-columns { flex: 1; align-items: stretch; }
+}
 @media (prefers-reduced-motion: reduce) {
   .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; }