@songsid/agend 2.1.12 → 2.2.0-alpha.1

package/dist/ui/panel-fleet.js

@@ -0,0 +1,413 @@
+// #1408 step 1: the Fleet panel (/ui/fleet[/<tab>]) — tasks, schedules, teams and the fleet's config — and the
+// "New instance" dialog. Behind the session gate (/ui/js/), loaded the first time it is opened.
+//
+// Opening a tab reads its list: a person's navigation, so it counts as use, as the old tab click did (#1374 — no timer
+// here re-reads anything). Every read is under the navigation's lease: a list that arrives after the person moved on
+// is dropped (#1408 §4).
+import { html, useEffect, useRef, useState } from "/assets/app-html.js";
+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 { renavigate } from "/assets/app-nav.js";
+import { chatPath, fleetPath, FLEET_TABS } from "/assets/app-route.js";
+import { Dialog } from "/assets/ui-dialog.js";
+import { Empty, ErrorState, 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";
+import { confirmedWrite } from "./settings-confirm.js";
+import { OrgChart } from "./fleet-org.js";
+
+register("fleet", {
+  en: {
+    title: "Fleet", tasks: "Tasks", schedules: "Schedules", teams: "Teams", org: "Org chart", 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",
+    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",
+    cron: "Cron expression", message: "Message", target: "Target instance", label: "Label", teamName: "Team name", members: "Members",
+    titleRequired: "Title required", scheduleFieldsRequired: "Cron, message, and target required", teamFieldsRequired: "Name and at least one member required",
+    deleteSchedule: "Delete this schedule?", deleteTeam: "Delete team “{0}”?", taskCreated: "Task created", scheduleCreated: "Schedule created", scheduleDeleted: "Schedule deleted",
+    teamCreated: "Team created", teamDeleted: "Team deleted", taskDone: "Task updated", configSaved: "Config saved", configRestart: " (restart the fleet to apply channel changes)",
+    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",
+    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: "設定",
+    newTask: "新增 task", newSchedule: "新增排程", newTeam: "新增 team",
+    noTasks: "還沒有 task", noTasksHint: "建立一個來協調 fleet 的工作。", noSchedules: "還沒有排程", noSchedulesHint: "用 cron 自動執行例行工作。",
+    noTeams: "還沒有 team", noTeamsHint: "把 instance 分組一起工作。", countTasks: "{0} 個 task", countSchedules: "{0} 個排程", countTeams: "{0} 個 team",
+    claim: "認領", done: "完成", delete: "刪除", on: "開", off: "關", cancel: "取消", create: "建立", creating: "建立中…", save: "儲存變更",
+    taskTitle: "標題", taskDesc: "說明", priority: "優先順序", assignee: "負責人", unassigned: "未指派",
+    pNormal: "一般", pLow: "低", pHigh: "高", pUrgent: "緊急",
+    cron: "Cron 表示式", message: "訊息", target: "目標 instance", label: "標籤", teamName: "Team 名稱", members: "成員",
+    titleRequired: "必須填寫標題", scheduleFieldsRequired: "必須填寫 Cron、訊息與目標 instance", teamFieldsRequired: "必須填寫名稱並選擇至少一名成員",
+    deleteSchedule: "確定刪除此排程嗎？", deleteTeam: "確定刪除 team「{0}」嗎？", taskCreated: "Task 已建立", scheduleCreated: "排程已建立", scheduleDeleted: "排程已刪除",
+    teamCreated: "Team 已建立", teamDeleted: "Team 已刪除", taskDone: "Task 已更新", configSaved: "設定已儲存", configRestart: "（請重新啟動 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",
+    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 BACKENDS = ["claude-code", "codex", "opencode", "kiro-cli", "antigravity", "grok", "muse"];
+
+async function api(method, path, body, lease) {
+  const o = { method, headers: { "Content-Type": "application/json" } };
+  if (body) o.body = JSON.stringify(body);
+  const r = await (lease ? lease.fetch(path, o) : fetch(path, o));
+  return r.json();
+}
+
+/**
+ * Load `path` under the lease: `null` while the first load runs, `{ error }` on failure. 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.
+ */
+function useLoad(lease, path, version) {
+  const [state, setState] = useState(null);
+  const seq = useRef(0);
+  const shownFor = useRef(null);
+  useEffect(() => {
+    const mine = ++seq.current;
+    if (shownFor.current !== lease) { shownFor.current = lease; setState(null); }
+    (async () => {
+      try {
+        const d = await api("GET", path, null, lease);
+        if (lease.current() && mine === seq.current) setState({ data: d });
+      } catch { if (lease.current() && mine === seq.current) setState({ error: true }); }
+    })();
+  }, [lease, path, version]);
+  return state;
+}
+
+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;
+  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>`;
+}
+
+function ListHead({ count, label, action }) {
+  return html`<div class="list-head"><span>${count}</span>${action ? html`<button type="button" class="btn btn-primary" onClick=${action.onClick}><${Icon} name="plus" size=${16} />${label}</button>` : null}</div>`;
+}
+function Loaded({ state, children }) {
+  if (!state) return html`<${Skeleton} lines=${4} />`;
+  if (state.error) return html`<${ErrorState} onRetry=${renavigate} />`;
+  return children(state.data);
+}
+
+function Tasks({ lease }) {
+  const [version, setVersion] = useState(0);
+  const [creating, setCreating] = useState(false);
+  const state = useLoad(lease, "/ui/tasks", version);
+  async function act(id, action) {
+    const r = await api("POST", `/ui/tasks/${encodeURIComponent(id)}`, { action });
+    if (r.error) toast(r.error, false); else { toast(t("fleet.taskDone")); setVersion(v => v + 1); }
+  }
+  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) }} />
+      ${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}
+        ${x.status === "open" ? html`<button type="button" class="btn btn-ghost btn-sm" onClick=${() => act(x.id, "claim")}>${t("fleet.claim")}</button>` : null}
+        ${x.status === "claimed" ? html`<button type="button" class="btn btn-ghost btn-sm" onClick=${() => act(x.id, "complete")}>${t("fleet.done")}</button>` : null}
+      </li>`)}</ul>` : html`<${Empty} icon="tasks" title=${t("fleet.noTasks")} hint=${t("fleet.noTasksHint")} />`}
+`;
+  }}</${Loaded}>
+  ${creating ? html`<${CreateTask} onClose=${() => setCreating(false)} onDone=${() => setVersion(v => v + 1)} />` : null}`;
+}
+
+function Schedules({ lease }) {
+  const [version, setVersion] = useState(0);
+  const [creating, setCreating] = useState(false);
+  const state = useLoad(lease, "/ui/schedules", version);
+  async function del(id) {
+    if (!(await confirmDialog({ message: t("fleet.deleteSchedule"), confirmLabel: t("fleet.delete"), danger: true }))) return;
+    if (!lease.current()) return;                   // answered after this tab went: the question no longer stands
+    const r = await api("DELETE", `/ui/schedules/${encodeURIComponent(id)}`);
+    if (r.error) toast(r.error, false); else { toast(t("fleet.scheduleDeleted")); setVersion(v => v + 1); }
+  }
+  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) }} />
+      ${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>
+        <a class="link" href=${chatPath(x.target)}>${x.target}</a>
+        <button type="button" class="btn btn-ghost btn-sm danger" onClick=${() => del(x.id)}>${t("fleet.delete")}</button></li>`)}</ul>`
+        : html`<${Empty} icon="clock" title=${t("fleet.noSchedules")} hint=${t("fleet.noSchedulesHint")} />`}
+`;
+  }}</${Loaded}>
+  ${creating ? html`<${CreateSchedule} onClose=${() => setCreating(false)} onDone=${() => setVersion(v => v + 1)} />` : null}`;
+}
+
+function Teams({ lease }) {
+  const [version, setVersion] = useState(0);
+  const [creating, setCreating] = useState(false);
+  const state = useLoad(lease, "/ui/teams", version);
+  async function del(name) {
+    if (!(await confirmDialog({ message: t("fleet.deleteTeam", name), confirmLabel: t("fleet.delete"), danger: true }))) return;
+    if (!lease.current()) return;
+    const r = await api("DELETE", `/ui/teams/${encodeURIComponent(name)}`);
+    if (r.error) toast(r.error, false); else { toast(t("fleet.teamDeleted")); setVersion(v => v + 1); }
+  }
+  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) }} />
+      ${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>`
+        : html`<${Empty} icon="team" title=${t("fleet.noTeams")} hint=${t("fleet.noTeamsHint")} />`}
+`;
+  }}</${Loaded}>
+  ${creating ? html`<${CreateTeam} onClose=${() => setCreating(false)} onDone=${() => setVersion(v => v + 1)} />` : null}`;
+}
+
+/** #1389: the org chart — its structure read once per opening, its live state from the app store (fleet-org.js). */
+function Org({ lease }) {
+  const state = useLoad(lease, "/ui/org", 0);
+  const app = useStore(appStore);
+  return html`<${Loaded} state=${state}>${(org) => html`<${OrgChart} org=${org} app=${app} />`}</${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" />
+    <button type="button" class="icon-btn" aria-label=${shown ? t("fleet.hide") : t("fleet.show")} aria-pressed=${shown ? "true" : "false"} title=${`${shown ? t("fleet.hide") : t("fleet.show")} ${label}`}
+      onClick=${() => setShown(!shown)}><${Icon} name="eye" size=${16} /></button></div>`;
+}
+
+function Config({ lease }) {
+  const state = useLoad(lease, "/ui/config", 0);
+  const [form, setForm] = useState(null);
+  const [saving, setSaving] = useState(false);
+  // Each save owns the form's busy state only while it is the latest: an older save that is decided later (it waited
+  // for an admin's confirmation) never unlocks the form under a newer one still on its way (#1453 review).
+  const saves = useRef(0);
+  useEffect(() => {
+    if (!state || !state.data) return;
+    const c = state.data, ch = c.channel || {}, acc = ch.access || {};
+    setForm({ type: ch.type || "", tokenEnv: ch.bot_token_env || "AGEND_BOT_TOKEN", groupId: ch.group_id || "", mode: acc.mode || "locked",
+      users: (acc.allowed_users || []).join(", "), backend: (c.defaults || {}).backend || "claude-code", roots: [...(c.project_roots || [])] });
+  }, [state]);
+  async function save() {
+    const mine = ++saves.current;
+    const done = () => { if (lease.current() && mine === saves.current) setSaving(false); };
+    setSaving(true);
+    const body = {
+      channel: { group_id: form.groupId.trim(), access: { mode: form.mode, allowed_users: form.users.split(",").map(s => s.trim()).filter(Boolean) } },
+      defaults: { backend: form.backend },
+      project_roots: form.roots.map(r => r.trim()).filter(Boolean),
+    };
+    let r;
+    // A change to access or the connection may need a fleet admin's confirmation (#1423): the shell follows it.
+    try {
+      const res = await confirmedWrite("/ui/config", { method: "POST", body, label: t("fleet.config"),
+        onPending: () => { toast(t("app.pendingSent")); done(); } });
+      r = res.ok ? res.body || {} : { error: (res.body && res.body.error) || `HTTP ${res.status}` };
+    } catch (err) { r = { error: err.message }; }
+    done();
+    if (r.error) toast(r.error, false); else toast(t("fleet.configSaved") + (r.needs_restart ? t("fleet.configRestart") : ""));
+  }
+  const set = (k) => (e) => setForm({ ...form, [k]: e.target.value });
+  return html`<${Loaded} state=${state}>${() => !form ? html`<${Skeleton} lines=${4} />` : html`
+    <section class="card"><h3>${t("fleet.channel")}</h3>
+      <label class="field"><span>${t("fleet.type")}</span><input value=${form.type} disabled /></label>
+      <label class="field"><span>${t("fleet.tokenEnv")}</span><input value=${form.tokenEnv} disabled /></label>
+      <div class="field"><label for="cfg-gid">${t("fleet.groupId")}</label><${Secret} id="cfg-gid" value=${form.groupId} onInput=${set("groupId")} label=${t("fleet.groupId")} /></div></section>
+    <section class="card"><h3>${t("fleet.access")}</h3>
+      <label class="field"><span>${t("fleet.mode")}</span><select value=${form.mode} onChange=${set("mode")}><option value="locked">${t("fleet.locked")}</option><option value="open">${t("fleet.open")}</option></select></label>
+      <div class="field"><label for="cfg-users">${t("fleet.allowedUsers")}</label><${Secret} id="cfg-users" value=${form.users} onInput=${set("users")} label=${t("fleet.allowedUsers")} />
+        <p class="note">${t("fleet.allowedUsersNote")}</p></div></section>
+    <section class="card"><h3>${t("fleet.defaults")}</h3>
+      <label class="field"><span>${t("fleet.backend")}</span><select value=${form.backend} onChange=${set("backend")}>
+        ${[...(BACKENDS.includes(form.backend) ? [] : [form.backend]), ...BACKENDS].map(b => html`<option key=${b} value=${b}>${b}</option>`)}</select></label></section>
+    <section class="card"><h3>${t("fleet.roots")}</h3>
+      ${form.roots.map((r, i) => html`<div key=${i} class="field-row"><input value=${r} placeholder="/path/to/projects" aria-label=${t("fleet.roots")}
+        onInput=${(e) => { const roots = [...form.roots]; roots[i] = e.target.value; setForm({ ...form, roots }); }} />
+        <button type="button" class="icon-btn" aria-label=${t("fleet.removeRoot")} title=${t("fleet.removeRoot")} onClick=${() => setForm({ ...form, roots: form.roots.filter((_, j) => j !== i) })}><${Icon} name="close" size=${16} /></button></div>`)}
+      <button type="button" class="btn btn-ghost" onClick=${() => setForm({ ...form, roots: [...form.roots, ""] })}><${Icon} name="plus" size=${16} />${t("fleet.addRoot")}</button></section>
+    <div class="save-row"><button type="button" class="btn btn-primary" disabled=${saving} onClick=${save}>${t("fleet.save")}</button><span class="note">${t("fleet.saveNote")}</span></div>`}</${Loaded}>`;
+}
+
+// ── Create dialogs ──
+
+/**
+ * One form dialog: fields, Cancel / Create, the request, a toast. Its own lease ends when the dialog goes: a request
+ * that finishes after that still reports its toast (it may have created something), but never closes or refreshes
+ * whatever is on screen now (#1425 review). `ready` false keeps Create off until the form has what it needs.
+ */
+export function FormDialog({ title, onClose, submit, children, ready = true }) {
+  const lease = useLease("form-dialog");
+  const [busy, setBusy] = useState(false);
+  async function go() {
+    if (busy || !ready) return;
+    const body = submit.collect();
+    if (!body) return;
+    setBusy(true);
+    let r, handedOver = false;
+    // A write that needs a fleet admin's confirmation (#1423; e.g. a new instance with control-bearing settings):
+    // the dialog goes at once and the shell follows the request. From then on the dialog is done: the decision is
+    // said in a toast, and nothing here closes, refreshes or acts again.
+    try {
+      const res = await confirmedWrite(submit.path, { method: "POST", body, label: title,
+        onPending: () => { handedOver = true; toast(t("app.pendingSent")); if (lease.current()) { setBusy(false); onClose(); } } });
+      r = res.ok ? res.body || {} : { error: (res.body && res.body.error) || `HTTP ${res.status}` };
+    } catch (err) { r = { error: err.message }; }
+    if (r.error) { toast(r.error, false); if (!handedOver && lease.current()) setBusy(false); return; }
+    toast(submit.done);
+    if (handedOver || !lease.current()) return;
+    setBusy(false);
+    onClose();
+    if (submit.after) submit.after();
+  }
+  return html`<${Dialog} title=${title} onClose=${onClose} busy=${busy}
+    actions=${html`<button type="button" class="btn" onClick=${onClose} disabled=${busy}>${t("fleet.cancel")}</button>
+      <button type="button" class="btn btn-primary" onClick=${go} disabled=${busy || !ready}>${busy ? t("fleet.creating") : t("fleet.create")}</button>`}>
+    <form class="form" onSubmit=${(e) => { e.preventDefault(); go(); }}><fieldset class="form" disabled=${busy}>${children}</fieldset></form></${Dialog}>`;
+}
+const field = (label, input) => html`<label class="field"><span>${label}</span>${input}</label>`;
+
+function CreateTask({ onClose, onDone }) {
+  const { instances } = useStore(appStore);
+  const [f, setF] = useState({ title: "", desc: "", priority: "normal", assignee: "" });
+  const set = (k) => (e) => setF({ ...f, [k]: e.target.value });
+  const submit = { path: "/ui/tasks", done: t("fleet.taskCreated"), after: onDone, collect: () => {
+    if (!f.title.trim()) { toast(t("fleet.titleRequired"), false); return null; }
+    const body = { title: f.title.trim(), priority: f.priority };
+    if (f.desc.trim()) body.description = f.desc.trim();
+    if (f.assignee) body.assignee = f.assignee;
+    return body;
+  } };
+  return html`<${FormDialog} title=${t("fleet.newTask")} onClose=${onClose} submit=${submit}>
+    ${field(`${t("fleet.taskTitle")} *`, html`<input value=${f.title} onInput=${set("title")} required />`)}
+    ${field(t("fleet.taskDesc"), html`<input value=${f.desc} onInput=${set("desc")} />`)}
+    ${field(t("fleet.priority"), html`<select value=${f.priority} onChange=${set("priority")}><option value="normal">${t("fleet.pNormal")}</option><option value="low">${t("fleet.pLow")}</option><option value="high">${t("fleet.pHigh")}</option><option value="urgent">${t("fleet.pUrgent")}</option></select>`)}
+    ${field(t("fleet.assignee"), html`<select value=${f.assignee} onChange=${set("assignee")}><option value="">${t("fleet.unassigned")}</option>${instances.map(i => html`<option key=${i.name} value=${i.name}>${i.name}</option>`)}</select>`)}
+  </${FormDialog}>`;
+}
+
+function CreateSchedule({ onClose, onDone }) {
+  const { instances } = useStore(appStore);
+  const [f, setF] = useState({ cron: "", msg: "", target: instances[0] ? instances[0].name : "", label: "" });
+  const set = (k) => (e) => setF({ ...f, [k]: e.target.value });
+  const submit = { path: "/ui/schedules", done: t("fleet.scheduleCreated"), after: onDone, collect: () => {
+    if (!f.cron.trim() || !f.msg.trim() || !f.target) { toast(t("fleet.scheduleFieldsRequired"), false); return null; }
+    const body = { cron: f.cron.trim(), message: f.msg.trim(), target: f.target, source: "web-user", reply_chat_id: "", reply_thread_id: "" };
+    if (f.label.trim()) body.label = f.label.trim();
+    return body;
+  } };
+  return html`<${FormDialog} title=${t("fleet.newSchedule")} onClose=${onClose} submit=${submit}>
+    ${field(`${t("fleet.cron")} *`, html`<input value=${f.cron} onInput=${set("cron")} placeholder="0 9 * * 1-5" class="mono" />`)}
+    ${f.cron.trim() ? html`<p class="note">${cronDesc(f.cron)}</p>` : null}
+    ${field(`${t("fleet.message")} *`, html`<input value=${f.msg} onInput=${set("msg")} />`)}
+    ${field(`${t("fleet.target")} *`, html`<select value=${f.target} onChange=${set("target")}>${instances.map(i => html`<option key=${i.name} value=${i.name}>${i.name}</option>`)}</select>`)}
+    ${field(t("fleet.label"), html`<input value=${f.label} onInput=${set("label")} />`)}
+  </${FormDialog}>`;
+}
+
+function CreateTeam({ onClose, onDone }) {
+  const { instances } = useStore(appStore);
+  const [f, setF] = useState({ name: "", desc: "", members: [] });
+  const toggle = (n) => setF({ ...f, members: f.members.includes(n) ? f.members.filter(x => x !== n) : [...f.members, n] });
+  const submit = { path: "/ui/teams", done: t("fleet.teamCreated"), after: onDone, collect: () => {
+    if (!f.name.trim() || !f.members.length) { toast(t("fleet.teamFieldsRequired"), false); return null; }
+    const body = { name: f.name.trim(), members: f.members };
+    if (f.desc.trim()) body.description = f.desc.trim();
+    return body;
+  } };
+  return html`<${FormDialog} title=${t("fleet.newTeam")} onClose=${onClose} submit=${submit}>
+    ${field(`${t("fleet.teamName")} *`, html`<input value=${f.name} onInput=${(e) => setF({ ...f, name: e.target.value })} />`)}
+    ${field(t("fleet.taskDesc"), html`<input value=${f.desc} onInput=${(e) => setF({ ...f, desc: e.target.value })} />`)}
+    <fieldset class="field"><legend>${t("fleet.members")} *</legend><div class="checks">${instances.map(i => html`<label key=${i.name} class="check">
+      <input type="checkbox" checked=${f.members.includes(i.name)} onChange=${() => toggle(i.name)} />${i.name}</label>`)}</div></fieldset>
+  </${FormDialog}>`;
+}
+
+/** "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);
+  const [f, setF] = useState({ dir: "", topic: "", desc: "", backend: "", model: "", branch: "", tags: "", prompt: "" });
+  useEffect(() => {
+    (async () => {
+      try {
+        const bd = await api("GET", "/ui/backends", null, lease);
+        if (!lease.current()) return;
+        const list = bd.backends || [];
+        const first = list.find(b => b.installed && !b.deprecated) || list.find(b => b.installed);
+        setBackends(list);
+        setF(x => ({ ...x, backend: first ? first.name : "" }));
+      } catch {
+        // The list could not be read: offer the known backends, and keep the explicit choice "fleet default" selected.
+        if (lease.current()) { setBackends(BACKENDS.map(name => ({ name, installed: true }))); setF(x => ({ ...x, backend: "" })); }
+      }
+    })();
+  }, [lease]);
+  const set = (k) => (e) => setF({ ...f, [k]: e.target.value });
+  const submit = { path: "/ui/instances", done: t("fleet.instanceCreated"), collect: () => {
+    if (!f.dir.trim() && !f.topic.trim()) { toast(t("fleet.topicRequired"), false); return null; }
+    const body = {};
+    if (f.dir.trim()) body.directory = f.dir.trim();
+    if (f.topic.trim()) body.topic_name = f.topic.trim();
+    if (f.desc.trim()) body.description = f.desc.trim();
+    if (f.backend) body.backend = f.backend;
+    if (f.model.trim()) body.model = f.model.trim();
+    if (f.branch.trim()) body.branch = f.branch.trim();
+    const tags = f.tags.split(",").map(x => x.trim()).filter(Boolean); if (tags.length) body.tags = tags;
+    if (f.prompt.trim()) body.systemPrompt = f.prompt.trim();
+    return body;
+  } };
+  // Create waits for the backend list: a submission before it would go without a backend, and the list arriving
+  // afterwards would change the shown choice under a request already sent (#1425 review).
+  return html`<${FormDialog} title=${t("fleet.newInstance")} onClose=${onClose} submit=${submit} ready=${backends !== null}>
+    ${field(t("fleet.directory"), html`<input value=${f.dir} onInput=${set("dir")} placeholder=${t("fleet.directoryHint")} />`)}
+    ${field(`${t("fleet.topic")}${f.dir.trim() ? "" : " *"}`, html`<input value=${f.topic} onInput=${set("topic")} placeholder=${t("fleet.topicHint")} />`)}
+    ${field(t("fleet.description"), html`<input value=${f.desc} onInput=${set("desc")} placeholder=${t("fleet.descriptionHint")} />`)}
+    ${field(t("fleet.backend"), backends ? html`<select value=${f.backend} onChange=${set("backend")}><option value="">${t("fleet.fleetDefault")}</option>
+      ${backends.map(b => html`<option key=${b.name} value=${b.name} disabled=${!b.installed}>${b.name}${b.deprecated ? ` ${t("fleet.deprecated")}` : ""}${b.installed ? "" : ` ${t("fleet.notInstalled")}`}</option>`)}</select>` : html`<${Skeleton} lines=${1} />`)}
+    ${field(t("fleet.model"), html`<input value=${f.model} onInput=${set("model")} placeholder=${t("fleet.modelHint")} />`)}
+    ${field(t("fleet.branch"), html`<input value=${f.branch} onInput=${set("branch")} placeholder=${t("fleet.branchHint")} />`)}
+    ${field(t("fleet.tags"), html`<input value=${f.tags} onInput=${set("tags")} placeholder=${t("fleet.tagsHint")} />`)}
+    ${field(t("fleet.systemPrompt"), html`<textarea rows="3" value=${f.prompt} onInput=${set("prompt")} placeholder=${t("fleet.systemPromptHint")}></textarea>`)}
+  </${FormDialog}>`;
+}
+
+// ── Cron in words ──
+const DAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+export function cronDesc(expr) {
+  if (!expr) return "";
+  const p = expr.trim().split(/\s+/);
+  if (p.length < 5) return expr;
+  const [min, hr, dom, mon, dow] = p;
+  const time = hr !== "*" && min !== "*" ? `at ${hr.padStart(2, "0")}:${min.padStart(2, "0")}` : "";
+  if (min === "*" && hr === "*") return "Every minute";
+  if (min.startsWith("*/")) return `Every ${min.slice(2)} minutes`;
+  if (hr.startsWith("*/")) return `Every ${hr.slice(2)} hours`;
+  if (dom === "*" && mon === "*" && dow === "*") return `Daily ${time}`;
+  if (dom === "*" && mon === "*" && dow === "1-5") return `Weekdays ${time}`;
+  if (dom === "*" && mon === "*" && dow !== "*") return `${dow.split(",").map(d => { const n = parseInt(d, 10); return Number.isNaN(n) ? d : (DAYS[n] || d); }).join(", ")} ${time}`;
+  if (dom !== "*" && mon === "*") return `${dom}${dom === "1" ? "st" : dom === "2" ? "nd" : dom === "3" ? "rd" : "th"} of month ${time}`;
+  return expr;
+}

