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

package/dist/ui/icons/favicon.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">
+  <title>AgEnD — Ag</title>
+  <rect x="1" y="1" width="62" height="62" rx="12" fill="#e5eaf0" stroke="#617386" stroke-width="2"/>
+  <g transform="translate(0 -2)"><g fill="#14273d" fill-rule="evenodd">
+    <path d="M8.5 43 17 18h6l8.5 25H26l-2-6h-8l-2 6Zm9-10.5h5l-2.5-8Z"/>
+    <path transform="translate(2 0)" d="M49.5 27v18.8c0 5-3.1 7.2-8.2 7.2h-6.8v-4.8H41c2.6 0 3.7-.9 3.7-3.2v-3.3c-1.3 1.5-3.1 2.3-5.6 2.3-5.8 0-9-3.7-9-8.9 0-5.1 3.2-8.9 9-8.9 2.5 0 4.3.8 5.6 2.3V27Zm-9.7 3.8c-3 0-4.6 1.8-4.6 4.3s1.6 4.3 4.6 4.3 4.6-1.8 4.6-4.3-1.6-4.3-4.6-4.3Z"/>
+  </g></g>
+</svg>

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;
@@ -64,7 +68,8 @@ export function boot({ stream, boot: bootData, deps = {} }) {
   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).
-  if (P() && bootData) P().init(bootData);
+  // #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; } });
   addFooterItem("previews", PreviewOptIn);
   addFooterItem("tour", TourButton);
   installTour();
@@ -139,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} />`;
 }
 
@@ -151,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); }, []);
@@ -190,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,
@@ -203,17 +209,17 @@ 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} />
         <${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} />
+        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>`;
 }
@@ -230,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 });
@@ -429,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/preview-panel.js

@@ -105,7 +105,8 @@ const timeOf = (ts) => (ts ? new Date(ts).toLocaleTimeString([], { hour: "2-digi
  * props: name (the instance), msgs() → its messages, subscribe(fn) → unsubscribe (the chat store's), keyOf(x),
  * reveal(msgKey) (the thread shows that message), download(code).
  */
-export function PreviewPanel({ name, split, msgs, subscribe, keyOf, reveal, download }) {
+/** allow(): this device's opt-in through the chat's one path (setPreviewOptIn: the confirm, then setOptIn) → the choice. */
+export function PreviewPanel({ name, split, msgs, subscribe, keyOf, reveal, download, allow }) {
   const [st, setSt] = useState(state);
   const [view, setView] = useState("preview");
   const [run, setRun] = useState({ state: "idle", reason: "" });
@@ -203,7 +204,11 @@ export function PreviewPanel({ name, split, msgs, subscribe, keyOf, reveal, down
   if (!open) return null;
   const going = run.state === "starting" || run.state === "running";
   const a = P().availability();
-  const note = run.reason || (going ? (run.state === "starting" ? t("chat.pvStarting") : "") : a.ok ? t("chat.pvPanelIdle") : a.reason);
+  // #1554: a device that has not allowed previews is offered the same "Allow previews" here (the same confirm); Preview
+  // is then enabled — still a click. Why a run stopped (e.g. switched off in another tab) is still said first.
+  const askOptIn = !going && !a.ok && a.why === "optin" && typeof allow === "function";
+  const note = run.reason || (going ? (run.state === "starting" ? t("chat.pvStarting") : "") : a.ok ? t("chat.pvPanelIdle") : askOptIn ? t("chat.pvWhyOptinPanel") : a.reason);
+  const allowHere = async () => { if (await allow()) setRun({ state: "idle", reason: "" }); };
   const source = t("chat.pvSource", open.sender || name, timeOf(open.ts));
   return html`<div class="pv-divider" ref=${divider} role="separator" aria-orientation="vertical" tabindex="0" aria-label=${t("chat.pvResize")}
       aria-valuemin=${String(MIN_PANEL)} onKeyDown=${onKey} onPointerDown=${onDown}></div>
@@ -227,8 +232,8 @@ export function PreviewPanel({ name, split, msgs, subscribe, keyOf, reveal, down
       </div>
       ${newer && newer.key !== open.key ? html`<div class="pv-newer" role="status"><span>${t("chat.pvNewer", timeOf(newer.ts))}</span>
         <button type="button" class="btn btn-sm pv-newer-show" onClick=${showNewer}>${t("chat.pvNewerShow")}</button>${newerNote ? html`<span class="pv-newer-note">${newerNote}</span>` : null}</div>` : null}
-      ${going ? html`<div class="pv-banner">${P().BANNER}</div>` : null}
-      ${note && view === "preview" ? html`<div class="pv-note">${note}</div>` : null}
+      ${going ? html`<div class="pv-banner">${P().banner()}</div>` : null}
+      ${note && view === "preview" ? html`<div class="pv-note">${note}${askOptIn ? html` <button type="button" class="btn btn-sm pv-panel-allow" onClick=${allowHere}>${t("chat.pvAllowButton")}</button>` : null}</div>` : null}
       <div class=${`pv-panel-body${view === "code" ? " show-code" : ""}`}>
         <div class="pv-holder" ref=${holder}></div>
         ${view === "code" ? html`<pre class="pv-code"><code>${open.code}</code></pre>` : null}