@songsid/agend 2.3.0-beta.9 → 2.3.0

package/dist/ui/search-dialog.js

@@ -0,0 +1,350 @@
+// #2293: global search (Ctrl+K / ⌘K) — chats, messages between agents and Task Board tasks, as the fleet's index has
+// them (GET /ui/search; an admin's only). A Spotlight-style dialog: the query on top, results under it grouped by agent,
+// ↑↓ and Enter, Esc or a click outside to close; filters folded under one toggle. A chat row still in the agent's
+// history opens there, at the message (#m=); anything else — a chat row that has left the history, a message between
+// agents, a task — opens here as the index's copy (GET /ui/search/context). Text only: no innerHTML, no style attribute.
+import { html, useEffect, useLayoutEffect, useMemo, useRef, useState } from "/assets/app-html.js";
+import { t, register } from "/assets/app-i18n.js";
+import { recordEdit } from "/assets/text-undo.js";
+import { appStore, useStore } from "/assets/app-store.js";
+import { navigate } from "/assets/app-nav.js";
+import { chatPath, fleetPath } from "/assets/app-route.js";
+import { namesOf, namesStore } from "/assets/instance-nav.js";
+import { Icon } from "/assets/ui-icons.js";
+
+register("search", {
+  en: {
+    label: "Search", placeholder: "Search chats, messages and tasks…", close: "Close", filters: "Filters", filtersOn: "Filters ({0})",
+    hint: "Find who you asked about something: a word or two from the chat, a message between agents or a task. Short words (1–2 characters) work too.",
+    recent: "Recent searches", clearRecent: "Clear",
+    agent: "Agent", anyAgent: "All agents", team: "Team", anyTeam: "All teams", time: "Time", anyTime: "Any time",
+    day: "24 hours", week: "7 days", month: "30 days", sources: "In", mine: "Only mine",
+    src_chat: "Chats", src_xmsg: "Agent messages", src_task: "Tasks",
+    badge_chat: "Chat", badge_xmsg: "Message", badge_task: "Task",
+    searching: "Searching…", none: "Nothing found", noneFiltered: "Nothing found with these filters",
+    building: "Still indexing — some older results may be missing.",
+    limited: "Words of 1–2 characters alone search the newest 5,000 entries only — add a longer word to search everything.",
+    unavailable: "Search is off or not available (web.search in fleet.yaml).", busy: "Search is busy — try again in a moment.",
+    signedOut: "Signed out — sign in again to search.", failed: "Search failed — try again.",
+    keys: "↑↓ move · Enter open · Esc close", results: "Results", back: "Results",
+    gone: "This message is no longer in the chat's history — this is the copy kept by search.",
+    openChat: "Open chat", openChatOf: "Open {0}'s chat", openTasks: "Open the Task Board", loadingCtx: "Loading…",
+    notFound: "No longer found — it may have been removed.", from: "{0} → {1}", groupCount: "{0} results",
+  },
+  "zh-TW": {
+    label: "搜尋", placeholder: "搜尋聊天、訊息與任務…", close: "關閉", filters: "篩選", filtersOn: "篩選（{0}）",
+    hint: "找回某件事當初交給誰：輸入聊天、agent 之間訊息或任務裡的一兩個詞。1–2 個字的短詞也可以。",
+    recent: "最近的搜尋", clearRecent: "清除",
+    agent: "Agent", anyAgent: "所有 agent", team: "團隊", anyTeam: "所有團隊", time: "時間", anyTime: "不限時間",
+    day: "24 小時", week: "7 天", month: "30 天", sources: "範圍", mine: "只看我的",
+    src_chat: "聊天", src_xmsg: "Agent 訊息", src_task: "任務",
+    badge_chat: "聊天", badge_xmsg: "訊息", badge_task: "任務",
+    searching: "搜尋中…", none: "找不到結果", noneFiltered: "這些篩選條件下找不到結果",
+    building: "索引仍在建立中，較舊的結果可能還沒出現。",
+    limited: "只有 1–2 個字的短詞時，只會搜尋最新的 5,000 筆；加上較長的詞即可搜尋全部。",
+    unavailable: "搜尋已關閉或無法使用（fleet.yaml 的 web.search）。", busy: "搜尋忙碌中，請稍後再試。",
+    signedOut: "已登出，請重新登入後再搜尋。", failed: "搜尋失敗，請再試一次。",
+    keys: "↑↓ 移動 · Enter 開啟 · Esc 關閉", results: "結果", back: "結果",
+    gone: "這則訊息已不在聊天紀錄中，以下是搜尋保留的副本。",
+    openChat: "開啟聊天", openChatOf: "開啟 {0} 的聊天", openTasks: "開啟 Task Board", loadingCtx: "載入中…",
+    notFound: "已找不到，可能已被移除。", from: "{0} → {1}", groupCount: "{0} 筆結果",
+  },
+});
+
+export const DEBOUNCE_MS = 200;
+export const RECENT_KEY = "agend_search_recent";
+export const RECENT_MAX = 8;
+const SOURCES = ["chat", "xmsg", "task"];
+const SINCE = { any: 0, day: 24 * 3600_000, week: 7 * 24 * 3600_000, month: 30 * 24 * 3600_000 };
+
+export function readRecent() {
+  try { const v = JSON.parse(localStorage.getItem(RECENT_KEY) || "[]"); return Array.isArray(v) ? v.filter(x => typeof x === "string" && x.trim()).slice(0, RECENT_MAX) : []; } catch { return []; }
+}
+export function rememberSearch(q) {
+  const s = (q || "").trim();
+  if (!s) return;
+  try { localStorage.setItem(RECENT_KEY, JSON.stringify([s, ...readRecent().filter(x => x !== s)].slice(0, RECENT_MAX))); } catch { /* this page only */ }
+}
+function forgetRecent() { try { localStorage.removeItem(RECENT_KEY); } catch { /* nothing kept */ } }
+
+/** The request's query string for the query and filters (null: nothing to search). */
+export function searchUrl(q, f, now = Date.now()) {
+  const query = (q || "").trim();
+  if (!query) return null;
+  const p = new URLSearchParams({ q: query, limit: "60" });
+  if (f.instance) p.append("instance", f.instance);
+  if (f.team) p.set("team", f.team);
+  if (f.sources && f.sources.length && f.sources.length < SOURCES.length) for (const s of f.sources) p.append("source", s);
+  if (SINCE[f.since]) p.set("since", String(now - SINCE[f.since]));
+  if (f.mine) p.set("mine", "1");
+  return `/ui/search?${p.toString()}`;
+}
+/** Hits grouped by agent, in the order the newest of each appears; `index` is each hit's place in the flat list. */
+export function groupHits(hits) {
+  const groups = new Map();
+  hits.forEach((hit) => {
+    if (!groups.has(hit.instance)) groups.set(hit.instance, []);
+    groups.get(hit.instance).push(hit);
+  });
+  let i = 0;
+  return [...groups].map(([instance, list]) => ({ instance, hits: list.map(hit => ({ hit, index: i++ })) }));
+}
+/** The flat order ↑↓ moves through: the groups', top to bottom. */
+export const flatHits = (groups) => groups.flatMap(g => g.hits.map(x => x.hit));
+/** A snippet as text segments, the matched ones marked (ranges from the server, clipped to the text). */
+export function snippetSegments(text, marks) {
+  const s = String(text || ""), out = [];
+  let at = 0;
+  for (const m of Array.isArray(marks) ? marks : []) {
+    const a = Math.max(at, Math.min(s.length, Number(m && m[0]) || 0)), b = Math.max(a, Math.min(s.length, Number(m && m[1]) || 0));
+    if (a > at) out.push({ text: s.slice(at, a) });
+    if (b > a) out.push({ text: s.slice(a, b), mark: true });
+    at = b;
+  }
+  if (at < s.length) out.push({ text: s.slice(at) });
+  return out;
+}
+/** The query's words marked in `text` (case-insensitive, every occurrence; overlapping ones merged) — for the copy view. */
+export function markTerms(text, q) {
+  const s = String(text || ""), lower = s.toLowerCase();
+  const terms = [...new Set(String(q || "").toLowerCase().split(/\s+/).filter(Boolean))].slice(0, 8);
+  const ranges = [];
+  for (const term of terms) for (let at = lower.indexOf(term); at !== -1 && ranges.length < 500; at = lower.indexOf(term, at + term.length)) ranges.push([at, at + term.length]);
+  ranges.sort((a, b) => a[0] - b[0]);
+  const merged = [];
+  for (const r of ranges) { const last = merged[merged.length - 1]; if (last && r[0] <= last[1]) last[1] = Math.max(last[1], r[1]); else merged.push([...r]); }
+  return snippetSegments(s, merged);
+}
+/** "14:05" today, "10/19 14:05" this year, "2025/10/19" before. */
+export function when(ms, now = Date.now()) {
+  const d = new Date(ms), n = new Date(now);
+  if (Number.isNaN(d.getTime())) return "";
+  const hm = `${String(d.getHours()).padStart(2, "0")}:${String(d.getMinutes()).padStart(2, "0")}`;
+  if (d.toDateString() === n.toDateString()) return hm;
+  return d.getFullYear() === n.getFullYear() ? `${d.getMonth() + 1}/${d.getDate()} ${hm}` : `${d.getFullYear()}/${d.getMonth() + 1}/${d.getDate()}`;
+}
+/** A chat hit's message key in its agent's chat (#m=<boot>-<id>), or null. */
+export function messageKeyOf(hit) {
+  const boot = hit && hit.ref && hit.ref.boot, id = hit && hit.ref && hit.ref.id;
+  return typeof boot === "string" && /^[0-9a-f]{1,32}$/.test(boot) && Number.isSafeInteger(id) && id >= 0 ? `${boot}-${id}` : null;
+}
+/**
+ * Open an agent's chat at a message: the route, then the address's #m= — the chat reads it as it mounts, and (already
+ * open) on the hashchange this sends.
+ */
+export function jumpToMessage(instance, key, w = window) {
+  const path = chatPath(instance);
+  navigate(path);
+  if (!key) return;
+  w.history.replaceState(null, "", `${path}#m=${key}`);
+  w.dispatchEvent(new Event("hashchange"));
+}
+
+const errorText = (status) => (status === 404 ? t("search.unavailable") : status === 503 ? t("search.busy") : status === 401 ? t("search.signedOut") : t("search.failed"));
+
+export function SearchDialog({ preset = {}, onClose }) {
+  const ref = useRef(null), input = useRef(null), list = useRef(null);
+  const app = useStore(appStore);
+  const names = useStore(namesStore);
+  const [q, setQ] = useState(preset.q || "");
+  const [f, setF] = useState({ instance: preset.instance || "", team: "", since: "any", sources: [...SOURCES], mine: false });
+  const [showFilters, setShowFilters] = useState(!!preset.instance);
+  const [teams, setTeams] = useState(null);
+  const [res, setRes] = useState({ status: "idle" });
+  const [active, setActive] = useState(0);
+  const [detail, setDetail] = useState(null);
+  const [recent, setRecent] = useState(readRecent);
+  const seq = useRef(0);
+
+  // The native modal: focus trapped, the page inert, Esc → cancel (closed through the parent), a click on the backdrop.
+  useLayoutEffect(() => {
+    const d = ref.current;
+    const opener = typeof document !== "undefined" ? document.activeElement : null;
+    if (d && typeof d.showModal === "function" && !d.open) d.showModal();
+    input.current && input.current.focus();
+    return () => {
+      if (d && d.open && typeof d.close === "function") d.close();
+      if (opener && typeof opener.focus === "function" && document.contains?.(opener)) opener.focus();
+    };
+  }, []);
+  useEffect(() => {
+    const d = ref.current;
+    if (!d) return undefined;
+    const onCancel = (e) => { e.preventDefault(); onClose(); };
+    const onClick = (e) => { if (e.target === d) onClose(); };
+    d.addEventListener("cancel", onCancel);
+    d.addEventListener("click", onClick);
+    return () => { d.removeEventListener("cancel", onCancel); d.removeEventListener("click", onClick); };
+  }, [onClose]);
+
+  // The query, DEBOUNCE_MS after the last change; an answer to an older one is dropped.
+  useEffect(() => {
+    const url = searchUrl(q, f);
+    const mine = ++seq.current;
+    if (!url) { setRes({ status: "idle" }); return undefined; }
+    setRes(r => ({ ...r, status: "loading" }));
+    const ac = typeof AbortController === "function" ? new AbortController() : null;
+    const timer = setTimeout(async () => {
+      try {
+        const r = await fetch(url, { headers: { Accept: "application/json" }, ...(ac ? { signal: ac.signal } : {}) });
+        if (mine !== seq.current) return;
+        if (!r.ok) { setRes({ status: "error", error: errorText(r.status) }); return; }
+        const body = await r.json();
+        if (mine !== seq.current) return;
+        setRes({ status: "ok", hits: Array.isArray(body.hits) ? body.hits : [], limited: !!body.limited, building: !!body.building });
+        setActive(0);
+      } catch (err) {
+        if (mine === seq.current && !(err && err.name === "AbortError")) setRes({ status: "error", error: t("search.failed") });
+      }
+    }, DEBOUNCE_MS);
+    return () => { clearTimeout(timer); if (ac) ac.abort(); };
+  }, [q, f]);
+
+  // Teams, once the filters are first shown.
+  useEffect(() => {
+    if (!showFilters || teams) return;
+    fetch("/ui/teams", { headers: { Accept: "application/json" } }).then(r => (r.ok ? r.json() : { teams: {} })).then(
+      (b) => setTeams(Object.keys((b && b.teams) || {}).sort()), () => setTeams([]));
+  }, [showFilters, teams]);
+
+  const byName = useMemo(() => new Map((app.instances || []).map(it => [it.name ?? it.instance_name, it])), [app.instances]);
+  const label = (name) => (byName.has(name) ? namesOf(byName.get(name), names.primary).primary : name);
+  // While a new query runs, the last answer stays (dimmed) rather than flashing empty.
+  const groups = useMemo(() => groupHits(res.hits || []), [res]);
+  const flat = useMemo(() => flatHits(groups), [groups]);
+  const activeFilters = (f.instance ? 1 : 0) + (f.team ? 1 : 0) + (f.since !== "any" ? 1 : 0) + (f.sources.length < SOURCES.length ? 1 : 0) + (f.mine ? 1 : 0);
+
+  // The active row stays in view.
+  useEffect(() => {
+    const el = list.current && list.current.querySelector(`#search-opt-${active}`);
+    if (el && typeof el.scrollIntoView === "function") el.scrollIntoView({ block: "nearest" });
+  }, [active, res]);
+
+  const open = (hit) => {
+    if (!hit) return;
+    rememberSearch(q); setRecent(readRecent());
+    const key = hit.source === "chat" ? messageKeyOf(hit) : null;
+    if (key && hit.live) { onClose(); jumpToMessage(hit.instance, key); return; }
+    setDetail({ hit, status: "loading" });
+    // Any failure — the request, or a body that is not JSON — ends as an error, never "Loading…" for good.
+    fetch(`/ui/search/context?key=${encodeURIComponent(hit.key)}`, { headers: { Accept: "application/json" } })
+      .then(async (r) => {
+        if (!r.ok) { setDetail(d => (d && d.hit === hit ? { hit, status: "error", error: r.status === 404 ? t("search.notFound") : errorText(r.status) } : d)); return; }
+        const body = await r.json();
+        setDetail(d => (d && d.hit === hit ? { hit, status: "ok", ctx: body } : d));
+      })
+      .catch(() => setDetail(d => (d && d.hit === hit ? { hit, status: "error", error: t("search.failed") } : d)));
+  };
+  const onKey = (e) => {
+    if (e.isComposing) return;
+    if ((e.ctrlKey || e.metaKey) && (e.key === "k" || e.key === "K")) { e.preventDefault(); input.current && input.current.select(); return; }
+    // ↑↓ and Enter are the query box's: in the filters a select or a chip keeps its own keys.
+    if (detail || e.target !== input.current) return;
+    if (e.key === "ArrowDown") { e.preventDefault(); setActive(i => (flat.length ? (i + 1) % flat.length : 0)); }
+    else if (e.key === "ArrowUp") { e.preventDefault(); setActive(i => (flat.length ? (i - 1 + flat.length) % flat.length : 0)); }
+    else if (e.key === "Enter") { e.preventDefault(); if (flat.length) open(flat[Math.min(active, flat.length - 1)]); else rememberSearch(q); }
+  };
+  const setFilter = (patch) => setF(x => ({ ...x, ...patch }));
+  const toggleSource = (s) => setF(x => {
+    const has = x.sources.includes(s);
+    const next = has ? x.sources.filter(y => y !== s) : [...x.sources, s];
+    return { ...x, sources: next.length ? SOURCES.filter(y => next.includes(y)) : x.sources };   // never none
+  });
+  const activeId = flat.length && !detail ? `search-opt-${Math.min(active, flat.length - 1)}` : undefined;
+
+  return html`<dialog data-trust="dialog" ref=${ref} class="dlg search-dlg" aria-label=${t("search.label")} onKeyDown=${onKey}>
+    <div class="search-box">
+      <div class="search-head">
+        <${Icon} name="search" />
+        <input ref=${input} class="search-input" type="search" value=${q} placeholder=${t("search.placeholder")} aria-label=${t("search.label")}
+          role="combobox" aria-expanded=${flat.length && !detail ? "true" : "false"} aria-controls="search-results" aria-autocomplete="list"
+          aria-activedescendant=${activeId} autocomplete="off" spellcheck=${false} enterkeyhint="search"
+          onInput=${(e) => { setQ(e.target.value); setDetail(null); }} />
+        <button type="button" class=${`chip-btn search-filters-toggle${showFilters ? " on" : ""}`} aria-expanded=${showFilters ? "true" : "false"} aria-controls="search-filters"
+          onClick=${() => setShowFilters(v => !v)}><${Icon} name="sliders" size=${14} />${activeFilters ? t("search.filtersOn", activeFilters) : t("search.filters")}</button>
+        <button type="button" class="icon-btn" aria-label=${t("search.close")} title=${t("search.close")} onClick=${onClose}><${Icon} name="close" /></button>
+      </div>
+      ${showFilters ? html`<div id="search-filters" class="search-filters" role="group" aria-label=${t("search.filters")}>
+        <label class="search-field"><span>${t("search.agent")}</span>
+          <select value=${f.instance} onChange=${(e) => setFilter({ instance: e.target.value })}>
+            <option value="">${t("search.anyAgent")}</option>
+            ${[...byName.keys()].sort().map(n => html`<option value=${n}>${label(n)}</option>`)}
+            ${f.instance && !byName.has(f.instance) ? html`<option value=${f.instance}>${f.instance}</option>` : null}
+          </select></label>
+        ${teams && teams.length ? html`<label class="search-field"><span>${t("search.team")}</span>
+          <select value=${f.team} onChange=${(e) => setFilter({ team: e.target.value })}>
+            <option value="">${t("search.anyTeam")}</option>${teams.map(n => html`<option value=${n}>${n}</option>`)}</select></label>` : null}
+        <div class="search-chips" role="group" aria-label=${t("search.time")}>
+          ${["any", "day", "week", "month"].map(k => html`<button type="button" class=${`chip-btn${f.since === k ? " on" : ""}`} aria-pressed=${f.since === k ? "true" : "false"}
+            onClick=${() => setFilter({ since: k })}>${k === "any" ? t("search.anyTime") : t(`search.${k}`)}</button>`)}
+        </div>
+        <div class="search-chips" role="group" aria-label=${t("search.sources")}>
+          ${SOURCES.map(s => html`<button type="button" class=${`chip-btn${f.sources.includes(s) ? " on" : ""}`} aria-pressed=${f.sources.includes(s) ? "true" : "false"}
+            onClick=${() => toggleSource(s)}>${t(`search.src_${s}`)}</button>`)}
+          <label class="search-mine"><input type="checkbox" checked=${f.mine} onChange=${(e) => setFilter({ mine: e.target.checked })} />${t("search.mine")}</label>
+        </div>
+      </div>` : null}
+      <div class="search-body" ref=${list}>
+        ${detail ? html`<${Detail} detail=${detail} q=${q} label=${label} onBack=${() => { setDetail(null); input.current && input.current.focus(); }} onClose=${onClose} />`
+          : html`<${Results} q=${q} res=${res} groups=${groups} active=${active} setActive=${setActive} open=${open} label=${label} filtered=${activeFilters > 0}
+              recent=${recent} pick=${(s) => { recordEdit(input.current); setQ(s); input.current && input.current.focus(); }} clearRecent=${() => { forgetRecent(); setRecent([]); }} />`}
+      </div>
+      <div class="search-foot" aria-hidden="true">${t("search.keys")}</div>
+    </div></dialog>`;
+}
+
+function Results({ q, res, groups, active, setActive, open, label, filtered, recent, pick, clearRecent }) {
+  if (!q.trim()) {
+    return html`<div class="search-empty"><p class="search-hint">${t("search.hint")}</p>
+      ${recent.length ? html`<div class="search-recent"><div class="search-recent-head"><span>${t("search.recent")}</span>
+        <button type="button" class="chip-btn" onClick=${clearRecent}>${t("search.clearRecent")}</button></div>
+        <ul>${recent.map(s => html`<li><button type="button" class="search-recent-item" onClick=${() => pick(s)}><${Icon} name="clock" size=${14} /><span>${s}</span></button></li>`)}</ul></div>` : null}</div>`;
+  }
+  if (res.status === "error") return html`<p class="search-status bad" role="alert">${res.error}</p>`;
+  const hits = res.hits || [];
+  return html`
+    ${res.building ? html`<p class="search-note" role="status">${t("search.building")}</p>` : null}
+    ${res.limited ? html`<p class="search-note" role="status">${t("search.limited")}</p>` : null}
+    ${res.status === "loading" && !hits.length ? html`<p class="search-status" role="status">${t("search.searching")}</p>` : null}
+    ${res.status === "ok" && !hits.length ? html`<p class="search-status" role="status">${filtered ? t("search.noneFiltered") : t("search.none")}</p>` : null}
+    <div id="search-results" role="listbox" aria-label=${t("search.results")} class=${`search-results${res.status === "loading" ? " stale" : ""}`}>
+      ${groups.map(g => html`<div role="group" class="search-group" aria-label=${label(g.instance)}>
+        <div class="search-group-head" aria-hidden="true"><span>${label(g.instance)}</span><span class="search-count">${t("search.groupCount", g.hits.length)}</span></div>
+        ${g.hits.map(({ hit, index }) => html`<${Row} hit=${hit} index=${index} on=${index === active} label=${label} onHover=${() => setActive(index)} onOpen=${() => open(hit)} />`)}
+      </div>`)}
+    </div>`;
+}
+
+function Row({ hit, index, on, label, onHover, onOpen }) {
+  const who = hit.source === "xmsg" ? t("search.from", label(hit.instance), label(hit.peer || "")) : hit.source === "task" ? (hit.role || "") : hit.sender || "";
+  return html`<div id=${`search-opt-${index}`} role="option" aria-selected=${on ? "true" : "false"} class=${`search-row${on ? " on" : ""}`}
+    onMouseMove=${on ? undefined : onHover} onClick=${onOpen}>
+    <div class="search-row-top"><span class=${`search-badge ${hit.source}`}>${t(`search.badge_${hit.source}`)}</span>
+      <span class="search-who">${who}${hit.source === "xmsg" && hit.role && hit.role !== "message" ? html` <span class="search-kind">${hit.role}</span>` : null}</span>
+      <time class="search-time" datetime=${Number.isFinite(hit.ts) ? new Date(hit.ts).toISOString() : undefined}>${when(hit.ts)}</time></div>
+    <div class="search-snippet">${snippetSegments(hit.snippet, hit.marks).map(s => (s.mark ? html`<mark>${s.text}</mark>` : s.text))}</div>
+  </div>`;
+}
+
+function Detail({ detail, q, label, onBack, onClose }) {
+  const { hit } = detail;
+  const go = (path, key) => { onClose(); if (key !== undefined) jumpToMessage(hit.instance, key); else navigate(path); };
+  const head = html`<div class="search-detail-head"><button type="button" class="chip-btn" onClick=${onBack}><${Icon} name="back" size=${14} />${t("search.back")}</button>
+    <span class=${`search-badge ${hit.source}`}>${t(`search.badge_${hit.source}`)}</span><span class="search-who">${hit.source === "xmsg" ? t("search.from", label(hit.instance), label(hit.peer || "")) : label(hit.instance)}</span>
+    <time class="search-time">${when(hit.ts)}</time></div>`;
+  if (detail.status === "loading") return html`<div class="search-detail">${head}<p class="search-status" role="status">${t("search.loadingCtx")}</p></div>`;
+  if (detail.status === "error") return html`<div class="search-detail">${head}<p class="search-status bad" role="alert">${detail.error}</p></div>`;
+  const ctx = detail.ctx || {};
+  const doc = ctx.doc || {};
+  const line = (d, here) => html`<li class=${`search-ctx-line${here ? " here" : ""}`}><div class="search-row-top"><span class="search-who">${d.sender || ""}</span><time class="search-time">${when(d.ts)}</time></div>
+    <div class="search-ctx-text">${markTerms(d.text, q).map(x => (x.mark ? html`<mark>${x.text}</mark>` : x.text))}</div></li>`;
+  let actions;
+  if (hit.source === "chat") actions = html`<button type="button" class="btn btn-primary" onClick=${() => go(null, messageKeyOf(hit))}>${t("search.openChat")}</button>`;
+  else if (hit.source === "xmsg") actions = html`<button type="button" class="btn" onClick=${() => go(chatPath(hit.instance))}>${t("search.openChatOf", label(hit.instance))}</button>
+    ${hit.peer ? html`<button type="button" class="btn" onClick=${() => go(chatPath(hit.peer))}>${t("search.openChatOf", label(hit.peer))}</button>` : null}`;
+  else actions = html`<button type="button" class="btn btn-primary" onClick=${() => go(fleetPath("tasks"))}>${t("search.openTasks")}</button>`;
+  return html`<div class="search-detail">${head}
+    ${hit.source === "chat" ? html`<p class="search-note">${t("search.gone")}</p>` : null}
+    <ol class="search-ctx">${(ctx.before || []).map(d => line(d, false))}${line(doc, true)}${(ctx.after || []).map(d => line(d, false))}</ol>
+    <div class="search-detail-actions">${actions}</div></div>`;
+}

