@songsid/agend 2.2.0-alpha.4 → 2.2.0-alpha.5

package/dist/ui/chat-strings.js

@@ -32,6 +32,7 @@ register("chat", {
     pvOpenPanel: "Open in panel", pvInPanel: "Shown in the panel.", pvPanel: "HTML preview", pvSource: "From {0}, {1} — show the message",
     pvPage: "Page", pvCode: "Code", pvReload: "Reload", pvClose: "Close the panel", pvBack: "Back to the chat", pvResize: "Resize the preview panel",
     pvNewer: "A newer version is in the reply from {0}.", pvNewerShow: "Show it", pvPanelIdle: "Click Preview to run it here.",
+    lbLabel: "Image: {0}", lbLabelNoName: "Image", lbClose: "Close", lbOpenOriginal: "Open original", lbPrev: "Previous image", lbNext: "Next image", lbCount: "{0} / {1}",
     // #1554: preview.js's words (its English is the fallback there), and the server's reasons by code.
     pvWhyOptin: "HTML previews are off on this device (this browser, at this address). Allow them from this card's ⋯ menu or the sidebar.",
     pvWhyOptinPanel: "HTML previews are off on this device (this browser, at this address).",
@@ -65,6 +66,12 @@ register("chat", {
     loadFailed: "Failed to load", tour: "Tour", tourBtnTitle: "Show the web chat tour again",
     dName: "Name", dStatus: "Status", dDisplay: "Display name", dDescription: "Description", dDirectory: "Directory", dBackend: "Backend", dModel: "Model", dEffort: "Effort",
     dCost: "Cost", dCostNote: "(session accumulated)", dContext: "Context", dRate5: "Rate 5h", dRate7: "Rate 7d", dActivity: "Recent activity", dInstance: "Instance", dRuntime: "Runtime",
+    // #1523 N2: Details (the Fleet side of one instance).
+    dConfig: "Configuration", dBinding: "Bound to", dBindingGeneral: "the General topic of {0}", dBindingTopic: "{0}, topic {1}", dBindingNoTopic: "{0}, no topic yet",
+    dBindingDefault: "{0} (the first connection, by default)", dBindingRoom: "ClassicBot room #{0} ({1})",
+    dBindingNone: "not bound (web only)", dPrimary: "the first connection", dTags: "Tags", dReadOnly: "Read only — change it in Settings.",
+    dEditInSettings: "Edit in Settings", dPause: "Pause", dWake: "Wake", dPaused: "{0} paused", dWoken: "{0} is waking up", dActionFailed: "That did not work — try again.",
+    dNoActivity: "No activity in the last hour.", dWorking: "Working…",
     configured: "(configured)", fleetDefault: "(fleet default)",
   },
   "zh-TW": {
@@ -97,6 +104,7 @@ register("chat", {
     pvOpenPanel: "在面板中開啟", pvInPanel: "已在面板中顯示。", pvPanel: "HTML 預覽", pvSource: "來自 {0}，{1}——顯示該訊息",
     pvPage: "頁面", pvCode: "程式碼", pvReload: "重新載入", pvClose: "關閉面板", pvBack: "回到對話", pvResize: "調整預覽面板寬度",
     pvNewer: "{0} 的回覆裡有較新的版本。", pvNewerShow: "顯示", pvPanelIdle: "按「預覽」在這裡執行。",
+    lbLabel: "圖片：{0}", lbLabelNoName: "圖片", lbClose: "關閉", lbOpenOriginal: "開啟原圖", lbPrev: "上一張", lbNext: "下一張", lbCount: "{0} / {1}",
     pvWhyOptin: "這台裝置（這個瀏覽器、這個網址）還沒允許 HTML 預覽。可從這張卡片的 ⋯ 選單或側欄允許。",
     pvWhyOptinPanel: "這台裝置（這個瀏覽器、這個網址）還沒允許 HTML 預覽。",
     pvWhyNever: "這台裝置在這個工作階段已關閉預覽。",
@@ -129,6 +137,11 @@ register("chat", {
     loadFailed: "載入失敗", tour: "導覽", tourBtnTitle: "再看一次網頁聊天導覽",
     dName: "名稱", dStatus: "狀態", dDisplay: "顯示名稱", dDescription: "說明", dDirectory: "目錄", dBackend: "Backend", dModel: "模型", dEffort: "Effort",
     dCost: "花費", dCostNote: "（本次 session 累計）", dContext: "Context", dRate5: "5 小時額度", dRate7: "7 天額度", dActivity: "最近活動", dInstance: "Instance", dRuntime: "執行環境",
+    dConfig: "設定", dBinding: "綁定", dBindingGeneral: "{0} 的 General topic", dBindingTopic: "{0}，topic {1}", dBindingNoTopic: "{0}，尚未綁定 topic",
+    dBindingDefault: "{0}（預設：第一個連線）", dBindingRoom: "ClassicBot 房間 #{0}（{1}）",
+    dBindingNone: "未綁定（只用網頁）", dPrimary: "第一個連線", dTags: "標籤", dReadOnly: "這裡只能檢視——請到設定修改。",
+    dEditInSettings: "到設定編輯", dPause: "暫停", dWake: "喚醒", dPaused: "{0} 已暫停", dWoken: "{0} 正在喚醒", dActionFailed: "沒有成功，請再試一次。",
+    dNoActivity: "最近一小時沒有活動。", dWorking: "處理中…",
     configured: "（設定值）", fleetDefault: "（fleet 預設）",
   },
 });

package/dist/ui/chat-thread.js

@@ -274,8 +274,23 @@ export function createThread(list, scroller, opts) {
     button.textContent = ok ? tr("chat.copied") : tr("chat.copyFailed");
     setTimeout(() => { button.textContent = was; }, 1200);
   }
+  /**
+   * A chat image: a plain left click (or Enter on it) shows it in the page — this message's images, from the one
+   * clicked. With a modifier key the link does what the browser does (a new tab, a new window, a download); a middle
+   * click is not a click event at all. True when it was an image (whether or not it opened).
+   */
+  function onImageClick(e) {
+    const img = e.target && e.target.closest ? e.target.closest("a.att-img") : null;
+    if (!img || !list.contains(img)) return false;
+    if (opts.openImage && !e.defaultPrevented && (e.button ?? 0) === 0 && !e.ctrlKey && !e.metaKey && !e.shiftKey && !e.altKey) {
+      const links = [...(img.closest(".atts") || img).querySelectorAll("a.att-img")];
+      if (opts.openImage(links.length ? links : [img], img)) e.preventDefault();
+    }
+    return true;
+  }
   /** The thread's own buttons (Copy, Wrap, fold), delegated from the thread element. */
   function onClick(e) {
+    if (onImageClick(e)) return;
     const el = e.target && e.target.closest ? e.target.closest("[data-act]") : null;
     if (!el || !list.contains(el)) return;
     const act = el.dataset.act;

package/dist/ui/image-lightbox.js

@@ -0,0 +1,104 @@
+// A chat image, full size, in the page: a dark overlay with the image fitted to the viewport, ✕ to close, a click on
+// the dark area or Esc closes it too, and focus goes back to the thumbnail. "Open original" opens the same URL in a
+// new tab (the thumbnail's link, unchanged: a ctrl-, meta-, shift- or middle-click on it still does what the browser
+// does). Several images in one message: previous / next, and the arrow keys.
+//
+// The native <dialog> opened with showModal(): the browser traps focus and makes the rest inert. No style attribute
+// (#1300): classes only. Only a file URL the chat itself rendered (/ui/file/<32 hex>) is ever shown.
+import { html, useEffect, useLayoutEffect, useRef, useState } from "/assets/app-html.js";
+import { t } from "/assets/app-i18n.js";
+import { createStore, useStore } from "/assets/app-store.js";
+import { Icon } from "/assets/ui-icons.js";
+
+const FILE_URL = /^\/ui\/file\/[0-9a-f]{32}$/;
+/** What is shown: { items: [{ src, name }], index, opener } or null. One per page; the chat that shows it owns it. */
+export const lightboxStore = createStore({ open: null });
+let seq = 0;
+
+/**
+ * The images of a message, from its thumbnails' links; `index` the one clicked. Anything that is not a chat file URL
+ * is left out (and nothing opens if the clicked one is not).
+ */
+export function openLightbox(links, clicked) {
+  const items = [];
+  let index = -1;
+  for (const a of links) {
+    const src = a.getAttribute("href") || "";
+    if (!FILE_URL.test(src)) continue;
+    if (a === clicked) index = items.length;
+    const img = a.querySelector("img");
+    items.push({ src, name: (img && img.getAttribute("alt")) || "" });
+  }
+  if (index < 0) return false;
+  lightboxStore.set({ open: { items, index, opener: clicked, seq: ++seq } });
+  return true;
+}
+/**
+ * Close it — the one way every close goes: ✕, the dark area, Esc, the dialog's own close (the browser's, a form with
+ * method=dialog), the chat leaving. The store is the truth; unmounting the dialog is the one cleanup (scroll unlocked,
+ * focus back on the thumbnail). `seq`: only that lightbox — a late close of one already replaced closes nothing.
+ */
+export function closeLightbox(seq) {
+  const open = lightboxStore.get().open;
+  if (open && (seq === undefined || open.seq === seq)) lightboxStore.set({ open: null });
+}
+
+/** Rendered by the chat; gone with it (another instance, another panel). */
+export function LightboxHost() {
+  const { open } = useStore(lightboxStore);
+  useEffect(() => () => closeLightbox(), []);
+  return open ? html`<${ImageLightbox} key=${open.seq} items=${open.items} index=${open.index} opener=${open.opener} onClose=${() => closeLightbox(open.seq)} />` : null;
+}
+
+function ImageLightbox({ items, index, opener, onClose }) {
+  const [at, setAt] = useState(index);
+  const ref = useRef(null);
+  const close = useRef(null);
+  const item = items[at] || items[0];
+  const many = items.length > 1;
+  const step = (d) => setAt((n) => (n + d + items.length) % items.length);
+  useLayoutEffect(() => {
+    const d = ref.current;
+    const root = typeof document !== "undefined" ? document.documentElement : null;
+    if (root) root.classList.add("lb-open");                 // the chat behind it does not scroll
+    if (d && typeof d.showModal === "function" && !d.open) d.showModal();
+    if (close.current && typeof close.current.focus === "function") close.current.focus();
+    return () => {
+      if (root) root.classList.remove("lb-open");
+      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;
+    // Esc: the browser fires "cancel"; closing goes through the store so its state stays the truth.
+    const onCancel = (e) => { e.preventDefault(); onClose(); };
+    // The dialog closed by itself — the browser (a close request it did not ask about) or a form with method=dialog:
+    // the same close as every other, so the store and the cleanup follow (#1558 review).
+    const onNativeClose = () => onClose();
+    // The dark area (the dialog itself, or the stage around the image) closes it; the image and the controls do not.
+    const onClick = (e) => { if (e.target === d || (e.target && e.target.classList && e.target.classList.contains("lb-stage"))) onClose(); };
+    const onKey = (e) => {
+      if (!many) return;
+      if (e.key === "ArrowRight") { e.preventDefault(); step(1); } else if (e.key === "ArrowLeft") { e.preventDefault(); step(-1); }
+    };
+    d.addEventListener("cancel", onCancel);
+    d.addEventListener("close", onNativeClose);
+    d.addEventListener("click", onClick);
+    d.addEventListener("keydown", onKey);
+    return () => { d.removeEventListener("cancel", onCancel); d.removeEventListener("close", onNativeClose); d.removeEventListener("click", onClick); d.removeEventListener("keydown", onKey); };
+  }, [onClose, many, items.length]);
+  const label = item.name ? t("chat.lbLabel", item.name) : t("chat.lbLabelNoName");
+  return html`<dialog ref=${ref} class="lb" role="dialog" aria-modal="true" aria-label=${label}>
+    <div class="lb-bar">
+      <span class="lb-name" title=${item.name}>${item.name}</span>
+      ${many ? html`<span class="lb-count">${t("chat.lbCount", at + 1, items.length)}</span>` : null}
+      <a class="btn btn-sm lb-orig" href=${item.src} target="_blank" rel="noopener noreferrer"><${Icon} name="external" size=${14} /><span class="lbl">${t("chat.lbOpenOriginal")}</span></a>
+      <button type="button" class="icon-btn lb-close" ref=${close} aria-label=${t("chat.lbClose")} title=${t("chat.lbClose")} onClick=${onClose}><${Icon} name="close" /></button>
+    </div>
+    <div class="lb-stage"><img class="lb-img" src=${item.src} alt=${item.name} /></div>
+    ${many ? html`<button type="button" class="icon-btn lb-nav lb-prev" aria-label=${t("chat.lbPrev")} title=${t("chat.lbPrev")} onClick=${() => step(-1)}><${Icon} name="back" /></button>
+      <button type="button" class="icon-btn lb-nav lb-next" aria-label=${t("chat.lbNext")} title=${t("chat.lbNext")} onClick=${() => step(1)}><${Icon} name="forward" /></button>` : null}
+  </dialog>`;
+}

package/dist/ui/panel-chat.js

@@ -11,10 +11,13 @@ import { t } from "/assets/app-i18n.js";
 import { appStore, useStore } from "/assets/app-store.js";
 import { useLease } from "/assets/app-ctx.js";
 import { PanelHeader, onPanelKey, setTitle, addFooterItem, statusClass, statusLabel, openDrawer, requestNewInstance } from "/assets/app-shell.js";
+import { detailsPath } from "/assets/app-route.js";
+import { InstanceSwitch } from "/assets/instance-switch.js";
+import { HeaderTools } from "/assets/header-tools.js";
 import { navigate } from "/assets/app-nav.js";
 import { Menu } from "/assets/ui-menu.js";
 import { Dialog } from "/assets/ui-dialog.js";
-import { Empty, ErrorState, Skeleton } from "/assets/ui-states.js";
+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";
@@ -26,6 +29,7 @@ import { PreviewPanel, openPanel, panelStore, shownKey } from "./preview-panel.j
 import { needsArgument, paletteFor, parseCommandLine } from "./chat-commands.js";
 import { installTour, refreshTourSpot, startTour } from "./chat-tour.js";
 import { FirstRunCard } from "./first-run.js";
+import { LightboxHost, openLightbox } from "./image-lightbox.js";
 
 const R = () => globalThis.AgendChatRender;
 const P = () => globalThis.AgendPreview;
@@ -140,7 +144,7 @@ export function ChatPanel({ route, navKey }) {
   }
   if (!app.ready) return html`<div class="panel p-chat"><${PanelHeader} title=${name} /><div class="panel-body"><${Skeleton} lines=${5} /></div></div>`;
   if (!inst) return html`<${NotFound} name=${name} />`;
-  return html`<${ChatView} key=${name} name=${name} inst=${inst} lease=${lease} exec=${app.exec[name]}
+  return html`<${ChatView} key=${name} name=${name} inst=${inst} lease=${lease} navKey=${navKey} exec=${app.exec[name]}
     awaiting=${Object.prototype.hasOwnProperty.call(app.awaiting, name) ? app.awaiting[name] : null} />`;
 }
 
@@ -152,8 +156,8 @@ function NotFound({ name }) {
       action=${html`<button type="button" class="btn only-narrow" onClick=${openDrawer}>${t("chat.backToList")}</button>`} /></div></div>`;
 }
 
-function ChatView({ name, inst, lease, exec, awaiting }) {
-  const [dialog, setDialog] = useState(null);       // "details" | "delete" | null
+function ChatView({ name, inst, lease, navKey, exec, awaiting }) {
+  const [dialog, setDialog] = useState(null);       // "delete" | null
   const [wrap, setWrap] = useState(codeWrap);
   const view = useRef(null), split = useRef(null), thread = useRef(null);
   useEffect(() => { wrapListeners.add(setWrap); return () => wrapListeners.delete(setWrap); }, []);
@@ -191,7 +195,8 @@ function ChatView({ name, inst, lease, exec, awaiting }) {
     else toast(t(verb === "start" ? "chat.started" : verb === "stop" ? "chat.stoppedInst" : "chat.restarted", name));
   };
   const items = [
-    { key: "details", label: t("chat.details"), icon: "info", onSelect: () => setDialog("details") },
+    // #1523 N2: Details is a page now (the Fleet side of this instance), not a dialog.
+    { key: "details", label: t("chat.details"), icon: "info", onSelect: () => navigate(detailsPath(name)) },
     running ? null : { key: "start", label: t("chat.start"), icon: "play", onSelect: () => action("start") },
     running ? { key: "restart", label: t("chat.restart"), icon: "restart", onSelect: () => action("restart") } : null,
     running ? { key: "stop", label: t("chat.stopInstance"), icon: "stop", onSelect: () => action("stop") } : null,
@@ -204,7 +209,7 @@ function ChatView({ name, inst, lease, 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}><${Menu} items=${items} label=${t("app.more")} /></${PanelHeader}>
+    <${PanelHeader} title=${name} 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} />
@@ -213,8 +218,8 @@ function ChatView({ name, inst, lease, exec, awaiting }) {
       <${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)} />
     </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>
-    ${dialog === "details" ? html`<${DetailsDialog} name=${name} onClose=${() => setDialog(null)} />` : null}
     ${dialog === "delete" ? html`<${DeleteDialog} name=${name} onClose=${() => setDialog(null)} />` : null}
   </div>`;
 }
@@ -231,6 +236,7 @@ function Thread({ name, th }) {
       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
+      openImage: openLightbox,                                               // an image, full size, in the page
     });
     th.current = thread;
     thread.render(store.state.msgs[name] || [], { restore: store.state.scrollMemo[name] ?? null });
@@ -430,51 +436,6 @@ function FileChip({ f, i, name }) {
 
 // ── Dialogs ──
 
-function DetailsDialog({ name, onClose }) {
-  const lease = useLease(`details:${name}`);
-  const [d, setD] = useState(null);
-  const [failed, setFailed] = useState(false);
-  const body = useRef(null);
-  useEffect(() => {
-    (async () => {
-      try {
-        const r = await lease.fetch(`/ui/instance/${encodeURIComponent(name)}`, { headers: { "Content-Type": "application/json" } });
-        if (!lease.current()) return;
-        const j = await r.json();
-        if (!lease.current()) return;
-        setD(j);
-      } catch { if (lease.current()) setFailed(true); }
-    })();
-  }, [lease]);
-  // Bars are sized after they are drawn, through the CSSOM (never a style attribute).
-  useLayoutEffect(() => { if (body.current) for (const f of body.current.querySelectorAll(".progress-fill[data-pct]")) f.style.width = `${f.dataset.pct}%`; });
-  const src = (s) => (s === "instance" ? ` ${t("chat.configured")}` : s === "fleet-default" ? ` ${t("chat.fleetDefault")}` : "");
-  const bar = (pct, level) => html`<span class="progress-bar"><span class=${`progress-fill${level ? ` ${level}` : ""}`} data-pct=${Math.max(0, Math.min(Number(pct) || 0, 100))}></span></span>`;
-  const row = (k, v) => html`<div class="kv"><span class="k">${k}</span><span class="v">${v}</span></div>`;
-  let content;
-  if (failed) content = html`<${ErrorState} message=${t("chat.loadFailed")} />`;
-  else if (!d) content = html`<${Skeleton} lines=${6} />`;
-  else {
-    const sl = d.statusline || {}, cost = sl.cost?.total_cost_usd ?? 0, ctx = d.context_pct;
-    const rl5 = sl.rate_limits?.five_hour?.used_percentage ?? 0, rl7 = sl.rate_limits?.seven_day?.used_percentage ?? 0;
-    content = html`<section class="card"><h3>${t("chat.dInstance")}</h3>
-        ${row(t("chat.dName"), d.name)}${row(t("chat.dStatus"), d.status)}${row(t("chat.dDisplay"), d.display_name || "--")}
-        ${row(t("chat.dDescription"), d.description || "--")}${row(t("chat.dDirectory"), html`<span class="mono">${d.working_directory}</span>`)}</section>
-      <section class="card"><h3>${t("chat.dRuntime")}</h3>
-        ${row(t("chat.dBackend"), d.backend || "--")}
-        ${row(t("chat.dModel"), `${d.model || sl.model?.display_name || "--"}${d.model_source === "live" ? "" : src(d.model_source)}`)}
-        ${d.effort ? row(t("chat.dEffort"), `${d.effort}${src(d.effort_source)}`) : null}
-        ${row(t("chat.dCost"), `$${cost.toFixed(2)} ${t("chat.dCostNote")}`)}
-        ${row(t("chat.dContext"), html`<span class="pct">${ctx != null ? `${Math.round(ctx)}%` : "--"}</span>${ctx != null ? bar(ctx, ctx > 80 ? "warn" : "") : null}`)}
-        ${row(t("chat.dRate5"), html`<span class="pct">${Math.round(rl5)}%</span>${bar(rl5, rl5 > 90 ? "error" : rl5 > 70 ? "warn" : "")}`)}
-        ${row(t("chat.dRate7"), html`<span class="pct">${Math.round(rl7)}%</span>${bar(rl7, rl7 > 90 ? "error" : rl7 > 70 ? "warn" : "")}`)}</section>
-      ${d.recent_activity?.length ? html`<section class="card"><h3>${t("chat.dActivity")}</h3>${d.recent_activity.map((a, i) => html`<div key=${i} class="activity">
-        <span class="mono muted">${a.timestamp ? new Date(`${a.timestamp.replace(" ", "T")}Z`).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) : ""}</span>
-        <span class="ev">${a.event}</span> ${a.summary || ""}</div>`)}</section>` : null}`;
-  }
-  return html`<${Dialog} title=${t("chat.details")} onClose=${onClose} wide=${true}><div ref=${body}>${content}</div></${Dialog}>`;
-}
-
 function DeleteDialog({ name, onClose }) {
   // The dialog's own lease: it ends when the dialog goes (closed, or the chat left for another page). The delete
   // may still finish on the server, and says so, but a dialog that is gone never closes or navigates the page the

package/dist/ui/panel-details.js

@@ -0,0 +1,146 @@
+// #1523 N2 (§3.3, Q1 = B): Details — "the Fleet side of one instance", at /ui/fleet/agent/<name>. Behind the session
+// gate (/ui/js/). What it holds:
+// - runtime and recent activity (what Chat's details dialog showed, now a page);
+// - a read-only config summary — directory, binding, tags, description — with "Edit in Settings" (that agent's
+//   Settings dialog: Settings' own staged Apply and confirmations; nothing is edited here);
+// - the instance's actions (⋯), carried over with their calls and confirmations, none new: start / restart / stop (Chat's
+//   ⋯), pause / wake (Settings' agent row). Deletion stays where it already lives (Chat's ⋯, Settings).
+// One read of /ui/instance/<name> when it opens (#1374: nothing recurring); the live status is the app's.
+import { html, useEffect, useLayoutEffect, useRef, useState } from "/assets/app-html.js";
+import { t } from "/assets/app-i18n.js";
+import { appStore, useStore } from "/assets/app-store.js";
+import { useLease } from "/assets/app-ctx.js";
+import { PanelHeader, setTitle, statusClass, statusLabel, openDrawer } from "/assets/app-shell.js";
+import { navigate } from "/assets/app-nav.js";
+import { settingsPath } from "/assets/app-route.js";
+import { InstanceSwitch } from "/assets/instance-switch.js";
+import { HeaderTools } from "/assets/header-tools.js";
+import { Menu } from "/assets/ui-menu.js";
+import { Empty, ErrorState, Skeleton } from "/assets/ui-states.js";
+import { toast } from "/assets/ui-toast.js";
+import "./chat-strings.js";
+import { api } from "./settings-confirm.js";
+import { requestAgentSettings } from "./settings-request.js";
+
+export function DetailsPanel({ route, navKey }) {
+  const app = useStore(appStore);
+  const name = route.instance;
+  const inst = app.instances.find((i) => i.name === name) || null;
+  useEffect(() => { setTitle(`${name} · ${t("app.details")}`); }, [name, navKey]);
+  if (!app.ready) return html`<div class="panel p-details"><${PanelHeader} title=${name} /><div class="panel-body"><${Skeleton} lines=${6} /></div></div>`;
+  if (!inst) {
+    return html`<div class="panel p-details"><${PanelHeader} title=${name} />
+      <div class="panel-body center"><${Empty} icon="alert" title=${t("chat.notFound", name)} hint=${t("chat.notFoundHint")}
+        action=${html`<button type="button" class="btn only-narrow" onClick=${openDrawer}>${t("chat.backToList")}</button>`} /></div></div>`;
+  }
+  return html`<${DetailsView} key=${name} name=${name} inst=${inst} navKey=${navKey} exec=${app.exec[name]}
+    awaiting=${Object.prototype.hasOwnProperty.call(app.awaiting, name) ? app.awaiting[name] : null} />`;
+}
+
+function DetailsView({ name, inst, navKey, exec, awaiting }) {
+  const lease = useLease(`details:${name}`);
+  const [d, setD] = useState(null);
+  const [failed, setFailed] = useState(false);
+  const [busy, setBusy] = useState("");
+  const body = useRef(null);
+  // Each read is numbered: only the latest one (on this page) may set what is shown — a Retry still on its way never
+  // overwrites a newer answer, failed or not (#1561 review).
+  const reads = useRef(0);
+  const load = async () => {
+    const mine = ++reads.current;
+    const current = () => lease.current() && reads.current === mine;
+    try {
+      const r = await lease.fetch(`/ui/instance/${encodeURIComponent(name)}`, { headers: { "Content-Type": "application/json" } });
+      if (!current()) return;
+      const j = await r.json();
+      if (!current()) return;
+      if (!r.ok) { setFailed(true); return; }
+      setFailed(false); setD(j);
+    } catch { if (current()) setFailed(true); }
+  };
+  useEffect(() => { load(); }, [lease]);
+  // Bars are sized after they are drawn, through the CSSOM (never a style attribute, #1300).
+  useLayoutEffect(() => { if (body.current) for (const f of body.current.querySelectorAll(".progress-fill[data-pct]")) f.style.width = `${f.dataset.pct}%`; });
+
+  // ── Actions: the existing calls, one at a time ──
+  const act = async (key, work) => {
+    if (busy) return;
+    setBusy(key);
+    try { await work(); } finally { if (lease.current()) setBusy(""); }
+  };
+  const lifecycle = (verb) => act(verb, async () => {
+    let r;
+    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 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 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'
+  // Classic rows have (pause / wake) — never the fleet agent's (#1561 review).
+  const classic = !!(d && d.kind === "classic");
+  const editInSettings = () => { requestAgentSettings(name, classic ? "classic" : "agent"); navigate(settingsPath(classic ? "classic" : undefined)); };
+  const st = inst.status;
+  // Until its read is in, the page does not know which kind it is: no actions yet (only Edit is offered once known).
+  const items = !d ? [] : classic ? [
+    { key: "edit", label: t("chat.dEditInSettings"), icon: "settings", onSelect: editInSettings },
+    st === "running" ? { key: "pause", label: t("chat.dPause"), icon: "pause", disabled: !!busy, onSelect: () => pauseWake("pause") } : null,
+    st === "paused" ? { key: "wake", label: t("chat.dWake"), icon: "play", disabled: !!busy, onSelect: () => pauseWake("wake") } : null,
+  ] : [
+    { key: "edit", label: t("chat.dEditInSettings"), icon: "settings", onSelect: editInSettings },
+    st === "running" ? null : st === "paused" ? null : { key: "start", label: t("chat.start"), icon: "play", disabled: !!busy, onSelect: () => lifecycle("start") },
+    st === "running" ? { key: "restart", label: t("chat.restart"), icon: "restart", disabled: !!busy, onSelect: () => lifecycle("restart") } : null,
+    st === "running" ? { key: "stop", label: t("chat.stopInstance"), icon: "stop", disabled: !!busy, onSelect: () => lifecycle("stop") } : null,
+    st === "running" ? { key: "pause", label: t("chat.dPause"), icon: "pause", disabled: !!busy, onSelect: () => pauseWake("pause") } : null,
+    st === "paused" ? { key: "wake", label: t("chat.dWake"), icon: "play", disabled: !!busy, onSelect: () => pauseWake("wake") } : null,
+  ];
+
+  const cls = statusClass(inst, exec, awaiting);
+  const sub = html`<span class="status"><span class=${`dot ${cls}`} aria-hidden="true"></span>${statusLabel(inst, exec, awaiting)}</span>`;
+  const src = (s) => (s === "instance" ? ` ${t("chat.configured")}` : s === "fleet-default" ? ` ${t("chat.fleetDefault")}` : "");
+  const bar = (pct, level) => html`<span class="progress-bar"><span class=${`progress-fill${level ? ` ${level}` : ""}`} data-pct=${Math.max(0, Math.min(Number(pct) || 0, 100))}></span></span>`;
+  const row = (k, v) => html`<div class="kv"><span class="k">${k}</span><span class="v">${v}</span></div>`;
+  let content;
+  if (failed) content = html`<${ErrorState} message=${t("chat.loadFailed")} onRetry=${load} />`;
+  else if (!d) content = html`<${Skeleton} lines=${6} />`;
+  else {
+    const sl = d.statusline || {}, cost = sl.cost?.total_cost_usd ?? 0, ctx = d.context_pct;
+    const rl5 = sl.rate_limits?.five_hour?.used_percentage ?? 0, rl7 = sl.rate_limits?.seven_day?.used_percentage ?? 0;
+    // Where it is bound, as the fleet resolves it: no channel_id is the first connection (said so); "web only" only
+    // when the fleet has no connection at all (#1561 review).
+    const b = d.binding || {};
+    const conn = b.channel_id ? (b.implicit ? t("chat.dBindingDefault", b.channel_id) : b.channel_id) : null;
+    const binding = d.room ? t("chat.dBindingRoom", d.room.name, d.room.adapter_id || t("chat.dPrimary"))
+      : !conn ? t("chat.dBindingNone")
+      : b.general_topic ? t("chat.dBindingGeneral", conn)
+      : b.topic_id ? t("chat.dBindingTopic", conn, b.topic_id)
+      : t("chat.dBindingNoTopic", conn);
+    content = html`<section class="card d-config"><h3>${t("chat.dConfig")}</h3>
+        ${row(t("chat.dDisplay"), d.display_name || "--")}
+        ${row(t("chat.dDescription"), d.description || "--")}
+        ${d.working_directory ? row(t("chat.dDirectory"), html`<span class="mono">${d.working_directory}</span>`) : null}
+        ${row(t("chat.dBinding"), binding)}
+        ${row(t("chat.dTags"), Array.isArray(d.tags) && d.tags.length ? html`<span class="d-tags">${d.tags.map((x) => html`<span key=${x} class="tag">${x}</span>`)}</span>` : "--")}
+        <div class="d-edit"><span class="note">${t("chat.dReadOnly")}</span>
+          <button type="button" class="btn btn-sm d-edit-settings" onClick=${editInSettings}>${t("chat.dEditInSettings")}</button></div></section>
+      <section class="card"><h3>${t("chat.dRuntime")}</h3>
+        ${row(t("chat.dBackend"), d.backend || "--")}
+        ${row(t("chat.dModel"), `${d.model || sl.model?.display_name || "--"}${d.model_source === "live" ? "" : src(d.model_source)}`)}
+        ${d.effort ? row(t("chat.dEffort"), `${d.effort}${src(d.effort_source)}`) : null}
+        ${row(t("chat.dCost"), `$${cost.toFixed(2)} ${t("chat.dCostNote")}`)}
+        ${row(t("chat.dContext"), html`<span class="pct">${ctx != null ? `${Math.round(ctx)}%` : "--"}</span>${ctx != null ? bar(ctx, ctx > 80 ? "warn" : "") : null}`)}
+        ${row(t("chat.dRate5"), html`<span class="pct">${Math.round(rl5)}%</span>${bar(rl5, rl5 > 90 ? "error" : rl5 > 70 ? "warn" : "")}`)}
+        ${row(t("chat.dRate7"), html`<span class="pct">${Math.round(rl7)}%</span>${bar(rl7, rl7 > 90 ? "error" : rl7 > 70 ? "warn" : "")}`)}</section>
+      <section class="card"><h3>${t("chat.dActivity")}</h3>${d.recent_activity?.length ? d.recent_activity.map((a, i) => html`<div key=${i} class="activity">
+        <span class="mono muted">${a.timestamp ? new Date(`${a.timestamp.replace(" ", "T")}Z`).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) : ""}</span>
+        <span class="ev">${a.event}</span> ${a.summary || ""}</div>`) : html`<p class="note">${t("chat.dNoActivity")}</p>`}</section>`;
+  }
+  return html`<div class="panel p-details">
+    <${PanelHeader} title=${name} sub=${sub} nav=${html`<${InstanceSwitch} name=${name} current="details" />`}><${HeaderTools} navKey=${navKey} /><${Menu} items=${items} label=${t("app.more")} /></${PanelHeader}>
+    <div class="panel-body"><div class="col" ref=${body}>${busy ? html`<p class="note" role="status">${t("chat.dWorking")}</p>` : null}${content}</div></div>
+  </div>`;
+}

package/dist/ui/panel-fleet.js

@@ -9,6 +9,7 @@ import { t, register } from "/assets/app-i18n.js";
 import { appStore, useStore } from "/assets/app-store.js";
 import { useLease } from "/assets/app-ctx.js";
 import { PanelHeader, setTitle } from "/assets/app-shell.js";
+import { HeaderTools } from "/assets/header-tools.js";
 import { renavigate } from "/assets/app-nav.js";
 import { chatPath, fleetPath, FLEET_TABS } from "/assets/app-route.js";
 import { Dialog } from "/assets/ui-dialog.js";
@@ -104,7 +105,7 @@ export function FleetPanel({ route, navKey }) {
   useEffect(() => { setTitle(`${t("fleet.title")} · ${t(`fleet.${tab}`)}`); }, [tab, navKey]);
   const Body = { tasks: Tasks, schedules: Schedules, teams: Teams, org: Org, cache: Cache, config: Config }[tab] || Tasks;
   return html`<div class="panel p-fleet">
-    <${PanelHeader} title=${t("fleet.title")} />
+    <${PanelHeader} title=${t("fleet.title")}><${HeaderTools} navKey=${navKey} /></${PanelHeader}>
     <nav class="seg" aria-label=${t("fleet.title")}>${FLEET_TABS.map(k => html`<a key=${k} href=${fleetPath(k)} class=${`seg-item${k === tab ? " active" : ""}`}
       aria-current=${k === tab ? "page" : undefined}><${Icon} name=${ICONS[k]} size=${16} /><span>${t(`fleet.${k}`)}</span></a>`)}</nav>
     <div class="panel-body"><div class=${`col${tab === "org" || tab === "cache" ? " col-wide" : ""}`}><${Body} lease=${lease} /></div></div>

package/dist/ui/panel-settings.js

@@ -36,6 +36,7 @@ import {
 import { SetupWizard } from "./settings-wizard.js";
 import { CreateInstanceDialog } from "./panel-fleet.js";
 import { FirstRunCard, takeWizardRequest } from "./first-run.js";
+import { takeAgentRequest } from "./settings-request.js";
 
 const tn = (k, ...v) => t(`settings.${k}`, ...v);
 const ICONS = { agents: "bot", bots: "plug", classic: "room", general: "sliders", advanced: "code" };
@@ -200,6 +201,23 @@ export function SettingsPanel({ route, navKey }) {
   const ctx = data && !data.error ? makeCtx(data, setData, stage, unstage, reload, reloadLive, () => mount.current()) : null;
   // #1519 P7: "Connect a chat app" on the first-run card elsewhere came here for the wizard: it opens once the data is in.
   useEffect(() => { if (ctx && takeWizardRequest()) setDialog({ kind: "wizard", key: navKey }); }, [!!ctx, navKey]);
+  // #1523 N2: "Edit in Settings" on an instance's Details: that agent's dialog, once the data is in — only an agent this
+  // configuration has (own key), with Settings' own staged Apply and confirmations.
+  useEffect(() => {
+    if (!ctx) return;
+    const want = takeAgentRequest();
+    if (!want) return;
+    const own = (o, k) => !!o && Object.prototype.hasOwnProperty.call(o, k);
+    if (want.kind === "classic") {
+      // A ClassicBot room: its own dialog (ClassicDialog), found by its instance among this config's rooms.
+      const rooms = (ctx.classic && ctx.classic.channels) || {};
+      const key = Object.keys(rooms).find((k) => own(rooms, k) && rooms[k] && rooms[k].instanceName === want.name);
+      if (key) setDialog({ kind: "classic", room: { key, ...rooms[key] }, key: navKey });
+      return;
+    }
+    const insts = (ctx.fleet && ctx.fleet.instances) || {};
+    if (own(insts, want.name)) setDialog({ kind: "agent", name: want.name, inst: insts[want.name], key: navKey });
+  }, [!!ctx, navKey]);
   const sectionBody = !data ? html`<${Skeleton} lines=${6} />`
     : data.error ? html`<${ErrorState} message=${tn("configLoadFailed")} onRetry=${reload} />`
     : section === "agents" ? html`<${Agents} ctx=${ctx} search=${search} openDialog=${(d) => setDialog({ ...d, key: navKey })} />`

package/dist/ui/settings-request.js

@@ -0,0 +1,9 @@
+// #1523 N2: another page asks Settings to open one instance's dialog ("Edit in Settings" on Details). One request,
+// taken once by Settings when its data is in; it opens only what Settings itself knows (its own config, its own
+// rules): an agent of fleet.yaml, or a ClassicBot room of classicBot.yaml (#1561 review: the split stays).
+let wanted = null;
+/** kind: "agent" | "classic". */
+export function requestAgentSettings(name, kind = "agent") {
+  wanted = typeof name === "string" && name ? { name, kind: kind === "classic" ? "classic" : "agent" } : null;
+}
+export function takeAgentRequest() { const w = wanted; wanted = null; return w; }

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

@@ -42,7 +42,8 @@ register("app", {
     collapse: "Hide the sidebar", expand: "Show the sidebar", openMenu: "Open the sidebar", closeMenu: "Close the sidebar",
     theme: "Theme", themeSystem: "System", themeLight: "Light", themeDark: "Dark", language: "Language",
     previews: "Allow HTML previews on this device", tour: "Tour", tourTitle: "Show the web chat tour again",
-    needsYou: "needs you", approxNote: "Read from the terminal, so approximate", chat: "Chat",
+    needsYou: "needs you", approxNote: "Read from the terminal, so approximate", chat: "Chat", details: "Details", instanceViews: "Views of {0}",
+    textSize: "Text size: {0}", textSize_s: "S", textSize_m: "M", textSize_l: "L", textSize_fit: "Fit", usage: "Usage",
     statusRunning: "running", statusStopped: "stopped", statusCrashed: "crashed", statusWorking: "working", statusStuck: "looks stuck", statusIdle: "idle",
     connPolling: "Live updates paused — refreshing every 5 s", connDown: "Disconnected — trying again…", connConnecting: "Connecting…",
     hydrating: "Loading what is open now…", hydrateFailed: "Could not load what is open now (prompts, ticks).",
@@ -70,7 +71,8 @@ register("app", {
     collapse: "隱藏側邊欄", expand: "顯示側邊欄", openMenu: "打開側邊欄", closeMenu: "關閉側邊欄",
     theme: "主題", themeSystem: "跟隨系統", themeLight: "淺色", themeDark: "深色", language: "語言",
     previews: "允許這台裝置預覽 HTML", tour: "導覽", tourTitle: "再看一次網頁聊天導覽",
-    needsYou: "等你回應", approxNote: "從終端畫面判讀，僅供參考", chat: "聊天",
+    needsYou: "等你回應", approxNote: "從終端畫面判讀，僅供參考", chat: "聊天", details: "詳細資訊", instanceViews: "{0} 的檢視",
+    textSize: "字級：{0}", textSize_s: "小", textSize_m: "中", textSize_l: "大", textSize_fit: "剛好填滿", usage: "用量",
     statusRunning: "執行中", statusStopped: "已停止", statusCrashed: "已當掉", statusWorking: "工作中", statusStuck: "似乎卡住", statusIdle: "閒置",
     connPolling: "即時更新暫停中——每 5 秒重新整理", connDown: "已斷線——正在重試…", connConnecting: "連線中…",
     hydrating: "正在載入目前的狀態…", hydrateFailed: "無法載入目前的狀態（提示、送達標記）。",

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

@@ -13,7 +13,7 @@ export function isSafeInstanceName(name) {
 }
 
 /**
- * A path → the route it names: { panel: "chat" | "view", instance } | { panel: "fleet", tab } |
+ * A path → the route it names: { panel: "chat" | "view" | "details", instance } | { panel: "fleet", tab } |
  * { panel: "settings", section } | null (not a page of the app: a full load). A malformed name is null too; the
  * server answers it 400.
  */
@@ -21,7 +21,10 @@ export function parseRoute(pathname) {
   if (pathname === "/ui") return { panel: "chat", instance: null };
   if (pathname === "/ui/fleet") return { panel: "fleet", tab: "tasks" };
   if (pathname === "/ui/needs") return { panel: "needs" };
-  let m = /^\/ui\/fleet\/([^/]+)$/.exec(pathname);
+  // #1523 N2: one instance's Details (`agent` is no Fleet tab; a tab is one segment).
+  let m = /^\/ui\/fleet\/agent\/([^/]+)$/.exec(pathname);
+  if (m) return named("details", m[1]);
+  m = /^\/ui\/fleet\/([^/]+)$/.exec(pathname);
   if (m) return FLEET_TABS.includes(m[1]) ? { panel: "fleet", tab: m[1] } : null;
   m = /^\/ui\/chat\/([^/]+)$/.exec(pathname);
   if (m) return named("chat", m[1]);
@@ -41,6 +44,7 @@ function named(panel, segment) {
 
 export function chatPath(instance) { return `/ui/chat/${encodeURIComponent(instance)}`; }
 export function viewPath(instance) { return instance ? `/view/${encodeURIComponent(instance)}` : "/view"; }
+export function detailsPath(instance) { return `/ui/fleet/agent/${encodeURIComponent(instance)}`; }
 export function fleetPath(tab) { return tab && tab !== "tasks" ? `/ui/fleet/${tab}` : "/ui/fleet"; }
 export const NEEDS_PATH = "/ui/needs";
 export function settingsPath(section) { return section && section !== "agents" ? `/settings/${section}` : "/settings"; }
@@ -50,6 +54,7 @@ export function routePath(route) {
   if (route.panel === "settings") return settingsPath(route.section);
   if (route.panel === "needs") return NEEDS_PATH;
   if (route.panel === "view") return viewPath(route.instance);
+  if (route.panel === "details") return detailsPath(route.instance);
   return route.instance ? chatPath(route.instance) : "/ui";
 }
 /** One string per route: a change of it is a new navigation (a new lease for the panel, §4). */