@songsid/agend 2.2.0-beta.1 → 2.2.0-beta.11

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;
@@ -257,9 +258,10 @@ export function SettingsPanel({ route, navKey }) {
 }
 
 /**
- * #1604: what this browser chooses for itself — moved here from the sidebar footer, each with the storage it always had:
- * theme (theme.js), language (app-i18n.js), HTML previews on this device (preview.js, through the app's confirm), and
- * the chat tour (replayed on the chat it points at).
+ * #1604, #1665: Preferences. Synced across the person's devices (kept on the host, app-prefs.js): theme (theme.js),
+ * language (app-i18n.js) and HTML previews (preview.js, through the app's confirm). On the public link they are
+ * read-only: a change there stays in that browser, and it says so. This device only: the chat tour (replayed on the
+ * chat it points at), and the layout choices named there (their controls are where they always were).
  */
 export function DeviceSection() {
   const P = () => globalThis.AgendPreview;
@@ -290,15 +292,66 @@ export function DeviceSection() {
     };
     setTimeout(go, 0);
   };
-  return html`<section class="card s-device"><h3>${tn("sec_device")}</h3>
-    <p class="sub">${tn("deviceLead")}</p>
+  const publicLink = typeof document !== "undefined" && document.body && document.body.dataset.publicLink === "1";
+  return html`<${ProfileCard} />
+  <section class="card s-device s-synced"><h3>${tn("syncedTitle")}</h3>
+    <p class="sub">${publicLink ? tn("syncedPublicLink") : tn("syncedLead")}</p>
     <${DevicePrefs} labels=${true} />
     ${P() ? html`<label class="check"><input type="checkbox" checked=${on} onChange=${(e) => { const want = e.target.checked; setPreviewOptIn(want).then(setOn); }} />
       <span>${t("chat.previews")}</span></label>` : null}
