@songsid/agend 2.2.0-alpha.9 → 2.2.0-beta.2

package/dist/ui/panel-settings.js

@@ -43,7 +43,7 @@ import { startTour } from "./chat-tour.js";
 import "./chat-strings.js";
 
 const tn = (k, ...v) => t(`settings.${k}`, ...v);
-const ICONS = { device: "user", agents: "bot", bots: "plug", classic: "room", general: "sliders", advanced: "code" };
+const ICONS = { device: "user", agents: "bot", bots: "plug", classic: "room", general: "sliders", web: "globe", advanced: "code" };
 const RELEASES = "https://github.com/songsid/AgEnD/releases";
 
 /** GET under the panel's lease → { ok, status, body }. */
@@ -229,7 +229,8 @@ export function SettingsPanel({ route, navKey }) {
     : section === "agents" ? html`<${Agents} ctx=${ctx} search=${search} openDialog=${(d) => setDialog({ ...d, key: navKey })} />`
     : section === "bots" ? html`<${Bots} ctx=${ctx} search=${search} openDialog=${(d) => setDialog({ ...d, key: navKey })} />`
     : section === "classic" ? html`<${Classic} ctx=${ctx} search=${search} openDialog=${(d) => setDialog({ ...d, key: navKey })} />`
-    : section === "general" ? html`<${General} key=${data.loadedAt} ctx=${ctx} staged=${staged} />`
+    : section === "general" ? html`<${General} key=${data.loadedAt} ctx=${ctx} />`
+    : section === "web" ? html`<${WebSection} key=${data.loadedAt} ctx=${ctx} staged=${staged} />`
     : html`<${Developer} ctx=${ctx} />`;
   // A dialog belongs to the navigation that opened it (its draft names one object, never another).
   const open = dialog && dialog.key === navKey ? dialog : null;
@@ -570,17 +571,13 @@ function Classic({ ctx, search, openDialog }) {
  * ClassicBot defaults, web) — each only with what differs from what this form showed, so changing one hot default
  * never also stages untouched settings as a fleet restart.
  */
-function General({ ctx, staged }) {
+function General({ ctx }) {
   const { schema } = ctx;
   const d = ctx.fleet.defaults || {}, c = (ctx.classic && ctx.classic.defaults) || {};
   const hang = d.hang_detector || {}, startup = d.startup || {};
   const primary = channelsOf(ctx.fleet)[0];
-  const web = ctx.fleet.web || {};
-  const originalPublic = useMemo(() => ({ allow_public: (web.public_link && web.public_link.allow_public) ?? true, ttl_minutes: (web.public_link && web.public_link.ttl_minutes) ?? 120, protocol: (web.public_link && web.public_link.protocol) ?? "http2" }), []);
-  const originalEcho = web.echo_to_channel ?? true;
-  const original = useMemo(() => ({ c: structuredClone(c), web: structuredClone(ctx.fleet.web) }), []);
+  const original = useMemo(() => ({ c: structuredClone(c) }), []);
   const [f, setF] = useState(() => ({
-    echo: originalEcho, pub: originalPublic.allow_public, ttl: String(originalPublic.ttl_minutes), protocol: originalPublic.protocol,
     backend: d.backend || "claude-code", model: d.model || "", locale: d.locale || "", auto: String(d.auto_pause_after ?? 0),
     agent_mode: d.agent_mode || "mcp", tool_set: d.tool_set || "full", tool_progress: d.tool_progress ?? "off",
     visibility: visibilityDefault(d), reply: d.reply_completion_guard ?? true, log_level: d.log_level || "info",
@@ -598,7 +595,6 @@ function General({ ctx, staged }) {
     auto: nonNegative(f.auto), hang: positive(f.hang),
     concurrency: !Number.isInteger(num(f.concurrency)) || num(f.concurrency) < 1 || num(f.concurrency) > 20 ? "concurrencyRange" : "",
     stagger: !Number.isFinite(num(f.stagger)) || f.stagger.trim() === "" || num(f.stagger) < 0 || num(f.stagger) > 30000 ? "staggerRange" : "",
-    ttl: !Number.isInteger(num(f.ttl)) || num(f.ttl) < 1 || num(f.ttl) > 480 ? "publicTtl" : "",
   };
   const warnings = { concurrency: num(f.concurrency) > 4 ? "concurrencyWarning" : "", stagger: num(f.stagger) < 100 ? "staggerWarning" : "" };
   const ready = !Object.values(errors).some(Boolean);
@@ -638,29 +634,12 @@ function General({ ctx, staged }) {
       ctx.stage("defaults:classic", { label: tn("updateClassicDefaults"), impact: hotOnly ? "now" : "fleet",
         request: { method: "PUT", url: "/api/settings/classic/defaults", body: classicPatch } });
     }
-    const publicPatch = changedFields({ allow_public: f.pub, ttl_minutes: num(f.ttl), protocol: f.protocol }, originalPublic);
-    const webPatch = { ...(f.echo !== originalEcho ? { echo_to_channel: f.echo } : {}), ...(Object.keys(publicPatch).length ? { public_link: publicPatch } : {}) };
-    if (Object.keys(webPatch).length) {
-      ctx.stage("web:echo", { label: tn("publicLink"),
-        impact: batchImpact(schema, [...(webPatch.echo_to_channel !== undefined ? ["web.echo_to_channel"] : []), ...Object.keys(publicPatch).map((k) => `web.public_link.${k}`)], (k) => impactOf(schema, k)),
-        request: { method: "PUT", url: "/api/settings/fleet/web", body: webPatch } });
-    } else if (staged.has("web:echo")) ctx.unstage("web:echo");
     setMsg(tn("readyApply"));
   };
   const L = (text, field, id) => html`<${Label} text=${text} schema=${schema} field=${field} htmlFor=${id} />`;
   const fleetReply = replyGuardSupported(f.backend, f.agent_mode, d.kiro_ui) ? tn("replyGuardSupported") : tn("replyGuardUnsupported", f.backend, f.agent_mode);
   const classicReply = replyGuardSupported(f.classicBackend, f.agent_mode, d.kiro_ui) ? tn("replyGuardSupported") : tn("replyGuardUnsupported", f.classicBackend, f.agent_mode);
   return html`<div class="form s-general">
-    <section class="card"><h3>${tn("webChat")}</h3>
-      <label class="check"><input id="webEchoToChannel" type="checkbox" checked=${f.echo} onChange=${(e) => set("echo")(e.target.checked)} /><span>${tn("webEcho")}</span><${Impact} schema=${schema} field="web.echo_to_channel" /></label>
-      <p class="note">${tn("webEchoHint")}</p>
-      <label class="check"><input id="publicWebLink" type="checkbox" checked=${f.pub} onChange=${(e) => set("pub")(e.target.checked)} /><span>${tn("publicLink")}</span><${Impact} schema=${schema} field="web.public_link.allow_public" /></label>
-      <p class="note">${tn("publicLinkHint")}</p>
-      <div class="grid2">
-        <div class="field"><label for="publicWebTtl">${tn("publicTtl")}</label><input id="publicWebTtl" type="number" min="1" max="480" class=${errors.ttl ? "invalid" : ""} value=${f.ttl} onInput=${(e) => set("ttl")(e.target.value)} /><${Feedback} error=${errors.ttl} /></div>
-        <div class="field"><label for="publicWebProtocol">${tn("publicProtocol")}</label><${Select} id="publicWebProtocol" value=${f.protocol} onChange=${set("protocol")} options=${["http2", "quic", "auto"]} /></div>
-      </div>
-    </section>
     <section class="card"><h3>${tn("defaultsTitle")}</h3>
       <div class="grid2">
         <div class="field">${L(tn("language"), "defaults.locale", "g-locale")}<${Select} id="g-locale" value=${f.locale} onChange=${set("locale")}
@@ -714,6 +693,118 @@ function General({ ctx, staged }) {
   </div>`;
 }
 
+/**
+ * #1620: Settings → Web — the dashboard's own settings, in one write (PUT /api/settings/fleet/web). Editable: the local
+ * session limits, the browser terminal (on/off, its minutes), web echo and the public link's menu; everything else
+ * under web: / web_terminal: is listed read-only (it decides what the dashboard listens on and exposes: fleet.yaml, then
+ * agend reload). The server judges each change: loosening one waits for a fleet admin in General, tightening applies at
+ * once. Over
+ * the temporary public link none of it can be changed — the form says so and stays disabled (the server refuses too).
+ */
+export const WEB_READ_ONLY = [
+  "web.allowed_hosts", "web.view_access", "web.notify_login", "web.preview", "web.preview_port", "web.preview_origin",
+  "web.usage_panel", "web.provider_secrets", "web_terminal.bind", "web_terminal.tunnel",
+];
+function WebSection({ ctx, staged }) {
+  const { schema } = ctx;
+  const web = ctx.fleet.web || {}, local = (web.session && web.session.local) || {}, term = ctx.fleet.web_terminal || {};
+  const overPublicLink = globalThis.document?.body?.dataset?.publicLink === "1";
+  const original = useMemo(() => ({
+    echo: web.echo_to_channel ?? true,
+    pub: { allow_public: (web.public_link && web.public_link.allow_public) ?? true, ttl_minutes: (web.public_link && web.public_link.ttl_minutes) ?? 120, protocol: (web.public_link && web.public_link.protocol) ?? "http2" },
+    session: { absolute_hours: local.absolute_hours ?? null, idle_hours: local.idle_hours ?? null },
+    terminal: { enabled: term.enabled ?? null, ttl_minutes: term.ttl_minutes ?? null },
+  }), []);
+  const text = (v) => (v === null || v === undefined ? "" : String(v));
+  const [f, setF] = useState(() => ({
+    echo: original.echo, pub: original.pub.allow_public, ttl: String(original.pub.ttl_minutes), protocol: original.pub.protocol,
+    abs: text(original.session.absolute_hours), idle: text(original.session.idle_hours),
+    termOn: original.terminal.enabled !== false, termTtl: text(original.terminal.ttl_minutes),
+  }));
+  const [msg, setMsg] = useState(null);
+  const set = (k) => (v) => setF((x) => ({ ...x, [k]: v }));
+  // Empty = the default (null in the write: the key is removed from fleet.yaml).
+  const value = (v) => (v.trim() === "" ? null : Number(v));
+  const hours = (v) => { const n = value(v); return n !== null && (!Number.isFinite(n) || n < 1 || n > 720) ? "sessionRange" : ""; };
+  const abs = value(f.abs) ?? 12, idle = value(f.idle) ?? 2;
+  const errors = {
+    ttl: !Number.isInteger(Number(f.ttl)) || Number(f.ttl) < 1 || Number(f.ttl) > 480 ? "publicTtl" : "",
+    abs: hours(f.abs),
+    idle: hours(f.idle) || (!hours(f.abs) && idle > abs ? "sessionIdleOver" : ""),
+    termTtl: value(f.termTtl) !== null && (!Number.isInteger(value(f.termTtl)) || value(f.termTtl) < 1 || value(f.termTtl) > 20) ? "webTerminalTtlRange" : "",
+  };
+  const ready = !overPublicLink && !Object.values(errors).some(Boolean);
+  const review = () => {
+    if (!ready) return;
+    const publicPatch = changedFields({ allow_public: f.pub, ttl_minutes: Number(f.ttl), protocol: f.protocol }, original.pub);
+    const sessionPatch = changedFields({ absolute_hours: value(f.abs), idle_hours: value(f.idle) }, original.session);
+    // The checkbox shows the default (on) for an unset key: only a real toggle is written; on again = back to the default.
+    const terminalPatch = changedFields({ enabled: f.termOn === (original.terminal.enabled !== false) ? original.terminal.enabled : f.termOn ? null : false,
+      ttl_minutes: value(f.termTtl) }, original.terminal);
+    const body = {
+      ...(f.echo !== original.echo ? { echo_to_channel: f.echo } : {}),
+      ...(Object.keys(publicPatch).length ? { public_link: publicPatch } : {}),
+      ...(Object.keys(sessionPatch).length ? { session: { local: sessionPatch } } : {}),
+      ...(Object.keys(terminalPatch).length ? { web_terminal: terminalPatch } : {}),
+    };
+    const fields = [
+      ...(body.echo_to_channel !== undefined ? ["web.echo_to_channel"] : []),
+      ...Object.keys(publicPatch).map((k) => `web.public_link.${k}`),
+      ...Object.keys(sessionPatch).map((k) => `web.session.local.${k}`),
+      ...Object.keys(terminalPatch).map((k) => `web_terminal.${k}`),
+    ];
+    if (fields.length) {
+      ctx.stage("web", { label: tn("sec_web"), impact: batchImpact(schema, fields, (k) => impactOf(schema, k)),
+        request: { method: "PUT", url: "/api/settings/fleet/web", body } });
+    } else if (staged.has("web")) ctx.unstage("web");
+    setMsg(tn("readyApply"));
+  };
+  const shown = (path) => {
+    const [top, key] = path.split(".");
+    const v = (top === "web" ? web : term)[key];
+    return v === undefined ? tn("notSet") : typeof v === "object" ? JSON.stringify(v) : String(v);
+  };
+  return html`<div class="form s-web">
+    <p class="sub">${tn("webLead")}</p>
+    ${overPublicLink ? html`<p class="note" role="status" id="webPublicRefused">${tn("webPublicRefused")}</p>` : null}
+    <fieldset class="s-web-fields" disabled=${overPublicLink}>
+    <section class="card"><h3>${tn("webSessionTitle")}</h3>
+      <p class="note">${tn("webSessionHint")}</p>
+      <div class="grid2">
+        <div class="field"><label for="webSessionAbsolute">${tn("sessionAbsolute")}</label><input id="webSessionAbsolute" type="number" min="1" max="720" step="any" placeholder=${tn("defaultHours", 12)}
+          class=${errors.abs ? "invalid" : ""} value=${f.abs} onInput=${(e) => set("abs")(e.target.value)} /><${Feedback} error=${errors.abs} /></div>
+        <div class="field"><label for="webSessionIdle">${tn("sessionIdle")}</label><input id="webSessionIdle" type="number" min="1" max="720" step="any" placeholder=${tn("defaultHours", 2)}
+          class=${errors.idle ? "invalid" : ""} value=${f.idle} onInput=${(e) => set("idle")(e.target.value)} /><${Feedback} error=${errors.idle} /></div>
+      </div>
+    </section>
+    <section class="card"><h3>${tn("webTerminalTitle")}</h3>
+      <p class="note">${tn("webTerminalHint")}</p>
+      <label class="check"><input id="webTerminalEnabled" type="checkbox" checked=${f.termOn} onChange=${(e) => set("termOn")(e.target.checked)} /><span>${tn("webTerminalEnabled")}</span><${Impact} schema=${schema} field="web_terminal.enabled" /></label>
+      <div class="grid2">
+        <div class="field"><label for="webTerminalTtl">${tn("webTerminalTtl")}</label><input id="webTerminalTtl" type="number" min="1" max="20" step="1" placeholder=${tn("defaultHours", 10)}
+          class=${errors.termTtl ? "invalid" : ""} value=${f.termTtl} onInput=${(e) => set("termTtl")(e.target.value)} /><${Feedback} error=${errors.termTtl} /></div>
+      </div>
+    </section>
+    <section class="card"><h3>${tn("webChat")}</h3>
+      <label class="check"><input id="webEchoToChannel" type="checkbox" checked=${f.echo} onChange=${(e) => set("echo")(e.target.checked)} /><span>${tn("webEcho")}</span><${Impact} schema=${schema} field="web.echo_to_channel" /></label>
+      <p class="note">${tn("webEchoHint")}</p>
+      <label class="check"><input id="publicWebLink" type="checkbox" checked=${f.pub} onChange=${(e) => set("pub")(e.target.checked)} /><span>${tn("publicLink")}</span><${Impact} schema=${schema} field="web.public_link.allow_public" /></label>
+      <p class="note">${tn("publicLinkHint")}</p>
+      <div class="grid2">
+        <div class="field"><label for="publicWebTtl">${tn("publicTtl")}</label><input id="publicWebTtl" type="number" min="1" max="480" class=${errors.ttl ? "invalid" : ""} value=${f.ttl} onInput=${(e) => set("ttl")(e.target.value)} /><${Feedback} error=${errors.ttl} /></div>
+        <div class="field"><label for="publicWebProtocol">${tn("publicProtocol")}</label><${Select} id="publicWebProtocol" value=${f.protocol} onChange=${set("protocol")} options=${["http2", "quic", "auto"]} /></div>
+      </div>
+    </section>
+    </fieldset>
+    <section class="card s-web-readonly"><h3>${tn("webReadOnlyTitle")}</h3>
+      <p class="note">${tn("webReadOnlyLead")}</p>
+      <dl class="s-web-ro">${WEB_READ_ONLY.map((k) => html`<div key=${k}><dt><code>${k}</code></dt><dd>${shown(k)}</dd></div>`)}</dl>
+    </section>
+    <div class="save-row"><button type="button" class="btn btn-primary" disabled=${!ready} onClick=${review}>${tn("reviewChanges")}</button>
+      ${msg ? html`<span class="note" role="status">${msg}</span>` : null}</div>
+  </div>`;
+}
+
 /** Developer: the fleet model as YAML or JSON, to read, copy, download — or edit and apply as one operation. */
 function Developer({ ctx }) {
   const [fmt, setFmt] = useState("yaml");

package/dist/ui/settings-dialogs.js

@@ -108,8 +108,13 @@ export function orderedStatusMap(map, keys) {
   for (const key of keys) { const v = map && map[key]; if (typeof v === "string" && v.trim()) out[key] = v.trim(); }
   return Object.keys(out).length ? out : null;
 }
-// no-referrer: nothing here should tell a third-party image host where it was loaded from.
-const EmojiImg = ({ url, alt }) => html`<img src=${url} alt=${alt} referrerpolicy="no-referrer" loading="lazy" />`;
+// #1630: from the dashboard's own route (/ui/img/emoji/<id>). An emoji the fleet's servers do not have is not served
+// there: then its :name: as text, never a broken image.
+const EmojiImg = ({ url, alt }) => {
+  const [broken, setBroken] = useState("");
+  return broken === url ? html`<span class="se-alt">${alt}</span>`
+    : html`<img src=${url} alt=${alt} referrerpolicy="no-referrer" loading="lazy" onError=${() => setBroken(url)} />`;
+};
 
 /**
  * One status_emojis map. `platform` and `channel` say where it applies; `previewBody(map)` is what the preview resolves.

package/dist/ui/settings-model.js

@@ -24,8 +24,9 @@ export function changedFields(next, baseline) {
 /** #1302: cross-instance notices. Unset, or a value the fleet does not know, means full. */
 export const visibilityDefault = (defaults) => (VISIBILITY_MODES.includes(defaults && defaults.cross_instance_visibility) ? defaults.cross_instance_visibility : "full");
 
+/** The backends whose turn end the reply guard can see (backend replyCompletionGuard: claude-code, codex and muse since #1510, kiro legacy/tui), with the MCP server it needs. */
 export const replyGuardSupported = (backend, mode, kiroUi = "legacy") =>
-  mode === "mcp" && (backend === "claude-code" || (backend === "kiro-cli" && ["legacy", "tui"].includes(kiroUi || "legacy")));
+  mode === "mcp" && (["claude-code", "codex", "muse"].includes(backend) || (backend === "kiro-cli" && ["legacy", "tui"].includes(kiroUi || "legacy")));
 
 /**
  * The backend picker's options. A current value it does not offer (the removed gemini-cli, #1280 review) stays first

package/dist/ui/settings-strings.js

@@ -75,7 +75,7 @@ register("settings", {
     crossInstanceVisibility: "Bot-to-bot messages in topics",
     crossInstanceVisibilityHint: "full: the whole message · summary: one line · hidden: nothing. Messages are always delivered; the Mirror Topic still shows them.",
     replyCompletionGuard: "Require a delivered reply",
-    replyGuardSupported: "Available for Claude Code and Kiro legacy/TUI in MCP mode.",
+    replyGuardSupported: "Available for Claude Code, Codex, Muse and Kiro legacy/TUI in MCP mode.",
     replyGuardUnsupported: "Stored but inactive: {0} in {1} mode does not support reply-drop recovery.",
     logLevel: "Log level",
     concurrency: "Startup concurrency",
@@ -277,6 +277,24 @@ register("settings", {
     keyRollbackFailed: "Rollback failed",
     accessTitle: "Access",
     webChat: "Web chat",
+    sec_web: "Web",
+    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 General; 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",
+    webSessionHint: "For sign-ins at the dashboard's own address (this computer, the LAN, a tailnet). A temporary public link always keeps 4 h / 30 min. Shortening ends the sessions it now outlives; lengthening applies to new sign-ins and to an existing one's idle time on its next use. Empty = the default.",
+    sessionAbsolute: "Session length, hours (1–720)",
+    sessionIdle: "Sign out after unused for, hours (1–720)",
+    sessionRange: "Must be a number of hours from 1 to 720",
+    sessionIdleOver: "Must not exceed the session length",
+    defaultHours: "{0} (default)",
+    webTerminalTitle: "Browser terminal",
+    webTerminalHint: "The token-gated terminal /login opens to sign a CLI in. Off: /login refuses. Applies to the next /login.",
+    webTerminalEnabled: "Allow the browser terminal",
+    webTerminalTtl: "Terminal session minutes (1–20)",
+    webTerminalTtlRange: "Must be a whole number from 1 to 20",
+    webReadOnlyTitle: "Set in fleet.yaml",
+    webReadOnlyLead: "Read-only here: these decide what the dashboard listens on and exposes. Edit fleet.yaml, then run agend reload (web.preview_port and web.preview_origin take a restart of AgEnD).",
+    notSet: "not set (default)",
     defaultsTitle: "Defaults",
     classicBackend: "ClassicBot default backend",
     whoUsesClassic: "Who can use ClassicBot",
@@ -420,7 +438,7 @@ register("settings", {
     crossInstanceVisibility: "Agent 之間的訊息在主題中",
     crossInstanceVisibilityHint: "full：完整訊息 · summary：一行摘要 · hidden：不顯示。訊息一律照常送達，Mirror Topic 也照常顯示。",
     replyCompletionGuard: "要求送出回覆",
-    replyGuardSupported: "Claude Code 與 Kiro legacy/TUI 的 MCP 模式可用。",
+    replyGuardSupported: "Claude Code、Codex、Muse 與 Kiro legacy/TUI 的 MCP 模式可用。",
     replyGuardUnsupported: "設定會保留，但不會生效：{0} 的 {1} 模式不支援回覆遺失補救。",
     logLevel: "Log 等級",
     concurrency: "啟動併發數",
@@ -622,6 +640,24 @@ register("settings", {
     keyRollbackFailed: "還原失敗",
     accessTitle: "存取",
     webChat: "網頁聊天",
+    sec_web: "網頁",
+    webLead: "網頁儀表板的行為。放寬存取的變更（延長 session、重新開啟或延長瀏覽器終端機、公開連結）需要 fleet admin 在 General 確認；收緊的變更會立即套用。",
+    webPublicRefused: "無法透過臨時公開連結變更網頁設定。請從儀表板本身的網址開啟後再變更。",
+    webSessionTitle: "登入 session",
+    webSessionHint: "適用於從儀表板本身網址登入的 session（本機、區域網路、tailnet）。臨時公開連結固定為 4 小時 / 30 分鐘。縮短會讓已超過新限制的 session 結束；延長會套用到新的登入，以及既有 session 下次使用時的閒置時間。留空 = 預設值。",
+    sessionAbsolute: "Session 時長，小時（1–720）",
+    sessionIdle: "閒置多久後登出，小時（1–720）",
+    sessionRange: "必須是 1 到 720 之間的小時數",
+    sessionIdleOver: "不能超過 session 時長",
+    defaultHours: "{0}（預設）",
+    webTerminalTitle: "瀏覽器終端機",
+    webTerminalHint: "/login 用來登入 CLI 的 token 保護終端機。關閉時 /login 會拒絕。下一次 /login 起生效。",
+    webTerminalEnabled: "允許瀏覽器終端機",
+    webTerminalTtl: "終端機 session 分鐘數（1–20）",
+    webTerminalTtlRange: "必須是 1 到 20 之間的整數",
+    webReadOnlyTitle: "在 fleet.yaml 設定",
+    webReadOnlyLead: "這裡僅供檢視：這些設定決定儀表板監聽和公開的內容。請編輯 fleet.yaml 後執行 agend reload（web.preview_port 與 web.preview_origin 需要重新啟動 AgEnD）。",
+    notSet: "未設定（預設）",
     defaultsTitle: "預設值",
     classicBackend: "ClassicBot 預設 backend",
     whoUsesClassic: "誰可以使用 ClassicBot",

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

@@ -44,7 +44,7 @@ register("app", {
     previews: "Allow HTML previews on this device", tour: "Tour", tourTitle: "Show the web chat tour again",
     needsYou: "needs you", approxNote: "Read from the terminal, so approximate", chat: "Chat", details: "Details", instanceViews: "Views of {0}",
     textSize: "Text size: {0}", textSize_s: "S", textSize_m: "M", textSize_l: "L", textSize_fit: "Fit", usage: "Usage",
-    statusRunning: "running", statusStopped: "stopped", statusCrashed: "crashed", statusWorking: "working", statusStuck: "looks stuck", statusIdle: "idle",
+    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).",
     skip: "Skip to the conversation", loadFailed: "This could not be loaded.", retry: "Try again", loading: "Loading…",
@@ -73,7 +73,7 @@ register("app", {
     previews: "允許這台裝置預覽 HTML", tour: "導覽", tourTitle: "再看一次網頁聊天導覽",
     needsYou: "等你回應", approxNote: "從終端畫面判讀，僅供參考", chat: "聊天", details: "詳細資訊", instanceViews: "{0} 的檢視",
     textSize: "字級：{0}", textSize_s: "小", textSize_m: "中", textSize_l: "大", textSize_fit: "剛好填滿", usage: "用量",
-    statusRunning: "執行中", statusStopped: "已停止", statusCrashed: "已當掉", statusWorking: "工作中", statusStuck: "似乎卡住", statusIdle: "閒置",
+    statusRunning: "執行中", statusStopped: "已停止", statusPaused: "已暫停", statusCrashed: "已當掉", statusWorking: "工作中", statusStuck: "似乎卡住", statusIdle: "閒置",
     connReconnecting: "連不上 AgEnD——可能正在重新啟動。正在重新連線…", connReconnectingIn: "連不上 AgEnD——可能正在重新啟動。{0} 秒後再試。",
     hydrating: "正在載入目前的狀態…", hydrateFailed: "無法載入目前的狀態（提示、送達標記）。",
     skip: "跳到對話", loadFailed: "無法載入。", retry: "再試一次", loading: "載入中…",

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

@@ -2,7 +2,7 @@
 // a test runs both over one list of cases). Pure: no DOM, no history.
 
 export const FLEET_TABS = ["tasks", "schedules", "teams", "org", "cache", "config"];
-export const SETTINGS_SECTIONS = ["device", "agents", "bots", "classic", "general", "advanced"];   // #1604: device first
+export const SETTINGS_SECTIONS = ["device", "agents", "bots", "classic", "general", "web", "advanced"];   // #1604: device first
 const MAX_INSTANCE_NAME = 128;
 const PATH_SEPARATOR_OR_CONTROL = /[/\\\u0000-\u001f\u007f]/;
 

package/dist/ui/shared/app.css

@@ -12,6 +12,10 @@ h1, h2, h3, p, ul, ol, figure, fieldset { margin: 0; padding: 0; }
 fieldset { border: 0; min-width: 0; }
 ul, ol { list-style: none; }
 button, input, select, textarea { font: inherit; color: inherit; }
+/* #1615: and a field with no size of its own, inside small text, is still never under 16px on a touch screen or the phone
+   layout (iOS zooms on focusing one; #1611's tokens only reach a field sized from them). After the reset above, as weak
+   as it (an element selector: any rule of a field's own still wins), keeping a larger inherited size. */
+@media (pointer: coarse), (max-width: 899px) { input, select, textarea { font-size: max(16px, 1em); } }
 a { color: inherit; text-decoration: none; }
 [hidden] { display: none !important; }
 :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@@ -99,6 +103,22 @@ html:has(.shell), html:has(.shell) body { overflow: hidden; }
 .inst:hover { background: var(--surface-2); }
 .inst.active { background: var(--surface-2); }
 .inst .dot { margin-top: 8px; }
+/* #1630: the avatar (a picture, an emoji or the first character), its status dot, and an optional ring in its bot's colour (--ring, set through the CSSOM). */
+.av { position: relative; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-2); color: var(--text-2);
+  display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-sm); font-weight: var(--fw-semibold); line-height: 1; }
+.av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
+.av.av-emoji { background: transparent; font-size: 18px; font-weight: normal; }
+.av.av-emoji img { width: 22px; height: 22px; border-radius: 0; object-fit: contain; }
+.av.ring { box-shadow: 0 0 0 2px var(--ring, transparent); }
+.av-text { overflow: hidden; }
+.av .av-dot { position: absolute; right: -2px; bottom: -2px; margin: 0; box-shadow: 0 0 0 2px var(--bg-sidebar); }
+.inst.active .av .av-dot, .inst:hover .av .av-dot { box-shadow: 0 0 0 2px var(--surface-2); }
+.dot.hollow { background: transparent; border: 1.5px solid var(--text-3); }
+/* On a grey avatar a grey dot needs more contrast: stopped is a stronger grey, paused a clear ring around the sidebar colour. */
+.av .av-dot.off { background: var(--text-2); }
+.av .av-dot.hollow { box-sizing: border-box; width: 10px; height: 10px; background: var(--bg-sidebar); border: 2.5px solid var(--text-2); }
+.inst .av { margin-top: 1px; }
+.inst-id { font-family: var(--font-mono); }
 .inst-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
 .inst-name { font-size: var(--fs-sm); line-height: var(--lh-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .inst.active .inst-name { font-weight: var(--fw-semibold); }
@@ -124,6 +144,13 @@ html:has(.shell), html:has(.shell) body { overflow: hidden; }
 .s-device { display: flex; flex-direction: column; gap: var(--s-3); }
 .s-device .sub { margin: 0; color: var(--text-3); font-size: var(--fs-sm); }
 .s-device-row { display: flex; gap: var(--s-2); }
+/* #1620: Settings → Web — the lead, and the read-only list of what is set in fleet.yaml. */
+.s-web .sub { margin: 0; color: var(--text-3); font-size: var(--fs-sm); }
+.s-web-fields:disabled select { opacity: 0.6; }   /* over the public link: dimmed like the inputs (.field input:disabled) */
+.s-web-ro { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--s-1) var(--s-3); margin: 0; font-size: var(--fs-sm); }
+.s-web-ro > div { display: contents; }
+.s-web-ro dt { color: var(--text-3); }
+.s-web-ro dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
 .prefs { display: flex; gap: var(--s-2); padding: var(--s-1) var(--s-3); }
 .pref { display: flex; align-items: center; gap: var(--s-1); color: var(--text-2); flex: 1; min-width: 0; }
 .pref select { flex: 1; min-width: 0; height: 30px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-2); font-size: var(--fs-xs); cursor: pointer; }
@@ -518,7 +545,6 @@ html.lb-open .scroller { overflow: hidden; }
   .thread { padding: var(--s-3) var(--s-3) var(--s-2); gap: var(--s-5); }
   .col { padding: var(--s-3) var(--s-3) var(--s-8); }
   .dock { padding: 0 max(var(--s-2), env(safe-area-inset-right)) var(--s-2) max(var(--s-2), env(safe-area-inset-left)); }
-  .composer textarea { font-size: 16px; }          /* under 16px, iOS Safari zooms the page on focus */
   .hint { display: none; }
   .msg.user { max-width: 88%; }
   /* Code wraps on a phone: a long line scrolled sideways inside a scrolling page is unreadable (rough edge 9). */
@@ -931,3 +957,5 @@ strong.org-name { font-size: var(--fs-sm); color: var(--text); }
   .cmd-palette .cmd-desc { white-space: normal; flex-basis: 100%; }
   .cmd-choices .btn, .quick-actions .btn { min-height: var(--tap); }
 }
+/* #1630: a Discord server emoji in a chat message, the size of the text around it. */
+.md img.emoji { display: inline-block; width: 1.375em; height: 1.375em; object-fit: contain; vertical-align: -0.3em; margin: 0 0.05em; }

package/dist/ui/shared/instance-nav.js

@@ -7,7 +7,7 @@
 // - a row opens the view you are in (View → View, everywhere else → Chat);
 // - the list is never remounted on navigation, and only its own scrollTop follows the active row (#1515).
 // Public (/assets/): an anonymous View reader gets the same list, fed by View's roster read instead of status frames.
-import { html, useLayoutEffect, useRef } from "./app-html.js";
+import { html, useLayoutEffect, useRef, useState } from "./app-html.js";
 import { t } from "./app-i18n.js";
 import { appStore, createStore, useStore } from "./app-store.js";
 import { chatPath, detailsPath, viewPath } from "./app-route.js";
@@ -177,11 +177,76 @@ function persistOrder(groupNames, instByGroup) {
   navStore.set({ order: { groups: new Map(groupNames.map((g, i) => [g, i])), insts: new Map(rows.filter((r) => r.item_type === "instance").map((r) => [r.item_name, r.sort_index])) } });
 }
 
+// ── #1630: what stands for an instance (design: the comment on #1630) ──
+// The server decides (the status frame's `avatar` / `accent`); the page only draws it. The anonymous View roster has
+// neither: its rows get the first character. A picture is only ever a same-origin /ui/img/ path — never a platform's
+// CDN (CSP img-src stays 'self'); one that fails to load falls back to the first character, never a broken image.
+
+const GRAPHEMES = typeof Intl !== "undefined" && typeof Intl.Segmenter === "function" ? new Intl.Segmenter(undefined, { granularity: "grapheme" }) : null;
+/** The first user-perceived character, upper-cased where that means anything. */
+export function firstCharacter(text) {
+  const s = String(text == null ? "" : text).trim();
+  if (!s) return "?";
+  if (GRAPHEMES) for (const { segment } of GRAPHEMES.segment(s)) return segment.toLocaleUpperCase();
+  return Array.from(s)[0].toLocaleUpperCase();
+}
+/** What a row is called: the display name when it has one, else the instance name (shown on hover and in Details). */
+export function labelOf(it) {
+  const d = it && typeof it.display_name === "string" ? it.display_name.trim() : "";
+  return d || nameOf(it);
+}
+// One path segment under /ui/img/<kind>/ — no further slash or backslash, and not a dot segment ("." / ".." or their
+// %2e spellings, which a browser resolves too): the picture can only ever be one of those routes (#1642 review).
+const sameOrigin = (src) => typeof src === "string"
+  && /^\/ui\/img\/(bot|avatar|emoji)\/(?!(?:\.|%2[eE]){1,2}(?:\?|$))[^/\\?#\s]+(\?v=[0-9A-Za-z%._-]*)?$/.test(src);
+/** The avatar to draw: the server's, if it is one the page may load; else the first character. */
+export function avatarOf(it) {
+  const a = it && it.avatar;
+  if (a && a.kind === "image" && sameOrigin(a.src)) return { kind: "image", src: a.src };
+  if (a && a.kind === "emoji" && sameOrigin(a.src)) return { kind: "emoji", src: a.src, alt: typeof a.alt === "string" ? a.alt : "" };
+  if (a && a.kind === "emoji" && typeof a.text === "string" && a.text.trim()) return { kind: "emoji", text: a.text.trim() };
+  return { kind: "initial", text: a && a.kind === "initial" && typeof a.text === "string" && a.text ? a.text : firstCharacter(labelOf(it)) };
+}
+const ACCENT = /^#[0-9a-f]{6}$/i;
+/** The status dot on the avatar: needs you, crashed, paused, stopped, looks stuck, working, idle — colour AND a label. */
+export function dotState(it, exec, awaiting) {
+  if (awaiting != null) return "needs";
+  if (!it || it.status === "crashed") return "crashed";
+  if (it.status === "paused") return "paused";
+  if (it.status !== "running") return "stopped";
+  return exec === "stuck" ? "stuck" : exec === "working" ? "working" : "idle";
+}
+const DOT = {
+  needs: ["warn", () => t("app.needsYou")], crashed: ["bad", () => t("app.statusCrashed")], paused: ["off hollow", () => t("app.statusPaused")],
+  stopped: ["off", () => t("app.statusStopped")], stuck: ["warn", () => t("app.statusStuck")], working: ["busy", () => t("app.statusWorking")],
+  idle: ["ok", () => t("app.statusIdle")],
+};
+export function dotLabel(state) { return (DOT[state] || DOT.stopped)[1](); }
+
+/** An instance's avatar with its status dot. The ring (its bot's colour) is a CSS custom property set through the CSSOM. */
+export function InstanceAvatar({ it, state }) {
+  const a = avatarOf(it);
+  const [broken, setBroken] = useState("");
+  const el = useRef(null);
+  const accent = typeof it.accent === "string" && ACCENT.test(it.accent) && a.kind === "image" ? it.accent : "";
+  useLayoutEffect(() => {
+    const node = el.current;
+    if (!node || !node.style) return;
+    if (accent) node.style.setProperty("--ring", accent); else node.style.removeProperty("--ring");
+  }, [accent]);
+  const src = a.kind !== "initial" && a.src && broken !== a.src ? a.src : "";
+  const text = a.kind === "emoji" && a.text ? a.text : a.kind === "initial" ? a.text : firstCharacter(labelOf(it));
+  const [cls] = DOT[state] || DOT.stopped;
+  const label = dotLabel(state);
+  return html`<span ref=${el} class=${`av${accent ? " ring" : ""}${a.kind === "emoji" ? " av-emoji" : ""}`}>
+    ${src ? html`<img src=${src} alt="" decoding="async" onError=${() => setBroken(src)} />` : html`<span class="av-text" aria-hidden="true">${text}</span>`}
+    <span class=${`av-dot dot ${cls}`} role="img" aria-label=${label} title=${label}></span></span>`;
+}
+
 // ── The list ──
 
 const statusText = (facet) => (facet === "needs" ? t("app.needsYou") : facet === "working" ? t("app.statusWorking") : facet === "idle" ? t("app.statusIdle")
   : facet === "crashed" ? t("app.statusCrashed") : t("app.statusStopped"));
-const dotClass = (facet, exec) => (facet === "needs" ? "warn" : facet === "crashed" ? "bad" : facet === "stopped" ? "off" : exec === "stuck" ? "warn" : facet === "working" ? "busy" : "ok");
 
 /**
  * The sidebar's instance list. `route`: the page's (which instance is open, and which view a row opens). `items`: the
@@ -207,6 +272,9 @@ export function InstanceNav({ route, items, loaded = true, exec = {}, awaiting =
   const f = nav.filter;
   const shown = filterSidebar(groupNames, instByGroup, byName, f.q, backendLabel, { status: f.status, cli: f.cli, statusOf: facetOf });
   const backends = [...new Set(items.map((it) => it.backend).filter((b) => typeof b === "string" && b))].sort((a, b) => backendLabel(a).localeCompare(backendLabel(b)));
+  // #1630: a display name two rows share would tell them apart from nothing — only then does the row keep its name too.
+  const labelCount = new Map();
+  for (const it of items) { const l = labelOf(it); labelCount.set(l, (labelCount.get(l) || 0) + 1); }
   const toggle = (g) => { const c = new Set(navStore.get().collapsed); if (c.has(g)) c.delete(g); else c.add(g); setCollapsed(c); };
   // From the store, not this render's copy: two clicks before the next render must both count.
   const flip = (key, value) => { const cur = new Set(navStore.get().filter[key]); if (cur.has(value)) cur.delete(value); else cur.add(value); setNavFilter({ [key]: [...cur] }); };
@@ -257,17 +325,18 @@ export function InstanceNav({ route, items, loaded = true, exec = {}, awaiting =
           <${Icon} name="chevron" size=${14} cls=${folded ? "caret folded" : "caret"} /><span class="grow">${g}</span><span class="count">${names.length}</span></button>
         ${folded ? null : html`<ul class="inst-list">${names.map((name) => {
           const it = byName.get(name);
-          const alias = typeof it.display_name === "string" && it.display_name.trim() && it.display_name.trim() !== name ? it.display_name.trim() : "";
+          const label = labelOf(it);
+          // The instance name under a display name only when another row has the same display name.
+          const twin = label !== name && (labelCount.get(label) || 0) > 1 ? name : "";
           const facet = facetOf(name);
           const waiting = own(awaiting, name) ? awaiting[name] : null;
           const on = name === active;
           return html`<li key=${name}><a class=${`inst v-inst${on ? " active" : ""}`} href=${rowPath(name)} title=${instanceTooltip(it)}
               aria-current=${on ? "page" : undefined} onClick=${onPick} ...${dragProps({ type: "instance", name, group: g })}>
-            <span class=${`dot ${dotClass(facet, own(exec, name) ? exec[name] : null)}`} aria-hidden="true"></span>
-            <span class="inst-text"><span class="inst-name">${name}</span>
-              ${alias || facet === "needs" ? html`<span class="inst-sub">${alias ? html`<span class="inst-alias">${alias}</span>` : null}
-                ${facet === "needs" ? html`<span class="badge-await" title=${waiting || t("app.approxNote")}>${t("app.needsYou")}</span>` : null}</span>` : null}
-              <span class="sr-only">${statusText(facet)}</span></span>
+            <${InstanceAvatar} it=${it} state=${dotState(it, own(exec, name) ? exec[name] : null, waiting)} />
+            <span class="inst-text"><span class="inst-name">${label}</span>
+              ${twin || facet === "needs" ? html`<span class="inst-sub">${twin ? html`<span class="inst-alias inst-id">${twin}</span>` : null}
+                ${facet === "needs" ? html`<span class="badge-await" title=${waiting || t("app.approxNote")}>${t("app.needsYou")}</span>` : null}</span>` : null}</span>
             <span class="v-meta">${it.context_pct != null ? `${Math.round(it.context_pct)}%` : ""}</span>
             <span class=${`cli-icon cli-${KNOWN_BACKENDS.has(it.backend) ? it.backend : "other"}`} title=${backendLabel(it.backend)} aria-label=${tn("tooltipBackend", { value: backendLabel(it.backend) })}></span>
           </a></li>`;

package/dist/ui/shared/signin.js

@@ -4,7 +4,7 @@
 // (a SameSite=Strict cookie is not sent on a navigation that came from a chat app), probe the session
 // from *here* — a same-site request does carry the cookie — and carry on to the page that was asked
 // for; (2) otherwise take the one-time code and exchange it. A browser that signed in before with a code from
-// /dashboard (a returning device, #1570) is also offered "Send me a new code": the server sends it privately to the
+// /web (a returning device, #1570) is also offered "Send me a new code": the server sends it privately to the
 // person who received that earlier code — the page never learns who that is.
 (() => {
   "use strict";
@@ -13,24 +13,24 @@
     en: {
       checking: "Checking your session…", title: "Sign in to AgEnD", lead: "Enter the one-time code from your chat channel.",
       label: "One-time code", submit: "Sign in", working: "Signing in…",
-      hint: "Send /dashboard to your AgEnD bot, or run “agend web --code” on the host. A code works once and expires in 5 minutes.",
-      refused: "That code did not work — it may be wrong, expired or already used. Ask for a new one with /dashboard.",
+      hint: "Send /web to your AgEnD bot, or run “agend web --code” on the host. A code works once and expires in 5 minutes.",
+      refused: "That code did not work — it may be wrong, expired or already used. Ask for a new one with /web.",
       paused: "Too many wrong codes — sign-in is paused for a few minutes.",
       network: "Could not reach AgEnD. Check the connection and try again.",
       resend: "Send me a new code", resent: "A new code was sent to you privately in chat. Enter it above.",
       resend_wait: "A code was asked for a moment ago — wait a little and try again.",
-      resend_refused: "A new code could not be sent. Ask for one with /dashboard.",
+      resend_refused: "A new code could not be sent. Ask for one with /web.",
     },
     "zh-TW": {
       checking: "正在確認登入狀態…", title: "登入 AgEnD", lead: "請輸入聊天頻道給你的一次性登入碼。",
       label: "一次性登入碼", submit: "登入", working: "登入中…",
-      hint: "在 AgEnD bot 傳 /dashboard，或在主機執行「agend web --code」。登入碼只能用一次，5 分鐘內有效。",
-      refused: "登入碼無效：可能輸入錯誤、已過期或已使用。請用 /dashboard 再要一個。",
+      hint: "在 AgEnD bot 傳 /web，或在主機執行「agend web --code」。登入碼只能用一次，5 分鐘內有效。",
+      refused: "登入碼無效：可能輸入錯誤、已過期或已使用。請用 /web 再要一個。",
       paused: "錯誤次數過多，登入暫停幾分鐘。",
       network: "連不上 AgEnD，請檢查連線後再試。",
       resend: "傳一組新的登入碼給我", resent: "新的登入碼已私訊給你，請在上方輸入。",
       resend_wait: "剛剛才要過登入碼，請稍候再試。",
-      resend_refused: "無法傳送新的登入碼。請用 /dashboard 再要一個。",
+      resend_refused: "無法傳送新的登入碼。請用 /web 再要一個。",
     },
   };
   const lang = /^zh/i.test(navigator.language || "") ? "zh-TW" : "en";

package/dist/ui/shared/tokens.css

@@ -151,3 +151,12 @@
 @media (prefers-reduced-motion: reduce) {
   :root { --t-fast: 0ms; --t-med: 0ms; }
 }
+
+/* #1611: on a touch screen or the phone layout, no text field is under 16px — iOS Safari zooms the page in when one under
+   16px gets the focus, and never zooms back. One rule for every page that loads this file (the app, the sign-in page):
+   the small type sizes are 16px ON the controls themselves, so every control sized from them (the filter, search,
+   settings fields, selects, the composer) computes to 16px, and a larger one (the sign-in code, 22px) stays as it is.
+   Pinch zoom is left alone (no maximum-scale / user-scalable in the viewport); the desktop look does not change. */
+@media (pointer: coarse), (max-width: 899px) {
+  input, select, textarea { --fs-xs: 16px; --fs-sm: 16px; --fs-md: 16px; }
+}

package/dist/ui/shared/view-strings.js

@@ -18,7 +18,7 @@ register("view", {
   "displayName": "Display name",
   "role": "Role",
   "description": "Description",
-  "saveHint": "Saving needs a signed-in session. Send /dashboard to your AgEnD bot for a sign-in code.",
+  "saveHint": "Saving needs a signed-in session. Send /web to your AgEnD bot for a sign-in code.",
   "helpTitle": "📖 Help",
   "help1": "Pick an instance in the list: its live terminal shows here.",
   "help2": "Click a group's name to fold it or open it again.",
@@ -180,7 +180,7 @@ register("view", {
   "displayName": "顯示名稱",
   "role": "角色",
   "description": "描述",
-  "saveHint": "儲存需要已登入的 session。請在 AgEnD bot 傳 /dashboard 取得登入碼。",
+  "saveHint": "儲存需要已登入的 session。請在 AgEnD bot 傳 /web 取得登入碼。",
   "helpTitle": "📖 使用說明",
   "help1": "在清單裡選一個 instance：它的即時終端畫面會顯示在這裡。",
   "help2": "點群組名稱可以收合或展開。",

package/dist/ui/signin.html

@@ -49,7 +49,7 @@
     <button id="go" type="submit" data-i18n="submit">Sign in</button>
     <button id="resend" type="button" class="secondary" hidden data-i18n="resend">Send me a new code</button>
     <div id="msg" role="alert" aria-live="polite"></div>
-    <div class="hint" data-i18n="hint">Send /dashboard to your AgEnD bot, or run “<code>agend web --code</code>” on the host. A code works once and expires in 5 minutes.</div>
+    <div class="hint" data-i18n="hint">Send /web to your AgEnD bot, or run “<code>agend web --code</code>” on the host. A code works once and expires in 5 minutes.</div>
   </form>
   <noscript>This page needs JavaScript to sign you in.</noscript>
 </main>