package/dist/ui/settings-appearance.js

@@ -2,10 +2,12 @@
 // versions, the pictures and fonts it may name, and this device's off switch. Settings itself is always drawn stock
 // (owner-css.js removes the link here), so a stylesheet that hides things can always be fixed from this page.
 import { html, useEffect, useRef, useState } from "/assets/app-html.js";
-import { t } from "/assets/app-i18n.js";
+import { register, t } from "/assets/app-i18n.js";
+import { recordEdit } from "/assets/text-undo.js";
 import { appStore, useStore } from "/assets/app-store.js";
 import { ModsCard } from "./settings-mods.js";
-import { EffectsCard } from "./settings-effects.js";
+import { experimentalComponent, useCanvasWorker } from "/assets/feature-flags.js";
+const EffectsCard = experimentalComponent(() => import("./settings-effects.js"), m => m.EffectsCard);
 import { Icon } from "/assets/ui-icons.js";
 import { toast } from "/assets/ui-toast.js";
 import { ownerCssOffHere, ownerCssTrial, safeMode, setOwnerCssActive, setOwnerCssOffHere, startOwnerCssTrial } from "/assets/owner-css.js";
@@ -21,6 +23,15 @@ import { CardTitle } from "./settings-learn.js";
 import "./settings-strings.js";
 
 const tn = (k, ...v) => t(`settings.${k}`, ...v);
