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

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;
@@ -66,6 +70,13 @@ export function boot({ stream, boot: bootData, deps = {} }) {
   // belong to the app, once (they are never per mount).
   // #1554: its words in the page's language (chat.pv*); a key the dictionary does not have keeps preview.js's English.
   if (P() && bootData) P().init(bootData, { text: (key, ...v) => { const k = `chat.${key}`, s = t(k, ...v); return s === k ? null : s; } });
+  // #1568: the banner's "I understand" lasts until the next sign-in — preview.js is told which sign-in this page is
+  // (the session handle, from the one /auth/session read); none (no session, or no AgendAuth): this tab only.
+  if (P() && typeof P().setBannerScope === "function") {
+    const auth = globalThis.AgendAuth;
+    if (auth && typeof auth.sessionHandle === "function") auth.sessionHandle().then((h) => P().setBannerScope(h), () => P().setBannerScope(null));
+    else P().setBannerScope(null);
+  }
   addFooterItem("previews", PreviewOptIn);
   addFooterItem("tour", TourButton);
   installTour();
@@ -140,7 +151,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 +163,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 +202,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 +216,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 +225,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 +243,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 +443,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

@@ -232,7 +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}
+      ${going && !P().bannerAcked() ? html`<div class="pv-banner"><span class="pv-banner-text">${P().banner()}</span>
+        <button type="button" class="btn btn-sm btn-ghost pv-ack" title=${P().bannerAckTitle()} onClick=${() => P().ackBanner()}>${P().bannerAckLabel()}</button></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>

package/dist/ui/preview.js

@@ -23,6 +23,9 @@
   var LIMITS = { maxBytes: 1024 * 1024, minHeight: 40, maxHeight: 4000, readyMs: 3000, watchdogMs: 10000, resizePerSec: 10, minDelta: 2, growthFreeze: 5, growthWindowMs: 2000 };
   var OPT_IN_KEY = "agend_html_preview";        // localStorage: "on" — this device allows previews
   var NEVER_KEY = "agend_html_preview_never";   // sessionStorage: "1" — never preview on this device (this session)
+  // #1568: the banner was acknowledged ("I understand"). localStorage: the sign-in's session handle — hidden while the
+  // page belongs to that sign-in; sessionStorage: "1" — no sign-in session known, this tab only.
+  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: "" };
@@ -74,6 +77,8 @@
     }
   }
   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; }
     if (event && event.key !== OPT_IN_KEY && event.key !== null) return;   // key null: storage was cleared
     if (!optedIn()) stopAll("off");
     notify();
@@ -106,6 +111,46 @@
     notify();
   }
 
+  // ── #1568: the banner, acknowledged until the next sign-in ────────
+
+  // The page's sign-in, as the page found it out (AgendAuth): undefined — not known yet; null — no sign-in session (a
+  // loopback page without one, a session that ended, a failed read); otherwise the session's handle.
+  var bannerScope;
+  // Pressed on this page: { scope } — the sign-in it was pressed under (undefined: before the page knew). Holds for
+  // this page and that sign-in whatever storage does (blocked, full); null: not pressed here.
+  var pressed = null;
+  function validHandle(h) { return typeof h === "string" && /^[0-9a-f]{16}$/.test(h); }
+  /**
+   * Whether the banner was acknowledged for this page's sign-in: the handle stored is this session's (a new sign-in
+   * has a new handle, so it shows again); with no sign-in session, for this tab only. Not known yet: shown.
+   */
+  function bannerAcked() {
+    if (pressed && (pressed.scope === undefined || pressed.scope === bannerScope)) return true;
+    if (bannerScope === undefined) return false;
+    if (bannerScope === null) { var t = store("sessionStorage"); try { return !!t && t.getItem(BANNER_ACK_KEY) === "1"; } catch (e) { return false; } }
+    var s = store("localStorage");
+    try { return !!s && s.getItem(BANNER_ACK_KEY) === bannerScope; } catch (e) { return false; }
+  }
+  function writeBannerAck() {
+    if (bannerScope === undefined) return;
+    var kind = bannerScope === null ? "sessionStorage" : "localStorage";
+    var s = store(kind);
+    try { if (s) s.setItem(BANNER_ACK_KEY, bannerScope === null ? "1" : bannerScope); } catch (e) { /* this page only */ }
+  }
+  /** "I understand": the banner is hidden until the next sign-in (or, with no sign-in session, for this tab). */
+  function ackBanner() {
+    pressed = { scope: bannerScope };
+    writeBannerAck();
+    notify();
+  }
+  /** The page's sign-in: the session handle, or null when there is no sign-in session. Set once the page knows. */
+  function setBannerScope(handle) {
+    bannerScope = validHandle(handle) ? handle : null;
+    // Pressed before the page knew its sign-in: it was this one — recorded for it now.
+    if (pressed && pressed.scope === undefined) { pressed = { scope: bannerScope }; writeBannerAck(); }
+    notify();
+  }
+
   /**
    * Whether this page may run a preview at all, and why not: the server must have chosen a preview origin for this
    * load, the browser must really be at the origin the server believed (a proxy that rewrites Host would otherwise get
@@ -289,5 +334,9 @@
     mountPreview: mountPreview, onMessage: onMessage, BANNER: BANNER, LIMITS: LIMITS,
     /** The banner every running preview carries, in the page's language (#1554); BANNER is its English. */
     banner: function () { return say("pvBanner", BANNER); },
+    /** #1568: its "I understand", and whether it was pressed for this sign-in. The frame's border stays either way. */
+    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,
   };
 });

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/agend-auth.js

@@ -26,18 +26,24 @@
   try { window.localStorage.removeItem("agend_web_token"); } catch { /* no storage, nothing stored */ }
 
   const nativeFetch = window.fetch.bind(window);
-  let csrfPending = null;
+  let sessionPending = null;
 
-  function csrf() {
-    if (!csrfPending) {
-      csrfPending = nativeFetch("/auth/session", { credentials: "same-origin", cache: "no-store" })
+  /**
+   * This page's sign-in, read once from GET /auth/session: { csrf, handle } or null (no session, or the read failed —
+   * asked again next time). The CSRF value and the session handle (#1568: what "until the next sign-in" is keyed by)
+   * come from the one read.
+   */
+  function session() {
+    if (!sessionPending) {
+      sessionPending = nativeFetch("/auth/session", { credentials: "same-origin", cache: "no-store" })
         .then((r) => (r.ok ? r.json() : null))
-        .then((j) => (j && typeof j.csrf === "string" ? j.csrf : null))
+        .then((j) => (j && typeof j.csrf === "string" ? { csrf: j.csrf, handle: typeof j.handle === "string" ? j.handle : null } : null))
         .catch(() => null)
-        .then((value) => { if (!value) csrfPending = null; return value; });
+        .then((value) => { if (!value) sessionPending = null; return value; });
     }
-    return csrfPending;
+    return sessionPending;
   }
+  function csrf() { return session().then((s) => (s ? s.csrf : null)); }
 
   let bannerShown = false;
   function sessionEndedBanner() {
@@ -77,6 +83,8 @@
 
   window.AgendAuth = {
     csrf,
+    /** #1568: the session handle of this page's sign-in, or null when there is none. */
+    sessionHandle() { return session().then((s) => (s && s.handle ? s.handle : null)); },
     async signOut() {
       const value = await csrf();
       const r = await nativeFetch("/auth/logout", { method: "POST", credentials: "same-origin", headers: value ? { "X-Agend-CSRF": value } : {} });

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). */