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

package/dist/ui/settings-wizard.js

@@ -2,14 +2,16 @@
 // configuration and, when it finishes, writes the files (a write an admin may have to confirm, #1423) and hands over
 // to the ordinary Apply: the app's runner (settings-apply.js) posts the apply and watches its job, with the same
 // progress, deadline and restart recovery as every other change.
-import { html, useEffect, useState } from "/assets/app-html.js";
+import { html, useEffect, useRef, useState } from "/assets/app-html.js";
 import { t } from "/assets/app-i18n.js";
 import { useLease } from "/assets/app-ctx.js";
 import { Dialog } from "/assets/ui-dialog.js";
 import { api } from "./settings-confirm.js";
 import { startOperation } from "./settings-apply.js";
 import { BACKENDS, DEFAULT_SCHEMA, impactOf, toYaml } from "./settings-model.js";
-import { Select } from "./settings-dialogs.js";
+import { Drawer, Select } from "./settings-dialogs.js";
+import { botHandle, TokenEnvNote, TokenField, verifyBotToken } from "./settings-token.js";
+import { DiscordServerPicker } from "./settings-discord.js";
 
 const tn = (k, ...v) => t(`settings.${k}`, ...v);
 const STEPS = 4;
@@ -18,6 +20,10 @@ const post = (path, body) => api(path, { method: "POST", body: JSON.stringify(bo
 export function SetupWizard({ ctx, onClose }) {
   const lease = useLease("wizard");
   const [w, setW] = useState(null);
+  // The credential's revision (#1529 review): a token or platform change moves it, and a Verify, Detect or plan that
+  // began before is dropped when it lands — an answer about an old token never names, or plans for, a new one.
+  const rev = useRef(0);
+  const bump = () => { rev.current++; };
   const [busy, setBusy] = useState("");
   const [err, setErr] = useState("");
   useEffect(() => {
@@ -25,37 +31,51 @@ export function SetupWizard({ ctx, onClose }) {
       const env = await api("/api/settings/quickstart/environment").catch(() => null);
       if (!lease.current()) return;
       const e = (env && env.body) || { backends: [], channels: [], has_fleet: false };
-      setW({ step: 1, env: e, backend: (e.backends || [])[0] || "claude-code", working_directory: "", instance_name: "agent-1",
-        platform: "telegram", token: "", token_env: "AGEND_BOT_TOKEN", group_id: "", guild_id: "", general_channel_id: "", admin_user_id: "",
+      // #1519 P7: with agents already there, the bot is for one of them by default; a new agent gets a free name.
+      const agents = Array.isArray(e.agents) ? e.agents : [];
+      const names = new Set(agents.map((a) => a.name));
+      let n = 1; while (names.has(`agent-${n}`)) n++;
+      setW({ step: 1, env: e, backend: (e.backends || [])[0] || "claude-code", working_directory: "", instance_name: `agent-${n}`,
+        agent: agents.length ? "existing" : "new", existing_name: agents.length ? agents[0].name : "",
+        platform: "telegram", token: "", group_id: "", guild_id: "", general_channel_id: "", admin_user_id: "",
         identity: null, guilds: [], plan: null, offset: 0 });
     })();
   }, [lease]);
   if (!w) return html`<${Dialog} title=${tn("wizardTitle")} onClose=${onClose}><p class="note">…</p></${Dialog}>`;
-  const set = (k) => (v) => setW((x) => ({ ...x, [k]: v }));
+  // Every field the plan or a probe is about moves the revision (#1529 review r2): a plan or Detect that began before an
+  // edit — target, admin, backend, directory, name — is dropped when it lands, never committed or written over the edit.
+  const set = (k) => (v) => { bump(); setW((x) => ({ ...x, [k]: v })); };
+  // No token env: the plan generates one (#1519 P1: AGEND_<PLATFORM>_<ID>_TOKEN, unique) and the commit carries the plan's.
+  // An existing agent (#1519 P7) is named and nothing else: the server keeps its directory and backend.
   const input = () => ({
-    platform: w.platform, token_env: w.token_env, backend: w.backend, working_directory: w.working_directory, instance_name: w.instance_name,
+    platform: w.platform,
+    ...(w.agent === "existing" ? { instance_name: w.existing_name, existing_agent: true }
+      : { backend: w.backend, working_directory: w.working_directory, instance_name: w.instance_name }),
     group_id: w.group_id || undefined, guild_id: w.guild_id || undefined, general_channel_id: w.general_channel_id || undefined,
     admin_user_id: w.admin_user_id || undefined,
   });
 
   const verify = async () => {
+    const at = rev.current, token = w.token, platform = w.platform;
+    const live = () => lease.current() && rev.current === at;
     setBusy(tn("wizardVerifying")); setErr("");
-    const res = await post("/api/settings/quickstart/probe", { action: "verify", platform: w.platform, token: w.token });
-    if (!lease.current()) return;
-    const identity = (res.body && res.body.identity) || { valid: false };
+    const identity = await verifyBotToken(platform, token);
+    if (!live()) { if (lease.current()) setBusy(""); return; }
     let guilds = [];
-    if (identity.valid && w.platform === "discord") {
-      const g = await post("/api/settings/quickstart/probe", { action: "guilds", token: w.token });
-      if (!lease.current()) return;
+    if (identity.valid && platform === "discord") {
+      const g = await post("/api/settings/quickstart/probe", { action: "guilds", token });
+      if (!live()) { if (lease.current()) setBusy(""); return; }
       guilds = (g.body && g.body.guilds) || [];
     }
     setBusy("");
-    setW((x) => ({ ...x, identity, guilds }));
+    setW((x) => (x.token === token && x.platform === platform ? { ...x, identity, guilds } : x));
   };
   const detect = async () => {
+    const at = rev.current;
     setBusy(tn("wizardWaitingStart")); setErr("");
     const res = await post("/api/settings/quickstart/probe", { action: "await-telegram-start", token: w.token, offset: w.offset || 0 });
     if (!lease.current()) return;
+    if (rev.current !== at) { setBusy(""); return; }
     setBusy("");
     if (!res.ok) { setErr((res.body && res.body.error) || tn("applyFailed")); return; }
     if (res.body.found) setW((x) => ({ ...x, offset: res.body.offset, group_id: String(res.body.found.groupId), admin_user_id: String(res.body.found.userId) }));
@@ -63,14 +83,19 @@ export function SetupWizard({ ctx, onClose }) {
   };
   const next = async () => {
     setErr("");
-    if (w.step === 1) { if (!w.working_directory.startsWith("/")) { setErr(tn("wizardNeedDir")); return; } setW({ ...w, step: 2 }); return; }
+    if (w.step === 1) {
+      if (w.agent !== "existing" && !w.working_directory.startsWith("/")) { setErr(tn("wizardNeedDir")); return; }
+      setW({ ...w, step: 2 }); return;
+    }
     if (w.step === 2) { setW({ ...w, step: 3 }); return; }
     if (w.step === 3) {
       if (!w.identity || !w.identity.valid) { setErr(tn("wizardNeedVerify")); return; }
+      const at = rev.current;
       setBusy(tn("wizardPlanLoading"));
       const res = await post("/api/settings/quickstart/plan", input());
       if (!lease.current()) return;
       setBusy("");
+      if (rev.current !== at) return;
       if (!res.ok) { setErr((res.body && res.body.error) || tn("applyFailed")); return; }
       setW((x) => ({ ...x, plan: res.body, step: 4 }));
       return;
@@ -84,7 +109,9 @@ export function SetupWizard({ ctx, onClose }) {
  * commit's body until that write completes, then drops it.
    */
   const finish = () => {
-    const body = { ...input(), token: w.token };
+    // The plan's target, all of it (#1529 review): its connection id and its generated token env — the commit refuses
+    // either if it was taken since, instead of quietly picking another.
+    const body = { ...input(), channel_id: w.plan.channel_id, token_env: w.plan.token_env, token_env_generated: true, token: w.token };
     // It writes the connection and the first agent: it costs what a connection change does (the server's schema).
     const handed = startOperation([{ label: tn("wizardTitle"), impact: impactOf((ctx && ctx.schema) || DEFAULT_SCHEMA, "fleet.channels"),
       request: { method: "POST", url: "/api/settings/quickstart/commit", body, sensitive: true } }]);
@@ -94,28 +121,31 @@ export function SetupWizard({ ctx, onClose }) {
   };
 
   let body;
+  const agents = Array.isArray(w.env.agents) ? w.env.agents : [];
   if (w.step === 1) {
-    body = html`<div class="field"><label for="wz-be">${tn("wizardBackend")}</label>
+    const which = agents.length ? html`<div class="seg-inline" role="group" aria-label=${tn("wizardAgentWhich")}>
+        ${["existing", "new"].map((k) => html`<button key=${k} type="button" class=${`btn${w.agent === k ? " btn-primary" : ""}`} aria-pressed=${w.agent === k ? "true" : "false"}
+          onClick=${() => set("agent")(k)}>${k === "existing" ? tn("wizardAgentExisting") : tn("wizardAgentNew")}</button>`)}</div>` : null;
+    body = w.agent === "existing" ? html`${which}
+      <div class="field"><label for="wz-agent">${tn("wizardAgentPick")}</label>
+        <${Select} id="wz-agent" value=${w.existing_name} onChange=${set("existing_name")} options=${agents.map((a) => a.name)} />
+        <p class="note">${tn("wizardAgentExistingNote")}</p></div>` : html`${which}<div class="field"><label for="wz-be">${tn("wizardBackend")}</label>
         <${Select} id="wz-be" value=${w.backend} onChange=${set("backend")} options=${w.env.backends && w.env.backends.length ? w.env.backends : BACKENDS} />
         <p class="note">${w.env.backends && w.env.backends.length ? tn("wizardBackendFound", w.env.backends.join(", ")) : tn("wizardBackendNone")}</p></div>
       <div class="field"><label for="wz-wd">${tn("workingDir")}</label><input id="wz-wd" type="text" placeholder="/home/you/projects/app" value=${w.working_directory} onInput=${(e) => set("working_directory")(e.target.value.trim())} /></div>
-      <div class="field"><label for="wz-name">${tn("wizardAgentName")}</label><input id="wz-name" type="text" value=${w.instance_name} onInput=${(e) => set("instance_name")(e.target.value.trim())} /></div>`;
+      <div class="field"><label for="wz-name">${agents.length ? tn("wizardAgentNewName") : tn("wizardAgentName")}</label><input id="wz-name" type="text" value=${w.instance_name} onInput=${(e) => set("instance_name")(e.target.value.trim())} /></div>`;
   } else if (w.step === 2) {
     body = html`<div class="seg-inline" role="group" aria-label=${tn("wizardPlatform")}>
         ${["telegram", "discord"].map((p) => html`<button key=${p} type="button" class=${`btn${w.platform === p ? " btn-primary" : ""}`} aria-pressed=${w.platform === p ? "true" : "false"}
-          onClick=${() => setW({ ...w, platform: p, identity: null })}>${p === "telegram" ? "Telegram" : "Discord"}</button>`)}</div>
+          onClick=${() => { bump(); setW((x) => ({ ...x, platform: p, identity: null })); }}>${p === "telegram" ? "Telegram" : "Discord"}</button>`)}</div>
       <p class="note">${w.platform === "telegram" ? tn("wizardTelegramHint") : tn("wizardDiscordHint")}</p>`;
   } else if (w.step === 3) {
-    body = html`<div class="field"><label for="wz-token">${tn("wizardToken")}</label>
-        <input id="wz-token" type="password" autocomplete="new-password" placeholder="123456:ABC-DEF…" value=${w.token} onInput=${(e) => setW({ ...w, token: e.target.value.trim(), identity: null })} />
-        <p class="note">${w.platform === "telegram" ? tn("wizardTokenTelegram") : tn("wizardTokenDiscord")}</p></div>
-      <div class="field"><label for="wz-env">${tn("tokenEnv")}</label><input id="wz-env" type="text" value=${w.token_env} onInput=${(e) => set("token_env")(e.target.value.trim())} /></div>
-      <div class="dlg-inline-actions"><button type="button" class="btn btn-sm" disabled=${!!busy} onClick=${verify}>${tn("wizardVerify")}</button>
-        ${w.identity ? html`<span class=${`feedback${w.identity.valid ? "" : " error"}`} role="status">${w.identity.valid ? (w.identity.username || tn("verified")) : (w.identity.reason || tn("verifyFailed"))}</span>` : null}</div>
+    body = html`<${TokenField} id="wz-token" platform=${w.platform} value=${w.token} identity=${w.identity} busy=${!!busy}
+        onInput=${(v) => { bump(); setW((x) => ({ ...x, token: v, identity: null })); }} onVerify=${verify} />
       ${w.platform === "discord" ? html`
-        <div class="field"><label for="wz-guild">${tn("guildIdField")}</label><${Select} id="wz-guild" value=${w.guild_id} onChange=${set("guild_id")}
-          options=${["", ...w.guilds.map((g) => ({ value: g.id, label: `${g.name} (${g.id})` }))]} /></div>
-        <div class="field"><label for="wz-gen">${tn("wizardGeneralChannel")}</label><input id="wz-gen" type="text" value=${w.general_channel_id} onInput=${(e) => set("general_channel_id")(e.target.value.trim())} /></div>
+        <${DiscordServerPicker} idPrefix="wz" token=${w.identity && w.identity.valid ? w.token : ""} bot=${w.identity && botHandle(w.identity.username)}
+          invite=${w.identity && w.identity.invite} portal=${w.identity && w.identity.portal} guilds=${w.guilds} onGuilds=${(g) => setW((x) => ({ ...x, guilds: g }))}
+          guild=${w.guild_id} onGuild=${set("guild_id")} channel=${w.general_channel_id} onChannel=${set("general_channel_id")} />
         <div class="field"><label for="wz-user">${tn("wizardAdminUser")}</label><input id="wz-user" type="text" placeholder=${tn("discordUserPlaceholder")} value=${w.admin_user_id} onInput=${(e) => set("admin_user_id")(e.target.value.trim())} /></div>`
       : html`
         <div class="field"><label for="wz-group">${tn("groupIdField")}</label><input id="wz-group" type="text" placeholder="-1001234567890" value=${w.group_id} onInput=${(e) => set("group_id")(e.target.value.trim())} />
@@ -125,8 +155,12 @@ export function SetupWizard({ ctx, onClose }) {
   } else {
     body = !w.plan ? html`<p class="note">${tn("wizardPlanLoading")}</p>` : html`
       <p><strong>${tn("wizardWillWrite")}</strong></p>
-      <pre class="s-yaml">${toYaml({ channels: [w.plan.channel], instances: { [w.plan.instance.name]: { working_directory: w.plan.instance.working_directory, backend: w.plan.instance.backend } } })}</pre>
-      <p class="note">${tn("wizardEnvKeys", (w.plan.env_keys || []).join(", "))}</p>
+      <pre class="s-yaml">${toYaml({ channels: [w.plan.channel], instances: { [w.plan.instance.name]: { working_directory: w.plan.instance.working_directory, backend: w.plan.instance.backend, channel_id: w.plan.instance.channel_id,
+        ...(w.plan.instance.topic && w.plan.instance.topic.to != null ? { topic_id: w.plan.instance.topic.to } : {}) } } })}</pre>
+      ${w.plan.instance && w.plan.instance.existing ? html`<p class="note">${tn("wizardAgentExistingNote")}</p>` : null}
+      ${w.plan.instance && w.plan.instance.topic ? html`<p class="feedback warning">${w.plan.instance.topic.to == null
+        ? tn("wizardTopicNotCarried", w.plan.instance.topic.from) : tn("wizardTopicGeneral")}</p>` : null}
+      <${Drawer} title=${tn("advancedSection")}><${TokenEnvNote} name=${w.plan.token_env} /></${Drawer}>
       ${(w.plan.warnings || []).map((x, i) => html`<p key=${i} class="feedback warning">${x}</p>`)}`;
   }
   return html`<${Dialog} title=${tn("wizardTitle")} onClose=${onClose} wide=${true} busy=${busy === tn("wizardCommitting")}

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

@@ -1,7 +1,7 @@
 // #1408 §2/§7: the app's frame — the sidebar (a drawer on a phone), the main area with its panel, the bottom tabs on a
 // phone, the connection line, toasts. Panels render their own header through <PanelHeader>, so every panel's title,
 // status and ⋯ actions sit in the same place.
-import { html, useEffect, useState } from "./app-html.js";
+import { html, useEffect, useLayoutEffect, useRef, useState } from "./app-html.js";
 import { Icon } from "./ui-icons.js";
 import { Toasts } from "./ui-toast.js";
 import { ConfirmHost } from "./ui-confirm.js";
@@ -11,6 +11,7 @@ import { navStore } from "./app-nav.js";
 import { chatPath, viewPath, settingsPath, routeKey, NEEDS_PATH } from "./app-route.js";
 import { SessionMenu } from "./app-session.js";
 import { ErrorState, Skeleton } from "./ui-states.js";
+import { InstanceNav, RosterNav } from "./instance-nav.js";
 
 /** Shell state shared with panels: the phone drawer, the collapsed sidebar, extensions a panel module adds. */
 export const shellStore = createStore({ drawer: false, collapsed: readCollapsed(), footer: [], keyboard: false, dialog: null, side: null });
@@ -25,6 +26,14 @@ export function setSideSection(Component) {
   return () => { if (shellStore.get().side === entry) shellStore.set({ side: null }); };
 }
 
+// The sidebar's instance list (alpha.2, N1): one component on every page. keepActiveInView lives with it.
+export { keepActiveInView } from "./instance-nav.js";
+
+/** #1519 P7: "New agent" from anywhere (the sidebar's +, an empty chat): the app registers what opens it. */
+let newInstanceOpener = null;
+export function setNewInstanceOpener(fn) { newInstanceOpener = fn; }
+export function requestNewInstance() { if (newInstanceOpener) newInstanceOpener(); }
+
 /** An app-level dialog (New instance): rendered by the shell until closed, whatever panel is showing. */
 export function showDialog(Component, props = {}) { shellStore.set({ dialog: { Component, props } }); }
 export function closeDialog() { shellStore.set({ dialog: null }); }
@@ -90,29 +99,6 @@ export function statusClass(i, exec, awaiting) {
 }
 export { statusLabel };
 
-function tooltip(i) {
-  const src = (s) => (s === "instance" || s === "classic" ? "configured" : s === "fleet-default" ? "fleet default" : s);
-  const model = i.model ? (i.model_source === "live" || i.model_source === "cli-default" || i.model_source === "unresolved" ? i.model : `${i.model} (${src(i.model_source)})`) : null;
-  const effort = i.effort ? `effort:${i.effort}${i.effort_source ? ` (${src(i.effort_source)})` : ""}` : null;
-  const ctx = i.context_pct != null ? `ctx:${Math.round(i.context_pct)}%` : null;
-  const cost = i.cost > 0 ? `$${i.cost.toFixed(2)}` : null;
-  return [i.name, i.backend, model, effort, ctx, cost, i.status].filter(Boolean).join(" · ");
-}
-
-function InstanceRow({ i, active, exec, awaiting }) {
-  const alias = typeof i.display_name === "string" && i.display_name.trim() && i.display_name.trim() !== i.name ? i.display_name.trim() : "";
-  const cls = statusClass(i, exec, awaiting);
-  // Two lines: the name (never shortened to make room for a badge, #1408 rough edge 6), then the alias and/or
-  // "needs you". Everything else is in the tooltip.
-  return html`<li><a class=${`inst${active ? " active" : ""}`} href=${chatPath(i.name)} title=${tooltip(i)} aria-current=${active ? "page" : undefined}
-      onClick=${closeDrawer}>
-    <span class=${`dot ${cls}`} aria-hidden="true"></span>
-    <span class="inst-text"><span class="inst-name">${i.name}</span>
-      ${alias || awaiting != null ? html`<span class="inst-sub">${alias ? html`<span class="inst-alias">${alias}</span>` : null}
-        ${awaiting != null ? html`<span class="badge-await" title=${awaiting || t("app.approxNote")}>${t("app.needsYou")}</span>` : null}</span>` : null}
-      <span class="sr-only">${statusLabel(i, exec, awaiting)}</span></span></a></li>`;
-}
-
 /** Sign in, and come back here afterwards (the sign-in page accepts only the app's own pages). */
 export function signInHref() {
   const here = typeof location !== "undefined" ? location.pathname + location.search : "/view";
@@ -122,7 +108,6 @@ export function signInHref() {
 function Sidebar({ route, onNewInstance, viewOnly }) {
   const app = useStore(appStore);
   const shell = useStore(shellStore);
-  const current = route && route.panel === "chat" ? route.instance : null;
   const on = (panel) => !!route && route.panel === panel;
   // A count badge is hidden at 0; its number is also in the link's accessible name.
   const navLink = (panel, href, icon, label, count = 0) => html`<a class=${`side-row${on(panel) ? " active" : ""}`} href=${href}
@@ -137,7 +122,7 @@ function Sidebar({ route, onNewInstance, viewOnly }) {
         <button type="button" class="icon-btn side-collapse" onClick=${toggleSidebar} aria-label=${narrow() ? t("app.closeMenu") : t("app.collapse")} title=${narrow() ? t("app.closeMenu") : t("app.collapse")} aria-controls="sidebar"><${Icon} name="sidebar" /></button>
       </div>
       <nav class="side-nav" aria-label=${t("app.menu")}>${navLink("view", "/view", "view", t("app.view"))}</nav>
-      ${shell.side ? html`<${shell.side.Component} />` : html`<div class="side-section"></div>`}
+      ${shell.side ? html`<${shell.side.Component} />` : html`<${ViewOnlyNav} route=${route} />`}
       <div class="side-foot">
         <${Prefs} />
         <a class="side-row" href=${signInHref()}><${Icon} name="user" /><span>${t("app.signIn")}</span></a>
@@ -148,19 +133,15 @@ function Sidebar({ route, onNewInstance, viewOnly }) {
     <div class="side-head">
       <a class="brand" href="/ui" onClick=${closeDrawer}>${t("app.brand")}</a>
       <button type="button" class="icon-btn side-collapse" onClick=${toggleSidebar} aria-label=${narrow() ? t("app.closeMenu") : t("app.collapse")} title=${narrow() ? t("app.closeMenu") : t("app.collapse")} aria-controls="sidebar"><${Icon} name="sidebar" /></button>
-      <button type="button" class="icon-btn" onClick=${onNewInstance} aria-label=${t("app.newInstance")} title=${t("app.newInstance")}><${Icon} name="edit" /></button>
+      <button type="button" class="icon-btn" onClick=${onNewInstance} aria-label=${t("app.newInstance")} title=${t("app.newInstance")}><${Icon} name="plus" /></button>
     </div>
     <nav class="side-nav" aria-label=${t("app.menu")}>
       ${navLink("needs", NEEDS_PATH, "inbox", t("app.needsNav"), needsCount)}
       ${navLink("fleet", "/ui/fleet", "fleet", t("app.fleet"))}
       ${navLink("view", "/view", "view", t("app.view"))}
     </nav>
-    ${shell.side ? html`<${shell.side.Component} />` : html`<div class="side-section" id="instanceList">
-      <h2 class="side-label">${t("app.instances")}</h2>
-      ${app.instances.length ? html`<ul class="inst-list">${app.instances.map(i => html`<${InstanceRow} key=${i.name} i=${i} active=${i.name === current}
-          exec=${app.exec[i.name]} awaiting=${Object.prototype.hasOwnProperty.call(app.awaiting, i.name) ? app.awaiting[i.name] : null} />`)}</ul>`
-        : html`<p class="side-empty">${t("app.noInstances")}</p>`}
-    </div>`}
+    ${shell.side ? html`<${shell.side.Component} />` : html`<${InstanceNav} route=${route} items=${app.instances} loaded=${app.ready !== false}
+        exec=${app.exec} awaiting=${app.awaiting} onPick=${closeDrawer} />`}
     <div class="side-foot">
       ${navLink("settings", settingsPath(), "settings", t("app.settings"))}
       ${shell.footer.map(({ key, Component }) => html`<${Component} key=${key} />`)}
@@ -170,6 +151,11 @@ function Sidebar({ route, onNewInstance, viewOnly }) {
   </aside>`;
 }
 
+/** The anonymous View reader's list: View's roster read (no status frames without a session), the same component. */
+function ViewOnlyNav({ route }) {
+  return html`<${RosterNav} route=${route} viewOnly=${true} onPick=${closeDrawer} />`;
+}
+
 function Prefs() {
   const [theme, setTheme] = useState(typeof AgendTheme !== "undefined" ? AgendTheme.get() : "system");
   const [l, setL] = useState(lang());

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

@@ -21,8 +21,9 @@ export function createStore(initial) {
 /** The app's store. `ready`: a status frame has arrived (before it, an unknown instance may just not be listed yet).
  *  `exec`: each instance's raw execution state (working / idle / stuck / null); `awaiting`: what it
  *  waits on at its terminal (text, "" when unknown), absent when it waits on nothing. `hydration`: a late catch-up
- *  (app-stream.js catchUp) — "catching" / "retrying" / "failed" / "ok"; `retryHydration` asks for it again. */
-export const appStore = createStore({ ready: false, instances: [], uptime: 0, exec: {}, awaiting: {}, connection: "connecting", needs: [],
+ *  (app-stream.js catchUp) — "catching" / "retrying" / "failed" / "ok"; `retryHydration` asks for it again.
+ *  `connections`: how many chat connections the fleet has (#1519 P7: 0 is web-only — the first-run card); null until known. */
+export const appStore = createStore({ ready: false, instances: [], uptime: 0, exec: {}, awaiting: {}, connection: "connecting", needs: [], connections: null,
   hydration: "none", retryHydration: null });
 
 /** Fold one status frame (stream or poll) into the store. */
@@ -34,7 +35,8 @@ export function applyStatus(d) {
     exec[i.name] = (i.execution_state !== undefined ? i.execution_state : i.state) ?? null;
     if (i.state === "awaiting_input") awaiting[i.name] = typeof i.interaction_summary === "string" ? i.interaction_summary : "";
   }
-  appStore.set({ ready: true, instances: d.instances, uptime: d.uptime ?? 0, exec, awaiting });
+  appStore.set({ ready: true, instances: d.instances, uptime: d.uptime ?? 0, exec, awaiting,
+    connections: typeof d.connections === "number" ? d.connections : null });
 }
 
 /** One "activity" event: an instance started or stopped working. */

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

@@ -15,7 +15,7 @@
 // older snapshot. A failed read is retried a few times with a growing delay, and then waits for the person (Retry);
 // the state is told as "hydration" events. Polls never overlap: a poll asked for while one runs follows it.
 
-const EVENTS = ["status", "message", "delivery", "deliveries", "prompt", "prompts", "prompt_resolved", "activity", "needs"];
+const EVENTS = ["status", "message", "delivery", "deliveries", "prompt", "prompts", "prompt_resolved", "activity", "needs", "reply_buttons"];
 const MAX_HELD = 1000;                    // live events held during one catch-up read; more → read again afterwards
 const RETRY_DELAYS = [1000, 2000, 4000];  // after the first failed catch-up read; then it waits for Retry
 const POLL_LIMIT_MS = 10000;              // a poll that has not answered by then counts as failed
@@ -83,6 +83,7 @@ export function createStream(opts) {
         if (typeof d.cursor === "string") state.cursor = d.cursor;
         if (Array.isArray(d.deliveries)) emit("deliveries", d.deliveries);
         if (Array.isArray(d.prompts)) emit("prompts", d.prompts);
+        if (Array.isArray(d.reply_buttons)) for (const u of d.reply_buttons) emit("reply_buttons", u);   // #1266
         if (Array.isArray(d.needs)) emit("needs", { items: d.needs });
         return true;
       } catch { return false; /* the next tick, or the catch-up's retry, tries again */ }

package/dist/ui/shared/app.css

@@ -54,7 +54,11 @@ a { color: inherit; text-decoration: none; }
 .link:hover { text-decoration: underline; }
 
 /* ── The frame ── */
-.shell { display: flex; height: 100vh; height: 100dvh; overflow: hidden; }
+/* The page itself never scrolls: only its panes do. The shell is the containing block of anything absolutely positioned
+   inside it (an .sr-only label), so its overflow: hidden clips it — an absolute element whose containing block is the
+   viewport escapes every scroll container and made the whole page scroll (alpha.2: two scrollbars on /ui/chat). */
+.shell { display: flex; height: 100vh; height: 100dvh; overflow: hidden; position: relative; }
+html:has(.shell), html:has(.shell) body { overflow: hidden; }
 .skip { position: absolute; left: var(--s-2); top: -60px; z-index: 100; background: var(--accent-fill); color: var(--on-accent); padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); }
 .skip:focus { top: var(--s-2); }
 
@@ -76,7 +80,7 @@ a { color: inherit; text-decoration: none; }
 .side-row .meta { color: var(--text-3); font-size: var(--fs-xs); max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .side-row.toggle { cursor: pointer; color: var(--text-2); }
 .side-row.toggle input { margin: 0; accent-color: var(--accent); }
-.side-section { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s-2) var(--s-2); }
+.side-section { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s-2) var(--s-2); position: relative; }   /* its .sr-only labels scroll (and clip) with it */
 /* The sidebar's list scroller: thin and in the theme's colours, not the UA's light bar with arrows. WebKit/Blink take
    the pseudo-elements; Chromium ignores them once scrollbar-color is set, so the standard properties are Firefox-only. */
 .side-section::-webkit-scrollbar { width: 10px; }
@@ -159,6 +163,10 @@ a { color: inherit; text-decoration: none; }
 .empty-title { color: var(--text); font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
 .empty-hint { font-size: var(--fs-sm); }
 .empty .btn { margin-top: var(--s-3); }
+/* #1519 P7: the first-run card (a fleet with no chat connection), above an empty chat or a Settings list. */
+.first-run-stack { width: 100%; max-width: var(--col); }
+.first-run h3 { display: flex; align-items: center; gap: var(--s-2); }
+.first-run p { color: var(--text-2); font-size: var(--fs-sm); }
 .error-state { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); padding: var(--s-8) var(--s-4); color: var(--danger); text-align: center; }
 .error-state p { color: var(--text); }
 .skeleton { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-6) var(--s-5); max-width: var(--col); margin: 0 auto; width: 100%; opacity: 0; animation: appear 0s linear 300ms forwards; }
@@ -319,6 +327,7 @@ a { color: inherit; text-decoration: none; }
 .pv-newer { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; padding: var(--s-2) var(--s-3); border-radius: var(--r-sm);
   background: var(--surface); font-size: var(--fs-xs); }
 .pv-newer > span { flex: 1; min-width: 0; }
+.pv-newer > .pv-newer-note { flex-basis: 100%; color: var(--text-3); }
 .pv-panel-body { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0 var(--s-3) var(--s-3); }
 .pv-panel-body .pv-holder { flex: 1; min-height: 0; margin: 0; display: flex; flex-direction: column; }
 .pv-panel-body.show-code .pv-holder { display: none; }
@@ -337,6 +346,12 @@ a { color: inherit; text-decoration: none; }
 @container (max-width: 560px) {
   .pv-panel-bar :not(.pv-panel-run) > .lbl { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
 }
+/* #1266: an agent reply's buttons — choices under the text; one answers for everyone. */
+.rb-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-2); }
+.rb-btn { max-width: 100%; white-space: normal; text-align: left; }
+.rb-btn.chosen, .rb-btn.chosen:disabled { border-color: var(--ok); color: var(--text); background: color-mix(in srgb, var(--ok) 14%, transparent); font-weight: var(--fw-semibold); opacity: 1; }
+.rb-btn:disabled:not(.chosen) { opacity: 0.55; }
+.rb-note { font-size: var(--fs-xs); color: var(--text-3); }
 .pv-menu { position: relative; }
 .pv-menu > summary { list-style: none; cursor: pointer; padding: 2px var(--s-2); border-radius: var(--r-sm); color: var(--text-3); }
 .pv-menu > summary::-webkit-details-marker { display: none; }
@@ -484,6 +499,19 @@ a { color: inherit; text-decoration: none; }
 .v-filter-box input::placeholder { color: var(--text-3); }
 .v-filter-clear { width: 28px; height: 28px; }
 .v-filter .note { padding: var(--s-1) var(--s-1) 0; font-variant-numeric: tabular-nums; }
+/* alpha.2 (N1): status and CLI chips under the filter box — each a <details> with checkboxes. */
+.nav-facets { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s-1) var(--s-2); padding: var(--s-2) var(--s-1) 0; }
+.nav-facet { font-size: var(--fs-xs); color: var(--text-2); }
+.nav-facet > summary { cursor: pointer; list-style: none; padding: 2px var(--s-2); border-radius: var(--r-sm); }
+.nav-facet > summary::-webkit-details-marker { display: none; }
+.nav-facet > summary::after { content: " ▾"; color: var(--text-3); }
+.nav-facet[open] > summary::after { content: " ▴"; }
+.nav-facet > summary:hover { background: var(--hover); }
+.nav-facet > summary:focus-visible { outline: 2px solid var(--accent); }
+.nav-facet-n { display: inline-block; min-width: 16px; padding: 0 4px; border-radius: 8px; background: var(--accent); color: var(--on-accent, #fff); text-align: center; font-variant-numeric: tabular-nums; }
+.nav-facet-list { display: flex; flex-direction: column; gap: 2px; padding: var(--s-1) var(--s-2); }
+.nav-chip { display: flex; align-items: center; gap: var(--s-2); cursor: pointer; color: var(--text); }
+.nav-facet-reset { font-size: var(--fs-xs); }
 
 .p-view .panel-actions .btn { gap: var(--s-1); }
 .v-term { flex: 1; min-height: 0; overflow: auto; scrollbar-gutter: stable; padding: 5px 6px; background: #000000; position: relative; }
@@ -587,6 +615,10 @@ a { color: inherit; text-decoration: none; }
 .chip-x:hover { color: var(--text); background: var(--surface); }
 .dlg-impact { margin-right: auto; align-self: center; }
 .dlg-inline-actions { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
+/* #1519 P1: the bot-token field — the input and its show/hide button on one row. */
+.token-row { display: flex; align-items: center; gap: var(--s-1); }
+.token-row input { flex: 1; min-width: 0; }
+.feedback.ok { color: var(--ok, var(--text)); }
 .seg-inline { display: inline-flex; gap: var(--s-1); }
 .btn.on { background: var(--surface-2); color: var(--text); font-weight: var(--fw-semibold); }
 .card h4 { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-2); }

package/dist/ui/shared/app.js

@@ -6,7 +6,7 @@
 // reached only by the dynamic imports below, in "full" mode. A test walks the static imports over real HTTP and asserts
 // none of them names /ui/.
 import { html, render } from "./app-html.js";
-import { Shell, handleKey, showDialog, closeDrawer, retryable } from "./app-shell.js";
+import { Shell, handleKey, showDialog, closeDrawer, retryable, setNewInstanceOpener } from "./app-shell.js";
 import { startRouter, navStore, navigate } from "./app-nav.js";
 import { createStream } from "./app-stream.js";
 import { appStore, applyStatus, applyActivity } from "./app-store.js";
@@ -72,6 +72,7 @@ if (mode === "full") {
     try { m = await loadFleet(); } catch { toast(t("app.loadFailed"), false); return; }
     showDialog(m.CreateInstanceDialog);
   };
+  setNewInstanceOpener(onNewInstance);
 } else appStore.set({ connection: "none" });
 
 startRouter(window);