package/dist/ui/panel-needs.js

@@ -0,0 +1,202 @@
+// #1408 step 4 = #1386 part (b): the "Needs you" panel (/ui/needs) — everything waiting on the person, from every
+// world, in one list. Behind the session gate (/ui/js/), loaded the first time it is opened.
+//
+// A renderer only (#1386 §4.2, the user's Discord-first rule): the list is the server's one derivation, the app
+// store's `needs`, which arrives over the passive channels (SSE `needs`, the /ui/poll field). This panel reads
+// nothing (#1374: no new GET, no timer that asks the server); its writes are a person's actions:
+// - a prompt's own buttons, through the page's chat store (appStore.chatOwner — whichever chat import booted, a Retry's
+//   included): one claim per prompt with Chat (POST /ui/prompt, first answer wins);
+// - Acknowledge on a delivery (POST /ui/needs/ack), which clears it everywhere;
+// - Open: that instance's chat.
+// Something resolved anywhere (Discord, Telegram, the web) leaves the list by itself.
+import { html, useEffect, useState } from "/assets/app-html.js";
+import { t, register } from "/assets/app-i18n.js";
+import { appStore, createStore, useStore } from "/assets/app-store.js";
+import { useLease } from "/assets/app-ctx.js";
+import { PanelHeader, setTitle } from "/assets/app-shell.js";
+import { chatPath } from "/assets/app-route.js";
+import { Empty } from "/assets/ui-states.js";
+import { Icon } from "/assets/ui-icons.js";
+import { toast } from "/assets/ui-toast.js";
+import { notifyStore, notifySupport, reasonText, refreshNotify, setNotify } from "/assets/app-needs.js";
+
+register("needs", {
+  en: {
+    title: "Needs you", empty: "Nothing needs you right now", emptyHint: "When an agent waits for you, it shows here — and in Discord.",
+    open: "Open chat", acknowledge: "Acknowledge", acknowledging: "Acknowledging…", answering: "Answering…",
+    ageNow: "just now", ageMin: "{0} min", ageHour: "{0} h", ageDay: "{0} d",
+    notifyTitle: "Notify me on this device", notifyOn: "Notifications are on for this browser while a tab is open.",
+    notifyOff: "Get a desktop notification when something new needs you while this tab is in the background.",
+    notifyDenied: "This browser blocked notifications for AgEnD. Allow them in the site settings to turn this on.",
+    notifyMobile: "On a phone, rely on the Discord notification: a new item is a new post in General.",
+    notifyInsecure: "Notifications need a secure address (localhost or the HTTPS public link), not a plain-HTTP LAN address.",
+    notifyUnsupported: "This browser cannot show notifications.", turnOn: "Turn on", turnOff: "Turn off",
+    typePrompt: "Fleet prompt", typeAwaiting: "At its terminal", typeInstance: "Instance", typeDelivery: "Delivery",
+  },
+  "zh-TW": {
+    title: "等你處理", empty: "目前沒有需要你處理的事", emptyHint: "agent 在等你時，會出現在這裡——也會出現在 Discord。",
+    open: "開啟聊天", acknowledge: "確認", acknowledging: "確認中…", answering: "回覆中…",
+    ageNow: "剛剛", ageMin: "{0} 分鐘", ageHour: "{0} 小時", ageDay: "{0} 天",
+    notifyTitle: "在這台裝置通知我", notifyOn: "這個瀏覽器的通知已開啟（需要開著分頁）。",
+    notifyOff: "分頁在背景時，有新的事等你處理就跳出桌面通知。",
+    notifyDenied: "這個瀏覽器封鎖了 AgEnD 的通知。請在網站設定中允許後再開啟。",
+    notifyMobile: "在手機上請以 Discord 通知為主：每個新項目都會在 General 發一則新訊息。",
+    notifyInsecure: "通知需要安全的網址（localhost 或 HTTPS 公開連結），區網的一般 HTTP 網址不行。",
+    notifyUnsupported: "這個瀏覽器無法顯示通知。", turnOn: "開啟", turnOff: "關閉",
+    typePrompt: "Fleet 提示", typeAwaiting: "在終端機上", typeInstance: "Instance", typeDelivery: "傳送",
+  },
+});
+const tn = (k, ...v) => t(`needs.${k}`, ...v);
+
+/**
+ * The page's claims on what Needs you writes, kept for the life of the page — not of a panel or a render (#1463
+ * review): a second click in the same turn, the panel left and opened again, or a list that has not caught up yet all
+ * see the same claim.
+ * - `acks[id]`: "busy" while its POST is out, "done" once the server took it, until the server's next list drops the
+ *   item (then forgotten); a failure gives it back.
+ * - `prompts[nonce]`: the same, for a prompt answered while the page has no chat store yet (before Chat boots). When
+ *   it arrives, each such claim is handed to it (holdPrompt) — one claim, never two — and its outcome settles there.
+ */
+export const claims = createStore({ acks: {}, prompts: {} });
+const chatOwner = () => appStore.get().chatOwner || null;
+let handedTo = null;
+appStore.subscribe((st) => {
+  // The chat store arrived (or was replaced by a Retry's): the claims taken without it become its own.
+  if (st.chatOwner && st.chatOwner !== handedTo) {
+    handedTo = st.chatOwner;
+    const items = Array.isArray(st.needs) ? st.needs : [];
+    for (const nonce of Object.keys(claims.get().prompts)) {
+      handedTo.holdPrompt(items.find((i) => i.nonce === nonce) || { nonce, instance: "" });
+    }
+  }
+  const items = Array.isArray(st.needs) ? st.needs : [];
+  const listed = new Set(items.map((i) => i.id)), nonces = new Set(items.map((i) => i.nonce).filter(Boolean));
+  const c = claims.get();
+  const acks = Object.fromEntries(Object.entries(c.acks).filter(([id, v]) => v === "busy" || listed.has(id)));
+  const prompts = Object.fromEntries(Object.entries(c.prompts).filter(([n, v]) => v === "busy" || nonces.has(n)));
+  if (Object.keys(acks).length !== Object.keys(c.acks).length || Object.keys(prompts).length !== Object.keys(c.prompts).length) claims.set({ acks, prompts });
+});
+const setClaim = (kind, key, value) => claims.set((c) => {
+  const next = { ...c[kind] };
+  if (value) next[key] = value; else delete next[key];
+  return { ...c, [kind]: next };
+});
+
+const ICON = { prompt: "chat", awaiting_input: "clock", instance: "alert", delivery: "send" };
+const BAD = new Set(["crashed", "delivery_failed", "hang", "exited"]);
+
+/** "3 min", "2 h": the age shown beside an item (refreshed by a display timer, never by a read). */
+export function age(since, nowMs) {
+  const minutes = Math.max(0, Math.floor((nowMs - since) / 60_000));
+  if (minutes < 1) return tn("ageNow");
+  if (minutes < 60) return tn("ageMin", minutes);
+  const hours = Math.floor(minutes / 60);
+  return hours < 24 ? tn("ageHour", hours) : tn("ageDay", Math.floor(hours / 24));
+}
+
+/** The store's list, grouped by instance, in its order (instances by their oldest item; items oldest first). */
+export function groupNeeds(items) {
+  const groups = [];
+  for (const item of items) {
+    const last = groups[groups.length - 1];
+    if (last && last.instance === item.instance) last.items.push(item);
+    else groups.push({ instance: item.instance, items: [item] });
+  }
+  return groups;
+}
+
+export function NeedsPanel({ navKey }) {
+  const lease = useLease(navKey);
+  const { needs, chatOwner: owner } = useStore(appStore);
+  const items = Array.isArray(needs) ? needs : [];
+  const [, tick] = useState(0);
+  useEffect(() => { setTitle(tn("title")); }, [navKey]);
+  // Ages move on: a redraw every 30 s while the panel is open (display only — nothing is read).
+  useEffect(() => { lease.interval(() => tick((n) => n + 1), 30_000); }, [lease]);
+  // The chat store owns a prompt's busy/answered state; redraw when it changes (and when it arrives).
+  useEffect(() => { if (owner) return owner.subscribe(() => tick((n) => n + 1)); return undefined; }, [owner, lease]);
+  const groups = groupNeeds(items);
+  const nowMs = Date.now();
+  return html`<div class="panel p-needs">
+    <${PanelHeader} title=${tn("title")} sub=${items.length ? t("app.needsCount", items.length) : null} />
+    <div class="panel-body"><div class="col">
+      ${!items.length ? html`<${Empty} icon="check" title=${tn("empty")} hint=${tn("emptyHint")} />`
+        : groups.map((g) => html`<section key=${g.instance} class="n-group" aria-label=${g.instance}>
+          <h2 class="n-group-head"><a href=${chatPath(g.instance)}>${g.instance}</a></h2>
+          ${g.items.map((item) => html`<${NeedsItem} key=${item.id} item=${item} nowMs=${nowMs} owner=${owner} />`)}
+        </section>`)}
+      <${NotifyToggle} />
+    </div></div>
+  </div>`;
+}
+
+function NeedsItem({ item, nowMs, owner }) {
+  const c = useStore(claims);
+  // A prompt: the page's chat store holds the one claim (Chat and Needs you, any panel, any render).
+  const p = item.type === "prompt" && item.nonce && owner ? owner.state.prompts[item.nonce] : null;
+  const fallback = item.nonce ? c.prompts[item.nonce] : undefined;
+  const promptBusy = p ? p.busy || p.resolved : !!fallback;
+  const answer = async (action) => {
+    const store = chatOwner();
+    if (store) { store.answerByNonce(item, action); return; }
+    // Only before Chat has booted: the page's own claim on this nonce, taken now (synchronously), kept until the
+    // server's list drops the prompt (or the answer fails).
+    if (claims.get().prompts[item.nonce]) return;
+    setClaim("prompts", item.nonce, "busy");
+    let r = null;
+    try {
+      const res = await fetch("/ui/prompt", { method: "POST", headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ instance: item.instance, nonce: item.nonce, action }) });
+      r = await res.json().catch(() => ({}));
+    } catch (err) { r = { error: err && err.message ? err.message : t("app.failed") }; }
+    // The chat store may have arrived meanwhile and taken this claim over: its outcome is settled there.
+    const now = chatOwner();
+    if (r && r.answered) { if (now) setClaim("prompts", item.nonce, null); else setClaim("prompts", item.nonce, "done"); return; }
+    setClaim("prompts", item.nonce, null);
+    if (now) now.releasePrompt(item.nonce);
+    toast((r && r.error) || t("app.failed"), false);
+  };
+  const ack = c.acks[item.id];
+  const acknowledge = async () => {
+    if (claims.get().acks[item.id]) return;                       // the page's claim, taken synchronously
+    setClaim("acks", item.id, "busy");
+    let res = null, body = null;
+    try {
+      res = await fetch("/ui/needs/ack", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ id: item.id }) });
+      body = await res.json().catch(() => ({}));
+    } catch { body = { error: t("app.failed") }; }
+    // Taken: it stays claimed until the server's next `needs` drops it — here, everywhere at once. Refused: free again.
+    setClaim("acks", item.id, res && res.ok ? "done" : null);
+    toast((body && (body.message || body.error)) || t("app.failed"), !!(res && res.ok));
+  };
+  return html`<article class=${`n-item${BAD.has(item.reason) ? " bad" : ""}`}>
+    <span class="n-icon"><${Icon} name=${ICON[item.type] || "alert"} size=${18} /></span>
+    <div class="n-body">
+      <div class="n-title"><strong>${reasonText(item)}</strong><span class="n-age">${age(item.since, nowMs)}</span></div>
+      ${item.detail ? html`<p class="n-detail">${item.detail}</p>` : null}
+      <div class="n-actions">
+        ${item.type === "prompt" && Array.isArray(item.actions) ? item.actions.map((a) => html`<button key=${a.id} type="button" class="btn btn-sm"
+            disabled=${promptBusy} onClick=${() => answer(a.id)}>${(p ? p.busy : fallback === "busy") ? tn("answering") : a.label}</button>`) : null}
+        ${item.type === "delivery" ? html`<button type="button" class="btn btn-sm" disabled=${!!ack} onClick=${acknowledge}>
+            <${Icon} name="check" size=${14} />${ack === "busy" ? tn("acknowledging") : tn("acknowledge")}</button>` : null}
+        <a class="btn btn-sm btn-ghost" href=${chatPath(item.instance)}>${tn("open")}</a>
+      </div>
+    </div>
+  </article>`;
+}
+
+/** The device's choice, as the page knows it (app-needs.js notifyStore): every mounted toggle shows the same. */
+function NotifyToggle() {
+  const support = notifySupport();
+  const { state, asking } = useStore(notifyStore);
+  useEffect(() => { refreshNotify(); }, []);
+  const on = state === "on";
+  const toggle = () => { setNotify(!on); };
+  const note = support === "mobile" ? tn("notifyMobile") : support === "insecure" ? tn("notifyInsecure")
+    : support !== "ok" ? tn("notifyUnsupported") : state === "denied" ? tn("notifyDenied") : on ? tn("notifyOn") : tn("notifyOff");
+  return html`<section class="card n-notify"><h3>${tn("notifyTitle")}</h3>
+    <p class="note">${note}</p>
+    ${support === "ok" ? html`<div><button type="button" class=${`btn btn-sm${on ? "" : " btn-primary"}`} aria-pressed=${on ? "true" : "false"} disabled=${asking} onClick=${toggle}>
+      <${Icon} name="bell" size=${14} />${on ? tn("turnOff") : tn("turnOn")}</button></div>` : null}
+  </section>`;
+}