+/** #2390: a refusal's detail in the page's language when the host named it (detail_key), else its English as sent. */
+export function appIconDetail(body) {
+  const key = body && typeof body.detail_key === "string" ? `appIconDetail_${body.detail_key}` : null;
+  const english = (body && body.detail) || "";
+  if (!key) return english;
+  const args = Array.isArray(body.detail_args) ? body.detail_args : [];
+  const said = tn(key, ...(body.detail_key === "corrupt" ? [english] : args));
+  return said === `settings.${key}` ? english : said;
+}
 const short = (sha) => (sha ? sha.slice(0, 8) : "");
 const kib = (n) => `${Math.max(1, Math.round(n / 1024))} KiB`;
 
@@ -45,11 +56,30 @@ export function AppearanceSection() {
   const publicLink = typeof document !== "undefined" && document.body && document.body.dataset.publicLink === "1";
   if (publicLink) return html`<section class="card s-appearance"><h3>${tn("cssTitle")}</h3><p class="sub">${tn("cssPublicLink")}</p></section>`;
   const group = (key) => html`<h2 class="s-ap-group">${tn(key)}</h2>`;
-  return html`${group("groupLook")}<${ThemesCard} /><${IdentityColorCard} /><${CardSizeCard} />
+  return html`${group("groupLook")}<${ThemesCard} /><${IdentityColorCard} /><${CardSizeCard} /><${AppIconCard} />
     ${group("groupLayout")}<${SidebarWidgetCard} />
     ${group("groupCss")}<${OwnerCssCard} /><${DeviceCard} />
     ${group("groupMods")}<${ModsCard} /><${EffectsCard} />
-    ${group("groupAdvanced")}<${CardLimitsCard} /><${RestoreDefaultsCard} />`;
+    ${group("groupAdvanced")}<${ExperimentalEffectsCard} /><${CardLimitsCard} /><${RestoreDefaultsCard} />`;
+}
+
+register("experimentalEffects", {
+  en: { title: "Experimental: Canvas Worker effects", help: "Enable uploaded Canvas Worker effects. Ambient effects are always available. Saved effects stay intact when this is off.", failed: "Could not change this setting. Try again." },
+  "zh-TW": { title: "實驗功能：Canvas Worker 特效", help: "啟用上傳的 Canvas Worker 特效。氛圍特效不受影響；關閉時保留已儲存的特效。", failed: "無法變更此設定，請重試。" },
+});
+function ExperimentalEffectsCard() {
+  const enabled = useCanvasWorker(), [writable, setWritable] = useState(false), [busy, setBusy] = useState(false), [failed, setFailed] = useState(false);
+  useEffect(() => { let live = true; Promise.resolve(globalThis.AgendAuth?.trialSession?.()).then(value => { if (live) setWritable(value?.localAdmin === true); }, () => {}); return () => { live = false; }; }, []);
+  if (!writable) return null;
+  const change = async value => {
+    setBusy(true); setFailed(false);
+    try {
+      const result = await confirmedWrite("/api/settings/fleet/web", { method: "PUT", body: { experimental: { canvas_worker: value } }, label: t("experimentalEffects.title") });
+      if (result.ok) appStore.set({ canvasWorker: value }); else setFailed(true);
+    } catch { setFailed(true); }
+    finally { setBusy(false); }
+  };
+  return html`<section class="card s-appearance s-experimental-effects"><label class="check"><input type="checkbox" checked=${enabled} disabled=${busy} onChange=${event => change(event.target.checked)} /><span>${t("experimentalEffects.title")}</span></label><p class="sub">${t("experimentalEffects.help")}</p>${failed ? html`<p role="alert">${t("experimentalEffects.failed")}</p>` : null}</section>`;
 }
 
 /** #2056 B: a sample sidebar row in the host's default colour places, so the choice is seen rather than described. */
