@songsid/agend 2.3.4-beta.7 → 2.3.5-alpha.3

package/dist/ui/panel-fleet.js

@@ -11,7 +11,11 @@ import { appStore, useStore } from "/assets/app-store.js";
 import { useLease } from "/assets/app-ctx.js";
 import { PanelHeader, setTitle } from "/assets/app-shell.js";
 import { HeaderTools } from "/assets/header-tools.js";
-import { renavigate } from "/assets/app-nav.js";
+import { navigate, renavigate } from "/assets/app-nav.js";
+import { RuntimePicker, AgentDraftAssistant, NativeAgendToolsHint, tr } from "./agent-runtime.js";
+import { CliPicker, cliLabel as productLabel } from "./cli-picker.js";
+import { useWindowsCliCatalog, WindowsCliDiscoveryStatus, detectionText } from "./windows-cli-catalog.js";
+import { useRuntimeCatalog } from "./runtime-catalog.js";
 import { chatPath, fleetPath, FLEET_TABS, rememberFleetTab } from "/assets/app-route.js";
 import { Dialog } from "/assets/ui-dialog.js";
 import { Empty, ErrorState, Skeleton } from "/assets/ui-states.js";
@@ -266,7 +270,7 @@ function Cache({ lease }) {
  * 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 }) {
+export function FormDialog({ title, onClose, submit, children, ready = true, renderActions, onCreated, onSubmit, wide = false }) {
   const lease = useLease("form-dialog");
   const [busy, setBusy] = useState(false);
   async function go() {
@@ -287,13 +291,15 @@ export function FormDialog({ title, onClose, submit, children, ready = true }) {
     toast(submit.done);
     if (handedOver || !lease.current()) return;
     setBusy(false);
+    if (onCreated) { onCreated(r); return; }
     onClose();
     if (submit.after) submit.after();
+    if (submit.afterResult) submit.afterResult(r);
   }
-  return html`<${Dialog} title=${title} onClose=${onClose} busy=${busy}
-    actions=${html`<button type="button" class="btn" onClick=${onClose} disabled=${busy}>${t("fleet.cancel")}</button>
+  return html`<${Dialog} title=${title} onClose=${onClose} busy=${busy} wide=${wide}
+    actions=${renderActions ? renderActions({ busy, go }) : 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") : submit.label || t("fleet.create")}</button>`}>
-    <form class="form" onSubmit=${(e) => { e.preventDefault(); go(); }}><fieldset class="form" disabled=${busy}>${children}</fieldset></form></${Dialog}>`;
+    <form class="form" onSubmit=${(e) => { e.preventDefault(); if (onSubmit) onSubmit({ busy, go }); else go(); }}><fieldset class="form" disabled=${busy}>${children}</fieldset></form></${Dialog}>`;
 }
 const field = (label, input) => html`<label class="field"><span>${label}</span>${input}</label>`;
 
@@ -418,9 +424,26 @@ function CreateTeam({ onClose, onDone, team = null }) {
 export function CreateInstanceDialog({ onClose }) {
   const lease = useLease("create-instance");
   const [backends, setBackends] = useState(null);
+  const { windowsCli } = useStore(appStore);
+  const [runtime,setRuntime] = useState("");
+  const [machineId,setMachineId] = useState("");
+  const [nativeAdapter,setNativeAdapter]=useState("exec");
+  const machineCatalog = useRuntimeCatalog();
+  const machines = machineCatalog.data?.machines || [];
+  const machine = machines.find(item => item.id === machineId);
+  const [step,setStep] = useState(1), [created,setCreated] = useState(null);
+  const drafts = useRef({}), draftGoals = useRef({}), heading = useRef(null);
+  const discovery = useWindowsCliCatalog(windowsCli === true);
+  const native = machineId ? machine?.inventory : discovery.data;
+  const [assistBusy,setAssistBusy] = useState(false);
+  const windows = runtime === "windows";
   // The backend "fleet default" means (#2098 review P3-3): its models are the ones the model list offers then.
   const [defaultBackend, setDefaultBackend] = useState("claude-code");
   const [f, setF] = useState({ dir: "", topic: "", desc: "", backend: "", model: "", branch: "", tags: "", prompt: "" });
+  useEffect(() => {
+    heading.current?.focus({ preventScroll:true });
+    heading.current?.closest(".dlg-body")?.scrollTo?.({ top:0 });
+  },[step]);
   useEffect(() => {
     (async () => {
       try {
@@ -430,15 +453,43 @@ export function CreateInstanceDialog({ onClose }) {
         const first = list.find(b => b.installed && !b.deprecated) || list.find(b => b.installed);
         if (typeof bd.defaultBackend === "string" && bd.defaultBackend) setDefaultBackend(bd.defaultBackend);
         setBackends(list);
-        setF(x => ({ ...x, backend: first ? first.name : "" }));
+        setF(x => ({ ...x, backend: 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: "" })); }
+        if (lease.current()) { setBackends(BACKENDS.map(name => ({ name, installed: true, fallback: 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: () => {
+  const targetKey = `${runtime}:${machineId || "local"}`;
+  const chooseRuntime = (value, nextMachineId = "") => {
+    if (value === runtime && nextMachineId === machineId) return;
+    if (runtime) drafts.current[targetKey] = { form:{...f}, sandbox,nativeAdapter };
+    const saved = drafts.current[`${value}:${nextMachineId || "local"}`];
+    const nextInventory = nextMachineId ? machines.find(item => item.id === nextMachineId)?.inventory : discovery.data;
+    const { sandbox: savedFileAccess } = saved || {};
+    setRuntime(value);
+    setMachineId(nextMachineId);
+    setF(saved?.form || {dir:"",topic:"",desc:"",prompt:"",tags:"",branch:"",model:"",backend:value === "windows" ? nextInventory?.clis?.find(b => b.path && b.runnable)?.id || "codex" : backends?.find(b => b.installed && !b.deprecated && !b.fallback)?.name || ""});
+    setSandbox(savedFileAccess || "read-only");setNativeAdapter(saved?.nativeAdapter||"exec");
+  };
+  const [sandbox,setSandbox] = useState("read-only");
+  const nativeCli = native?.clis?.find(cli => cli.id === f.backend);
+  const nativeChoices = (native?.clis || []).filter(cli => cli.path && cli.supports?.execution !== false && cli.supports?.resume !== false).map(cli => ({value:cli.id,label:productLabel(cli.id),disabled:!cli.runnable,description:cli.authenticated === false ? t("fleet.notSignedIn") : cli.version || "Windows"}));
+  useEffect(() => {
+    if(nativeAdapter==="pane"&&!['codex','claude-code'].includes(f.backend))setNativeAdapter("exec");
+    if (windows && native && !nativeChoices.some(choice => choice.value === f.backend)) {
+      const first = nativeChoices.find(choice => !choice.disabled) || nativeChoices[0];
+      if (first) setF(current => ({...current,backend:first.value,model:""}));
+    }
+  },[native,runtime,machineId,f.backend,nativeAdapter]);
+  const submit = { path: "/ui/instances", done: windows ? tr("created") : t("fleet.instanceCreated"),
+    collect: () => {
+    if (windows) {
+      const name = f.topic.trim() || f.dir.trim().replace(/[\\/]+$/, "").split(/[\\/]/).pop();
+      if (!name) { toast(tr("required"),false); return null; }
+      return {runtime:"windows",...(nativeAdapter==="pane"?{native_adapter:"pane"}:{}),...(machineId ? {machineId} : {}),topic_name:name,backend:f.backend,...(f.model.trim() ? {model:f.model.trim()} : {}),...(f.dir.trim() ? {directory:f.dir.trim()} : {}),description:f.desc.trim(),systemPrompt:f.prompt.trim(),sandbox};
+    }
     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();
@@ -451,18 +502,48 @@ export function CreateInstanceDialog({ onClose }) {
     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")} />`)}
+  const canNext = !!runtime && (!machineId || machine?.status === "online") && (windows ? nativeCli?.runnable === true : backends !== null);
+  const permissionReady = !windows || sandbox !== "read-only" || nativeCli?.readOnlySupport !== false;
+  const canCreate = step === 2 && canNext && permissionReady && !assistBusy && (!windows || !!(f.topic.trim() || f.dir.trim()));
+  const advance = () => { if (canNext && !assistBusy) setStep(2); };
+  const destination = created?.name ? chatPath(created.name) : created?.agent?.id ? `/ui/windows-agents/${created.agent.id}` : null;
+  const createdName = created?.agent?.name || created?.name || f.topic || f.dir.replace(/[\\/]+$/, "").split(/[\\/]/).pop();
+  const runtimeLabel = machineId ? `${machine?.name || machineId} · ${machine?.platform || tr(runtime)}` : runtime ? tr(runtime) : "";
+  const cliLabel = productLabel(f.backend) || `${t("fleet.fleetDefault")} (${productLabel(defaultBackend)})`;
+  const backendField = windows ? html`<div class="field"><div class="cli-discovery-heading"><span>${tr("backend")}</span>${native && !machineId ? html`<button type="button" class="btn btn-ghost btn-sm" disabled=${discovery.loading} onClick=${discovery.refresh}><${Icon} name="restart" size=${14} />${detectionText("refresh")}</button>` : null}</div>
+    <div aria-busy=${!machineId && discovery.loading ? "true" : "false"}>${native ? html`<${CliPicker} label=${tr("backend")} value=${f.backend} choices=${nativeChoices} onChange=${value => setF(x => ({...x,backend:value,model:""}))} disabled=${!nativeChoices.length || !!machineId && machine?.status !== "online"} />` : null}</div>
+    ${machineId ? html`<p class="note">${tr(!nativeChoices.length ? "noRemoteCli" : "remotePolicy")}</p>${machine?.inventoryUpdatedAt ? html`<p class="note">${t("runtime.inventoryAt",new Date(machine.inventoryUpdatedAt).toLocaleString())}</p>` : null}` : html`<${WindowsCliDiscoveryStatus} state=${discovery} />`}
+    ${!machineId && native && !discovery.loading && !discovery.error ? html`<p class="note">${!nativeChoices.length ? tr("noCli") : tr("nativeHint")}</p>` : null}</div>`
+    : field(tr("backend"),backends ? html`<${CliPicker} label=${tr("backend")} value=${f.backend} choices=${[{value:"",label:t("fleet.fleetDefault")},...backends.filter(b => backendState(b) !== "not_installed" && !b.deprecated).map(b => ({value:b.name,label:productLabel(b.name),disabled:backendBlocked(b),description:backendNote(b)}))]} onChange=${value => setF(x => ({...x,backend:value,model:""}))} />` : html`<div role="status" aria-busy="true"><${Skeleton} lines=${1} /><span class="note">${tr("loadingClis")}</span></div>`);
+  const actions = ({busy,go}) => step === 3 ? html`<button type="button" class="btn" onClick=${onClose}>${tr("finish")}</button><button type="button" class="btn btn-primary" onClick=${() => { onClose(); navigate(destination || "/settings/agents"); }}>${tr(destination ? "openChat" : "viewAgents")}<${Icon} name="forward" size=${16} /></button>`
+    : html`<button type="button" class="btn" disabled=${busy || assistBusy} onClick=${step === 1 ? onClose : () => setStep(1)}>${step === 1 ? t("fleet.cancel") : tr("back")}</button>
+      <button type="button" class="btn btn-primary" disabled=${busy || (step === 1 ? !canNext : !canCreate)} onClick=${step === 1 ? advance : go}>${step === 1 ? tr("next") : busy ? t("fleet.creating") : t("fleet.create")}${step === 1 ? html`<${Icon} name="forward" size=${16} />` : null}</button>`;
+  return html`<${FormDialog} title=${tr("title")} onClose=${onClose} submit=${submit} ready=${canCreate} wide=${true} renderActions=${actions}
+    onSubmit=${({busy,go}) => { if (!busy) { if (step === 1) advance(); else if (step === 2) go(); } }}
+    onCreated=${result => { setCreated(result); setStep(3); }}>
+    <div class="agent-create-wizard" data-step=${step}>
+    <ol class="agent-create-steps" aria-label=${tr("progress")}>${["runtimeStep","configureStep","doneStep"].map((label,index) => html`<li key=${label} class=${index+1 === step ? "current" : index+1 < step ? "complete" : ""} aria-current=${index+1 === step ? "step" : undefined}><span class="agent-create-step-number">${index+1 < step ? html`<${Icon} name="check" size=${13} />` : index+1}</span><span>${tr(label)}</span></li>`)}</ol>
+    ${step === 1 ? html`<section class="agent-create-stage"><h3 ref=${heading} tabindex="-1">${tr("where")}</h3><p class="note">${tr("runtimeLead")}</p>
+      <${RuntimePicker} value=${runtime} onChange=${chooseRuntime} windowsEnabled=${windowsCli} legend=${tr("environment")} machineId=${machineId} machines=${machines} onMachineChange=${id => chooseRuntime("windows",id)} />
+      ${machineCatalog.loading && !machineCatalog.data ? html`<p class="note" role="status">${tr("machineLoading")}</p>` : null}
+      ${machineCatalog.error ? html`<p class="note" role="alert">${tr("machineFailed")} <button type="button" class="btn btn-ghost btn-sm" onClick=${machineCatalog.refresh}>${tr("machineRetry")}</button></p>` : null}
+      <a class="note runtime-manage-link" href="/settings/runtimes">${tr("manage")}</a>
+      ${runtime ? html`<div class="agent-create-cli">${backendField}</div>` : null}
+    </section>` : step === 2 ? html`<section class="agent-create-stage"><h3 ref=${heading} tabindex="-1">${tr("configureStep")}</h3><p class="note">${tr("configureLead")}</p>
+    <div class="agent-create-selection"><${Icon} name=${windows ? "view" : "code"} size=${19} /><div><strong>${runtimeLabel}</strong><span>${cliLabel}</span></div><button type="button" class="btn btn-ghost btn-sm" disabled=${assistBusy} onClick=${() => setStep(1)}>${tr("changeRuntime")}</button></div>
+    ${machineId ? html`<p class="note">${tr("remoteDraft")}</p>` : windowsCli ? html`<${AgentDraftAssistant} key=${targetKey} runtime=${runtime} probe=${native} initialGoal=${draftGoals.current[targetKey] || ""} onGoalChange=${value => { draftGoals.current[targetKey] = value; }} onBusy=${setAssistBusy} onDraft=${draft => setF(x => ({...x,topic:draft.name,dir:draft.cwd,desc:draft.description,prompt:draft.instructions}))} />` : null}
+    <fieldset class="form agent-runtime-fields" disabled=${assistBusy}>
+    ${field(machineId ? t("runtime.remoteDirectory",machine?.name || machineId) : windows ? tr("directory") : t("fleet.directory"), html`<input value=${f.dir} onInput=${set("dir")} placeholder=${windows ? tr("directoryHint") : t("fleet.directoryHint")} />`)}
+    ${field(`${t("fleet.topic")}${f.dir.trim() ? "" : " *"}`, html`<input value=${f.topic} onInput=${set("topic")} placeholder=${windows ? tr("nameHint") : 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=${backendBlocked(b)}>${b.name}${b.deprecated ? ` ${t("fleet.deprecated")}` : ""}${backendNote(b)}</option>`)}</select>` : html`<${Skeleton} lines=${1} />`)}
-    ${field(t("fleet.model"), html`<${ModelSelect} value=${f.model} onChange=${(v) => setF(x => ({ ...x, model: v }))} backend=${f.backend || defaultBackend} inherit=${t("fleet.fleetDefault")} />`)}
-    ${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")} />`)}
+    ${windows ? html`${field(tr("adapter"),html`<select id="native-create-adapter" value=${nativeAdapter} onChange=${e=>setNativeAdapter(e.target.value)}><option value="exec">${tr("adapterExec")}</option><option value="pane" disabled=${!["codex","claude-code"].includes(f.backend)}>${tr("adapterPane")}</option></select>`)}<p class="note">${tr(nativeAdapter==="pane"?"paneTopic":"execTopic")}</p>${field(t("fleet.model"),html`<${ModelSelect} key=${`${targetKey}:${f.backend}`} value=${f.model} onChange=${value => setF(x => ({...x,model:value}))} backend=${f.backend} runtime="windows" machineId=${machineId} inherit=${tr("model")} />`)}${field(tr("access"),html`<select id="native-create-sandbox" value=${sandbox} onChange=${e => setSandbox(e.target.value)}><option value="read-only" disabled=${nativeCli?.readOnlySupport === false}>${tr("read")}</option><option value="workspace-write">${tr("write")}</option></select>`)}<p class="note">${!permissionReady ? tr("noReadOnly") : sandbox === "workspace-write" ? tr(nativeAdapter==="pane"?"panePolicy":nativeCli?.id === "claude-code" ? "nativePolicyClaude" : "nativePolicy") : ""}</p><${NativeAgendToolsHint} cli=${nativeCli} sandbox=${sandbox} />` : html`
+      ${field(t("fleet.model"), html`<${ModelSelect} value=${f.model} onChange=${(v) => setF(x => ({ ...x, model: v }))} backend=${f.backend || defaultBackend} inherit=${t("fleet.fleetDefault")} />`)}
+      ${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>`)}
+    </fieldset></section>` : html`<section class="agent-create-stage agent-create-success"><span class="agent-create-success-icon"><${Icon} name="check" size=${28} /></span><h3 ref=${heading} tabindex="-1">${tr("success")}</h3><p class="note">${tr("successLead")}</p><dl><dt>${t("fleet.topic")}</dt><dd>${createdName}</dd><dt>Runtime</dt><dd>${runtimeLabel} · ${cliLabel}</dd><dt>${t("fleet.directory")}</dt><dd><code>${created?.agent?.cwd || created?.worktree_path || f.dir || tr("autoWorkspace")}</code></dd></dl></section>`}
+    </div>
   </${FormDialog}>`;
 }
 

package/dist/ui/panel-needs.js

@@ -9,6 +9,9 @@
 // - 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.
+// alpha.2 (M-2300): an agent's Windows request waiting for a web-only fleet's owner is the app store's `proposals`, read
+// by agent-proposals.js (owner only, on the stream's `agent_proposals` ping) — Approve / Reject POST its decision. Only
+// on a tab opened before an upgrade (app.js never installed it) does this panel install it, once.
 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";
@@ -21,6 +24,8 @@ import { Icon } from "/assets/ui-icons.js";
 import { toast } from "/assets/ui-toast.js";
 import { notifyStore, notifySupport, configDetail, reasonText, refreshNotify, setNotify } from "/assets/app-needs.js";
 import { openSignIn, signInOffered } from "./backend-signin.js";
+import { decideProposal, installProposals } from "./agent-proposals.js";
+import { GeneralLocation } from "./general-location.js";
 
 register("needs", {
   en: {
@@ -35,6 +40,18 @@ register("needs", {
     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",
+    proposals: "Agent requests", proposalFrom: "Request from {0}", proposalHint: "Nothing is created or changed until you approve. When you do, AgEnD checks the request, the target machine and your sign-in again, then runs it once.",
+    approve: "Approve", reject: "Reject", deciding: "Working…", expiresIn: "expires in {0} min", expiresSoon: "expires in under a minute",
+    applying: "Being applied…", openAgent: "Open the new agent's chat", decided: "Decided here", failedReason: "Reason: {0}",
+    f_runtime: "Runs on", f_machine: "Machine", f_thisPc: "This PC (Windows)", f_topic_name: "Name", f_backend: "CLI", f_model: "Model", f_directory: "Folder",
+    f_sandbox: "Access", f_description: "Description", f_display_name: "Display name", f_tags: "Tags", sb_read_only: "read-only", sb_workspace_write: "can write in its folder",
+    createWindows: "Create a Windows agent", changeAgent: "Change {0}",
+    r_applied: "Approved: the change is applied.", r_rejected: "Rejected: nothing was changed.", r_withdrawn: "Withdrawn by the agent: nothing was changed.",
+    r_expired: "This request ran out before it was decided: nothing was changed.", r_fleet_stopped: "The fleet stopped before it was applied: nothing was changed.",
+    r_request_no_longer_current: "The request is no longer current (the fleet or the Windows switch changed): nothing was changed.",
+    r_settings_changed: "The settings changed since the request: nothing was changed.", r_apply_failed: "It could not be applied.",
+    e_owner_required: "Only this fleet's owner, signed in on the AgEnD computer itself, can decide an agent's request.",
+    e_confirmation_not_pending: "This request was already decided or ran out.", e_not_found: "This request is no longer here.",
   },
   "zh-TW": {
     title: "等你處理", empty: "目前沒有需要你處理的事", emptyHint: "agent 在等你時，會出現在這裡——也會出現在聊天 app 的 General。", emptyHintWeb: "agent 在等你時，會出現在這裡。",
@@ -48,6 +65,18 @@ register("needs", {
     notifyInsecure: "通知需要安全的網址（localhost 或 HTTPS 公開連結），區網的一般 HTTP 網址不行。",
     notifyUnsupported: "這個瀏覽器無法顯示通知。", turnOn: "開啟", turnOff: "關閉",
     typePrompt: "Fleet 提示", typeAwaiting: "在終端機上", typeInstance: "Instance", typeDelivery: "傳送",
+    proposals: "代理人的請求", proposalFrom: "{0} 的請求", proposalHint: "在你核准之前，不會建立或修改任何東西。核准時，AgEnD 會再次檢查這個請求、目標電腦和你的登入，然後只執行一次。",
+    approve: "核准", reject: "拒絕", deciding: "處理中…", expiresIn: "{0} 分鐘後過期", expiresSoon: "不到一分鐘後過期",
+    applying: "正在套用…", openAgent: "開啟新 agent 的聊天", decided: "已在這裡決定", failedReason: "原因：{0}",
+    f_runtime: "執行於", f_machine: "電腦", f_thisPc: "這台電腦（Windows）", f_topic_name: "名稱", f_backend: "CLI", f_model: "模型", f_directory: "資料夾",
+    f_sandbox: "存取權限", f_description: "說明", f_display_name: "顯示名稱", f_tags: "標籤", sb_read_only: "唯讀", sb_workspace_write: "可寫入它的資料夾",
+    createWindows: "建立 Windows agent", changeAgent: "修改 {0}",
+    r_applied: "已核准：變更已套用。", r_rejected: "已拒絕：沒有任何變更。", r_withdrawn: "agent 已撤回：沒有任何變更。",
+    r_expired: "這個請求在決定前就過期了：沒有任何變更。", r_fleet_stopped: "套用前 fleet 已停止：沒有任何變更。",
+    r_request_no_longer_current: "這個請求已不再有效（fleet 或 Windows 開關已改變）：沒有任何變更。",
+    r_settings_changed: "提出請求後設定已變更：沒有任何變更。", r_apply_failed: "無法套用。",
+    e_owner_required: "只有在 AgEnD 這台電腦上登入的 fleet 擁有者，才能決定 agent 的請求。",
+    e_confirmation_not_pending: "這個請求已經被決定或已過期。", e_not_found: "這個請求已不在這裡。",
   },
 });
 const tn = (k, ...v) => t(`needs.${k}`, ...v);
@@ -123,9 +152,21 @@ export function groupNeeds(items) {
   return [...groups.values()];
 }
 
+/**
+ * alpha.2 (M-2300): what this page decided, kept for the life of the page — the request's id → "busy" while its POST is
+ * out, then the server's answer ({ view, agent, message }): it stays shown after the list drops the request.
+ */
+export const decisions = createStore({});
+
 export function NeedsPanel({ navKey }) {
   const lease = useLease(navKey);
-  const { needs, chatOwner: owner, instances, connections } = useStore(appStore);
+  const { needs, chatOwner: owner, instances, connections, proposals } = useStore(appStore);
+  // A tab opened before an upgrade has this panel but not the app.js that installs the list (it never set `proposals`):
+  // install it here then. On a current page app.js already did, and this panel reads nothing itself (#1374).
+  useEffect(() => { if (appStore.get().proposals === undefined) installProposals(); }, []);
+  const asks = Array.isArray(proposals) ? proposals : [];
+  const done = useStore(decisions);
+  const decidedHere = Object.entries(done).filter(([id, d]) => d && d !== "busy" && !asks.some((p) => p.id === id));
   // #1854: a fleet with no chat connection (web only, or not known yet) has no General to point at.
   const chatApp = connections > 0;
   const names = useStore(namesStore);
@@ -141,9 +182,14 @@ export function NeedsPanel({ navKey }) {
   const groups = groupNeeds(items);
   const nowMs = Date.now();
   return html`<div data-effect-panel="needs" class="panel p-needs">
-    <${PanelHeader} title=${tn("title")} sub=${items.length ? t("app.needsCount", items.length) : null} />
+    <${PanelHeader} title=${tn("title")} sub=${items.length + asks.length ? t("app.needsCount", items.length + asks.length) : null} />
     <div data-trust="panel-content" class="panel-body"><div class="col">
-      ${!items.length ? html`<${Empty} icon="check" title=${tn("empty")} hint=${tn(chatApp ? "emptyHint" : "emptyHintWeb")} />`
+      ${asks.length || decidedHere.length ? html`<section class="n-group n-proposals" aria-label=${tn("proposals")}>
+        <h2 class="n-group-head">${tn("proposals")}</h2>
+        ${asks.map((p) => html`<${ProposalItem} key=${p.id} proposal=${p} nowMs=${nowMs} />`)}
+        ${decidedHere.map(([id, d]) => html`<${ProposalResult} key=${id} result=${d} />`)}
+      </section>` : null}
+      ${!items.length && !asks.length && !decidedHere.length ? html`<${Empty} icon="check" title=${tn("empty")} hint=${tn(chatApp ? "emptyHint" : "emptyHintWeb")} />`
         : groups.map((g) => html`<section key=${JSON.stringify([g.instance, g.items[0]?.type === "config"])} class="n-group" aria-label=${g.instance}>
           <h2 class="n-group-head">${g.instance ? html`<a href=${chatPath(g.instance)} title=${g.instance}>${nameFor(g.instance)}</a>` : g.items[0]?.type === "config" ? t("app.settings") : tn(g.items.some(i => i.type === "backend") ? "fleetSignIns" : "noAssignee")}</h2>
           ${g.items.map((item) => html`<${NeedsItem} key=${item.id} item=${item} nowMs=${nowMs} owner=${owner} />`)}
@@ -197,6 +243,7 @@ function NeedsItem({ item, nowMs, owner }) {
     <div class="n-body">
       <div class="n-title"><strong>${reasonText(item)}</strong><span class="n-age">${age(item.since, nowMs)}</span></div>
       ${detailOf(item) ? html`<p class="n-detail">${detailOf(item)}</p>` : null}
+      ${item.generalLocation ? html`<${GeneralLocation} name=${item.instance} attentionOnly=${true} />` : null}
       <div class="n-actions">
         ${item.type === "prompt" && Array.isArray(item.actions) ? item.actions.filter((a) => !a.input).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}
@@ -210,6 +257,110 @@ function NeedsItem({ item, nowMs, owner }) {
   </article>`;
 }
 
+/**
+ * alpha.2 (M-2300): the request's summary as the owner reads it (junsion's §6: the machine, the CLI, the model, the
+ * folder, the access). The server's lines are the settings diff, escaped for a chat's markdown ("new\_instance.directory:
+ * absent → C:\\work"): here, unescaped and named — a create's fields as "Folder: C:\work", "Machine: This PC" when it
+ * names none; a change's as "Model: a → b"; any other line as it is. Text only (rendered as text, never markup).
+ */
+export function proposalLines(summary) {
+  const unescape = (s) => String(s).replace(/\\([\\`*_~[\]()<>|])/g, "$1").replace(/\[at\]/g, "@");
+  const lines = (Array.isArray(summary) ? summary : []).map(unescape);
+  const create = lines.some((l) => /^POST \/ui\/instances$/.test(l));
+  const out = [], label = (k) => { const key = `f_${k}`, s = tn(key); return s === `needs.${key}` ? k : s; };
+  // The access field's values, in words (matched by value: the two the request's schema allows).
+  const ACCESS = { "read-only": "sb_read_only", "workspace-write": "sb_workspace_write" };
+  const value = (_k, v) => (Object.hasOwn(ACCESS, v) ? tn(ACCESS[v]) : v);
+  let machine = false;
+  for (const l of lines) {
+    if (/^POST \/ui\/instances$/.test(l)) continue;
+    const m = /^new_instance\.([A-Za-z_]+): absent → (.*)$/.exec(l);
+    if (m) { if (m[1] === "machineId") machine = true; out.push(`${label(m[1] === "machineId" ? "machine" : m[1])}: ${value(m[1], m[2])}`); continue; }
+    const ch = /^(\S+) ([A-Za-z_]+): (.*) → (.*)$/.exec(l);
+    if (ch) { out.push(`${tn("changeAgent", ch[1])} · ${label(ch[2])}: ${ch[3]} → ${ch[4]}`); continue; }
+    out.push(l);
+  }
+  if (create && !machine) out.splice(1, 0, `${label("machine")}: ${tn("f_thisPc")}`);
+  return create ? [tn("createWindows"), ...out] : out;
+}
+
+/**
+ * alpha.2 polish: a decided request's outcome in the PAGE's language (the server says it in the fleet's — an English page
+ * read 「變更已套用。」): by its reason code, else its state; the server's words only for a code this page does not know.
+ */
+export function outcomeText(outcome) {
+  if (!outcome) return t("app.failed");
+  for (const code of [outcome.reason_code, outcome.state]) {
+    if (typeof code !== "string") continue;
+    const key = `r_${code}`, s = tn(key);
+    if (s !== `needs.${key}`) return s;
+  }
+  return outcome.message || t("app.failed");
+}
+/** Why a click decided nothing, in the page's language (by the server's error code; its words only as a fallback). */
+export function decideErrorText(r) {
+  const key = r && r.error ? `e_${r.error}` : "";
+  const s = key ? tn(key) : "";
+  return key && s !== `needs.${key}` ? s : (r && r.message) || t("app.failed");
+}
+
+/**
+ * alpha.2 (M-2300): one agent's request waiting for this web-only fleet's owner — what it would do (the server's own
+ * summary: the machine, the CLI, the model, the folder, the access), when it runs out, and Approve / Reject. One click
+ * per request on this page (claimed before the POST); the answer is the server's: applied, rejected, run out, already
+ * decided elsewhere, or failed with its reason.
+ */
+function ProposalItem({ proposal: p, nowMs }) {
+  const d = useStore(decisions)[p.id];
+  const busy = d === "busy" || p.state === "applying";
+  const [failed, setFailed] = useState(null);
+  const decide = async (decision) => {
+    if (decisions.get()[p.id]) return;                                 // one POST in flight per request on this page
+    setFailed(null);
+    decisions.set((s) => ({ ...s, [p.id]: "busy" }));
+    const r = await decideProposal(p.id, decision);
+    // #2997 review (Prism P2): nothing decided (the network failed, the owner was refused, a bad answer) and the request
+    // still waits — the claim is released and why is said here, so the next click is taken; a decided one is kept.
+    const decided = r.view && r.view.state !== "pending";
+    if (!decided) {
+      decisions.set((s) => { const next = { ...s }; delete next[p.id]; return next; });
+      setFailed(decideErrorText(r));
+      return;
+    }
+    decisions.set((s) => ({ ...s, [p.id]: { ...r, decision } }));
+    toast(r.view.outcome ? outcomeText(r.view.outcome) : decideErrorText(r), r.view.state === "applied");
+  };
+  const minutes = Math.floor((p.remaining_ms || 0) / 60_000);
+  return html`<article data-trust="permission" class="n-item">
+    <span class="n-icon"><${Icon} name="alert" size=${18} /></span>
+    <div class="n-body">
+      <div class="n-title"><strong>${tn("proposalFrom", p.requested_by)}</strong><span class="n-age">${age(p.requested_at, nowMs)} · ${minutes >= 1 ? tn("expiresIn", minutes) : tn("expiresSoon")}</span></div>
+      <ul class="n-detail">${proposalLines(p.summary).map((line, i) => html`<li key=${i}>${line}</li>`)}</ul>
+      <p class="note">${tn("proposalHint")}</p>
+      ${failed ? html`<p class="note n-proposal-error" role="alert">${failed}</p>` : null}
+      <div class="n-actions">
+        <button type="button" class="btn btn-sm btn-primary" disabled=${busy} onClick=${() => decide("confirm")}>${busy ? (p.state === "applying" ? tn("applying") : tn("deciding")) : tn("approve")}</button>
+        <button type="button" class="btn btn-sm" disabled=${busy} onClick=${() => decide("reject")}>${tn("reject")}</button>
+      </div>
+    </div>
+  </article>`;
+}
+
+/** A request decided on this page: the server's outcome (and its reason), and the new agent's chat when one was created. */
+function ProposalResult({ result: r }) {
+  const v = r.view, outcome = v && v.outcome;
+  const ok = !!(v && v.state === "applied");
+  return html`<article data-trust="permission" class=${`n-item${ok || (v && v.state === "rejected") ? "" : " bad"}`}>
+    <span class="n-icon"><${Icon} name=${ok ? "check" : "alert"} size=${18} /></span>
+    <div class="n-body">
+      <div class="n-title"><strong>${outcome ? outcomeText(outcome) : decideErrorText(r)}</strong><span class="n-age">${tn("decided")}</span></div>
+      ${v ? html`<ul class="n-detail">${proposalLines(v.summary).map((line, i) => html`<li key=${i}>${line}</li>`)}</ul>` : null}
+      ${outcome && outcome.detail ? html`<p class="note">${tn("failedReason", outcome.detail)}</p>` : null}
+      ${ok && r.agent ? html`<div class="n-actions"><a class="btn btn-sm btn-primary" href=${chatPath(r.agent)} title=${r.agent}>${tn("openAgent")}</a></div>` : null}
+    </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();