@songsid/agend 2.2.0-beta.4 → 2.2.0-beta.6

package/dist/ui/panel-fleet.js

@@ -19,6 +19,7 @@ import { toast } from "/assets/ui-toast.js";
 import { confirmDialog } from "/assets/ui-confirm.js";
 import { confirmedWrite } from "./settings-confirm.js";
 import { OrgChart } from "./fleet-org.js";
+import { labelOf } from "/assets/instance-nav.js";
 import { CacheReport } from "./fleet-cache.js";
 
 register("fleet", {
@@ -33,6 +34,13 @@ register("fleet", {
     taskTitle: "Title", taskDesc: "Description", priority: "Priority", assignee: "Assignee", unassigned: "Unassigned",
     pNormal: "Normal", pLow: "Low", pHigh: "High", pUrgent: "Urgent",
     cron: "Cron expression", message: "Message", target: "Target instance", label: "Label", teamName: "Team name", members: "Members",
+    // #1724: schedules in words; Edit; once or repeating
+    schedOnce: "Once · {0}", schedNext: "next {0}", schedRetrying: "retrying", schedDisabled: "disabled", schedSilent: "silent", schedTz: "Timezone: {0}",
+    editSchedule: "Edit schedule", edit: "Edit", scheduleSaved: "Schedule saved", schedRepeat: "Repeat", schedOnceMode: "Once",
+    schedWhen: "Date and time", schedTimezone: "Timezone", schedEnabled: "Enabled", schedWhenIn: "In {0}", schedWhenRequired: "Pick a date and time",
+    schedTzBad: "Unknown timezone: {0}",
+    cronEveryMinute: "Every minute", cronEveryMinutes: "Every {0} minutes", cronEveryHours: "Every {0} hours", cronDaily: "Daily {0}",
+    cronWeekdays: "Weekdays {0}", cronDays: "{0} {1}", cronMonthly: "Day {0} of each month {1}", dayNames: "Sun,Mon,Tue,Wed,Thu,Fri,Sat", dayJoin: ", ",
     titleRequired: "Title required", scheduleFieldsRequired: "Cron, message, and target required", teamFieldsRequired: "Name and at least one member required",
     deleteSchedule: "Delete this schedule?", deleteTeam: "Delete team “{0}”?", taskCreated: "Task created", scheduleCreated: "Schedule created", scheduleDeleted: "Schedule deleted",
     teamCreated: "Team created", teamDeleted: "Team deleted", teamUpdated: "Team updated", edit: "Edit", editTeam: "Edit team",
@@ -56,6 +64,12 @@ register("fleet", {
     taskTitle: "標題", taskDesc: "說明", priority: "優先順序", assignee: "負責人", unassigned: "未指派",
     pNormal: "一般", pLow: "低", pHigh: "高", pUrgent: "緊急",
     cron: "Cron 表示式", message: "訊息", target: "目標 instance", label: "標籤", teamName: "Team 名稱", members: "成員",
+    schedOnce: "一次 · {0}", schedNext: "下次 {0}", schedRetrying: "重試中", schedDisabled: "已停用", schedSilent: "靜默", schedTz: "時區：{0}",
+    editSchedule: "編輯排程", edit: "編輯", scheduleSaved: "已儲存排程", schedRepeat: "重複", schedOnceMode: "一次",
+    schedWhen: "日期與時間", schedTimezone: "時區", schedEnabled: "啟用", schedWhenIn: "以 {0} 時間", schedWhenRequired: "請選擇日期與時間",
+    schedTzBad: "不認得的時區：{0}",
+    cronEveryMinute: "每分鐘", cronEveryMinutes: "每 {0} 分鐘", cronEveryHours: "每 {0} 小時", cronDaily: "每天 {0}",
+    cronWeekdays: "每週一到五 {0}", cronDays: "每週{0} {1}", cronMonthly: "每月 {0} 日 {1}", dayNames: "日,一,二,三,四,五,六", dayJoin: "、",
     titleRequired: "必須填寫標題", scheduleFieldsRequired: "必須填寫 Cron、訊息與目標 instance", teamFieldsRequired: "必須填寫名稱並選擇至少一名成員",
     deleteSchedule: "確定刪除此排程嗎？", deleteTeam: "確定刪除 team「{0}」嗎？", taskCreated: "Task 已建立", scheduleCreated: "排程已建立", scheduleDeleted: "排程已刪除",
     teamCreated: "Team 已建立", teamDeleted: "Team 已刪除", teamUpdated: "Team 已更新", edit: "編輯", editTeam: "編輯 team",
@@ -152,10 +166,27 @@ function Tasks({ lease }) {
   ${creating ? html`<${CreateTask} onClose=${() => setCreating(false)} onDone=${() => setVersion(v => v + 1)} />` : null}`;
 }
 
+/** #1724: what a row says about when it runs — words for a cron, "Once · <time>" for a one-shot; never empty or "null". */
+export function scheduleWhen(x) {
+  if (x && x.cron) return cronDesc(x.cron);
+  if (x && x.at) return t("fleet.schedOnce", x.at_text || x.at);
+  return "—";
+}
+/** #1724: its next run as the server worked it out (fleet zone), or "retrying"; nothing when there is none (disabled). */
+export function scheduleNext(x) {
+  if (!x || !x.enabled) return "";
+  if (x.retrying) return t("fleet.schedRetrying");
+  return x.next_run_text ? t("fleet.schedNext", x.next_run_text) : "";
+}
+const clip = (s, n = 60) => { const a = Array.from(String(s || "").replace(/\s+/g, " ").trim()); return a.length > n ? `${a.slice(0, n).join("")}…` : a.join(""); };
+
 function Schedules({ lease }) {
   const [version, setVersion] = useState(0);
   const [creating, setCreating] = useState(false);
+  const [editing, setEditing] = useState(null);   // #1724: the schedule being edited
+  const { instances } = useStore(appStore);
   const state = useLoad(lease, "/ui/schedules", version);
+  const targetName = (name) => { const it = (instances || []).find((i) => i && i.name === name); return it ? labelOf(it) : name; };
   async function del(id) {
     if (!(await confirmDialog({ message: t("fleet.deleteSchedule"), confirmLabel: t("fleet.delete"), danger: true }))) return;
     if (!lease.current()) return;                   // answered after this tab went: the question no longer stands
@@ -164,16 +195,22 @@ function Schedules({ lease }) {
   }
   return html`<${Loaded} state=${state}>${(d) => {
     const list = d.schedules || [];
-    return html`<${ListHead} count=${list.length === 1 ? t("fleet.countSchedule") : t("fleet.countSchedules", list.length)} label=${t("fleet.newSchedule")} action=${{ onClick: () => setCreating(true) }} />
-      ${list.length ? html`<ul class="rows">${list.map(x => html`<li key=${x.id} class="row-item">
-        <span class=${`pill ${x.enabled ? "open" : "done"}`}>${x.enabled ? t("fleet.on") : t("fleet.off")}</span>
-        <span class="grow">${x.label || cronDesc(x.cron)}</span><span class="mono muted" title=${cronDesc(x.cron)}>${x.cron}</span>
-        <a class="link" href=${chatPath(x.target)}>${x.target}</a>
-        <button type="button" class="btn btn-ghost btn-sm danger" onClick=${() => del(x.id)}>${t("fleet.delete")}</button></li>`)}</ul>`
+    // #1724: the public link lists schedules and changes none (the server refuses it too).
+    const writable = !publicLink();
+    return html`<${ListHead} count=${list.length === 1 ? t("fleet.countSchedule") : t("fleet.countSchedules", list.length)} label=${t("fleet.newSchedule")} action=${writable ? { onClick: () => setCreating(true) } : null} />
+      ${list.length ? html`<ul class="rows">${list.map(x => {
+        const next = scheduleNext(x);
+        const tip = [x.cron || x.at, t("fleet.schedTz", x.timezone), x.silent ? t("fleet.schedSilent") : ""].filter(Boolean).join(" · ");
+        return html`<li key=${x.id} class=${`row-item sched${x.enabled ? "" : " is-off"}`} title=${tip}>
+        <span class=${`pill ${x.enabled ? "open" : "off"}`}>${x.enabled ? t("fleet.on") : t("fleet.schedDisabled")}</span>
+        <span class="grow sched-text"><span class="sched-title">${x.label || clip(x.message)}</span>
+          <span class="sched-sub muted"><span class="sched-when">${scheduleWhen(x)}</span>${next ? html`${" · "}<span class="sched-next">${next}</span>` : null}${" · "}<a class="link" href=${chatPath(x.target)} title=${x.target}>${targetName(x.target)}</a></span></span>
+        ${writable ? html`<span class="sched-actions"><button type="button" class="btn btn-ghost btn-sm sched-edit" onClick=${() => setEditing({ ...x, default_timezone: d.default_timezone })}>${t("fleet.edit")}</button><button type="button" class="btn btn-ghost btn-sm danger" onClick=${() => del(x.id)}>${t("fleet.delete")}</button></span>` : null}</li>`;
+      })}</ul>`
         : html`<${Empty} icon="clock" title=${t("fleet.noSchedules")} hint=${t("fleet.noSchedulesHint")} />`}
-`;
-  }}</${Loaded}>
-  ${creating ? html`<${CreateSchedule} onClose=${() => setCreating(false)} onDone=${() => setVersion(v => v + 1)} />` : null}`;
+      ${creating ? html`<${ScheduleForm} defaultTz=${d.default_timezone} onClose=${() => setCreating(false)} onDone=${() => setVersion(v => v + 1)} />` : null}
+      ${editing ? html`<${ScheduleForm} schedule=${editing} defaultTz=${d.default_timezone} onClose=${() => setEditing(null)} onDone=${() => setVersion(v => v + 1)} />` : null}`;
+  }}</${Loaded}>`;
 }
 
 /** #1689: the public link changes no team (the server refuses it): it lists them only. */
@@ -339,22 +376,89 @@ function CreateTask({ onClose, onDone }) {
   </${FormDialog}>`;
 }
 
-function CreateSchedule({ onClose, onDone }) {
+/**
+ * #1724: a wall-clock date and time ("YYYY-MM-DDTHH:MM", a datetime-local value) read in `tz`, as the ISO time with
+ * offset the scheduler takes (`at`); null when either cannot be read. DST-safe: the offset is sampled at that instant.
+ */
+export function wallToIso(wall, tz) {
+  const m = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})$/.exec(String(wall || ""));
+  if (!m) return null;
+  const asUtc = Date.UTC(+m[1], +m[2] - 1, +m[3], +m[4], +m[5]);
+  let offsetAt;
+  try {
+    const fmt = new Intl.DateTimeFormat("sv-SE", { timeZone: tz, hour12: false, year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit", second: "2-digit" });
+    offsetAt = (ms) => Date.parse(fmt.format(new Date(ms)).replace(" ", "T") + "Z") - ms;
+  } catch { return null; }
+  let off = offsetAt(asUtc);
+  off = offsetAt(asUtc - off);
+  if (!Number.isFinite(off)) return null;
+  const mins = Math.round(off / 60000), a = Math.abs(mins);
+  return `${m[1]}-${m[2]}-${m[3]}T${m[4]}:${m[5]}:00${mins < 0 ? "-" : "+"}${String(Math.floor(a / 60)).padStart(2, "0")}:${String(a % 60).padStart(2, "0")}`;
+}
+/** #1724: an ISO time as the wall clock in `tz` ("YYYY-MM-DDTHH:MM"), to fill the form; "" when it cannot be read. */
+export function isoToWall(iso, tz) {
+  const ms = Date.parse(String(iso || ""));
+  if (!Number.isFinite(ms)) return "";
+  try {
+    return new Intl.DateTimeFormat("sv-SE", { timeZone: tz, hour12: false, year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit" }).format(new Date(ms)).replace(" ", "T");
+  } catch { return ""; }
+}
+
+/**
+ * New schedule, or (#1724) `schedule` given: edit it — the same form, filled in from it: Repeat (cron) or Once (a date
+ * and time in its timezone), message, target, label, timezone, enabled. An edit is PATCH /ui/schedules/<id>, which the
+ * host validates and applies as the update_schedule tool does (cron and at clear each other there).
+ */
+function ScheduleForm({ schedule = null, defaultTz, onClose, onDone }) {
   const { instances } = useStore(appStore);
-  const [f, setF] = useState({ cron: "", msg: "", target: instances[0] ? instances[0].name : "", label: "" });
-  const set = (k) => (e) => setF({ ...f, [k]: e.target.value });
-  const submit = { path: "/ui/schedules", done: t("fleet.scheduleCreated"), after: onDone, collect: () => {
-    if (!f.cron.trim() || !f.msg.trim() || !f.target) { toast(t("fleet.scheduleFieldsRequired"), false); return null; }
-    const body = { cron: f.cron.trim(), message: f.msg.trim(), target: f.target, source: "web-user", reply_chat_id: "", reply_thread_id: "" };
-    if (f.label.trim()) body.label = f.label.trim();
-    return body;
-  } };
-  return html`<${FormDialog} title=${t("fleet.newSchedule")} onClose=${onClose} submit=${submit}>
-    ${field(`${t("fleet.cron")} *`, html`<input value=${f.cron} onInput=${set("cron")} placeholder="0 9 * * 1-5" class="mono" />`)}
-    ${f.cron.trim() ? html`<p class="note">${cronDesc(f.cron)}</p>` : null}
+  const tz0 = (schedule && schedule.timezone) || defaultTz || "";
+  const [f, setF] = useState(() => ({
+    mode: schedule && schedule.at ? "once" : "repeat",
+    cron: (schedule && schedule.cron) || "",
+    at: schedule && schedule.at ? isoToWall(schedule.at, tz0) : "",
+    msg: (schedule && schedule.message) || "",
+    target: schedule ? schedule.target : instances[0] ? instances[0].name : "",
+    label: (schedule && schedule.label) || "",
+    tz: tz0,
+    enabled: schedule ? !!schedule.enabled : true,
+  }));
+  const set = (k) => (e) => { const v = e.target.type === "checkbox" ? e.target.checked : e.target.value; setF((cur) => ({ ...cur, [k]: v })); };
+  const submit = {
+    path: schedule ? `/ui/schedules/${encodeURIComponent(schedule.id)}` : "/ui/schedules",
+    method: schedule ? "PATCH" : "POST",
+    label: schedule ? t("fleet.save") : undefined,
+    done: schedule ? t("fleet.scheduleSaved") : t("fleet.scheduleCreated"),
+    after: onDone,
+    collect: () => {
+      if (!f.msg.trim() || !f.target || (f.mode === "repeat" && !f.cron.trim())) { toast(t("fleet.scheduleFieldsRequired"), false); return null; }
+      const tz = f.tz.trim();
+      const body = { message: f.msg.trim(), target: f.target };
+      if (f.mode === "repeat") body.cron = f.cron.trim();
+      else {
+        if (!f.at) { toast(t("fleet.schedWhenRequired"), false); return null; }
+        const at = wallToIso(f.at, tz || defaultTz);
+        if (!at) { toast(t("fleet.schedTzBad", tz || defaultTz || ""), false); return null; }
+        body.at = at;
+      }
+      if (schedule) { body.label = f.label.trim(); body.enabled = !!f.enabled; if (tz) body.timezone = tz; }
+      else { if (f.label.trim()) body.label = f.label.trim(); if (tz) body.timezone = tz; }
+      return body;
+    },
+  };
+  const modeBtn = (mode, label) => html`<button type="button" class=${`btn btn-sm${f.mode === mode ? " on" : ""}`} aria-pressed=${f.mode === mode ? "true" : "false"}
+    onClick=${() => setF((cur) => ({ ...cur, mode }))}>${label}</button>`;
+  return html`<${FormDialog} title=${schedule ? t("fleet.editSchedule") : t("fleet.newSchedule")} onClose=${onClose} submit=${submit}>
+    <div class="seg-inline sched-mode" role="group" aria-label=${t("fleet.schedWhen")}>${modeBtn("repeat", t("fleet.schedRepeat"))}${modeBtn("once", t("fleet.schedOnceMode"))}</div>
+    ${f.mode === "repeat"
+      ? html`${field(`${t("fleet.cron")} *`, html`<input value=${f.cron} onInput=${set("cron")} placeholder="0 9 * * 1-5" class="mono" />`)}
+        ${f.cron.trim() ? html`<p class="note sched-preview">${cronDesc(f.cron)}</p>` : null}`
+      : html`${field(`${t("fleet.schedWhen")} *`, html`<input type="datetime-local" value=${f.at} onInput=${set("at")} />`)}
+        <p class="note">${t("fleet.schedWhenIn", f.tz.trim() || defaultTz || "")}</p>`}
     ${field(`${t("fleet.message")} *`, html`<input value=${f.msg} onInput=${set("msg")} />`)}
-    ${field(`${t("fleet.target")} *`, html`<select value=${f.target} onChange=${set("target")}>${instances.map(i => html`<option key=${i.name} value=${i.name}>${i.name}</option>`)}</select>`)}
+    ${field(`${t("fleet.target")} *`, html`<select value=${f.target} onChange=${set("target")}>${instances.map(i => html`<option key=${i.name} value=${i.name}>${labelOf(i)}</option>`)}</select>`)}
     ${field(t("fleet.label"), html`<input value=${f.label} onInput=${set("label")} />`)}
+    ${field(t("fleet.schedTimezone"), html`<input value=${f.tz} onInput=${set("tz")} placeholder=${defaultTz || "Asia/Taipei"} />`)}
+    ${schedule ? html`<label class="check"><input type="checkbox" checked=${f.enabled} onChange=${set("enabled")} /><span>${t("fleet.schedEnabled")}</span></label>` : null}
   </${FormDialog}>`;
 }
 
@@ -438,20 +542,29 @@ export function CreateInstanceDialog({ onClose }) {
   </${FormDialog}>`;
 }
 
-// ── Cron in words ──
-const DAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+// ── Cron in words (#1724: in the page's language) ──
+/**
+ * A cron expression as a person says it — "Weekdays 18:00", 「每週一到五 18:00」, "Every 15 minutes" — or the expression
+ * itself when it is not one of these shapes. Never "" for an expression; "" only for none.
+ */
 export function cronDesc(expr) {
-  if (!expr) return "";
+  if (!expr || typeof expr !== "string") return "";
   const p = expr.trim().split(/\s+/);
-  if (p.length < 5) return expr;
+  if (p.length !== 5) return expr.trim();
   const [min, hr, dom, mon, dow] = p;
-  const time = hr !== "*" && min !== "*" ? `at ${hr.padStart(2, "0")}:${min.padStart(2, "0")}` : "";
-  if (min === "*" && hr === "*") return "Every minute";
-  if (min.startsWith("*/")) return `Every ${min.slice(2)} minutes`;
-  if (hr.startsWith("*/")) return `Every ${hr.slice(2)} hours`;
-  if (dom === "*" && mon === "*" && dow === "*") return `Daily ${time}`;
-  if (dom === "*" && mon === "*" && dow === "1-5") return `Weekdays ${time}`;
-  if (dom === "*" && mon === "*" && dow !== "*") return `${dow.split(",").map(d => { const n = parseInt(d, 10); return Number.isNaN(n) ? d : (DAYS[n] || d); }).join(", ")} ${time}`;
-  if (dom !== "*" && mon === "*") return `${dom}${dom === "1" ? "st" : dom === "2" ? "nd" : dom === "3" ? "rd" : "th"} of month ${time}`;
-  return expr;
+  const num = (s) => /^\d{1,2}$/.test(s);
+  const time = num(hr) && num(min) ? `${hr.padStart(2, "0")}:${min.padStart(2, "0")}` : null;
+  if (mon !== "*") return expr.trim();
+  if (min === "*" && hr === "*" && dom === "*" && dow === "*") return t("fleet.cronEveryMinute");
+  if (/^\*\/\d+$/.test(min) && hr === "*" && dom === "*" && dow === "*") return t("fleet.cronEveryMinutes", min.slice(2));
+  if (num(min) && /^\*\/\d+$/.test(hr) && dom === "*" && dow === "*") return t("fleet.cronEveryHours", hr.slice(2));
+  if (!time) return expr.trim();
+  if (dom === "*" && dow === "*") return t("fleet.cronDaily", time);
+  if (dom === "*" && dow === "1-5") return t("fleet.cronWeekdays", time);
+  if (dom === "*" && /^[0-7](,[0-7])*$/.test(dow)) {
+    const names = t("fleet.dayNames").split(",");
+    return t("fleet.cronDays", dow.split(",").map((d) => names[Number(d) % 7]).join(t("fleet.dayJoin")), time);
+  }
+  if (num(dom) && dow === "*") return t("fleet.cronMonthly", String(Number(dom)), time);
+  return expr.trim();
 }

package/dist/ui/panel-needs.js

@@ -15,7 +15,7 @@ import { appStore, createStore, useStore } from "/assets/app-store.js";
 import { useLease } from "/assets/app-ctx.js";
 import { PanelHeader, setTitle } from "/assets/app-shell.js";
 import { chatPath } from "/assets/app-route.js";
-import { labelOf } from "/assets/instance-nav.js";
+import { namesOf, namesStore } from "/assets/instance-nav.js";
 import { Empty } from "/assets/ui-states.js";
 import { Icon } from "/assets/ui-icons.js";
 import { toast } from "/assets/ui-toast.js";
@@ -109,8 +109,9 @@ export function groupNeeds(items) {
 export function NeedsPanel({ navKey }) {
   const lease = useLease(navKey);
   const { needs, chatOwner: owner, instances } = useStore(appStore);
-  // #1630: a group is headed by the instance's display name (its name on hover), as the sidebar shows it.
-  const nameFor = (instance) => { const it = (instances || []).find((i) => i && i.name === instance); return it ? labelOf(it) : instance; };
+  const names = useStore(namesStore);
+  // #1630/#1722: a group is headed by the instance's leading name (the "Names" preference), as the sidebar shows it.
+  const nameFor = (instance) => { const it = (instances || []).find((i) => i && i.name === instance); return it ? namesOf(it, names.primary).primary : instance; };
   const items = Array.isArray(needs) ? needs : [];
   const [, tick] = useState(0);
   useEffect(() => { setTitle(tn("title")); }, [navKey]);

package/dist/ui/panel-settings.js

@@ -709,7 +709,7 @@ function General({ ctx }) {
  * 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.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 }) {

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,10 @@
   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" };
   // #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 +69,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 +80,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 +186,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;
@@ -342,5 +373,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/shared/app-i18n.js

@@ -62,6 +62,8 @@ register("app", {
   en: {
     brand: "AgEnD", fleet: "Fleet", fleetOverview: "Fleet overview", view: "View", settings: "Settings", instances: "Instances", newInstance: "New instance",
     collapse: "Hide the sidebar", expand: "Show the sidebar", openMenu: "Open the sidebar", closeMenu: "Close the sidebar",
+    resizeSidebar: "Sidebar width", resizeSidebarHint: "Drag to resize · double-click to reset",
+    names: "Names", namesNickname: "Nickname first", namesInstance: "Real name first",
     theme: "Theme", themeSystem: "System", themeLight: "Light", themeDark: "Dark", language: "Language",
     previews: "Allow HTML previews", tour: "Tour", tourTitle: "Show the web chat tour again",
     needsYou: "needs you", approxNote: "Read from the terminal, so approximate", chat: "Chat", details: "Details", instanceViews: "Views of {0}",
@@ -91,6 +93,8 @@ register("app", {
   "zh-TW": {
     brand: "AgEnD", fleet: "Fleet", fleetOverview: "Fleet 概覽", view: "檢視", settings: "設定", instances: "Instances", newInstance: "新增 instance",
     collapse: "隱藏側邊欄", expand: "顯示側邊欄", openMenu: "打開側邊欄", closeMenu: "關閉側邊欄",
+    resizeSidebar: "側邊欄寬度", resizeSidebarHint: "拖曳調整寬度 · 按兩下恢復預設",
+    names: "名稱", namesNickname: "暱稱優先", namesInstance: "實際名稱優先",
     theme: "主題", themeSystem: "跟隨系統", themeLight: "淺色", themeDark: "深色", language: "語言",
     previews: "允許預覽 HTML", tour: "導覽", tourTitle: "再看一次網頁聊天導覽",
     needsYou: "等你回應", approxNote: "從終端畫面判讀，僅供參考", chat: "聊天", details: "詳細資訊", instanceViews: "{0} 的檢視",

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

@@ -32,6 +32,7 @@ export const SYNCED = {
   "nav.filter": { ls: "agend_instance_filter", ...json },
   "nav.favorites": { ls: "agend_favorites", ...json },   // #1664
   "preview.optIn": { ls: "agend_html_preview", toLocal: (v) => (v ? "on" : null), fromLocal: (s) => (s === "on" ? true : undefined) },
+  "names.primary": { ls: "agend_names_primary", toLocal: (v) => (v === "instance" ? v : null), fromLocal: (s) => (s === "instance" ? s : undefined) },   // #1722
 };
 const own = (o, k) => !!o && Object.prototype.hasOwnProperty.call(o, k);
 const now = () => (typeof performance !== "undefined" ? performance.now() : Date.now());

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

@@ -12,8 +12,8 @@ import { chatPath, viewPath, settingsPath, routeKey, NEEDS_PATH, detailsPath, fl
 import { SessionMenu } from "./app-session.js";
 import { savePref } from "./app-prefs.js";
 import { ErrorState, Skeleton } from "./ui-states.js";
-import { InstanceNav, RosterNav } from "./instance-nav.js";
-import { UsageRail } from "./header-tools.js";
+import { InstanceNav, RosterNav, namesStore, setNamesPrimary } from "./instance-nav.js";
+import { UsageRail, usageRailStore } from "./header-tools.js";
 
 /** Shell state shared with panels: the phone drawer, the collapsed sidebar, extensions a panel module adds. */
 export const shellStore = createStore({ drawer: false, collapsed: readCollapsed(), keyboard: false, dialog: null, side: null });
@@ -43,6 +43,144 @@ export function closeDialog() { shellStore.set({ dialog: null }); }
 function readCollapsed() { try { return localStorage.getItem("agend_sidebar") === "hidden"; } catch { return false; } }
 const narrow = () => typeof matchMedia === "function" && matchMedia("(max-width: 899px)").matches;
 
+// ── #1722: the sidebar's width — this device's (the #1665 split: a width depends on the screen), through the CSSOM ──
+export const SIDEBAR_W = { min: 200, max: 480, def: 260, step: 16, mainMin: 480 };
+const SIDEBAR_W_KEY = "agend_sidebar_w";
+const win = () => (typeof window !== "undefined" ? window : null);
+const viewportWidth = () => { const w = win(); return w && typeof w.innerWidth === "number" && w.innerWidth > 0 ? w.innerWidth : 1366; };
+/** The width the sidebar may have on a viewport `vw` px wide: within [min, max], and leaving the main pane mainMin. */
+export function clampSidebarWidth(w, vw) {
+  const max = Math.max(SIDEBAR_W.min, Math.min(SIDEBAR_W.max, vw - SIDEBAR_W.mainMin));
+  return Math.round(Math.min(max, Math.max(SIDEBAR_W.min, w)));
+}
+function storedSidebarWidth() { try { const v = Number(localStorage.getItem(SIDEBAR_W_KEY)); return Number.isFinite(v) && v > 0 ? v : null; } catch { return null; } }
+/** { width: px | null } — null: the default width (tokens.css). */
+export const sidebarWidthStore = createStore({ width: null });
+/** Set the width (clamped to this viewport); `save`: this device keeps it. null: back to the default, nothing kept. */
+/**
+ * The room the main pane has beside the sidebar: the window, less the usage rail when it is on screen (#1673 — shown
+ * open, ≥ 1200 px; its CSS width when the layout gives none). #1722 review: the sidebar never leaves main under 480.
+ */
+function mainBudget() {
+  const vw = viewportWidth();
+  if (vw < 1200 || typeof document === "undefined") return vw;
+  const rail = document.querySelector(".u-rail");
+  if (!rail) return vw;
+  const w = Math.round(rail.getBoundingClientRect ? rail.getBoundingClientRect().width : 0) || RAIL_W;
+  return vw - w;
+}
+const RAIL_W = 320;
+/** Show a width (clamped to the room there is now) — this page only; null: the default width. Nothing is kept. */
+function showSidebarWidth(w) {
+  const root = document.documentElement;
+  if (w == null) { root.style.removeProperty("--sidebar-w"); sidebarWidthStore.set({ width: null }); return null; }
+  const v = clampSidebarWidth(w, mainBudget());
+  root.style.setProperty("--sidebar-w", `${v}px`);   // CSSOM: the page's CSP allows no style attribute
+  sidebarWidthStore.set({ width: v });
+  return v;
+}
+/** Set the width (clamped to the room there is now); `save`: this device keeps it. null: back to the default, nothing kept. */
+export function setSidebarWidth(w, save = false) {
+  if (w == null) {
+    try { localStorage.removeItem(SIDEBAR_W_KEY); } catch { /* this page only */ }
+    return showSidebarWidth(null);
+  }
+  const v = showSidebarWidth(w);
+  // Kept: the choice within the window, not the squeeze beside the rail — it comes back when the rail goes.
+  if (save) { try { localStorage.setItem(SIDEBAR_W_KEY, String(clampSidebarWidth(w, viewportWidth()))); } catch { /* this page only */ } }
+  return v;
+}
+/** A drag in progress (one at a time): its end(commit). Only it may set the width until it ends. */
+let activeDrag = null;
+/**
+ * This device's kept width, shown within the room there is now — again whenever that changes (the window, the usage
+ * rail, the page). A squeeze is shown, never kept: the device's choice comes back when there is room. On a phone (the
+ * drawer) none applies, and a drag in progress is cancelled.
+ */
+function applyKeptSidebarWidth() {
+  if (narrow()) {
+    if (activeDrag) activeDrag.end(false);
+    showSidebarWidth(null);
+    return;
+  }
+  if (activeDrag) return;
+  const w = storedSidebarWidth();
+  if (w != null) showSidebarWidth(w);
+}
+const afterPaint = (fn) => (typeof requestAnimationFrame === "function" ? requestAnimationFrame(() => fn()) : setTimeout(fn, 0));
+/** The separator on the sidebar's right edge: drag, ← → (16 px), Home / End, Enter or a double-click resets. */
+function SidebarResize() {
+  const { width } = useStore(sidebarWidthStore);
+  useStore(usageRailStore);   // the rail's room is the separator's limit too
+  useLayoutEffect(() => {
+    applyKeptSidebarWidth();
+    // The room changes with the window, the rail (opened, closed) and the page (a page with no rail): shown again,
+    // once the page has drawn its change.
+    const again = () => afterPaint(applyKeptSidebarWidth);
+    const offRail = usageRailStore.subscribe(again);
+    const offNav = navStore.subscribe(again);
+    const w = win();
+    if (w && typeof w.addEventListener === "function") w.addEventListener("resize", applyKeptSidebarWidth);
+    return () => {
+      offRail(); offNav();
+      if (w && typeof w.removeEventListener === "function") w.removeEventListener("resize", applyKeptSidebarWidth);
+      if (activeDrag) activeDrag.end(false);   // unmounted mid-drag: nothing kept, nothing left behind
+    };
+  }, []);
+  const now = width ?? SIDEBAR_W.def;
+  const onKey = (e) => {
+    const cur = sidebarWidthStore.get().width ?? SIDEBAR_W.def;
+    if (e.key === "ArrowRight") setSidebarWidth(cur + SIDEBAR_W.step, true);
+    else if (e.key === "ArrowLeft") setSidebarWidth(cur - SIDEBAR_W.step, true);
+    else if (e.key === "Home") setSidebarWidth(SIDEBAR_W.min, true);
+    else if (e.key === "End") setSidebarWidth(SIDEBAR_W.max, true);
+    else if (e.key === "Enter") setSidebarWidth(null);
+    else return;
+    e.preventDefault();
+  };
+  // One pointer owns a drag. Only its release keeps the width; a cancel, a lost capture, the drawer or an unmount
+  // puts back the width shown before it and keeps nothing — and no event of it can write after it ended. What is kept
+  // is where the pointer went (within the window), not what the room beside the rail let it show.
+  const onDown = (e) => {
+    if (e.button !== 0 || activeDrag || narrow()) return;
+    e.preventDefault();
+    const handle = e.currentTarget, pointerId = e.pointerId;
+    const before = sidebarWidthStore.get().width;
+    let chosen = null;   // the pointer's own width this drag; null: it never moved
+    const left = handle.parentElement ? handle.parentElement.getBoundingClientRect().left : 0;
+    const mine = {};
+    const own = (ev) => activeDrag === mine && (ev.pointerId === undefined || ev.pointerId === pointerId);
+    const move = (ev) => { if (own(ev)) { chosen = ev.clientX - left; showSidebarWidth(chosen); } };
+    const up = (ev) => { if (own(ev)) mine.end(true); };
+    const cancel = (ev) => { if (own(ev)) mine.end(false); };
+    mine.end = (commit) => {
+      if (activeDrag !== mine) return;
+      activeDrag = null;
+      handle.removeEventListener("pointermove", move);
+      handle.removeEventListener("pointerup", up);
+      handle.removeEventListener("pointercancel", cancel);
+      handle.removeEventListener("lostpointercapture", cancel);
+      handle.classList.remove("dragging");
+      document.body.classList.remove("side-resizing");
+      try { handle.releasePointerCapture(pointerId); } catch { /* not held */ }
+      if (commit && chosen != null) setSidebarWidth(chosen, true);
+      else showSidebarWidth(before);
+    };
+    activeDrag = mine;
+    try { handle.setPointerCapture(pointerId); } catch { /* the move still works while over the handle */ }
+    handle.classList.add("dragging");
+    document.body.classList.add("side-resizing");
+    handle.addEventListener("pointermove", move);
+    handle.addEventListener("pointerup", up);
+    handle.addEventListener("pointercancel", cancel);
+    handle.addEventListener("lostpointercapture", cancel);
+  };
+  return html`<div class="side-resize" role="separator" aria-orientation="vertical" tabindex="0" aria-controls="sidebar"
+    aria-label=${t("app.resizeSidebar")} title=${t("app.resizeSidebarHint")} aria-valuemin=${String(SIDEBAR_W.min)}
+    aria-valuemax=${String(clampSidebarWidth(Infinity, mainBudget()))} aria-valuenow=${String(now)}
+    onKeyDown=${onKey} onPointerDown=${onDown} ondblclick=${() => setSidebarWidth(null)}></div>`;
+}
+
 export function openDrawer() { shellStore.set({ drawer: true }); }
 export function closeDrawer() { if (shellStore.get().drawer) shellStore.set({ drawer: false }); }
 export function toggleSidebar() {
@@ -127,6 +265,7 @@ function Sidebar({ route, onNewInstance, viewOnly }) {
         <a class="side-row" href=${signInHref()}><${Icon} name="user" /><span>${t("app.signIn")}</span></a>
         <${PrefsPopover} />
       </div>
+      <${SidebarResize} />
     </aside>`;
   }
   // #1675: the whole fleet, on its Org chart (#1389), from anywhere — top left, so at the top of a phone's drawer too. The
@@ -152,6 +291,7 @@ function Sidebar({ route, onNewInstance, viewOnly }) {
       ${navLink("settings", settingsPath(), "settings", t("app.settings"))}
       <${SessionMenu} />
     </div>
+    <${SidebarResize} />
   </aside>`;
 }
 
@@ -167,6 +307,7 @@ function ViewOnlyNav({ route }) {
 export function DevicePrefs({ labels = false } = {}) {
   const [theme, setTheme] = useState(typeof AgendTheme !== "undefined" ? AgendTheme.get() : "system");
   const [l, setL] = useState(lang());
+  const names = useStore(namesStore);   // #1722
   // #1665: what is in force, as it changes — another device's choice arriving while this is open is shown at once.
   useEffect(() => (typeof AgendTheme !== "undefined" && typeof AgendTheme.onChange === "function" ? AgendTheme.onChange(setTheme) : undefined), []);
   useEffect(() => onLang(setL), []);
@@ -177,6 +318,9 @@ export function DevicePrefs({ labels = false } = {}) {
     <label class="pref"><${Icon} name="globe" size=${16} /><span class=${labels ? "pref-label" : "sr-only"}>${t("app.language")}</span>
       <select value=${l} aria-label=${t("app.language")} onChange=${(e) => { setL(e.target.value); setLang(e.target.value); savePref("lang", e.target.value); }}>
         <option value="en">English</option><option value="zh-TW">中文</option></select></label>
+    <label class="pref"><${Icon} name="user" size=${16} /><span class=${labels ? "pref-label" : "sr-only"}>${t("app.names")}</span>
+      <select value=${names.primary} aria-label=${t("app.names")} onChange=${(e) => setNamesPrimary(e.target.value)}>
+        <option value="nickname">${t("app.namesNickname")}</option><option value="instance">${t("app.namesInstance")}</option></select></label>
   </div>`;
 }