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

package/dist/ui/panel-chat.js

@@ -10,7 +10,7 @@ import { html, useEffect, useLayoutEffect, useRef, useState } from "/assets/app-
 import { t } from "/assets/app-i18n.js";
 import { appStore, useStore } from "/assets/app-store.js";
 import { useLease } from "/assets/app-ctx.js";
-import { PanelHeader, onPanelKey, setTitle, addFooterItem, statusClass, statusLabel, openDrawer } from "/assets/app-shell.js";
+import { PanelHeader, onPanelKey, setTitle, addFooterItem, statusClass, statusLabel, openDrawer, requestNewInstance } from "/assets/app-shell.js";
 import { navigate } from "/assets/app-nav.js";
 import { Menu } from "/assets/ui-menu.js";
 import { Dialog } from "/assets/ui-dialog.js";
@@ -21,8 +21,11 @@ import { confirmDialog } from "/assets/ui-confirm.js";
 import "./chat-strings.js";
 import { confirmedWrite } from "./settings-confirm.js";
 import { createChatStore } from "./chat-store.js";
-import { createThread } from "./chat-thread.js";
+import { createThread, msgKey } from "./chat-thread.js";
+import { PreviewPanel, openPanel, panelStore, shownKey } from "./preview-panel.js";
+import { needsArgument, paletteFor, parseCommandLine } from "./chat-commands.js";
 import { installTour, refreshTourSpot, startTour } from "./chat-tour.js";
+import { FirstRunCard } from "./first-run.js";
 
 const R = () => globalThis.AgendChatRender;
 const P = () => globalThis.AgendPreview;