@@ -84,7 +114,8 @@ function IdentityColorCard() {
 /**
  * #1958 decision 5: Restore defaults — the host's appearance settings back to their defaults after a confirm that says
  * what it resets; this person's custom CSS turned off (its versions stay). Not settings, so never touched: the colours
- * people picked per instance, installed mods, uploaded effects and the fleet's card limits.
+ * people picked per instance (and where each agent's colours go, #2196), installed mods, uploaded effects and the
+ * fleet's card limits.
  */
 export async function restoreAppearanceDefaults() {
   setThemesShown(true);
@@ -126,6 +157,131 @@ function CardSizeCard() {
   </section>`;
 }
 
+/**
+ * #2308: the image as one square PNG the host makes the icon sizes from — centre-cropped, drawn at 512 px if smaller
+ * (marked low-resolution), as it is up to 1024 px, else 1024. The browser decodes whatever it can show (PNG, JPG, WebP);
+ * the host takes only that PNG.
+ */
+export async function appIconPng(file) {
+  const bmp = await createImageBitmap(file);
+  try {
+    const side = Math.min(bmp.width, bmp.height);
+    const out = Math.min(1024, Math.max(512, side));
+    const canvas = document.createElement("canvas");
+    canvas.width = canvas.height = out;
+    const g = canvas.getContext("2d");
+    g.imageSmoothingQuality = "high";
+    g.drawImage(bmp, (bmp.width - side) / 2, (bmp.height - side) / 2, side, side, 0, 0, out, out);
+    const blob = await new Promise((resolve) => canvas.toBlob(resolve, "image/png"));
+    if (!blob) throw new Error("no PNG");
+    return { blob, low: side < 512 };
+  } finally {
+    if (bmp.close) bmp.close();
+  }
+}
+
+/** #2308: this page's icon links follow a change at once (the next pages carry the version from the host). */
+export function refreshAppIconLinks(version, custom) {
+  if (typeof document === "undefined") return;
+  const v = encodeURIComponent(version);
+  const head = document.head;
+  const links = [...head.querySelectorAll("link")];
+  const byPath = (path) => links.find((l) => (l.getAttribute("href") || "").split("?")[0] === path);
+  for (const [path, rel] of [["/favicon.ico", "icon"], ["/apple-touch-icon.png", "apple-touch-icon"], ["/manifest.webmanifest", "manifest"]]) {
+    const el = byPath(path);
+    if (el && el.getAttribute("rel") === rel) el.setAttribute("href", `${path}?v=${v}`);
+  }
+  const svg = byPath("/favicon.svg");
+  if (custom && svg) svg.remove();
+  else if (!custom && !svg) {
+    const link = document.createElement("link");
+    for (const [k, val] of [["rel", "icon"], ["href", `/favicon.svg?v=${v}`], ["type", "image/svg+xml"], ["sizes", "any"]]) link.setAttribute(k, val);
+    head.appendChild(link);
+  }
+}
+
+/**
+ * #2308: the app icon — what a browser tab and a home screen show. One picture for every page (sign-in and the public
+ * link too); an admin changes it, everyone else sees it.
+ */
+function AppIconCard() {
+  const [state, setState] = useState(null);
+  const [canWrite, setCanWrite] = useState(false);
+  const [picked, setPicked] = useState(null);           // { blob, url, low }
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState("");
+  const file = useRef(null);
+  const load = async () => {
+    const r = await call("/ui/app-icon");
+    setState(r.ok && r.body && typeof r.body.version === "string" ? r.body : { failed: true });
+  };
+  useEffect(() => {
+    load();
+    const auth = typeof window !== "undefined" ? window.AgendAuth : null;
+    if (auth && auth.canWrite) Promise.resolve(auth.canWrite()).then((v) => setCanWrite(v === true), () => {});
+  }, []);
+  useEffect(() => () => { if (picked) URL.revokeObjectURL(picked.url); }, [picked]);
+  const title = html`<${CardTitle} title=${tn("appIconTitle")} topic="app-icon" />`;
+  if (!state) return html`<section class="card s-appearance s-app-icon">${title}<p class="sub">…</p></section>`;
+  if (state.failed) return html`<section class="card s-appearance s-app-icon">${title}<p class="err">${tn("appIconLoadFailed")}</p></section>`;
+
+  const choose = async () => {
+    const f = file.current && file.current.files && file.current.files[0];
+    if (file.current) file.current.value = "";
+    if (!f) return;
+    setError("");
+    try {
+      const made = await appIconPng(f);
+      setPicked({ ...made, url: URL.createObjectURL(made.blob) });
+    } catch {
+      setError(tn("appIconNotAnImage"));
+    }
+  };
+  const answered = (r, done) => {
+    setBusy(false);
+    if (!r.ok) {
+      const known = ["app_icon_too_large", "app_icon_not_png", "app_icon_unreadable", "app_icon_admin_only", "app_icon_needs_a_signed_in_person", "app_icon_busy", "app_icon_superseded", "app_icon_not_reset", "app_icon_not_kept", "app_icon_failed"];
+      setError(known.includes(r.body && r.body.error) ? tn(`appIconError_${r.body.error}`, appIconDetail(r.body)) : tn("appIconError_other", (r.body && r.body.error) || String(r.status)));
+      return;
+    }
+    setState(r.body);
+    setPicked(null);
+    refreshAppIconLinks(r.body.version, r.body.custom);
+    toast(done);
+  };
+  const use = async () => {
+    setBusy(true); setError("");
+    answered(await call("/ui/app-icon", { method: "PUT", headers: { "Content-Type": "image/png" }, body: picked.blob }), tn("appIconSaved"));
+  };
+  const reset = async () => {
+    setBusy(true); setError("");
+    answered(await call("/ui/app-icon", { method: "DELETE" }), tn("appIconResetDone"));
+  };
+  const v = encodeURIComponent(state.version);
+  return html`<section class="card s-appearance s-app-icon">${title}
+    <p class="sub">${tn("appIconLead")}</p>
+    <div class="s-app-icon-row">
+      <figure class="s-app-icon-now"><img class="s-app-icon-big" src=${`/apple-touch-icon.png?v=${v}`} width="96" height="96" alt=${tn("appIconCurrent")} />
+        <img class="s-app-icon-small" src=${`/icon-192.png?v=${v}`} width="32" height="32" alt="" />
+        <figcaption>${state.custom ? tn("appIconCustom") : tn("appIconDefault")}</figcaption></figure>
+      ${picked ? html`<figure class="s-app-icon-new"><img class="s-app-icon-big" src=${picked.url} width="96" height="96" alt=${tn("appIconPreview")} />
+        <figcaption>${tn("appIconPreview")}</figcaption></figure>` : null}
+    </div>
+    ${picked && picked.low ? html`<p class="sub s-app-icon-low">${tn("appIconLow")}</p>` : null}
+    ${error ? html`<p class="err" role="alert">${error}</p>` : null}
+    ${canWrite ? html`<div class="s-css-actions">
+      <input ref=${file} type="file" class="sr-only" id="s-app-icon-file" accept="image/png,image/jpeg,image/webp" onChange=${choose} />
+      ${picked ? html`
+        <button type="button" class="btn btn-primary" disabled=${busy} onClick=${use}><${Icon} name="check" size=${16} />${tn("appIconUse")}</button>
+        <button type="button" class="btn" disabled=${busy} onClick=${() => setPicked(null)}>${tn("appIconCancel")}</button>`
+      : html`<button type="button" class="btn" disabled=${busy} onClick=${() => file.current && file.current.click()}>${tn("appIconChoose")}</button>`}
+      ${state.custom && !picked ? html`<button type="button" class="btn" disabled=${busy} onClick=${reset}>${tn("appIconReset")}</button>` : null}
+    </div>` : html`<p class="sub">${tn("appIconReadOnly")}</p>`}
+    <p class="sub">${tn("appIconWho")}</p>
+    <p class="sub">${tn("appIconIos")}</p>
+  </section>`;
+}
+
 const LIMIT_FIELDS = [["portrait", "max_width"], ["portrait", "max_height"], ["portrait", "max_kib"], ["banner", "max_width"], ["banner", "max_height"], ["banner", "max_kib"],
   ["instance_quota", "files"], ["instance_quota", "mib"]];
 /**
@@ -221,6 +377,7 @@ function SidebarWidgetCard() {
   const app = useStore(appStore);
   const saved = sidebarWidgetRaw();
   const [text, setText] = useState(() => (saved ? JSON.stringify(saved, null, 2) : ""));
+  const area = useRef(null);
   const [error, setError] = useState("");
   let parsed = null, problem = "";
   if (text.trim()) {
@@ -233,17 +390,17 @@ function SidebarWidgetCard() {
     setSidebarWidget(parsed);
     toast(tn("widgetSaved"));
   };
-  const remove = () => { setSidebarWidget(null); setText(""); setError(""); toast(tn("widgetRemoved")); };
+  const remove = () => { setSidebarWidget(null); recordEdit(area.current); setText(""); setError(""); toast(tn("widgetRemoved")); };
   return html`<section class="card s-appearance s-synced s-widget"><${CardTitle} title=${tn("widgetTitle")} topic="widgets" />
     <p class="sub">${tn("widgetLead")}</p>
     <label class="field"><span class="sr-only">${tn("widgetTitle")}</span>
-      <textarea class="s-widget-text" rows="10" spellcheck=${false} autocapitalize="off" autocomplete="off" value=${text}
+      <textarea ref=${area} class="s-widget-text" rows="10" spellcheck=${false} autocapitalize="off" autocomplete="off" value=${text}
         onInput=${(e) => { setText(e.target.value); setError(""); }}></textarea></label>
     ${error || problem ? html`<p class="err" role="alert">${error || problem}</p>` : null}
     ${preview ? html`<div class="s-widget-preview"><${AgentWidget} slot="sidebar" widget=${preview} binds=${fleetBinds(app.instances, app.exec, app.awaiting)} /></div>` : null}
     <div class="s-widget-actions">
       <button type="button" class="btn btn-primary" disabled=${!parsed || !!problem} onClick=${save}><${Icon} name="check" size=${16} />${tn("widgetSave")}</button>
-      ${!text.trim() ? html`<button type="button" class="btn" onClick=${() => setText(JSON.stringify(SIDEBAR_WIDGET_EXAMPLE, null, 2))}>${tn("widgetExample")}</button>` : null}
+      ${!text.trim() ? html`<button type="button" class="btn" onClick=${() => { recordEdit(area.current); setText(JSON.stringify(SIDEBAR_WIDGET_EXAMPLE, null, 2)); }}>${tn("widgetExample")}</button>` : null}
       ${saved ? html`<button type="button" class="btn" onClick=${remove}>${tn("widgetRemove")}</button>` : null}
     </div>
   </section>`;
@@ -252,6 +409,7 @@ function SidebarWidgetCard() {
 function OwnerCssCard() {
   const [state, setState] = useState(null);
   const [text, setText] = useState("");
+  const area = useRef(null);
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState("");
   const trial = useStore(ownerCssTrial);
@@ -260,6 +418,8 @@ function OwnerCssCard() {
     const r = await call("/ui/owner-css/state");
     if (!r.ok || !r.body) { setState({ failed: true }); return; }
     setState(r.body);
+    // #2342: a restored version replaces the editor's text as a step Ctrl+Z goes back from.
+    if (opts.undoable) recordEdit(area.current);
     if (opts.text !== false) setText(r.body.text || "");
   };
   useEffect(() => { load(); }, []);
@@ -283,7 +443,7 @@ function OwnerCssCard() {
     setBusy(false);
     if (!r.ok) { setError(refusal(r.body)); return; }
     setOwnerCssActive(r.body.active);
-    load();
+    load({ undoable: true });
   };
   const addAsset = async () => {
     const f = file.current && file.current.files && file.current.files[0];
@@ -314,7 +474,7 @@ function OwnerCssCard() {
     <p class="sub">${tn("cssLead")}</p>
     <p class="s-css-status" role="status">${inForce}</p>
     <label class="field"><span class="sr-only">${tn("cssTitle")}</span>
-      <textarea class="s-css-text" rows="14" spellcheck=${false} autocapitalize="off" autocomplete="off" value=${text} disabled=${busy}
+      <textarea ref=${area} class="s-css-text" rows="14" spellcheck=${false} autocapitalize="off" autocomplete="off" value=${text} disabled=${busy}
         onInput=${(e) => setText(e.target.value)}></textarea></label>
     ${error ? html`<p class="err" role="alert">${error}</p>` : null}
     <div class="s-css-actions">