+  </section>
+  <section class="card s-device s-local"><h3>${tn("deviceTitle")}</h3>
+    <p class="sub">${tn("deviceLead")}</p>
     <div class="s-device-row"><button type="button" id="tourBtn" class="btn" title=${t("chat.tourBtnTitle")} onClick=${replay}><${Icon} name="info" size=${16} />${t("chat.tour")}</button></div>
   </section>`;
 }
 
+/**
+ * #1827: who agents see when this person writes from the web. Signed in with a code sent to their Discord or Telegram
+ * account, they are that account — its user id, and its name unless they choose another (it follows them to every
+ * device, the public link included). Otherwise "web-user", as before. The host checks a name in full and says why it
+ * refuses one; this only shows what it says.
+ */
+const view = (b) => ({ phase: "ready", name: b.name || "", shown: b.shown || "", id: b.id || "", bound: b.bound === true, platform: b.platform_name || "", error: "" });
+export function ProfileCard() {
+  const [state, setState] = useState({ phase: "loading", name: "", shown: "", id: "", bound: false, platform: "", error: "" });
+  const [draft, setDraft] = useState("");
+  const lease = useLease();
+  useEffect(() => {
+    let live = true;
+    api("/ui/profile").then((r) => {
+      if (!live) return;
+      if (!r.ok || !r.body) { setState((s) => ({ ...s, phase: "unavailable" })); return; }
+      setState(view(r.body));
+      setDraft(r.body.name || "");
+    }).catch(() => { if (live) setState((s) => ({ ...s, phase: "unavailable" })); });
+    return () => { live = false; };
+  }, []);
+  if (state.phase === "unavailable") return null;
+  const save = (clear) => {
+    setState((s) => ({ ...s, phase: "saving", error: "" }));
+    api("/ui/profile", { method: "POST", body: JSON.stringify({ name: clear ? null : draft }) }).then((r) => {
+      if (lease && !lease.current()) return;
+      if (!r.ok) { setState((s) => ({ ...s, phase: "ready", error: (r.body && r.body.error) || tn("profileFailed") })); return; }
+      setState(view(r.body));
+      setDraft(r.body.name || "");
+      toast(tn("profileSaved", r.body.shown || "web-user"));
+    }).catch(() => setState((s) => ({ ...s, phase: "ready", error: tn("profileFailed") })));
+  };
+  const busy = state.phase !== "ready";
+  const changed = draft.trim() !== state.name;
+  return html`<section class="card s-device s-profile"><h3>${tn("profileTitle")}</h3>
+    <p class="sub">${state.bound ? tn("profileLeadBound") : tn("profileLeadUnbound")}</p>
+    <div class="field"><label for="profile-name">${tn("profileName")}</label>
+      <input id="profile-name" type="text" maxlength="200" autocomplete="nickname" value=${draft} disabled=${busy}
+        placeholder=${state.platform || "web-user"} aria-invalid=${state.error ? "true" : "false"} aria-describedby="profile-help"
+        onInput=${(e) => setDraft(e.target.value)} onKeyDown=${(e) => { if (e.key === "Enter" && changed && draft.trim()) save(false); }} />
+      <p class="sub" id="profile-help">${state.error ? html`<span class="err" role="alert">${state.error}</span>` : tn("profileHelp", state.shown || "web-user", state.id)}</p></div>
+    <div class="s-device-row"><button type="button" class="btn primary" disabled=${busy || !changed || !draft.trim()} onClick=${() => save(false)}>${tn("profileSave")}</button>
+      ${state.name ? html`<button type="button" class="btn" disabled=${busy} onClick=${() => save(true)}>${state.bound ? tn("profileUseAccount", state.platform || "web-user") : tn("profileClear")}</button>` : null}</div>
+  </section>`;
+}
+
 /** The operation in hand still owns Apply: its writes and job, or a restart of AgEnD from the press to its end. */
 const opBusy = (op) => !!op && (["writing", "posting", "watching"].includes(op.phase) || op.restart === "busy");
 function dropSecrets(staged) { for (const c of staged.values()) if (c.connectionSecret) c.connectionSecret.secret = ""; }
@@ -366,11 +419,13 @@ function makeCtx(data, setData, stage, unstage, reload, reloadLive, alive) {
     async pauseWake(name, action) {
       const res = await api(`/api/settings/instances/${encodeURIComponent(name)}/${action}`, { method: "POST" }).catch(() => ({ ok: false, body: {} }));
       if (!res.ok) toast((res.body && res.body.error) || tn("actionFailed", action), false);
+      else if (res.body && res.body.held) toast(res.body.message);
       await reloadLive();
     },
     async startStop(name, running) {
       const res = await api(running ? `/stop/${encodeURIComponent(name)}` : `/api/instance/${encodeURIComponent(name)}/start`, { method: "POST" }).catch(() => ({ ok: false, body: {} }));
       if (!res.ok) toast(`${tn("actionFailed", running ? tn("stop") : tn("start"))}: ${(res.body && res.body.error) || res.status || ""}`, false);
+      else if (res.body && res.body.held) toast(res.body.message);
       await new Promise((r) => setTimeout(r, 800));
       await reloadLive();
     },
@@ -570,17 +625,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 +649,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 +688,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 +747,125 @@ 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.preview_on_public_link",
+  "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,
+    log: web.log_tab === true,                                                  // #1218: off by default
+    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, log: original.log, 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" : ""; };
+  // The defaults (#1670: 48 h / 48 h, DEFAULT_SESSION_POLICY); an idle time left blank follows a shorter session, as
+  // the store and the validator apply it — so only an idle time that is typed can exceed the session length.
+  const abs = value(f.abs) ?? 48, idle = value(f.idle) ?? Math.min(48, abs);
+  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 } : {}),
+      ...(f.log !== original.log ? { log_tab: f.log } : {}),
+      ...(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"] : []),
+      ...(body.log_tab !== undefined ? ["web.log_tab"] : []),
+      ...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", 48)}
+          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", 48)}
+          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="webLogTab" type="checkbox" checked=${f.log} onChange=${(e) => set("log")(e.target.checked)} /><span>${tn("webLogTab")}</span><${Impact} schema=${schema} field="web.log_tab" /></label>
+      <p class="note">${tn("webLogTabHint")}</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");
@@ -749,7 +901,7 @@ function Developer({ ctx }) {
       <button type="button" class="btn btn-sm" title=${tn("copy")} onClick=${copy}><${Icon} name="copy" size=${14} /><span class="lbl">${tn("copy")}</span></button>
       <button type="button" class="btn btn-sm" title=${tn("devDownload")} onClick=${download}><${Icon} name="download" size=${14} /><span class="lbl">${tn("devDownload")}</span></button>
     </div>
-    ${editing ? html`<textarea class="s-yaml" aria-label=${tn("devEditor")} spellcheck="false" wrap="off" value=${draft} onInput=${(e) => setDraft(e.target.value)}></textarea>
+    ${editing ? html`<textarea class="s-yaml" aria-label=${tn("devEditor")} spellcheck=${false} wrap="off" value=${draft} onInput=${(e) => setDraft(e.target.value)}></textarea>
         <div class="save-row"><button type="button" class="btn btn-primary" onClick=${save}>${tn("devApply")}</button><span class="note">${tn("devApplyHint")}</span></div>`
       : html`<pre class="s-yaml">${text}</pre>`}
     ${msg ? html`<p class=${`feedback${msg.error ? " error" : ""}`} role="status">${msg.error || msg.text}</p>` : null}

