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

package/dist/ui/chat-time.js

@@ -0,0 +1,80 @@
+// #1770: the time a chat line shows, read in the fleet's zone (the one chat-logs, fleet.log and the #1586 DMs use) —
+// "17:38" today, "Yesterday 17:38", "10/11 17:38" earlier this year, "2025/10/11 17:38" before. The hour and minute keep
+// the browser's own format (12- or 24-hour), as they always had. No imports: the thread, the preview panel and the
+// tests read it as it is.
+
+const cache = new Map();
+/** One formatter per (kind, zone, locale): a thread may label 500 lines on every render. */
+function fmt(kind, tz, locale) {
+  const key = `${kind}|${tz || ""}|${locale || ""}`;
+  let f = cache.get(key);
+  if (!f) {
+    const o = kind === "hm" ? { hour: "2-digit", minute: "2-digit" }
+      : kind === "ymd" ? { year: "numeric", month: "numeric", day: "numeric", hour: "numeric", minute: "numeric", second: "numeric", hourCycle: "h23" }
+      : { year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit", timeZoneName: "short" };
+    f = new Intl.DateTimeFormat(kind === "ymd" ? "en-US" : (locale || []), { ...o, timeZone: tz || undefined });
+    cache.set(key, f);
+  }
+  return f;
+}
+/** `tz` when this browser knows it, else undefined (the browser's own zone): a label must still be drawn. */
+function known(tz) {
+  if (!tz) return undefined;
+  try { fmt("ymd", tz); return tz; } catch { return undefined; }
+}
+/** The fleet's zone, as the page was served it (<body data-fleet-tz>); undefined when absent or unknown here. */
+export function fleetTz() { return known(globalThis.document?.body?.dataset?.fleetTz); }
+
+const toMs = (ts) => (typeof ts === "number" ? ts : Date.parse(String(ts || "")));
+function wall(ms, tz) {
+  const p = {};
+  for (const x of fmt("ymd", tz).formatToParts(ms)) p[x.type] = Number(x.value);
+  return p;
+}
+
+/**
+ * The label for `ts` (ISO string or epoch ms), "" when it cannot be read. opts: tz (default the fleet's), now (epoch ms),
+ * yesterday(hm) → the word for "yesterday" around hm (default: hm alone), locale (tests).
+ */
+export function chatTime(ts, opts = {}) {
+  const ms = toMs(ts);
+  if (!Number.isFinite(ms)) return "";
+  const tz = "tz" in opts ? known(opts.tz) : fleetTz();
+  const hm = fmt("hm", tz, opts.locale).format(ms);
+  const d = wall(ms, tz), today = wall(opts.now ?? Date.now(), tz);
+  if (d.year === today.year && d.month === today.month && d.day === today.day) return hm;
+  const y = new Date(Date.UTC(today.year, today.month - 1, today.day - 1));
+  if (d.year === y.getUTCFullYear() && d.month === y.getUTCMonth() + 1 && d.day === y.getUTCDate()) return opts.yesterday ? opts.yesterday(hm) : hm;
+  return d.year === today.year ? `${d.month}/${d.day} ${hm}` : `${d.year}/${d.month}/${d.day} ${hm}`;
+}
+
+/** The full date, time and zone of `ts`, for a tooltip; "" when it cannot be read. */
+export function chatTimeFull(ts, opts = {}) {
+  const ms = toMs(ts);
+  if (!Number.isFinite(ms)) return "";
+  return fmt("full", "tz" in opts ? known(opts.tz) : fleetTz(), opts.locale).format(ms);
+}
+
+/** Milliseconds until the fleet's next midnight (when "today" labels change), at most an hour (a DST day self-corrects). */
+export function msToNextDay(now = Date.now(), tz = fleetTz()) {
+  const w = wall(now, known(tz));
+  const into = ((w.hour * 60 + w.minute) * 60 + w.second) * 1000 + (now % 1000);
+  return Math.max(1000, Math.min(3_600_000, 86_400_000 - into + 1000));
+}
+
+/**
+ * Call `fn` when the fleet's day may have changed — at its next midnight, then again for each one after (an hour at
+ * most between looks, so a DST day or a late timer corrects itself). Each subscriber holds its own timer, and no
+ * module-wide state: the unsubscribe it returns leaves nothing armed.
+ */
+export function onDayChange(fn) {
+  let timer = null, live = true;
+  const arm = () => {
+    timer = setTimeout(() => {
+      timer = null;
+      try { fn(); } finally { if (live) arm(); }
+    }, msToNextDay());
+  };
+  arm();
+  return () => { live = false; if (timer !== null) { clearTimeout(timer); timer = null; } };
+}

package/dist/ui/panel-chat.js

@@ -10,6 +10,7 @@ import { html, useEffect, useLayoutEffect, useRef, useState } from "/assets/app-
 import { t } from "/assets/app-i18n.js";
 import { appStore, useStore } from "/assets/app-store.js";
 import { useLease } from "/assets/app-ctx.js";
+import { namesOf, namesStore } from "/assets/instance-nav.js";
 import { PanelHeader, onPanelKey, setTitle, statusClass, statusLabel, openDrawer, requestNewInstance } from "/assets/app-shell.js";
 import { detailsPath } from "/assets/app-route.js";
 import { InstanceSwitch } from "/assets/instance-switch.js";
@@ -21,11 +22,15 @@ import { Empty, Skeleton } from "/assets/ui-states.js";
 import { Icon } from "/assets/ui-icons.js";
 import { toast } from "/assets/ui-toast.js";
 import { confirmDialog } from "/assets/ui-confirm.js";
+import { savePref } from "/assets/app-prefs.js";
 import "./chat-strings.js";
 import { confirmedWrite } from "./settings-confirm.js";
 import { createChatStore } from "./chat-store.js";
 import { createThread, msgKey } from "./chat-thread.js";
-import { PreviewPanel, openPanel, panelStore, shownKey } from "./preview-panel.js";
+import { createEmojiIndex } from "./chat-emojis.js";
+import { pollPublicPreview } from "./preview-status.js";
+import { createMentionIndex } from "./chat-mentions.js";
+import { PreviewPanel, claimPanel, openPanel, panelClaims, panelStore, panelVersion, shownKey } from "./preview-panel.js";
 import { needsArgument, paletteFor, parseCommandLine } from "./chat-commands.js";
 import { installTour, refreshTourSpot } from "./chat-tour.js";
 import { FirstRunCard } from "./first-run.js";
@@ -40,6 +45,9 @@ export let store = null;
 // ── Announcements: one polite, visually hidden line for the coarse events only (a reply arrived, the agent started,
 // finished, or waits on you). Messages themselves are not read out as they arrive; the list is a log to browse.
 let announceTimer = null;
+/** #1630: which Discord server emoji this page may draw (created with the store, in boot). */
+let emojiIndex = null;
+let mentionIndex = null;   // #1682: the names of the mentions shown
 function announce(text) {
   let el = document.getElementById("announcer");
   if (!el) { el = document.createElement("div"); el.id = "announcer"; el.className = "sr-only"; el.setAttribute("role", "status"); el.setAttribute("aria-live", "polite"); el.setAttribute("aria-atomic", "true"); document.body.appendChild(el); }
@@ -51,11 +59,14 @@ function announce(text) {
 
 /**
  * This device's preview opt-in: asks once (the app's dialog) and says what it means; turning it off stops every
- * running preview. Resolves to the choice in force.
+ * running preview. Resolves to the choice in force. commit(apply): runs `apply` (the change itself) — the panel's Allow
+ * wraps it to know which change of the choice is its own (#1704).
  */
-export async function setPreviewOptIn(on) {
+export async function setPreviewOptIn(on, commit = (apply) => apply()) {
   if (on && !P().optedIn() && !(await confirmDialog({ message: t("chat.pvConfirm"), confirmLabel: t("chat.pvAllowButton") }))) on = false;
-  P().setOptIn(on);
+  commit(() => P().setOptIn(on));
+  // #1665: kept on the host for every device (only a signed-in page writes it; never the public link).
+  savePref("preview.optIn", P().optedIn());
   return P().optedIn();
 }
 
@@ -65,11 +76,15 @@ export function boot({ stream, boot: bootData, deps = {} }) {
   store = createChatStore({
     fetch: (...a) => fetch(...a), toast, announce, t, setTimeout: (fn, ms) => setTimeout(fn, ms), confirm: confirmDialog, ...deps,
   });
+  emojiIndex = createEmojiIndex((url) => (deps.fetch || fetch)(url, { credentials: "same-origin" }));
+  mentionIndex = createMentionIndex((url) => (deps.fetch || fetch)(url, { credentials: "same-origin" }));
   store.attach(stream);
   // #1306: what the server said about previews for this load. The page-wide message and storage listeners this adds
   // belong to the app, once (they are never per mount).
   // #1554: its words in the page's language (chat.pv*); a key the dictionary does not have keeps preview.js's English.
   if (P() && bootData) P().init(bootData, { text: (key, ...v) => { const k = `chat.${key}`, s = t(k, ...v); return s === k ? null : s; } });
+  // #1723: the public link's preview was still starting when this page loaded: ask until it is up (or failed).
+  if (P() && bootData) pollPublicPreview(P());
   // #1568: the banner's "I understand" lasts until the next sign-in — preview.js is told which sign-in this page is
   // (the session handle, from the one /auth/session read); none (no session, or no AgendAuth): this tab only.
   if (P() && typeof P().setBannerScope === "function") {
@@ -119,6 +134,9 @@ function useChatTick(name, kinds) {
 
 // ── The panel ──
 
+/** #1722: the chat's title — the name that leads, the other on hover. */
+const headerName = ({ primary, secondary }) => (secondary ? html`<span title=${secondary}>${primary}</span>` : primary);
+
 export function ChatPanel({ route, navKey }) {
   const lease = useLease(navKey);
   const app = useStore(appStore);
@@ -154,6 +172,7 @@ function NotFound({ name }) {
 }
 
 function ChatView({ name, inst, lease, navKey, exec, awaiting }) {
+  const names = useStore(namesStore);   // #1722: which name leads (the title)
   const [dialog, setDialog] = useState(null);       // "delete" | null
   const [wrap, setWrap] = useState(codeWrap);
   const view = useRef(null), split = useRef(null), thread = useRef(null);
@@ -189,6 +208,7 @@ function ChatView({ name, inst, lease, navKey, exec, awaiting }) {
     try { const res = await fetch(`/ui/${verb}/${encodeURIComponent(name)}`, { method: "POST", headers: { "Content-Type": "application/json" } }); r = await res.json(); }
     catch (err) { r = { error: err && err.message ? err.message : t("chat.disconnected") }; }
     if (r && r.error) toast(r.error, false);
+    else if (r && r.held) toast(r.message);
     else toast(t(verb === "start" ? "chat.started" : verb === "stop" ? "chat.stoppedInst" : "chat.restarted", name));
   };
   const items = [
@@ -206,14 +226,14 @@ function ChatView({ name, inst, lease, navKey, exec, awaiting }) {
     ${inst.model ? html`<button type="button" class="hd-chip" title=${t("chat.chipModel", inst.model)} aria-label=${t("chat.chipModel", inst.model)} onClick=${() => pick("model")}>${inst.model}</button>` : null}
     ${inst.effort ? html`<button type="button" class="hd-chip" title=${t("chat.chipEffort", inst.effort)} aria-label=${t("chat.chipEffort", inst.effort)} onClick=${() => pick("effort")}>${inst.effort}</button>` : null}`;
   return html`<div class=${`panel p-chat${wrap ? " wrap-code" : ""}`} ref=${view}>
-    <${PanelHeader} title=${name} sub=${sub} nav=${html`<${InstanceSwitch} name=${name} current="chat" />`}><${HeaderTools} navKey=${navKey} /><${Menu} items=${items} label=${t("app.more")} /></${PanelHeader}>
+    <${PanelHeader} title=${headerName(namesOf(inst || { name }, names.primary))} sub=${sub} nav=${html`<${InstanceSwitch} name=${name} current="chat" />`}><${HeaderTools} navKey=${navKey} /><${Menu} items=${items} label=${t("app.more")} /></${PanelHeader}>
     <div class="chat-split" ref=${split}>
       <div class="chat-main">
         <${Thread} name=${name} th=${thread} />
         <${Dock} name=${name} inst=${inst} lease=${lease} exec=${exec} awaiting=${awaiting} />
       </div>
       <${PreviewPanel} name=${name} split=${split} msgs=${() => store.state.msgs[name] || []} subscribe=${(fn) => store.subscribe(fn)}
-        keyOf=${msgKey} reveal=${(k) => thread.current && thread.current.reveal(k)} download=${downloadHtml} allow=${() => setPreviewOptIn(true)} />
+        keyOf=${msgKey} reveal=${(k) => thread.current && thread.current.reveal(k)} download=${downloadHtml} allow=${(commit) => setPreviewOptIn(true, commit)} />
     </div>
     <${LightboxHost} />
     <div class="drop-overlay" aria-hidden="true"><div class="drop-card"><${Icon} name="attach" size=${32} /><span>${t("chat.dropHere")}</span></div></div>
@@ -232,14 +252,22 @@ function Thread({ name, th }) {
       setPreviewOptIn, copyText, download: downloadHtml, toggleWrap,
       clickReplyButton: (id, index) => store.clickReplyButton(name, id, index),      // #1266
       replyButtonBusy: (id) => store.state.rbBusy.has(id),
-      panel: { shown: shownKey, open: (spec, o) => openPanel(spec, o) },   // #1481
+      panel: { shown: shownKey, open: (spec, o) => openPanel(spec, o), version: panelVersion, claim: claimPanel, claims: panelClaims },   // #1481, #1704
       openImage: openLightbox,                                               // an image, full size, in the page
+      emojis: (id) => !!emojiIndex && emojiIndex.known(id),                  // #1630: the fleet's server emoji
+      mentions: (kind, id) => (mentionIndex ? mentionIndex.name(kind, id) : null),   // #1682: mention names
     });
     th.current = thread;
+    // #1630: the server-emoji list is read once a message shows a tag; when it arrives, those messages are drawn again.
+    // #1682: the same for mention names — asked for the ids the messages carry; when names arrive, drawn again.
+    const wantEmojis = (msgs) => { if (emojiIndex && emojiIndex.wants(msgs)) emojiIndex.ensure(); if (mentionIndex) mentionIndex.ensure(msgs); };
+    const offEmojis = emojiIndex ? emojiIndex.subscribe(() => thread.render(store.state.msgs[name] || [])) : () => {};
+    const offMentions = mentionIndex ? mentionIndex.subscribe(() => thread.render(store.state.msgs[name] || [])) : () => {};
     thread.render(store.state.msgs[name] || [], { restore: store.state.scrollMemo[name] ?? null });
+    wantEmojis(store.state.msgs[name]);
     const off = store.subscribe((instance, kind) => {
       if (instance !== name) return;
-      if (kind === "msgs") thread.render(store.state.msgs[name] || []);
+      if (kind === "msgs") { thread.render(store.state.msgs[name] || []); wantEmojis(store.state.msgs[name]); }
       else if (kind === "sent") thread.jumpLatest();
     });
     const offPv = P() ? P().onChange(() => thread.refreshCards()) : () => {};
@@ -249,7 +277,7 @@ function Thread({ name, th }) {
     sc.addEventListener("scroll", onScroll, { passive: true });
     ls.addEventListener("click", thread.onClick);
     return () => {
-      off(); offPv(); offPanel();
+      off(); offPv(); offPanel(); offEmojis(); offMentions();
       sc.removeEventListener("scroll", onScroll);
       ls.removeEventListener("click", thread.onClick);
       thread.dispose();                     // the whole thread goes: every preview in it stops first
@@ -292,6 +320,7 @@ function CommandCard({ name, lease }) {
         aria-label=${t("chat.cmdDismiss")} onClick=${() => store.dismissCommand(name)}><${Icon} name="close" size=${14} /></button>`}</div>
     ${c.error ? html`<p class="cmd-text">${c.error}</p>` : null}
     ${c.text ? html`<pre class="cmd-text">${c.text}</pre>` : null}
+    ${c.choices && c.choices.prompt ? html`<pre class="cmd-text">${c.choices.prompt}</pre>` : null}
     ${c.choices ? html`<div class="cmd-choices" role="group" aria-label=${t("chat.cmdChoose")}>${c.choices.options.map((o) => html`<button key=${o.id} type="button"
       class=${`btn btn-sm${o.id === c.choices.current ? " current" : ""}`} aria-current=${o.id === c.choices.current ? "true" : undefined} onClick=${() => run(o.id)}>${o.label}</button>`)}</div>` : null}
   </div>`;
@@ -466,7 +495,7 @@ function DeleteDialog({ name, onClose }) {
       <button type="button" class="btn btn-danger" disabled=${typed !== want || busy} onClick=${go}>${t("chat.deleteGo")}</button>`}>
     <p>${t("chat.deleteHelp", name)}</p>
     <label class="field"><span class="sr-only">${t("chat.deleteHelp", name)}</span>
-      <input type="text" value=${typed} autocomplete="off" spellcheck="false" placeholder=${want} onInput=${(e) => setTyped(e.target.value)}
+      <input type="text" value=${typed} autocomplete="off" spellcheck=${false} placeholder=${want} onInput=${(e) => setTyped(e.target.value)}
         onKeyDown=${(e) => { if (e.key === "Enter") go(); }} /></label>
   </${Dialog}>`;
 }

package/dist/ui/panel-details.js

@@ -73,11 +73,13 @@ function DetailsView({ name, inst, navKey, exec, awaiting }) {
     try { const res = await fetch(`/ui/${verb}/${encodeURIComponent(name)}`, { method: "POST", headers: { "Content-Type": "application/json" } }); r = await res.json(); }
     catch (err) { r = { error: err && err.message ? err.message : t("chat.disconnected") }; }
     if (r && r.error) toast(r.error, false);
+    else if (r && r.held) toast(r.message);
     else toast(t(verb === "start" ? "chat.started" : verb === "stop" ? "chat.stoppedInst" : "chat.restarted", name));
   });
   const pauseWake = (verb) => act(verb, async () => {
     const res = await api(`/api/settings/instances/${encodeURIComponent(name)}/${verb}`, { method: "POST" }).catch(() => ({ ok: false, body: {} }));
     if (!res.ok) toast((res.body && res.body.error) || t("chat.dActionFailed"), false);
+    else if (res.body && res.body.held) toast(res.body.message);
     else toast(t(verb === "pause" ? "chat.dPaused" : "chat.dWoken", name));
   });
   // A ClassicBot room (classicBot.yaml) keeps Classic's split: its own Settings dialog, and only the actions Settings'