@@ -56,7 +59,7 @@ export async function setPreviewOptIn(on) {
 export function boot({ stream, boot: bootData, deps = {} }) {
   if (store) return store;
   store = createChatStore({
-    fetch: (...a) => fetch(...a), toast, announce, t, setTimeout: (fn, ms) => setTimeout(fn, ms), ...deps,
+    fetch: (...a) => fetch(...a), toast, announce, t, setTimeout: (fn, ms) => setTimeout(fn, ms), confirm: confirmDialog, ...deps,
   });
   store.attach(stream);
   // #1306: what the server said about previews for this load. The page-wide message and storage listeners this adds
@@ -97,9 +100,9 @@ async function copyText(text) {
   return ok;
 }
 /** The HTML as a file: a blob of the source as application/octet-stream, saved as reply.html — never opened. */
-function downloadHtml(code) {
+function downloadHtml(code, name) {
   const url = URL.createObjectURL(new Blob([code], { type: "application/octet-stream" }));
-  const a = document.createElement("a"); a.href = url; a.download = "reply.html"; a.className = "offscreen";
+  const a = document.createElement("a"); a.href = url; a.download = typeof name === "string" && name.trim() ? name.trim() : "reply.html"; a.className = "offscreen";
   document.body.appendChild(a); a.click(); a.remove();
   URL.revokeObjectURL(url);
 }
@@ -125,9 +128,14 @@ export function ChatPanel({ route, navKey }) {
   }, [name, !!inst]);
   useEffect(() => { setTitle(name || t("app.chat")); }, [name, navKey]);
   if (!name) {
+    // #1519 P7: a web-only fleet starts here with the first-run card; with no agent at all, the way to make one.
+    const none = app.ready && !app.instances.length;
     return html`<div class="panel p-chat"><${PanelHeader} title=${t("app.chat")} />
-      <div class="panel-body center"><${Empty} icon="chat" title=${t("chat.pick")} hint=${t("chat.pickHint")}
-        action=${html`<button type="button" class="btn only-narrow" onClick=${openDrawer}>${t("chat.backToList")}</button>`} /></div></div>`;
+      <div class="panel-body center"><div class="first-run-stack"><${FirstRunCard} />
+        ${none ? html`<${Empty} icon="bot" title=${t("app.noInstances")} hint=${t("app.noInstancesHint")}
+          action=${html`<button type="button" class="btn btn-primary" onClick=${requestNewInstance}><${Icon} name="plus" size=${16} />${t("app.newInstance")}</button>`} />`
+        : html`<${Empty} icon="chat" title=${t("chat.pick")} hint=${t("chat.pickHint")}
+          action=${html`<button type="button" class="btn only-narrow" onClick=${openDrawer}>${t("chat.backToList")}</button>`} />`}</div></div></div>`;
   }
   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} />`;
@@ -146,7 +154,7 @@ function NotFound({ name }) {
 function ChatView({ name, inst, lease, exec, awaiting }) {
   const [dialog, setDialog] = useState(null);       // "details" | "delete" | null
   const [wrap, setWrap] = useState(codeWrap);
-  const view = useRef(null);
+  const view = useRef(null), split = useRef(null), thread = useRef(null);
   useEffect(() => { wrapListeners.add(setWrap); return () => wrapListeners.delete(setWrap); }, []);
   // First visit to this instance's chat on this page: its history (a navigation — it counts as use). Back again: nothing.
   useEffect(() => { store.openHistory(name, lease); }, [name]);
@@ -189,11 +197,21 @@ function ChatView({ name, inst, lease, exec, awaiting }) {
     { key: "delete", label: t("chat.delete"), icon: "trash", danger: true, onSelect: () => setDialog("delete") },
   ];
   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>`;
+  // #1269 quick actions: the model and effort it runs, each a way to /model or /effort (the same pick list).
+  const pick = (command) => store.runCommand(name, command, "", { alive: () => lease.current() });
+  const sub = html`<span class="status"><span class=${`dot ${cls}`} aria-hidden="true"></span>${statusLabel(inst, exec, awaiting)}</span>
+    ${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}>
-    <${Thread} name=${name} />
-    <${Dock} name=${name} lease=${lease} exec=${exec} awaiting=${awaiting} />
+    <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} />
+    </div>
     <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}
@@ -201,14 +219,17 @@ function ChatView({ name, inst, lease, exec, awaiting }) {
 }
 
 /** The thread: Preact owns the elements, the keyed renderer owns what is inside the list (chat-thread.js). */
-function Thread({ name }) {
-  const scroller = useRef(null), list = useRef(null), th = useRef(null);
+function Thread({ name, th }) {
+  const scroller = useRef(null), list = useRef(null);
   const [jump, setJump] = useState({ show: false, unseen: 0 });
   const [empty, setEmpty] = useState(false);
   useLayoutEffect(() => {
     const thread = createThread(list.current, scroller.current, {
       t, tf: t, isUser: (x) => store.isUser(x, name), onJump: setJump, onEmpty: setEmpty,
       setPreviewOptIn, copyText, download: downloadHtml, toggleWrap,
+      clickReplyButton: (id, index) => store.clickReplyButton(name, id, index),      // #1266
+      replyButtonBusy: (id) => store.state.rbBusy.has(id),
+      panel: { shown: shownKey, open: (spec, o) => openPanel(spec, o) },   // #1481
     });
     th.current = thread;
     thread.render(store.state.msgs[name] || [], { restore: store.state.scrollMemo[name] ?? null });
@@ -218,12 +239,13 @@ function Thread({ name }) {
       else if (kind === "sent") thread.jumpLatest();
     });
     const offPv = P() ? P().onChange(() => thread.refreshCards()) : () => {};
+    const offPanel = panelStore.subscribe(() => thread.refreshCards());   // a card shows whether the panel has its block
     const onScroll = () => { store.state.scrollMemo[name] = thread.onScroll(); };
     const sc = scroller.current, ls = list.current;
     sc.addEventListener("scroll", onScroll, { passive: true });
     ls.addEventListener("click", thread.onClick);
     return () => {
-      off(); offPv();
+      off(); offPv(); offPanel();
       sc.removeEventListener("scroll", onScroll);
       ls.removeEventListener("click", thread.onClick);
       thread.dispose();                     // the whole thread goes: every preview in it stops first
@@ -239,20 +261,51 @@ function Thread({ name }) {
 }
 
 /** Everything under the thread: prompts, the working line, a failed send, files waiting, and the composer. */
-function Dock({ name, lease, exec, awaiting }) {
+function Dock({ name, inst, lease, exec, awaiting }) {
   useChatTick(name, ["state"]);
   const s = store.state;
   return html`<div class="dock"><div class="dock-col">
     <${Prompts} name=${name} />
     <${WorkBar} name=${name} lease=${lease} exec=${exec} awaiting=${awaiting} />
+    <${CommandCard} name=${name} lease=${lease} />
+    <${QuickActions} name=${name} inst=${inst} lease=${lease} />
     ${s.failedSends[name] ? html`<div class="failed-send" role="alert"><span>${t("chat.notSent")}</span><span class="txt">${s.failedSends[name]}</span>
       <button type="button" class="btn btn-primary btn-sm" onClick=${() => store.putBack(name)}>${t("chat.putBack")}</button>
       <button type="button" class="btn btn-sm" onClick=${() => store.discardFailed(name)}>${t("chat.discard")}</button></div>` : null}
-    <${Composer} name=${name} busy=${R().isBusy(exec)} />
+    <${Composer} name=${name} lease=${lease} busy=${R().isBusy(exec)} />
     <p class="hint">${t("chat.composerHint")}</p>
   </div></div>`;
 }
 
+/** #1269: what the last chat command answered — its text, why it was refused, or a list to choose from. */
+function CommandCard({ name, lease }) {
+  const c = store.state.commands[name];
+  if (!c) return null;
+  const run = (args) => store.runCommand(name, c.command, args, { alive: () => lease.current() });
+  return html`<div class=${`cmd-card${c.error ? " bad" : ""}`} role=${c.error ? "alert" : "status"}>
+    <div class="cmd-head"><span class="cmd-name mono">/${c.command}</span>
+      ${c.busy ? html`<span class="wait">${t("chat.cmdRunning", c.command)}</span>` : html`<button type="button" class="icon-btn" title=${t("chat.cmdDismiss")}
+        aria-label=${t("chat.cmdDismiss")} onClick=${() => store.dismissCommand(name)}><${Icon} name="close" size=${14} /></button>`}</div>
+    ${c.error ? html`<p class="cmd-text">${c.error}</p>` : null}
+    ${c.text ? html`<pre class="cmd-text">${c.text}</pre>` : null}
+    ${c.choices ? html`<div class="cmd-choices" role="group" aria-label=${t("chat.cmdChoose")}>${c.choices.options.map((o) => html`<button key=${o.id} type="button"
+      class=${`btn btn-sm${o.id === c.choices.current ? " current" : ""}`} aria-current=${o.id === c.choices.current ? "true" : undefined} onClick=${() => run(o.id)}>${o.label}</button>`)}</div>` : null}
+  </div>`;
+}
+
+/** #1269 quick actions: Compact and Clear… once the instance's context is 70% used (from the status it already has). */
+function QuickActions({ name, inst, lease }) {
+  const pct = inst && typeof inst.context_pct === "number" ? Math.round(inst.context_pct) : null;
+  if (pct == null || pct < 70) return null;
+  const busy = !!(store.state.commands[name] && store.state.commands[name].busy);
+  const run = (command) => store.runCommand(name, command, "", { alive: () => lease.current() });
+  return html`<div class="quick-actions" role="group" aria-label=${t("chat.chipContext", pct)}>
+    <span class="qa-ctx">${t("chat.chipContext", pct)}</span>
+    <button type="button" class="btn btn-sm" disabled=${busy} onClick=${() => run("compact")}>${t("chat.chipCompact")}</button>
+    <button type="button" class="btn btn-sm" disabled=${busy} onClick=${() => run("clear")}>${t("chat.chipClear")}</button>
+  </div>`;
+}
+
 function Prompts({ name }) {
   const list = store.promptsFor(name);
   if (!list.length) return null;
@@ -281,20 +334,53 @@ function WorkBar({ name, lease, exec, awaiting }) {
       : html`<span class="elapsed" title=${t("chat.elapsedTitle")} aria-hidden="true">${since == null ? "" : R().formatElapsed(performance.now() - since)}</span>`}</div>`;
 }
 
-function Composer({ name, busy }) {
+function Composer({ name, lease, busy }) {
   const s = store.state;
   const input = useRef(null), fileIn = useRef(null);
   const [, tick] = useState(0);
+  const [sel, setSel] = useState(0);
+  const [closedFor, setClosedFor] = useState(null);    // the draft the palette was closed on (Esc); it opens again on change
   const value = s.drafts[name] || "";
   const files = s.pendingFiles[name] || [];
   const content = !!value.trim() || files.length > 0;
+  // A file waiting: what goes is a message with its file, never a command (no palette, no command line).
+  const palette = files.length || closedFor === value ? null : paletteFor(value);
+  const pick = palette && palette.length ? palette[Math.min(sel, palette.length - 1)] : null;
   // Grow with the text, up to a limit: set through the CSSOM, never a style attribute (#1300).
   useLayoutEffect(() => { const el = input.current; if (!el) return; el.style.height = "auto"; el.style.height = `${Math.min(el.scrollHeight, 240)}px`; }, [value]);
   useEffect(() => { if (input.current) input.current.focus(); }, [name]);
   useEffect(() => { refreshTourSpot(); });
-  const send = () => store.send(name);
-  const onKeyDown = (e) => { if (R().composerKey(e) === "send") { e.preventDefault(); send(); } };
-  const onInput = (e) => { store.setDraft(name, e.target.value); tick(n => n + 1); };
+  const setValue = (v) => { store.setDraft(name, v); setSel(0); tick(n => n + 1); };
+  // #1269: a command line runs the command (POST /ui/command); anything else — "/" included — is sent as before.
+  // The draft is consumed only by a command that starts: one still out keeps the new line in the composer (#1476 review).
+  const runLine = (cmd) => {
+    if (!store.commandFree(name)) return;
+    setValue("");
+    store.runCommand(name, cmd.command, cmd.args, { alive: () => lease.current() });
+  };
+  const complete = (c) => setValue(`/${c.name}${c.arg ? " " : ""}`);
+  const submit = () => {
+    if (pick) {
+      if (value === `/${pick.name}` && !needsArgument(pick.name)) runLine({ command: pick.name, args: "" });
+      else complete(pick);
+      return;
+    }
+    const cmd = files.length ? null : parseCommandLine(value);
+    if (cmd && needsArgument(cmd.command) && !cmd.args) { setValue(`/${cmd.command} `); return; }
+    if (cmd) { runLine(cmd); return; }
+    store.send(name);
+  };
+  const onKeyDown = (e) => {
+    if (palette && palette.length && (e.key === "ArrowDown" || e.key === "ArrowUp")) {
+      e.preventDefault();
+      setSel((n) => (Math.min(n, palette.length - 1) + (e.key === "ArrowDown" ? 1 : palette.length - 1)) % palette.length);
+      return;
+    }
+    if (pick && e.key === "Tab" && !e.shiftKey) { e.preventDefault(); complete(pick); return; }
+    if (palette && e.key === "Escape" && !e.isComposing) { e.preventDefault(); setClosedFor(value); return; }
+    if (R().composerKey(e) === "send") { e.preventDefault(); submit(); }
+  };
+  const onInput = (e) => { setValue(e.target.value); };
   // Files in a paste are attached; a very long text paste goes as a text file — only once it is really attached.
   const onPaste = (e) => {
     const list = e.clipboardData && e.clipboardData.files;
@@ -302,18 +388,26 @@ function Composer({ name, busy }) {
     if (list && list.length) { store.addFiles(name, list); if (!text) e.preventDefault(); return; }
     if (R().isLongPaste(text) && store.attachPastedText(name, text)) e.preventDefault();
   };
+  const optId = (c) => `cmd-${c.name}`;
   return html`<div class="composer-box">
+    ${palette ? html`<ul class="cmd-palette" id="cmdPalette" role="listbox" aria-label=${t("chat.cmdCommands")}>
+      ${palette.length ? palette.map((c) => html`<li key=${c.name} id=${optId(c)} role="option" aria-selected=${c === pick ? "true" : "false"}
+          class=${c === pick ? "on" : ""} onMouseDown=${(e) => { e.preventDefault(); complete(c); }}>
+          <span class="cmd-name mono">/${c.name}${c.arg ? html` <span class="cmd-arg">${c.arg}</span>` : null}</span><span class="cmd-desc">${t(`chat.cmd_${c.name}`)}</span></li>`)
+        : html`<li class="cmd-none" role="option" aria-selected="false">${t("chat.cmdNotCommand")}</li>`}
+    </ul>` : null}
     ${files.length ? html`<div class="pending-files">${files.map((f, i) => html`<${FileChip} key=${`${f.name}-${i}`} f=${f} i=${i} name=${name} />`)}</div>` : null}
     <div class="composer">
       <button id="attachBtn" type="button" class="icon-btn" title=${t("chat.attachTitle")} aria-label=${t("chat.attachTitle")} onClick=${() => fileIn.current && fileIn.current.click()}><${Icon} name="attach" /></button>
       <input ref=${fileIn} type="file" multiple hidden accept="image/png,image/jpeg,image/gif,image/webp,application/pdf,text/*,.md,.csv,.json,.log,.yaml,.yml"
         onChange=${(e) => { store.addFiles(name, e.target.files); e.target.value = ""; }} />
       <textarea id="msgIn" ref=${input} rows="1" value=${value} placeholder=${t("chat.composerPlaceholder", name)} aria-label=${t("chat.composerPlaceholder", name)}
-        autocomplete="off" onInput=${onInput} onKeyDown=${onKeyDown} onPaste=${onPaste}></textarea>
+        autocomplete="off" aria-controls=${palette ? "cmdPalette" : undefined} aria-expanded=${palette ? "true" : "false"}
+        aria-activedescendant=${pick ? optId(pick) : undefined} onInput=${onInput} onKeyDown=${onKeyDown} onPaste=${onPaste}></textarea>
       <button id="stopBtn" type="button" class="btn btn-stop" hidden=${!busy} title=${t("chat.stopReplyTitle")}
-        disabled=${!!s.cancelling[name]} onClick=${() => store.cancelReply(name)}><${Icon} name="stop" size=${14} />${t("chat.stopReply")}</button>
+        disabled=${!!s.cancelling[name]} onClick=${() => store.cancelReply(name)}><${Icon} name="stop" size=${14} /><span class="stop-label">${t("chat.stopReply")}</span></button>
       <button id="sendBtn" type="button" class="btn btn-primary btn-send" hidden=${busy && !content} disabled=${!content || !!s.sending[name]}
-        aria-label=${t("chat.send")} title=${t("chat.send")} onClick=${send}><${Icon} name="send" size=${16} /><span class="send-label">${t("chat.send")}</span></button>
+        aria-label=${t("chat.send")} title=${t("chat.send")} onClick=${submit}><${Icon} name="send" size=${16} /><span class="send-label">${t("chat.send")}</span></button>
     </div></div>`;
 }
 

package/dist/ui/panel-fleet.js

@@ -18,13 +18,14 @@ import { toast } from "/assets/ui-toast.js";
 import { confirmDialog } from "/assets/ui-confirm.js";
 import { confirmedWrite } from "./settings-confirm.js";
 import { OrgChart } from "./fleet-org.js";
+import { CacheReport } from "./fleet-cache.js";
 
 register("fleet", {
   en: {
-    title: "Fleet", tasks: "Tasks", schedules: "Schedules", teams: "Teams", org: "Org chart", config: "Config",
+    title: "Fleet", tasks: "Tasks", schedules: "Schedules", teams: "Teams", org: "Org chart", cache: "Cache", config: "Config",
     newTask: "New task", newSchedule: "New schedule", newTeam: "New team",
     noTasks: "No tasks yet", noTasksHint: "Create one to coordinate fleet work.", noSchedules: "No schedules yet", noSchedulesHint: "Automate recurring work with cron.",
-    noTeams: "No teams yet", noTeamsHint: "Group instances for coordinated work.", countTasks: "{0} tasks", countSchedules: "{0} schedules", countTeams: "{0} teams",
+    noTeams: "No teams yet", noTeamsHint: "Group instances for coordinated work.", countTasks: "{0} tasks", countSchedules: "{0} schedules", countTeams: "{0} teams", countTask: "1 task", countSchedule: "1 schedule", countTeam: "1 team",
     claim: "Claim", done: "Done", delete: "Delete", on: "on", off: "off", cancel: "Cancel", create: "Create", creating: "Creating…", save: "Save changes",
     taskTitle: "Title", taskDesc: "Description", priority: "Priority", assignee: "Assignee", unassigned: "Unassigned",
     pNormal: "Normal", pLow: "Low", pHigh: "High", pUrgent: "Urgent",
@@ -35,16 +36,16 @@ register("fleet", {
     channel: "Channel", type: "Type", tokenEnv: "Bot token env", groupId: "Group ID", show: "Show", hide: "Hide", access: "Access control", mode: "Mode", locked: "Locked", open: "Open",
     allowedUsers: "Allowed users", allowedUsersNote: "Comma-separated user IDs", defaults: "Defaults", backend: "Backend", roots: "Project roots", addRoot: "Add root", removeRoot: "Remove",
     saveNote: "Saving rewrites fleet.yaml (its comments are lost).",
-    newInstance: "New instance", directory: "Directory", directoryHint: "Optional — a workspace is created if empty", topic: "Topic name", topicHint: "From the directory name",
-    topicRequired: "Topic name is required when Directory is empty", description: "Description", descriptionHint: "What this instance does", model: "Model", modelHint: "e.g. sonnet, opus, gpt-5",
+    newInstance: "New instance", directory: "Directory", directoryHint: "Optional — a workspace is created if empty", topic: "Name", topicHint: "From the directory name",
+    topicRequired: "Name is required when Directory is empty", description: "Description", descriptionHint: "What this instance does", model: "Model", modelHint: "e.g. sonnet, opus, gpt-5",
     branch: "Branch (git worktree)", branchHint: "e.g. feature-x", tags: "Tags", tagsHint: "comma-separated, e.g. dev, review", systemPrompt: "System prompt", systemPromptHint: "Custom instructions for this instance",
     fleetDefault: "Use the fleet default", notInstalled: "(not installed)", deprecated: "(deprecated)", instanceCreated: "Instance created",
   },
   "zh-TW": {
-    title: "Fleet", tasks: "Tasks", schedules: "排程", teams: "Teams", org: "組織圖", config: "設定",
+    title: "Fleet", tasks: "Tasks", schedules: "排程", teams: "Teams", org: "組織圖", cache: "快取", config: "設定",
     newTask: "新增 task", newSchedule: "新增排程", newTeam: "新增 team",
     noTasks: "還沒有 task", noTasksHint: "建立一個來協調 fleet 的工作。", noSchedules: "還沒有排程", noSchedulesHint: "用 cron 自動執行例行工作。",
-    noTeams: "還沒有 team", noTeamsHint: "把 instance 分組一起工作。", countTasks: "{0} 個 task", countSchedules: "{0} 個排程", countTeams: "{0} 個 team",
+    noTeams: "還沒有 team", noTeamsHint: "把 instance 分組一起工作。", countTasks: "{0} 個 task", countSchedules: "{0} 個排程", countTeams: "{0} 個 team", countTask: "1 個 task", countSchedule: "1 個排程", countTeam: "1 個 team",
     claim: "認領", done: "完成", delete: "刪除", on: "開", off: "關", cancel: "取消", create: "建立", creating: "建立中…", save: "儲存變更",
     taskTitle: "標題", taskDesc: "說明", priority: "優先順序", assignee: "負責人", unassigned: "未指派",
     pNormal: "一般", pLow: "低", pHigh: "高", pUrgent: "緊急",
@@ -55,14 +56,14 @@ register("fleet", {
     channel: "頻道", type: "類型", tokenEnv: "Bot token 環境變數", groupId: "Group ID", show: "顯示", hide: "隱藏", access: "存取控制", mode: "模式", locked: "鎖定", open: "開放",
     allowedUsers: "允許的使用者", allowedUsersNote: "以逗號分隔的使用者 ID", defaults: "預設值", backend: "Backend", roots: "專案根目錄", addRoot: "新增根目錄", removeRoot: "移除",
     saveNote: "儲存會改寫 fleet.yaml（其中的註解會遺失）。",
-    newInstance: "新增 instance", directory: "目錄", directoryHint: "可留空——留空會自動建立工作區", topic: "Topic 名稱", topicHint: "預設取自目錄名稱",
-    topicRequired: "目錄留空時必須填寫 Topic 名稱", description: "說明", descriptionHint: "這個 instance 做什麼", model: "模型", modelHint: "例如 sonnet、opus、gpt-5",
+    newInstance: "新增 instance", directory: "目錄", directoryHint: "可留空——留空會自動建立工作區", topic: "名稱", topicHint: "預設取自目錄名稱",
+    topicRequired: "目錄留空時必須填寫名稱", description: "說明", descriptionHint: "這個 instance 做什麼", model: "模型", modelHint: "例如 sonnet、opus、gpt-5",
     branch: "分支（git worktree）", branchHint: "例如 feature-x", tags: "標籤", tagsHint: "以逗號分隔，例如 dev, review", systemPrompt: "System prompt", systemPromptHint: "這個 instance 的自訂指示",
     fleetDefault: "使用 fleet 預設", notInstalled: "（未安裝）", deprecated: "（已淘汰）", instanceCreated: "Instance 已建立",
   },
 });
 
-const ICONS = { tasks: "tasks", schedules: "clock", teams: "team", org: "org", config: "sliders" };
+const ICONS = { tasks: "tasks", schedules: "clock", teams: "team", org: "org", cache: "chart", config: "sliders" };
 const BACKENDS = ["claude-code", "codex", "opencode", "kiro-cli", "antigravity", "grok", "muse"];
 
 async function api(method, path, body, lease) {
@@ -73,7 +74,7 @@ async function api(method, path, body, lease) {
 }
 
 /**
- * Load `path` under the lease: `null` while the first load runs, `{ error }` on failure. A refresh (a new `version`,
+ * Load `path` under the lease: `null` while the first load runs, `{ error }` on failure (no answer, or an HTTP error). A refresh (a new `version`,
  * after Claim or Create) keeps showing what is there until the new list arrives — nothing below it is torn down, so
  * an open dialog and its draft survive (#1425 review). Only the latest request's answer is kept.
  */
@@ -86,7 +87,10 @@ function useLoad(lease, path, version) {
     if (shownFor.current !== lease) { shownFor.current = lease; setState(null); }
     (async () => {
       try {
-        const d = await api("GET", path, null, lease);
+        // A read the server refused (a 4xx/5xx with an { error } body) is a failure, not an empty list (alpha.2 sweep).
+        const r = await lease.fetch(path, { method: "GET", headers: { "Content-Type": "application/json" } });
+        if (!r.ok) throw new Error(`HTTP ${r.status}`);
+        const d = await r.json();
         if (lease.current() && mine === seq.current) setState({ data: d });
       } catch { if (lease.current() && mine === seq.current) setState({ error: true }); }
     })();
@@ -98,12 +102,12 @@ export function FleetPanel({ route, navKey }) {
   const lease = useLease(navKey);
   const tab = route.tab;
   useEffect(() => { setTitle(`${t("fleet.title")} · ${t(`fleet.${tab}`)}`); }, [tab, navKey]);
-  const Body = { tasks: Tasks, schedules: Schedules, teams: Teams, org: Org, config: Config }[tab] || Tasks;
+  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")} />
     <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" ? " col-wide" : ""}`}><${Body} lease=${lease} /></div></div>
+    <div class="panel-body"><div class=${`col${tab === "org" || tab === "cache" ? " col-wide" : ""}`}><${Body} lease=${lease} /></div></div>
   </div>`;
 }
 
@@ -126,7 +130,7 @@ function Tasks({ lease }) {
   }
   return html`<${Loaded} state=${state}>${(d) => {
     const tasks = d.tasks || [];
-    return html`<${ListHead} count=${t("fleet.countTasks", tasks.length)} label=${t("fleet.newTask")} action=${{ onClick: () => setCreating(true) }} />
+    return html`<${ListHead} count=${tasks.length === 1 ? t("fleet.countTask") : t("fleet.countTasks", tasks.length)} label=${t("fleet.newTask")} action=${{ onClick: () => setCreating(true) }} />
       ${tasks.length ? html`<ul class="rows">${tasks.map(x => html`<li key=${x.id} class="row-item">
         <span class=${`pill ${x.status}`}>${x.status}</span><span class="grow">${x.title}</span>
         ${x.assignee ? html`<a class="link" href=${chatPath(x.assignee)}>${x.assignee}</a>` : null}
@@ -150,7 +154,7 @@ function Schedules({ lease }) {
   }
   return html`<${Loaded} state=${state}>${(d) => {
     const list = d.schedules || [];
-    return html`<${ListHead} count=${t("fleet.countSchedules", list.length)} label=${t("fleet.newSchedule")} action=${{ onClick: () => setCreating(true) }} />
+    return html`<${ListHead} count=${list.length === 1 ? t("fleet.countSchedule") : t("fleet.countSchedules", list.length)} label=${t("fleet.newSchedule")} action=${{ onClick: () => setCreating(true) }} />
       ${list.length ? html`<ul class="rows">${list.map(x => html`<li key=${x.id} class="row-item">
         <span class=${`pill ${x.enabled ? "open" : "done"}`}>${x.enabled ? t("fleet.on") : t("fleet.off")}</span>
         <span class="grow">${x.label || cronDesc(x.cron)}</span><span class="mono muted" title=${cronDesc(x.cron)}>${x.cron}</span>
@@ -174,7 +178,7 @@ function Teams({ lease }) {
   }
   return html`<${Loaded} state=${state}>${(d) => {
     const entries = Object.entries(d.teams || {});
-    return html`<${ListHead} count=${t("fleet.countTeams", entries.length)} label=${t("fleet.newTeam")} action=${{ onClick: () => setCreating(true) }} />
+    return html`<${ListHead} count=${entries.length === 1 ? t("fleet.countTeam") : t("fleet.countTeams", entries.length)} label=${t("fleet.newTeam")} action=${{ onClick: () => setCreating(true) }} />
       ${entries.length ? html`<ul class="rows">${entries.map(([name, team]) => html`<li key=${name} class="row-item">
         <span class="grow strong">${name}</span><span class="muted">${(team.members || []).join(", ")}</span>
         <button type="button" class="btn btn-ghost btn-sm danger" onClick=${() => del(name)}>${t("fleet.delete")}</button></li>`)}</ul>`
@@ -191,6 +195,16 @@ function Org({ lease }) {
   return html`<${Loaded} state=${state}>${(org) => html`<${OrgChart} org=${org} app=${app} />`}</${Loaded}>`;
 }
 
+/** #1468: the prompt-cache analysis — one read per opening and per window chosen; Refresh reads again (fleet-cache.js). */
+function Cache({ lease }) {
+  const [win, setWin] = useState("7d");
+  const [version, setVersion] = useState(0);
+  const state = useLoad(lease, `/ui/cache?window=${win}`, version);
+  return html`<${Loaded} state=${state}>${(report) => (report && Array.isArray(report.instances)
+    ? html`<${CacheReport} report=${report} win=${win} setWin=${setWin} refresh=${() => setVersion((v) => v + 1)} />`
+    : html`<${ErrorState} onRetry=${renavigate} />`)}</${Loaded}>`;
+}
+
 function Secret({ id, value, onInput, label }) {
   const [shown, setShown] = useState(false);
   return html`<div class="field-row"><input id=${id} type=${shown ? "text" : "password"} value=${value} onInput=${onInput} autocomplete="off" />
@@ -345,7 +359,7 @@ function CreateTeam({ onClose, onDone }) {
   </${FormDialog}>`;
 }
 
-/** "New instance": the sidebar's ✎ opens it from anywhere (#1408 step 3 merges it with Settings' create flow). */
+/** "New instance": the sidebar's + opens it from anywhere (#1408 step 3 merges it with Settings' create flow). */
 export function CreateInstanceDialog({ onClose }) {
   const lease = useLease("create-instance");
   const [backends, setBackends] = useState(null);

package/dist/ui/panel-settings.js

@@ -12,7 +12,7 @@ import { html, useEffect, useMemo, 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 } from "/assets/app-shell.js";
+import { PanelHeader, PendingChanges, setTitle } from "/assets/app-shell.js";
 import { navigate, setLeaveGuard } from "/assets/app-nav.js";
 import { settingsPath, SETTINGS_SECTIONS } from "/assets/app-route.js";
 import { Dialog } from "/assets/ui-dialog.js";
@@ -25,7 +25,7 @@ import { api, attach, confirmedWrite, newKey } from "./settings-confirm.js";
 import { dismissOperation, operationActive, restartFleet, startOperation, takeLeftover } from "./settings-apply.js";
 import {
   ACCESS_MODES, AGENT_MODES, DEFAULT_SCHEMA, LOG_LEVELS, TOOL_PROGRESS, TOOL_SETS, VISIBILITY_MODES, batchImpact,
-  changedFields, channelId, channelsOf, chLabel, effectiveSummary, fleetModel, fromYaml, fullModelRequests, groupAgents,
+  changedFields, channelId, channelsOf, chLabel, connectionState, effectiveSummary, fleetModel, fromYaml, fullModelRequests, groupAgents,
   hasOwn, impactOf, localeOptions, defaultsImpact, requestImpact, nonNegative, positive, replyGuardSupported, shortName, STATUS_ORDER, toYaml,
   visibilityDefault, worstImpact,
 } from "./settings-model.js";
@@ -35,6 +35,7 @@ import {
 } from "./settings-dialogs.js";
 import { SetupWizard } from "./settings-wizard.js";
 import { CreateInstanceDialog } from "./panel-fleet.js";
+import { FirstRunCard, takeWizardRequest } from "./first-run.js";
 
 const tn = (k, ...v) => t(`settings.${k}`, ...v);
 const ICONS = { agents: "bot", bots: "plug", classic: "room", general: "sliders", advanced: "code" };
@@ -66,7 +67,8 @@ async function loadAll(lease) {
   const connections = await read(lease, "/api/settings/connections");
   if (!lease.current()) return null;
   out.connections = connections.ok && Array.isArray(connections.body) ? connections.body : [];
-  const secrets = await read(lease, "/api/settings/provider-secrets");
+  // Only where the fleet offers them (the schema says so): otherwise the route is a 404 and there is nothing to show.
+  const secrets = out.schema && out.schema.provider_secrets === false ? { ok: false } : await read(lease, "/api/settings/provider-secrets");
   if (!lease.current()) return null;
   out.providerOk = secrets.ok;
   out.providerSecrets = secrets.ok && Array.isArray(secrets.body) ? secrets.body : [];
@@ -196,6 +198,8 @@ 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]);
   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 })} />`
@@ -218,6 +222,8 @@ export function SettingsPanel({ route, navKey }) {
       ${searchable ? html`<div class="s-toolbar"><label class="s-search"><${Icon} name="search" size=${14} /><span class="sr-only">${tn("searchAll")}</span>
         <input type="search" value=${search} placeholder=${tn("searchAll")} onInput=${(e) => setSearch(e.target.value)} /></label></div>` : null}
       ${op ? html`<${OperationCard} op=${op} schema=${data && data.schema} />` : null}
+      <${PendingChanges} inline=${true} />
+      ${ctx && (section === "agents" || section === "bots") ? html`<${FirstRunCard} onConnect=${() => setDialog({ kind: "wizard", key: navKey })} />` : null}
       ${sectionBody}
     </div></div>
     ${staged.size ? html`<${PendingBar} staged=${staged} busy=${opBusy(op)} onApply=${apply} onDiscard=${discard} />` : null}
@@ -329,7 +335,7 @@ function Agents({ ctx, search, openDialog }) {
     setBusy((b) => new Map(b).set(name, action));
     try { await work(); } finally { setBusy((b) => { const n = new Map(b); n.delete(name); return n; }); }
   };
-  const head = html`<div class="list-head"><span>${tn("countAgents", Object.keys(insts).length)}</span>
+  const head = html`<div class="list-head"><span>${Object.keys(insts).length === 1 ? tn("countAgent") : tn("countAgents", Object.keys(insts).length)}</span>
     <button type="button" class="btn btn-primary" onClick=${() => openDialog({ kind: "create" })}><${Icon} name="plus" size=${16} />${tn("newAgent")}</button></div>`;
   if (!Object.keys(insts).length) return html`${head}<${Empty} icon="bot" title=${tn("noAgents")} />`;
   if (!groups.length) return html`${head}<${Empty} icon="search" title=${tn("noAgentMatch", search.trim())} />`;
@@ -350,6 +356,7 @@ function Agents({ ctx, search, openDialog }) {
           <span class=${dotClass(st)} title=${tn(STATUS_KEY[st] || "stStopped")} aria-hidden="true"></span>
           <span class="s-name" title=${name}>${shortName(name, inst)}</span>
           <span class="s-meta" title=${sum.backend}>${sum.model}</span>
+          <span class="s-br" aria-hidden="true"></span>
           <span class="tag">${tn("effortTag", sum.effort)}</span>
           ${ch ? html`<span class=${`tag${ch.includes("persona") ? " persona" : ""}`}>${ch}</span>` : null}
           <span class="sr-only">${tn(STATUS_KEY[st] || "stStopped")}</span>
@@ -370,12 +377,17 @@ function Bots({ ctx, search, openDialog }) {
   const all = channelsOf(ctx.fleet);
   const needle = search.trim().toLowerCase();
   const rows = all.map((ch, i) => ({ ch, i })).filter(({ ch }) => !needle || [ch.id, ch.type, ch.group_id, ch.bot_token_env].some((v) => String(v ?? "").toLowerCase().includes(needle)));
-  const head = html`<div class="list-head"><span>${tn("countBots", all.length)}</span>
+  const head = html`<div class="list-head"><span>${all.length === 1 ? tn("countBot") : tn("countBots", all.length)}</span>
     <button type="button" class="btn btn-primary" onClick=${() => openDialog({ kind: "newBot" })}><${Icon} name="plus" size=${16} />${tn("newBot")}</button></div>`;
   return html`${head}
     ${!rows.length ? html`<${Empty} icon="plug" title=${needle ? tn("noAgentMatch", search.trim()) : tn("noBots")} />` : html`<div class="s-list">${rows.map(({ ch, i }) => {
       const users = (ch.access && ch.access.allowed_users) || [];
-      const token = (ctx.connections.find((c, j) => channelId(c, j) === channelId(ch, i)) || {}).token_present;
+      const meta = ctx.connections.find((c, j) => channelId(c, j) === channelId(ch, i)) || {};
+      const token = meta.token_present;
+      // #1519 P6: this connection's own state (not the fleet's "Connected") — a stopped one says so; a known problem says
+      // what to do (P3: Message Content intent; a rejected token).
+      const state = connectionState(meta, ctx.fleetUp);
+      const stateText = tn(state.key, state.bot);
       // #1408 step 5: one line on a desktop — who it is, its facts in one clipped line (all of them in its tooltip),
       // then the cluster; on a phone the facts go under it. It no longer wraps fact by fact.
       const facts = [ch.bot_token_env || tn("noTokenEnv"),
@@ -383,13 +395,13 @@ function Bots({ ctx, search, openDialog }) {
         tn("accessTag", (ch.access && ch.access.mode) || "locked"),
         users.length ? `${users.slice(0, 3).join(", ")}${users.length > 3 ? ` +${users.length - 3}` : ""}` : tn("noAllowedUsers")].filter(Boolean).join(" · ");
       return html`<div key=${channelId(ch, i)} class="s-row s-conn">
-        <span class="s-ident"><span class=${`dot ${ctx.fleetUp ? "ok" : "bad"}`} title=${ctx.fleetUp ? tn("connected") : tn("problem")} aria-hidden="true"></span>
+        <span class="s-ident"><span class=${`dot ${state.cls}`} title=${stateText} aria-hidden="true"></span>
           <span class="s-name">${ch.type === "telegram" ? "Telegram" : "Discord"}</span>
           <span class=${`tag${i === 0 ? "" : " persona"}`}>${ch.id || chLabel(i)}</span></span>
         <span class="s-facts" title=${facts}>${facts}</span>
         <span class="s-actions">
           <span class=${`tag${token ? "" : " warn"}`}>${token ? tn("tokenConfigured") : tn("tokenMissing")}</span>
-          <span class=${`s-state ${ctx.fleetUp ? "ok" : "bad"}`}>${ctx.fleetUp ? tn("connected") : tn("problem")}</span>
+          <span class=${`s-state ${state.cls}`} title=${stateText}>${stateText}</span>
           <button type="button" class="btn btn-sm" onClick=${() => openDialog({ kind: "bot", id: channelId(ch, i) })}>${tn("settingsButton")}</button></span>
       </div>`;
     })}</div>`}
@@ -464,7 +476,7 @@ function Classic({ ctx, search, openDialog }) {
     .sort((a, b) => ((STATUS_ORDER[ctx.classicRuntime(a.instanceName).status] ?? 9) - (STATUS_ORDER[ctx.classicRuntime(b.instanceName).status] ?? 9))
       || String(a.name || "").localeCompare(String(b.name || "")));
   if (!list.length) return html`<${Empty} icon="search" title=${tn("noAgentMatch", search.trim())} />`;
-  return html`<div class="list-head"><span>${tn("countRooms", rooms.length)}</span></div><div class="s-list">${list.map((c) => {
+  return html`<div class="list-head"><span>${rooms.length === 1 ? tn("countRoom") : tn("countRooms", rooms.length)}</span></div><div class="s-list">${list.map((c) => {
     const rt = ctx.classicRuntime(c.instanceName);
     const sum = effectiveSummary(ctx.live[c.instanceName] || {}, c, ctx.fleet.defaults || {}, (ctx.classic && ctx.classic.defaults) || {});
     const adapter = c.adapterId || "discord";
@@ -472,6 +484,7 @@ function Classic({ ctx, search, openDialog }) {
       <span class=${dotClass(rt.execution)} title=${tn(`exec_${rt.execution}`)} aria-hidden="true"></span>
       <span class="s-name" title=${c.instanceName || ""}>${shortName(c.name || c.instanceName || "?", { display_name: c.display_name })}</span>
       <span class="s-meta" title=${sum.backend}>${sum.model}</span>
+      <span class="s-br" aria-hidden="true"></span>
       <span class="tag">${tn("effortTag", sum.effort)}</span>
       <span class=${`tag${adapter !== "discord" ? " persona" : ""}`}>${adapter}</span>
       ${c.collab ? html`<span class="tag">collab</span>` : null}
@@ -666,10 +679,10 @@ function Developer({ ctx }) {
       <div class="seg-inline" role="group" aria-label=${tn("format")}>
         ${["yaml", "json"].map((k) => html`<button key=${k} type="button" class=${`btn btn-sm${fmt === k ? " on" : ""}`} aria-pressed=${fmt === k ? "true" : "false"} onClick=${() => setFmt(k)}>${k.toUpperCase()}</button>`)}</div>
       <button type="button" class="btn btn-sm" onClick=${() => setEditing(!editing)}>${editing ? tn("viewMode") : tn("editMode")}</button>
-      <button type="button" class="btn btn-sm" onClick=${copy}><${Icon} name="copy" size=${14} />${tn("copy")}</button>
-      <button type="button" class="btn btn-sm" onClick=${download}><${Icon} name="download" size=${14} />fleet.yaml</button>
+      <button type="button" class="btn btn-sm" title=${tn("copy")} onClick=${copy}><${Icon} name="copy" size=${14} /><span class="lbl">${tn("copy")}</span></button>
+      <button type="button" class="btn btn-sm" title=${tn("devDownload")} onClick=${download}><${Icon} name="download" size=${14} /><span class="lbl">${tn("devDownload")}</span></button>
     </div>
-    ${editing ? html`<textarea class="s-yaml" aria-label=${tn("devEditor")} spellcheck="false" value=${draft} onInput=${(e) => setDraft(e.target.value)}></textarea>
+    ${editing ? html`<textarea class="s-yaml" aria-label=${tn("devEditor")} spellcheck="false" wrap="off" value=${draft} onInput=${(e) => setDraft(e.target.value)}></textarea>
         <div class="save-row"><button type="button" class="btn btn-primary" onClick=${save}>${tn("devApply")}</button><span class="note">${tn("devApplyHint")}</span></div>`
       : html`<pre class="s-yaml">${text}</pre>`}
     ${msg ? html`<p class=${`feedback${msg.error ? " error" : ""}`} role="status">${msg.error || msg.text}</p>` : null}
@@ -695,7 +708,8 @@ function OperationCard({ op, schema }) {
   const phaseBusy = ["writing", "posting", "watching"].includes(op.phase);
   const job = op.job;
   const rows = (job && job.targets) || [];
-  const fleetRestarting = job && job.status === "running" && rows.some((r) => r.target === "fleet" && r.status === "running");
+  // A fleet row of kind "hot" is connections starting without a restart (#1519 P6), not AgEnD restarting.
+  const fleetRestarting = job && job.status === "running" && rows.some((r) => r.target === "fleet" && r.status === "running" && r.kind !== "hot");
   const needsRestart = rows.some((r) => r.status === "restart-required");
   const failedRows = rows.some((r) => r.status === "failed");
   const mismatch = schema && schema.fleet_signature_mismatch;
@@ -728,11 +742,11 @@ function OperationCard({ op, schema }) {
     ${op.steps.length ? html`<ul class="s-op-steps">${op.steps.map((s, i) => html`<li key=${i} class=${`s-step ${s.status}`}>
       <span class="s-step-icon" aria-hidden="true">${icon(s.status) ? html`<${Icon} name=${icon(s.status)} size=${14} />` : "·"}</span>
       <span class="grow">${s.label}</span>
-      <span class="note">${s.status === "waiting" ? tn("stepWaiting") : s.status === "skipped" ? tn("stepSkipped") : s.status === "failed" ? (s.error || tn("applyFailed")) : impactText(s.impact)}</span></li>`)}</ul>` : null}
+      <span class="note">${s.status === "waiting" ? tn("stepWaiting") : s.status === "skipped" ? tn("stepSkipped") : s.status === "failed" ? (s.error || tn("applyFailed")) : s.note || impactText(s.impact)}</span></li>`)}</ul>` : null}
     ${rows.length ? html`<ul class="s-op-steps">${rows.map((r) => html`<li key=${r.target} class=${`s-step ${r.status}`}>
       <span class="s-step-icon" aria-hidden="true">${r.status === "done" ? html`<${Icon} name="check" size=${14} />` : r.status === "failed" ? html`<${Icon} name="alert" size=${14} />` : r.status === "restart-required" ? html`<${Icon} name="restart" size=${14} />` : "·"}</span>
       <span class="grow">${r.target === "fleet" ? "AgEnD" : shortName(r.target, {})}</span>
-      <span class="note">${r.target === "fleet" && r.status === "running" ? tn("restartFleetTitle") : r.status === "restart-required" ? tn("applyRestartNeeded")
+      <span class="note">${r.target === "fleet" && r.status === "running" ? tn(r.kind === "hot" ? "connStartingNow" : "restartFleetTitle") : r.status === "restart-required" ? tn("applyRestartNeeded")
         : r.settled_by === "no-change" ? tn("applyNoChange") : r.settled_by === "fleet-restart" ? tn("viaRestart") : r.kind === "hot" ? tn("impactNow") : tn("impactAgent")}</span>
       ${r.error ? html`<span class="feedback error">${r.error}</span>` : null}</li>`)}</ul>` : null}
     ${job && job.error ? html`<p class="feedback error">${job.error}</p>` : null}