package/dist/ui/preview-panel.js

@@ -1,11 +1,14 @@
 // #1481: an agent's HTML preview (#1306) in a panel beside the conversation — a split with a draggable divider on a
 // wide screen, a full-screen sheet on a narrow one. Nothing about the preview itself changes here: the frame is the one
 // preview.js makes (mountPreview: the preview origin, sandbox allow-scripts only), started by AgendPreview.start like a
-// card's, only told to fill the panel. It runs on a click, as a card's does:
-// - "Open in panel" on an idle card opens the panel with its Preview button — the panel runs nothing by itself;
+// card's, only told to fill the panel. It runs on a person's click, as a card's does — and "Open in panel" is that click:
+// - on an idle card it opens the panel and starts the preview there, as if Preview were clicked in the panel (#1704);
+//   a device that has not allowed previews gets the "Allow previews" offer instead, and allowing it starts the run;
+//   where previews cannot run (web.preview: false, a public link), the panel opens with nothing running;
 // - on a card whose preview is running, the same button moves that run to the panel (stopped in the card, started in
 //   the panel: a moved frame reloads anyway);
-// - a newer version of the block in a later reply is offered, never swapped in, and offered with Preview to click.
+// - nothing runs by itself: not when the page loads, not when the panel is shown again, and a newer version of the
+//   block in a later reply is offered, never swapped in, and shown with Preview to click.
 // Closing the panel or leaving the chat stops its frame; one preview per page still holds (start() stops any other).
 import { html, useEffect, useRef, useState } from "/assets/app-html.js";
 import { t } from "/assets/app-i18n.js";
@@ -13,24 +16,36 @@ import { Icon } from "/assets/ui-icons.js";
 import "./chat-render.js";
 import "./preview.js";
 import { loadHtmlAttachment } from "./html-attachment.js";
+import { chatTime, onDayChange } from "./chat-time.js";
 
 const R = () => globalThis.AgendChatRender;
 const P = () => globalThis.AgendPreview;
 
 // ── The panel's state, one per page (the chat shows one instance at a time) ──
 
-/** open: { key, instance, msgKey, n | att, code, sender, ts } | null (`att`: an attached .html file, #1306 Q4); run: start it on mount (a moved run). */
+/**
+ * open: { key, instance, msgKey, n | att, code, sender, ts } | null (`att`: an attached .html file, #1306 Q4);
+ * run: start it on mount — the card's click, as a token no later open ever reuses (0: nothing to run).
+ */
 let state = { open: null, run: 0 };
+let runs = 0, version = 0, claims = 0;
 const subs = new Set();
-function set(next) { state = next; for (const fn of [...subs]) { try { fn(state); } catch { /* one listener's error stops no other */ } } }
+function set(next) { state = next; version++; for (const fn of [...subs]) { try { fn(state); } catch { /* one listener's error stops no other */ } } }
 export const panelStore = { get: () => state, subscribe(fn) { subs.add(fn); return () => { subs.delete(fn); }; } };
