@songsid/agend 2.3.0-beta.9 → 2.3.1

package/dist/ui/panel-settings.js

@@ -20,15 +20,15 @@ import { Empty, ErrorState, Skeleton } from "/assets/ui-states.js";
 import { Icon } from "/assets/ui-icons.js";
 import { Menu } from "/assets/ui-menu.js";
 import { toast } from "/assets/ui-toast.js";
-import { groupLabel, modelText } from "/assets/instance-nav.js";
+import { GroupMark, groupLabel, groupOf as navGroupOf, modelText } from "/assets/instance-nav.js";
 import "./settings-strings.js";
 import { api, attach, confirmedWrite, newKey } from "./settings-confirm.js";
 import { dismissOperation, operationActive, restartFleet, startOperation, takeLeftover } from "./settings-apply.js";
 import {
-  ACCESS_MODES, AGENT_MODES, DEFAULT_SCHEMA, HANG_TIMEOUT_DEFAULT_MINUTES, LOG_LEVELS, TOOL_PROGRESS, TOOL_SETS, VISIBILITY_MODES, batchImpact,
-  changedFields, channelId, channelsOf, chLabel, connectionState, effectiveSummary, fleetModel, fromYaml, fullModelRequests, groupAgents,
+  ACCESS_MODES, AGENT_MODES, DASHBOARD_FEATURES, DEFAULT_SCHEMA, HANG_TIMEOUT_DEFAULT_MINUTES, LOG_LEVELS, TOOL_PROGRESS, TOOL_SETS, VISIBILITY_MODES, batchImpact,
+  changedFields, channelId, channelsOf, chLabel, connectionState, dashboardDefault, effectiveSummary, fleetModel, fromYaml, fullModelRequests, groupAgents,
   hasOwn, impactOf, localeOptions, defaultsImpact, requestImpact, nonNegative, positive, replyGuardSupported, shortName, STATUS_ORDER, toYaml,
-  visibilityDefault, worstImpact,
+  toolSetDefault, visibilityDefault, worstImpact,
 } from "./settings-model.js";
 import {
   AgentDialog, BackendSelect, BotDialog, ChipList, ClassicDialog, Drawer, Feedback, Impact, Label, ModelSelect, NewBotDialog, Override,
@@ -45,8 +45,13 @@ import "./chat-strings.js";
 import { AppearanceSection } from "./settings-appearance.js";
 import { GuestsCard } from "./settings-guests.js";
 import { WebAuthorityCard } from "./settings-web-authority.js";
+import { SignInList } from "./backend-signin.js";
 
 const tn = (k, ...v) => t(`settings.${k}`, ...v);
+/** What a refused change says to a person: the server's code in words (the code itself only for one not listed). */
+const APPLY_ERRORS = new Set(["unsupported_sensitive_effect", "confirmation_diff_too_large", "session_required", "admin_required", "settings_changed",
+  "request_no_longer_current", "too_many_pending_changes", "fleet_unavailable", "invalid_settings_effect", "settings_confirmation_unavailable", "failed"]);
+export const applyErrorText = (code) => (APPLY_ERRORS.has(code) ? tn(`applyError_${code}`) : tn("applyErrorOther", String(code)));
 const ICONS = { device: "user", appearance: "palette", agents: "bot", bots: "plug", classic: "room", general: "sliders", web: "globe", advanced: "code" };
 const RELEASES = "https://github.com/songsid/AgEnD/releases";
 
@@ -170,7 +175,7 @@ export function SettingsPanel({ route, navKey }) {
   const applied = (pendingChanges || []).filter((p) => p.state === "applied").map((p) => p.id).join(",");
   useEffect(() => { if (applied) reload(); }, [applied]);
 
-  const stage = (key, change) => {
+  const stage = (key, change, quiet = false) => {
     setStaged((s) => {
       const m = new Map(s);
       const prev = m.get(key);
@@ -181,7 +186,7 @@ export function SettingsPanel({ route, navKey }) {
       m.set(key, { ...change, stageKey: key });
       return m;
     });
-    toast(tn("queued", change.label));
+    if (!quiet) toast(tn("queued", change.label));
   };
   const unstage = (key) => setStaged((s) => { if (!s.has(key)) return s; const m = new Map(s); m.delete(key); return m; });
   const discard = () => { dropSecrets(staged); setStaged(new Map()); reload(); };
@@ -460,7 +465,9 @@ function Agents({ ctx, search, openDialog }) {
   const [collapsed, setCollapsed] = useState(() => new Set());
   const [busy, setBusy] = useState(() => new Map());     // name → the action under way
   const chs = channelsOf(ctx.fleet);
-  const groups = groupAgents(insts, ctx.live, search);
+  // #2172: the sidebar's grouping — an agent in a team under its team, else under its first tag.
+  const teamsOf = (name) => Object.keys(ctx.fleet.teams || {}).filter((t) => Array.isArray(ctx.fleet.teams[t]?.members) && ctx.fleet.teams[t].members.includes(name));
+  const groups = groupAgents(insts, ctx.live, search, (name) => navGroupOf({ tags: insts[name]?.tags, teams: teamsOf(name) }), groupLabel);
   // One action per agent at a time: the whole row is off (Settings and ⋯ too), and the pressed button says it is working.
   const run = async (name, action, work) => {
     if (busy.has(name)) return;
@@ -469,14 +476,16 @@ function Agents({ ctx, search, openDialog }) {
   };
   const head = html`<div class="list-head"><span>${Object.keys(insts).length === 1 ? tn("countAgent") : tn("countAgents", Object.keys(insts).length)}</span>
     <button type="button" class="btn btn-primary" onClick=${() => openDialog({ kind: "create" })}><${Icon} name="plus" size=${16} />${tn("newAgent")}</button></div>`;
-  if (!Object.keys(insts).length) return html`${head}<${Empty} icon="bot" title=${tn("noAgents")} />`;
-  if (!groups.length) return html`${head}<${Empty} icon="search" title=${tn("noAgentMatch", search.trim())} />`;
+  // #2233: after the agents, each login on this machine with Sign in (backend-signin.js).
+  const signIns = html`<${SignInList} />`;
+  if (!Object.keys(insts).length) return html`${head}<${Empty} icon="bot" title=${tn("noAgents")} />${signIns}`;
+  if (!groups.length) return html`${head}<${Empty} icon="search" title=${tn("noAgentMatch", search.trim())} />${signIns}`;
   return html`${head}<div class="s-list">${groups.map(({ group, names }) => {
     const folded = collapsed.has(group) && !search.trim();      // searching opens every group
     return html`<section key=${group} class="s-group">
       <button type="button" class="s-group-head" aria-expanded=${folded ? "false" : "true"}
         onClick=${() => setCollapsed((c) => { const n = new Set(c); n.has(group) ? n.delete(group) : n.add(group); return n; })}>
-        <${Icon} name="chevron" size=${14} cls=${folded ? "caret folded" : "caret"} /><span class="grow">${groupLabel(group)}</span><span class="count">${names.length}</span></button>
+        <${Icon} name="chevron" size=${14} cls=${folded ? "caret folded" : "caret"} /><${GroupMark} group=${group} /><span class="grow">${groupLabel(group)}</span><span class="count">${names.length}</span></button>
       ${folded ? null : names.map((name) => {
         const inst = insts[name];
         const st = (ctx.live[name] && ctx.live[name].status) || "stopped";
@@ -502,10 +511,33 @@ function Agents({ ctx, search, openDialog }) {
         </div>`;
       })}
     </section>`;
-  })}</div>`;
+  })}</div>${signIns}`;
+}
+
+function ConnectionRetry({ id, ctx }) {
+  const lease = useLease(`connection-retry:${id}`);
+  const claimed = useRef(false);
+  const [busy, setBusy] = useState(false);
+  const retry = async () => {
+    if (claimed.current) return;
+    claimed.current = true; setBusy(true);
+    try {
+      const response = await lease.fetch(`/api/settings/connections/${encodeURIComponent(id)}/retry`, { method: "POST" });
+      if (!lease.current()) return;
+      toast(response.ok ? tn("connRetryQueued") : tn("connRetryFailed"));
+      await ctx.reload();
+    } catch {
+      if (lease.current()) toast(tn("connRetryFailed"));
+    } finally {
+      claimed.current = false;
+      if (lease.current()) setBusy(false);
+    }
+  };
+  return html`<button type="button" class="btn btn-sm" disabled=${busy} onClick=${retry}>${tn("connRetryNow")}</button>`;
 }
 
 function Bots({ ctx, search, openDialog }) {
+  const overPublicLink = globalThis.document?.body?.dataset?.publicLink === "1";
   const all = channelsOf(ctx.fleet);
   const needle = search.trim().toLowerCase();
   const rows = all.map((ch, i) => ({ ch, i })).filter(({ ch }) => !needle || [ch.id, ch.type, ch.group_id, ch.bot_token_env].some((v) => String(v ?? "").toLowerCase().includes(needle)));
@@ -534,6 +566,7 @@ function Bots({ ctx, search, openDialog }) {
         <span class="s-actions">
           <span class=${`tag${token ? "" : " warn"}`}>${token ? tn("tokenConfigured") : tn("tokenMissing")}</span>
           <span class=${`s-state ${state.cls}`} title=${stateText}>${stateText}</span>
+          ${!overPublicLink && ctx.fleetUp && meta.status !== "connected" ? html`<${ConnectionRetry} id=${channelId(ch, i)} ctx=${ctx} />` : null}
           <button type="button" class="btn btn-sm" onClick=${() => openDialog({ kind: "bot", id: channelId(ch, i) })}>${tn("settingsButton")}</button></span>
       </div>`;
     })}</div>`}
@@ -643,8 +676,9 @@ function General({ ctx }) {
   const original = useMemo(() => ({ c: structuredClone(c) }), []);
   const [f, setF] = useState(() => ({
     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",
+    agent_mode: d.agent_mode || "mcp", tool_set: TOOL_SETS.includes(d.tool_set) ? d.tool_set : "", tool_progress: d.tool_progress ?? "off",
     visibility: visibilityDefault(d), reply: d.reply_completion_guard ?? true, log_level: d.log_level || "info",
+    dash: Object.fromEntries(DASHBOARD_FEATURES.map((k) => [k, dashboardDefault(d, k)])),
     hangOn: hang.enabled !== false, hang: String(hang.timeout_minutes ?? HANG_TIMEOUT_DEFAULT_MINUTES),
     concurrency: String(startup.concurrency ?? 10), stagger: String(startup.stagger_delay_ms ?? 500),
     classicBackend: c.backend || d.backend || "claude-code",
@@ -666,14 +700,17 @@ function General({ ctx }) {
     if (!ready) return;
     const defaultsPatch = changedFields({
       backend: f.backend, model: f.model || undefined, locale: f.locale || null, auto_pause_after: num(f.auto),
-      agent_mode: f.agent_mode, tool_set: f.tool_set, tool_progress: f.tool_progress, cross_instance_visibility: f.visibility,
+      agent_mode: f.agent_mode, tool_set: f.tool_set || null, tool_progress: f.tool_progress, cross_instance_visibility: f.visibility,
       reply_completion_guard: f.reply, log_level: f.log_level,
+      // The dashboard features every agent may use unless its own setting says otherwise (all three, as shown).
+      dashboard: f.dash,
       hang_detector: { enabled: f.hangOn, timeout_minutes: num(f.hang) },
       startup: { concurrency: num(f.concurrency), stagger_delay_ms: num(f.stagger) },
     }, {
       backend: d.backend || "claude-code", model: d.model || undefined, locale: d.locale || null, auto_pause_after: d.auto_pause_after ?? 0,
-      agent_mode: d.agent_mode || "mcp", tool_set: d.tool_set || "full", tool_progress: d.tool_progress ?? "off",
+      agent_mode: d.agent_mode || "mcp", tool_set: TOOL_SETS.includes(d.tool_set) ? d.tool_set : null, tool_progress: d.tool_progress ?? "off",
       cross_instance_visibility: visibilityDefault(d), reply_completion_guard: d.reply_completion_guard ?? true, log_level: d.log_level || "info",
+      dashboard: Object.fromEntries(DASHBOARD_FEATURES.map((k) => [k, dashboardDefault(d, k)])),
       hang_detector: { enabled: hang.enabled !== false, timeout_minutes: hang.timeout_minutes ?? HANG_TIMEOUT_DEFAULT_MINUTES },
       startup: { concurrency: startup.concurrency ?? 10, stagger_delay_ms: startup.stagger_delay_ms ?? 500 },
     });
@@ -718,6 +755,11 @@ function General({ ctx }) {
         <div class="field"><label class="check"><input type="checkbox" checked=${f.reply} onChange=${(e) => set("reply")(e.target.checked)} /><span>${tn("replyCompletionGuard")}</span><${Impact} schema=${schema} field="defaults.reply_completion_guard" /></label>
           <p class="note">${fleetReply}</p></div>
       </div>
+      <fieldset class="field dash-perms"><legend>${L(tn("dashboardAccess"), "defaults.dashboard")}</legend>
+        <p class="note">${tn("dashboardDefaultsHint")}</p>
+        ${DASHBOARD_FEATURES.map((k) => html`<label key=${k} class="check"><input type="checkbox" checked=${f.dash[k]}
+          onChange=${(e) => setF((x) => ({ ...x, dash: { ...x.dash, [k]: e.target.checked } }))} /><span>${tn(`dashboard_${k}`)}</span></label>`)}
+      </fieldset>
     </section>
     <section class="card"><h3>ClassicBot</h3>
       <div class="grid2">
@@ -738,7 +780,8 @@ function General({ ctx }) {
     </section>
     <${Drawer} title=${tn("advancedSection")}>
       <section class="card"><h3>${tn("runtimeResources")}</h3><div class="grid2">
-        <div class="field">${L(tn("toolSet"), "defaults.tool_set", "g-ts")}<${Select} id="g-ts" value=${f.tool_set} onChange=${set("tool_set")} options=${TOOL_SETS} /></div>
+        <div class="field">${L(tn("toolSet"), "defaults.tool_set", "g-ts")}<${Select} id="g-ts" value=${f.tool_set} onChange=${set("tool_set")}
+          options=${[{ value: "", label: tn("toolSetUnset", toolSetDefault({}, {}), toolSetDefault({}, { general_topic: true })) }, ...TOOL_SETS]} /></div>
         <div class="field">${L(tn("logLevel"), "defaults.log_level", "g-ll")}<${Select} id="g-ll" value=${f.log_level} onChange=${set("log_level")} options=${LOG_LEVELS} /></div>
         <div class="field">${L(tn("agentMode"), "defaults.agent_mode", "g-am")}<${Select} id="g-am" value=${f.agent_mode} onChange=${set("agent_mode")} options=${AGENT_MODES} /></div>
       </div></section>
@@ -768,7 +811,7 @@ function General({ ctx }) {
  */
 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.upload_max_file_mb", "web.upload_max_total_mb", "web_terminal.bind", "web_terminal.tunnel",
+  "web.usage_panel", "web.search", "web.provider_secrets", "web.upload_max_file_mb", "web.upload_max_total_mb", "web_terminal.bind", "web_terminal.tunnel",
 ];
 function WebSection({ ctx, staged }) {
   const { schema } = ctx;
@@ -780,16 +823,26 @@ function WebSection({ ctx, staged }) {
     echo: web.echo_to_channel ?? true,
     log: web.log_tab === true,                                                  // #1218: off by default
     usagePub: web.usage_report_on_public_link === true,                         // #2122: 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" },
+    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", hostname: (web.public_link && web.public_link.hostname) ?? "", tunnel_token_env: (web.public_link && web.public_link.tunnel_token_env) ?? "", origin_port: (web.public_link && web.public_link.origin_port) ?? 19282, auto_open: (web.public_link && web.public_link.auto_open) ?? false },
     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, usagePub: original.usagePub, 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 [f, setF] = useState(() => {
+    // Settings sections share one draft. Reopening Web must show it as well as preserve it in the Apply bar, so a
+    // subsequent field edit keeps earlier edits. The original disk values remain the diff/confirmation baseline.
+    const request = staged.get("web")?.request;
+    const pending = request?.method === "PUT" && request.url === "/api/settings/fleet/web" ? request.body || {} : {};
+    const pub = pending.public_link || {}, session = pending.session?.local || {}, terminal = pending.web_terminal || {};
+    const pick = (obj, key, fallback) => Object.prototype.hasOwnProperty.call(obj, key) ? obj[key] : fallback;
+    return {
+      echo: pick(pending, "echo_to_channel", original.echo), log: pick(pending, "log_tab", original.log), usagePub: pick(pending, "usage_report_on_public_link", original.usagePub),
+      pub: pick(pub, "allow_public", original.pub.allow_public), ttl: String(pick(pub, "ttl_minutes", original.pub.ttl_minutes)), protocol: pick(pub, "protocol", original.pub.protocol),
+      hostname: pick(pub, "hostname", original.pub.hostname), originPort: String(pick(pub, "origin_port", original.pub.origin_port)), autoOpen: pick(pub, "auto_open", original.pub.auto_open),
+      abs: text(pick(session, "absolute_hours", original.session.absolute_hours)), idle: text(pick(session, "idle_hours", original.session.idle_hours)),
+      termOn: pick(terminal, "enabled", original.terminal.enabled) !== false, termTtl: text(pick(terminal, "ttl_minutes", 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).
@@ -798,16 +851,28 @@ function WebSection({ ctx, staged }) {
   // 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);
+  // Named mode: a hostname is typed (the server judges the merged result the same way).
+  const named = String(f.hostname || "").trim() !== "";
   const errors = {
-    ttl: !Number.isInteger(Number(f.ttl)) || Number(f.ttl) < 1 || Number(f.ttl) > 480 ? "publicTtl" : "",
+    hostname: f.hostname && !/^(?:https:\/\/)?[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)+\/?$/.test(f.hostname) ? "namedHostnameInvalid" : "",
+    originPort: !Number.isInteger(Number(f.originPort)) || Number(f.originPort) < 1024 || Number(f.originPort) > 65535 ? "namedPortInvalid" : "",
+    // #named-link-ttl: a fixed hostname (named tunnel) allows up to 7 days, or 0 = no expiry; a quick tunnel 1–480.
+    ttl: String(f.ttl).trim() === "" || !Number.isInteger(Number(f.ttl)) || Number(f.ttl) < (named ? 0 : 1) || Number(f.ttl) > (named ? 10080 : 480)
+      ? (named ? "publicTtlNamedRange" : "publicTtlQuickRange") : "",
+    autoOpen: f.autoOpen && !named ? "publicAutoOpenNeedsHostname" : "",
     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 review = (quiet = false) => {
+    // Invalid intermediate text must not leave an older valid draft available to Apply.
+    if (!ready) { if (staged.has("web")) ctx.unstage("web"); setMsg(null); return; }
+    // Keep an existing secret reference, including a custom one. Only a newly supplied hostname without any
+    // reference adopts the standard env key; mounting or editing an unrelated field never rewrites credentials.
+    const tokenEnv = f.hostname === original.pub.hostname ? original.pub.tunnel_token_env
+      : f.hostname ? original.pub.tunnel_token_env || "AGEND_CLOUDFLARE_TUNNEL_TOKEN" : "";
+    const publicPatch = changedFields({ allow_public: f.pub, ttl_minutes: Number(f.ttl), protocol: f.protocol, hostname: f.hostname, tunnel_token_env: tokenEnv, origin_port: Number(f.originPort), auto_open: f.autoOpen }, 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,
@@ -830,12 +895,24 @@ function WebSection({ ctx, staged }) {
     ];
     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 } });
+        request: { method: "PUT", url: "/api/settings/fleet/web", body } }, quiet);
     } else if (staged.has("web")) ctx.unstage("web");
-    setMsg(tn("readyApply"));
+    setMsg(fields.length ? tn("readyApply") : null);
   };
+  // This form already has validation and a single shared Web draft. Valid edits join that draft immediately;
+  // Apply, its confirmations and the leave guard still own all HTTP writes. Quiet staging avoids a toast per key.
+  // Returning from another Settings section remounts this form: its unchanged initial fields must not erase the
+  // parent's already-staged Web draft. Only an actual field edit replaces or removes that draft.
+  const formMounted = useRef(false);
+  useEffect(() => { if (!formMounted.current) { formMounted.current = true; return; } review(true); }, [f]);
   const shown = (path) => {
     const [top, key] = path.split(".");
+    if (top === "web" && key === "search") {
+      const days = web.search && typeof web.search === "object" ? web.search.retention_days : undefined;
+      if (days === undefined || days === null) return tn("searchRetentionUnset");
+      if (days === 0) return tn("searchRetentionZero");
+      return String(days);
+    }
     const v = (top === "web" ? web : term)[key];
     return v === undefined ? tn("notSet") : typeof v === "object" ? JSON.stringify(v) : String(v);
   };
@@ -870,17 +947,26 @@ function WebSection({ ctx, staged }) {
       <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="publicWebHostname">${tn("namedHostname")}</label><input id="publicWebHostname" type="text" value=${f.hostname} placeholder="agend.example.com" class=${errors.hostname ? "invalid" : ""} onInput=${(e) => set("hostname")(e.target.value)} /><${Feedback} error=${errors.hostname} /></div>
+        <div class="field"><label for="publicWebOriginPort">${tn("namedOriginPort")}</label><input id="publicWebOriginPort" type="number" min="1024" max="65535" value=${f.originPort} class=${errors.originPort ? "invalid" : ""} onInput=${(e) => set("originPort")(e.target.value)} /><${Feedback} error=${errors.originPort} /></div>
+      </div>
+      <p class="note">${tn("namedTunnelHint")} <a href="https://github.com/songsid/AgEnD/blob/main/docs/named-tunnel.md" target="_blank" rel="noopener noreferrer">${tn("namedTunnelSetup")}</a></p>
+      <div class="grid2">
+        <div class="field"><label for="publicWebTtl">${tn(named ? "publicTtlNamed" : "publicTtl")}</label><input id="publicWebTtl" type="number" min=${named ? "0" : "1"} max=${named ? "10080" : "480"} step="1" 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>
+      ${named ? html`<p class="note" id="publicTtlNamedHint">${tn("publicTtlNamedHint")}</p>` : null}
+      ${named || f.autoOpen ? html`<label class="check"><input id="publicAutoOpen" type="checkbox" checked=${f.autoOpen} onChange=${(e) => set("autoOpen")(e.target.checked)} /><span>${tn("publicAutoOpen")}</span><${Impact} schema=${schema} field="web.public_link.auto_open" /></label>
+      <p class="note">${tn("publicAutoOpenHint")}</p><${Feedback} error=${errors.autoOpen} />` : null}
     </section>
     </fieldset>
-    ${overPublicLink ? null : html`<${GuestsCard} ctx=${ctx} staged=${staged} /><${WebAuthorityCard} ctx=${ctx} staged=${staged} />`}
+    ${overPublicLink ? null : html`<${PublicTunnelToken} /><${GuestsCard} ctx=${ctx} staged=${staged} /><${WebAuthorityCard} ctx=${ctx} staged=${staged} />`}
     <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>
+      <p class="note">${tn("webSearchHint")}</p>
     </section>
-    <div class="save-row"><button type="button" class="btn btn-primary" disabled=${!ready} onClick=${review}>${tn("reviewChanges")}</button>
+    <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>`;
 }
@@ -953,7 +1039,7 @@ function OperationCard({ op, schema }) {
   const mismatch = schema && schema.fleet_signature_mismatch;
   const title = op.phase === "failed" ? tn("applyPartial") : fleetRestarting ? tn("restartFleetTitle") : busy ? tn("applying")
     : failedRows ? tn("applyPartial") : needsRestart ? tn("applyRestartNeeded") : tn("applyDone");
-  const note = op.phase === "failed" ? (op.error === "busy" ? tn("applyBusy") : op.error ? tn("applyStepFailed", op.error) : "")
+  const note = op.phase === "failed" ? (op.error === "busy" ? tn("applyBusy") : op.error ? tn("applyStepFailed", applyErrorText(op.error)) : "")
     : fleetRestarting ? tn("restartFleetWaiting") : op.lostJob ? tn("applyLostJob")
     : job && job.overdue ? tn("applyStillWorking", Math.round((job.elapsed_ms || 0) / 1000))
     : mismatch && needsRestart ? tn("signatureMismatch", mismatch.join(", ")) : needsRestart ? tn("applyRestartHint") : "";
@@ -980,7 +1066,7 @@ function OperationCard({ op, schema }) {
     ${op.steps.length ? html`<ul class="s-op-steps">${op.steps.map((s, i) => html`<li key=${i} class=${`s-step ${s.status}`}>
       <span class="s-step-icon" aria-hidden="true">${icon(s.status) ? html`<${Icon} name=${icon(s.status)} size=${14} />` : "·"}</span>
       <span class="grow">${s.label}</span>
-      <span class="note">${s.status === "waiting" ? tn("stepWaiting") : s.status === "skipped" ? tn("stepSkipped") : s.status === "failed" ? (s.error || tn("applyFailed")) : s.note || impactText(s.impact)}</span></li>`)}</ul>` : null}
+      <span class="note">${s.status === "waiting" ? tn("stepWaiting") : s.status === "skipped" ? tn("stepSkipped") : s.status === "failed" ? (s.error ? applyErrorText(s.error) : tn("applyFailed")) : s.note || impactText(s.impact)}</span></li>`)}</ul>` : null}
     ${rows.length ? html`<ul class="s-op-steps">${rows.map((r) => html`<li key=${r.target} class=${`s-step ${r.status}`}>
       <span class="s-step-icon" aria-hidden="true">${r.status === "done" ? html`<${Icon} name="check" size=${14} />` : r.status === "failed" ? html`<${Icon} name="alert" size=${14} />` : r.status === "restart-required" ? html`<${Icon} name="restart" size=${14} />` : "·"}</span>
       <span class="grow">${r.target === "fleet" ? "AgEnD" : shortName(r.target, {})}</span>
@@ -1000,3 +1086,50 @@ function HelpDialog({ onClose }) {
 }
 
 export { worstImpact, ACCESS_MODES };
+
+function PublicTunnelToken() {
+  const lease = useLease("public-tunnel-token");
+  const [secret, setSecret] = useState("");
+  const [present, setPresent] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const inFlight = useRef(false);
+  const [message, setMessage] = useState("");
+  const base = "/api/settings/public-tunnel-token";
+  const refresh = async () => {
+    const result = await api(base);
+    if (lease.current() && result.ok) setPresent(result.body?.[0]?.token_present === true);
+  };
+  useEffect(() => { refresh().catch(() => {}); }, []);
+  const go = async (clear) => {
+    if (inFlight.current || !clear && !secret) return;
+    const value = secret;
+    setSecret(""); inFlight.current = true; setBusy(true); setMessage("");
+    const key = newKey("tunnel-token");
+    try {
+      const prepared = await api(`${base}/verify`, { method: "POST", headers: { "Idempotency-Key": key }, body: JSON.stringify(clear ? { clear: true } : { secret: value }) });
+      if (!lease.current()) return;
+      if (!prepared.ok && prepared.body?.error_code === "invalid_tunnel_token") { setMessage(tn("namedTokenInvalid")); return; }
+      if (!prepared.ok) throw Error("refused");
+      const applied = await confirmedWrite(`${base}/apply`, { method: "POST", key, label: tn(clear ? "namedTokenClear" : "namedTokenSet"), body: { verification_id: prepared.body?.verification_id, idempotency_key: key } });
+      let body = applied.body || {};
+      for (let n = 0; applied.ok && body.job_id && body.result === "applying" && n < 60; n++) {
+        await new Promise(r => setTimeout(r, 250));
+        const status = await api(`${base}/apply/${encodeURIComponent(body.job_id)}`);
+        if (status.ok) body = status.body || body;
+      }
+      if (lease.current()) {
+        setMessage(tn(applied.ok && body.result === "reloaded" ? "namedTokenSaved" : body.result === "pending_confirmation" ? "awaitingConfirmation" : "applyFailed"));
+        await refresh();
+      }
+    } catch { if (lease.current()) setMessage(tn("applyFailed")); }
+    finally { inFlight.current = false; if (lease.current()) setBusy(false); }
+  };
+  return html`<section class="card"><h3>${tn("namedToken")}</h3>
+    <p class="note">${tn("namedTokenHint")}</p>
+    <span class="tag">${present ? tn("keyConfigured") : tn("keyNotConfigured")}</span>
+    <input id="publicTunnelToken" type="password" autocomplete="new-password" aria-label=${tn("namedToken")} value=${secret} onInput=${e => setSecret(e.target.value)} />
+    <button type="button" class="btn btn-sm" disabled=${busy || !secret} onClick=${() => go(false)}>${tn("namedTokenSet")}</button>
+    <button type="button" class="btn btn-sm" disabled=${busy || !present} onClick=${() => go(true)}>${tn("namedTokenClear")}</button>
+    ${message ? html`<p class="note" role="status">${message}</p>` : null}
+  </section>`;
+}

package/dist/ui/preview-panel.js

@@ -16,7 +16,8 @@ import { Icon } from "/assets/ui-icons.js";
 import "./chat-render.js";
 import "./preview.js";
 import { loadHtmlAttachment } from "./html-attachment.js";
-import { EffectTrialPanel } from "./effect-trial-panel.js";
+import { experimentalComponent, useCanvasWorker } from "/assets/feature-flags.js";
+const EffectTrialPanel = experimentalComponent(() => import("./effect-trial-panel.js"), m => m.EffectTrialPanel);
 import { chatTime, onDayChange } from "./chat-time.js";
 
 const R = () => globalThis.AgendChatRender;