+/** Moves on every open and close, and on every claim: what a card's click compares when its HTML arrives late. */
+export const panelVersion = () => version;
+/** A click that will show something in the panel (an attachment's HTML still to read): from now on it is the newest —
+ *  any earlier click still reading is dropped when its answer comes. Returns the version the click owns. */
+export function claimPanel() { claims++; return ++version; }
+/** How many clicks have claimed: an inline Preview still reading asks only whether a newer click came (not a close). */
+export const panelClaims = () => claims;
 
 /** The frame's key in preview.js: its own, so the card that opened it keeps its own state. */
 export const frameKey = (key) => `panel:${key}`;
-/** Show `spec` in the panel; `run`: start it there (a click that moves a running preview). The block shown before stops. */
+/** Show `spec` in the panel; `run`: start it there (the card's "Open in panel" click). The block shown before stops. */
 export function openPanel(spec, { run = false } = {}) {
   if (state.open && P()) P().stop(frameKey(state.open.key), "stopped", "");
-  set({ open: { ...spec }, run: run ? state.run + 1 : 0 });
+  set({ open: { ...spec }, run: run ? ++runs : 0 });
 }
 /** Close the panel: its frame stops first. */
 export function closePanel() {
@@ -98,14 +113,15 @@ export function clampWidth(w, total) {
   return Math.round(Math.min(max, Math.max(MIN_PANEL, w)));
 }
 
-const timeOf = (ts) => (ts ? new Date(ts).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) : "");
+/** #1770: as the thread shows it — the fleet's zone, with the day when it is not today. */
+const timeOf = (ts) => (ts ? chatTime(ts, { yesterday: (hm) => t("chat.yesterdayAt", hm) }) : "");
 
 /**
  * The panel, inside the chat's split (`split`: that element — the divider sets its width there, through CSSOM).
  * props: name (the instance), msgs() → its messages, subscribe(fn) → unsubscribe (the chat store's), keyOf(x),
  * reveal(msgKey) (the thread shows that message), download(code).
  */
-/** allow(): this device's opt-in through the chat's one path (setPreviewOptIn: the confirm, then setOptIn) → the choice. */
+/** allow(commit): this device's opt-in through the chat's one path (setPreviewOptIn: the confirm, then commit(setOptIn)) → the choice. */
 export function PreviewPanel({ name, split, msgs, subscribe, keyOf, reveal, download, allow }) {
   const [st, setSt] = useState(state);
   const [view, setView] = useState("preview");
@@ -113,15 +129,23 @@ export function PreviewPanel({ name, split, msgs, subscribe, keyOf, reveal, down
   const [newer, setNewer] = useState(null);
   const [newerNote, setNewerNote] = useState("");
   const reading = useRef(null);   // the newer version whose file is being read (one at a time)
+  const pending = useRef(0);      // #1704: the card's click, waiting for this device's Allow (the st.run it came with)
+  const ownAllow = useRef(0);     // while this panel's own Allow commits its choice: the click it answers (not cancelled by it)
   const holder = useRef(null), divider = useRef(null), panel = useRef(null);
   const open = st.open && st.open.instance === name ? st.open : null;
 
   useEffect(() => panelStore.subscribe(setSt), []);
   // This device's choice (here or in another tab) decides whether Preview is offered: re-read it when it changes.
+  // A click waiting for Allow is cancelled by any other change of that choice (Never, a card's menu, another tab):
+  // after it, running needs a new click — only this panel's own Allow runs the click it was offered for.
   const [, choice] = useState(0);
-  useEffect(() => (P() ? P().onChange(() => choice(n => n + 1)) : undefined), []);
+  useEffect(() => (P() ? P().onChange(() => { if (pending.current && ownAllow.current !== pending.current) pending.current = 0; choice(n => n + 1); }) : undefined), []);
   // Leaving the chat (another instance, another panel) closes the panel: its frame stops with the thread's.
   useEffect(() => () => closePanel(), []);
+  // #1770: the source and newer-version labels say the day as the thread does — drawn again when the fleet's day
+  // changes, while a block is open. A render: the frame and the run are left as they are.
+  const [, dayTick] = useState(0);
+  useEffect(() => (open ? onDayChange(() => dayTick(n => n + 1)) : undefined), [!!open]);
 
   const ui = { state: (s, reason) => setRun({ state: s === "starting" || s === "running" ? s : "idle", reason: reason || "" }) };
   const start = () => {
@@ -130,11 +154,17 @@ export function PreviewPanel({ name, split, msgs, subscribe, keyOf, reveal, down
     P().start(frameKey(open.key), holder.current, open.code, ui, { fill: true });
   };
   const stop = () => { if (open) P().stop(frameKey(open.key), "stopped", ""); };
-  // A new block in the panel: what ran before is gone (openPanel stopped it); a moved run starts here.
+  // A new block in the panel: what ran before is gone (openPanel stopped it); the card's click starts it here — or,
+  // where it cannot run, waits as `pending`: only the Allow below can use it (offered to a device that has not opted
+  // in), only while the panel shows what that click opened (st.run is a token no later open reuses), and any other
+  // change of this device's choice cancels it.
   useEffect(() => {
     setRun({ state: "idle", reason: "" });
     setView("preview");
-    if (open && st.run) start();
+    if (open && st.run) {
+      if (P().availability().ok) start();
+      else pending.current = st.run;
+    }
     // Focus goes to the panel's close control that is on screen (Back on a phone, × beside the thread).
     if (panel.current) { const f = [...panel.current.querySelectorAll(".pv-panel-close")].find(b => b.offsetParent !== null); if (f) f.focus(); }
   }, [open && open.key, st.run]);
@@ -204,11 +234,21 @@ export function PreviewPanel({ name, split, msgs, subscribe, keyOf, reveal, down
   if (!open) return null;
   const going = run.state === "starting" || run.state === "running";
   const a = P().availability();
-  // #1554: a device that has not allowed previews is offered the same "Allow previews" here (the same confirm); Preview
-  // is then enabled — still a click. Why a run stopped (e.g. switched off in another tab) is still said first.
+  // #1554: a device that has not allowed previews is offered the same "Allow previews" here (the same confirm). Allowing
+  // runs the block the card's click opened (#1704); otherwise Preview is then enabled — still a click. Why a run stopped
+  // (e.g. switched off in another tab) is still said first.
   const askOptIn = !going && !a.ok && a.why === "optin" && typeof allow === "function";
   const note = run.reason || (going ? (run.state === "starting" ? t("chat.pvStarting") : "") : a.ok ? t("chat.pvPanelIdle") : askOptIn ? t("chat.pvWhyOptinPanel") : a.reason);
-  const allowHere = async () => { if (await allow()) setRun({ state: "idle", reason: "" }); };
+  // Allowed here: the click that opened the panel runs now — if it is still waiting (no other change of the choice
+  // cancelled it, even while the confirm was open: only the change this Allow commits is its own) and the panel still
+  // shows what it opened (the confirm is a wait: the panel may have moved on meanwhile).
+  const allowHere = async () => {
+    const want = pending.current;
+    const yes = await allow((apply) => { ownAllow.current = want; try { apply(); } finally { ownAllow.current = 0; } });
+    if (!yes) return;
+    setRun({ state: "idle", reason: "" });
+    if (want && pending.current === want && panelStore.get().run === want) start();
+  };
   const source = t("chat.pvSource", open.sender || name, timeOf(open.ts));
   return html`<div class="pv-divider" ref=${divider} role="separator" aria-orientation="vertical" tabindex="0" aria-label=${t("chat.pvResize")}
       aria-valuemin=${String(MIN_PANEL)} onKeyDown=${onKey} onPointerDown=${onDown}></div>

package/dist/ui/preview-status.js

@@ -0,0 +1,28 @@
+// #1723: the public link's preview tunnel starts beside the link and is never waited for, so a page may load while it
+// is still starting. This asks the page's own server (/ui/preview-status) until it is up or failed, and hands each answer
+// to preview.js — which takes only what it may use, and itself reaches no network (#1306).
+
+/** Every 2 s, for at most 5 minutes. */
+export const POLL_MS = 2000;
+export const POLL_MAX = 150;
+
+/**
+ * Ask while `P.waitingForPublicPreview()`; stop once `P.applyPublicPreviewStatus(answer)` says there is nothing more to
+ * wait for, or after POLL_MAX asks. Returns a stop function.
+ */
+export function pollPublicPreview(P, deps = {}) {
+  const get = deps.fetch ?? ((...a) => fetch(...a));
+  const later = deps.setTimeout ?? ((fn, ms) => setTimeout(fn, ms));
+  if (!P || typeof P.waitingForPublicPreview !== "function" || !P.waitingForPublicPreview()) return () => {};
+  let attempts = 0, stopped = false;
+  const again = () => { if (!stopped && attempts < POLL_MAX) later(tick, POLL_MS); };
+  const tick = () => {
+    if (stopped || !P.waitingForPublicPreview()) return;
+    attempts++;
+    get("/ui/preview-status", { credentials: "same-origin", cache: "no-store" })
+      .then((r) => (r.ok ? r.json() : null))
+      .then((j) => { if (!stopped && !P.applyPublicPreviewStatus(j)) again(); }, again);
+  };
+  later(tick, POLL_MS);
+  return () => { stopped = true; };
+}

package/dist/ui/preview.js

@@ -28,7 +28,14 @@
   var BANNER_ACK_KEY = "agend_html_preview_banner_ack";
   var BANNER = "Previews run the agent's HTML in an isolated frame. It cannot use your login, but it may be able to send data out. Only preview content you trust. A preview can slow or freeze this tab.";
 
-  var cfg = { dashboardOrigin: "", previewOrigin: "", boot: "", reason: "", reasonCode: "" };
+  var cfg = { dashboardOrigin: "", previewOrigin: "", boot: "", reason: "", reasonCode: "", detail: "" };
+  // Why it failed, in English when the app's dictionary has no word for it (chat-strings.js pvFail_*).
+  var FAIL_EN = { exited: "its address closed unexpectedly", "spawn-failed": "cloudflared could not start for it", "no-address": "no address was given for it",
+    unreachable: "its address could not be reached", "lease-held": "an earlier preview tunnel is still being cleaned up", "gateway-failed": "its local listener could not start",
+    // #1767: what cloudflared's exit before an address really was.
+    "rate-limited": "Cloudflare is limiting new temporary links from this machine — try again in a while",
+    "provisioning-failed": "Cloudflare refused to create its address right now", "process-exited": "cloudflared stopped before it gave an address",
+    "bad-address": "Cloudflare gave an address that could not be used" };
   // #1554: the page's words. `say(key, english, …values)` asks the app's dictionary (init's opts.text) and keeps the
   // English here when it has none — so this file still works, and reads the same, without the app.
   var text = null;
@@ -66,6 +73,7 @@
       boot: String((data && data.previewBoot) || ""),
       reason: String((data && data.previewReason) || ""),
       reasonCode: String((data && data.previewReasonCode) || ""),
+      detail: String((data && data.previewDetail) || ""),
     };
     if (opts && typeof opts.text === "function") text = opts.text;
     if (!listening && typeof root.addEventListener === "function") {
@@ -76,6 +84,29 @@
       listening = true;
     }
   }
+  /**
+   * #1723: the public link's own preview tunnel was still starting when this page loaded; preview-status.js asks the
+   * page's server and hands each answer here (this file reaches no network). Ready → previews run at the origin it
+   * names — only an https quick-tunnel origin other than this page's is ever taken: the page's frame-src allows no
+   * other; failed or off → the page says why. Returns true once there is nothing more to wait for.
+   */
+  function waitingForPublicPreview() { return cfg.reasonCode === "publicLinkStarting"; }
+  function applyPublicPreviewStatus(j) {
+    if (cfg.reasonCode !== "publicLinkStarting") return true;
+    var at = root.location && root.location.origin;
+    if (j && typeof j.previewOrigin === "string" && /^https:\/\/[a-z0-9-]+\.trycloudflare\.com$/.test(j.previewOrigin) && j.previewOrigin !== at
+      && typeof j.boot === "string" && /^[0-9a-f]{32}$/.test(j.boot)) {
+      cfg.previewOrigin = j.previewOrigin; cfg.boot = j.boot; cfg.reasonCode = ""; cfg.reason = "";
+      notify();
+      return true;
+    }
+    if (j && (j.code === "publicLinkPreviewFailed" || j.code === "publicLink" || j.code === "fleetOff")) {
+      cfg.reasonCode = j.code; cfg.reason = ""; cfg.detail = typeof j.detail === "string" ? j.detail : "";
+      notify();
+      return true;
+    }
+    return false;
+  }
   function onStorage(event) {
     // #1568: the banner acknowledged in another tab of this sign-in: hide it here too (nothing starts or stops).
     if (event && event.key === BANNER_ACK_KEY) { notify(); return; }
@@ -159,7 +190,11 @@
   function availability() {
     if (!cfg.previewOrigin || !cfg.boot) {
       // The server's reason, in the page's language when the server named it (a code), else as the server wrote it.
-      var server = cfg.reasonCode ? say("pvServer_" + cfg.reasonCode, cfg.reason || "Previews are not available here.", cfg.dashboardOrigin) : "";
+      // #1723: a failed public-link preview names why ({0} is the reason, in the page's words).
+      var arg = cfg.reasonCode === "publicLinkPreviewFailed" ? say("pvFail_" + (cfg.detail || "unknown"), Object.prototype.hasOwnProperty.call(FAIL_EN, cfg.detail) ? FAIL_EN[cfg.detail] : "an unexpected error") : cfg.dashboardOrigin;
+      var english = cfg.reasonCode === "publicLinkPreviewFailed" ? "Previews are unavailable on this public link: {0}. The link itself keeps working."
+        : cfg.reason || "Previews are not available here.";
+      var server = cfg.reasonCode ? say("pvServer_" + cfg.reasonCode, english, arg) : "";
       return { ok: false, why: "server", reason: server || cfg.reason || say("pvWhyServer", "Previews are not available here.") };
     }
     var at = root.location && root.location.origin;
@@ -197,11 +232,15 @@
    * opts.fill (#1481, the side panel): the frame fills its holder — the same frame from mountPreview, only sized by the
    * panel instead of by the frame's height messages, which it then ignores.
    */
+  /** How many previews this page has started: a click whose HTML arrives late asks whether another started meanwhile. */
+  var starts = 0;
+  function startCount() { return starts; }
   function start(key, holder, html, ui, opts) {
     var a = availability();
     if (!a.ok) { ui.state("unavailable", a.reason); return false; }
     if (typeof html !== "string" || utf8Bytes(html) > LIMITS.maxBytes) { ui.state("unavailable", say("pvHtmlOver", "This HTML is over 1 MiB; it is not previewed.")); return false; }
     stopAll("another");
+    starts++;
     var doc = holder.ownerDocument;
     var iframe = mountPreview(doc);
     var card = {
@@ -330,7 +369,7 @@
 
   return {
     init: init, availability: availability, optedIn: optedIn, setOptIn: setOptIn, never: never, setNever: setNever, onChange: onChange, listeners: listeners, onStorage: onStorage,
-    start: start, stop: stop, stopAll: stopAll, stopIn: stopIn, running: running, liveCount: liveCount, liveFrame: liveFrame,
+    start: start, startCount: startCount, stop: stop, stopAll: stopAll, stopIn: stopIn, running: running, liveCount: liveCount, liveFrame: liveFrame,
     mountPreview: mountPreview, onMessage: onMessage, BANNER: BANNER, LIMITS: LIMITS,
     /** The banner every running preview carries, in the page's language (#1554); BANNER is its English. */
     banner: function () { return say("pvBanner", BANNER); },
@@ -338,5 +377,7 @@
     bannerAckLabel: function () { return say("pvBannerAck", "I understand"); },
     bannerAckTitle: function () { return say("pvBannerAckTitle", "Hide this notice until you sign in again"); },
     bannerAcked: bannerAcked, ackBanner: ackBanner, setBannerScope: setBannerScope,
+    /** #1723: the public link's preview, while it starts (preview-status.js asks; this only takes the answer). */
+    waitingForPublicPreview: waitingForPublicPreview, applyPublicPreviewStatus: applyPublicPreviewStatus,
   };
 });

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.