@songsid/agend 2.3.5-alpha.4 → 2.3.5-beta.1

package/dist/ui/panel-fleet.js

@@ -5,17 +5,13 @@
 // 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 { html, useEffect, useLayoutEffect, useRef, useState } from "/assets/app-html.js";
 import { t, register, lang } from "/assets/app-i18n.js";
 import { appStore, useStore } from "/assets/app-store.js";
 import { useLease } from "/assets/app-ctx.js";
 import { PanelHeader, setTitle } from "/assets/app-shell.js";
 import { HeaderTools } from "/assets/header-tools.js";
-import { 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 { renavigate } from "/assets/app-nav.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";
@@ -136,6 +132,62 @@ function useLoad(lease, path, version) {
   return state;
 }
 
+/**
+ * M-2542: whether the tab row goes in the header. Not on a phone (app.css's breakpoint — the query app-shell's narrow()
+ * asks). On a desktop only when the header's row holds everything at its natural width: the title (with any host
+ * memory warning), all six tabs and the header's tools. Otherwise the tabs are the row under the header, as before —
+ * never clipped, never squeezed. The natural widths are the same in either place, so the answer does not flip-flop.
+ */
+const NARROW = "(max-width: 899px)";
+export function tabsFit(m) { return m.title + m.tabs + m.tools + m.gaps <= m.room + 0.5; }
+export function measureTabsFit(root) {
+  const head = root?.querySelector(".panel-head");
+  const title = head?.querySelector(".panel-title");
+  const nav = root?.querySelector("nav[data-trust='panel-navigation']");
+  if (!head || !title || !nav || typeof getComputedStyle !== "function") return true;
+  const w = (el) => el.getBoundingClientRect().width || 0;
+  const natural = (el) => Math.max(w(el), el.scrollWidth || 0);   // an ellipsised title still counts its whole text
+  const px = (v) => parseFloat(v) || 0;
+  const sum = (els, f) => els.reduce((n, el) => n + f(el), 0);
+  const hs = getComputedStyle(head);
+  const parts = [...title.children], items = [...nav.children];
+  const others = [...head.children].filter(el => el !== title && el !== nav && w(el) > 0);   // tools, sidebar buttons
+  return tabsFit({
+    room: w(head) - px(hs.paddingLeft) - px(hs.paddingRight),
+    // The warning is deliberately capped; its hidden process text must not keep the tabs on a separate row.
+    title: sum(parts, el => el.querySelector?.(".host-mem") ? w(el) : natural(el)) + px(getComputedStyle(title).columnGap) * Math.max(0, parts.length - 1),
+    tabs: sum(items, w) + px(getComputedStyle(nav).columnGap) * Math.max(0, items.length - 1),
+    tools: sum(others, w),
+    gaps: px(hs.columnGap) * (others.length + 1),
+  });
+}
+function useTabsInHeader(rootRef) {
+  const mq = () => (typeof matchMedia === "function" ? matchMedia(NARROW) : null);
+  const [inHeader, setInHeader] = useState(() => !(mq()?.matches ?? false));
+  const check = () => setInHeader(!(mq()?.matches ?? false) && measureTabsFit(rootRef.current));
+  useLayoutEffect(() => {
+    check();   // every render: the title's warning can come and go
+    // A lazy panel can meet app.css cached before this fix. Re-link once, using the existing same-origin policy.
+    const warning = rootRef.current?.querySelector(".host-mem");
+    if (!warning || typeof getComputedStyle !== "function" || !document.head || document.getElementById("fleet-memory-css")) return;
+    const rev = getComputedStyle(warning).getPropertyValue?.("--fleet-memory-header");
+    if (rev === undefined || rev.trim() === "1") return;
+    const link = document.createElement("link"); link.id = "fleet-memory-css"; link.rel = "stylesheet";
+    link.href = "/assets/app.css?fleet-memory=1";
+    link.addEventListener("load", () => { if (rootRef.current) check(); }, { once: true });
+    document.head.appendChild(link);
+  });
+  useEffect(() => {
+    const m = mq();
+    m?.addEventListener?.("change", check);
+    const ro = typeof ResizeObserver === "function" ? new ResizeObserver(check) : null;
+    if (ro && rootRef.current) ro.observe(rootRef.current);
+    document.fonts?.ready?.then(check, () => {});
+    return () => { m?.removeEventListener?.("change", check); ro?.disconnect(); };
+  }, []);
+  return inHeader;
+}
+
 export function FleetPanel({ route, navKey }) {
   const lease = useLease(navKey);
   const tab = route.tab;
@@ -146,11 +198,19 @@ export function FleetPanel({ route, navKey }) {
   const { hostMemory, hostMemoryTop } = useStore(appStore);
   // #2015: and which processes hold the most, and whose — text only (never chat, #1712).
   const top = hostMemory && hostMemoryTop?.length ? t("fleet.hostMemory_top", hostMemoryTop.map(memoryHogText).join(" · ")) : "";
-  const sub = hostMemory ? html`<span class=${`status host-mem ${hostMemory}`} role="status"><span class=${`dot ${hostMemory === "critical" ? "bad" : "warn"}`} aria-hidden="true"></span>${t(`fleet.hostMemory_${hostMemory}`)}${top ? html`<span class="host-mem-top">${top}</span>` : null}</span>` : null;
-  return html`<div data-effect-panel="fleet" class="panel p-fleet">
-    <${PanelHeader} title=${t("fleet.title")} sub=${sub}><${DocsLink} /><${HeaderTools} navKey=${navKey} /></${PanelHeader}>
-    <nav data-trust="panel-navigation" 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>
+  const sub = hostMemory ? html`<span class=${`status host-mem ${hostMemory}`} role="status"><span class=${`dot ${hostMemory === "critical" ? "bad" : "warn"}`} aria-hidden="true"></span>${t(`fleet.hostMemory_${hostMemory}`)}${top ? html`<span class="host-mem-top" title=${top}>${top}</span>` : null}</span>` : null;
+  const root = useRef(null);
+  const wide = useTabsInHeader(root);
+  const tabs = (cls) => html`<nav data-trust="panel-navigation" class=${cls} 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>`;
+  return html`<div ref=${root} data-effect-panel="fleet" class="panel p-fleet">
+    ${/* M-2542: the tabs share the title row (PanelHeader's nav slot, as the instance tabs do) when everything fits
+         there (useTabsInHeader), saving a line; otherwise — a phone, a narrow window, a long host memory warning — they
+         stay the row under the header they always were (.seg, the same markup as before). Not ".seg" in the header,
+         and chosen here rather than by CSS: a previous release's app.css, cached in an open tab, has no rule for the
+         header slot — this way either stylesheet lays both out (smoke-2542 SKEW). */ ""}
+    <${PanelHeader} title=${t("fleet.title")} sub=${sub} nav=${wide ? tabs("fleet-tabs") : null}><${DocsLink} /><${HeaderTools} navKey=${navKey} /></${PanelHeader}>
+    ${wide ? null : tabs("seg")}
     <div data-trust="panel-content" class="panel-body"><div class=${`col${tab === "tasks" || tab === "org" || tab === "cache" || tab === "usage" ? " col-wide" : ""}`}><${Body} lease=${lease} /></div></div>
   </div>`;
 }
@@ -270,7 +330,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, renderActions, onCreated, onSubmit, wide = false }) {
+export function FormDialog({ title, onClose, submit, children, ready = true }) {
   const lease = useLease("form-dialog");
   const [busy, setBusy] = useState(false);
   async function go() {
@@ -291,15 +351,13 @@ export function FormDialog({ title, onClose, submit, children, ready = true, ren
     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} wide=${wide}
-    actions=${renderActions ? renderActions({ busy, go }) : html`<button type="button" class="btn" onClick=${onClose} disabled=${busy}>${t("fleet.cancel")}</button>
+  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") : submit.label || t("fleet.create")}</button>`}>
-    <form class="form" onSubmit=${(e) => { e.preventDefault(); if (onSubmit) onSubmit({ busy, go }); else go(); }}><fieldset class="form" disabled=${busy}>${children}</fieldset></form></${Dialog}>`;
+    <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>`;
 
@@ -424,28 +482,9 @@ 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();
-  // A computer paired a moment ago must show up: ask for a fresh list whenever the dialog opens (the hook then keeps polling).
-  useEffect(() => { void machineCatalog.refresh(); },[]);
-  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 {
@@ -455,43 +494,15 @@ 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: x.backend || (first ? first.name : "") }));
+        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, fallback: true }))); setF(x => ({ ...x, backend: "" })); }
+        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 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};
-    }
+  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();
@@ -504,48 +515,18 @@ export function CreateInstanceDialog({ onClose }) {
     if (f.prompt.trim()) body.systemPrompt = f.prompt.trim();
     return body;
   } };
-  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)} onRefresh=${machineCatalog.refresh} loaded=${!!machineCatalog.data && !machineCatalog.error} />
-      ${machineCatalog.loading && !machineCatalog.data ? html`<p class="note" role="status">${tr("machineLoading")}</p>` : null}
-      ${machineCatalog.error ? html`<p class="note" role="alert">${tr("machineFailed")}</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")} />`)}
+  // 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")} />`)}
-    ${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.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")} />`)}
     ${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,9 +9,6 @@
 // - 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";
@@ -19,18 +16,16 @@ import { useLease } from "/assets/app-ctx.js";
 import { PanelHeader, setTitle } from "/assets/app-shell.js";
 import { chatPath } from "/assets/app-route.js";
 import { namesOf, namesStore } from "/assets/instance-nav.js";
-import { Empty } from "/assets/ui-states.js";
+import { Empty, Skeleton } from "/assets/ui-states.js";
 import { Icon } from "/assets/ui-icons.js";
 import { toast } from "/assets/ui-toast.js";
 import { 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: {
     title: "Needs you", empty: "Nothing needs you right now", emptyHint: "When an agent waits for you, it shows here — and in your chat app's General.", emptyHintWeb: "When an agent waits for you, it shows here.",
-    open: "Open chat", openCard: "Open the card", noAssignee: "Task board (nobody assigned)", fleetSignIns: "Fleet sign-ins", signIn: "Sign in",
+    open: "Open chat", kiroOpen: "Open agent", kiroMigration: "Migration instructions", openCard: "Open the card", noAssignee: "Task board (nobody assigned)", fleetSignIns: "Fleet sign-ins", signIn: "Sign in",
     gap: "not wrapped up: {0}", gapUnchecked: "{0} checklist item(s) unchecked", gapNoResult: "no result", gapJoin: ", ", 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.",
@@ -39,23 +34,11 @@ register("needs", {
     notifyMobile: "On a phone, rely on your chat app's notification: a new item is a new post in General.", notifyMobileWeb: "On a phone, open this page to see what needs you.",
     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.",
+    typePrompt: "Fleet prompt", typeAwaiting: "At its terminal", typeInstance: "Instance", typeDelivery: "Delivery", typeMissed: "Missed while offline",
   },
   "zh-TW": {
     title: "等你處理", empty: "目前沒有需要你處理的事", emptyHint: "agent 在等你時，會出現在這裡——也會出現在聊天 app 的 General。", emptyHintWeb: "agent 在等你時，會出現在這裡。",
-    open: "開啟聊天", openCard: "打開卡片", noAssignee: "任務看板（沒有負責人）", fleetSignIns: "Fleet 登入", signIn: "登入",
+    open: "開啟聊天", kiroOpen: "開啟 Agent", kiroMigration: "遷移說明", openCard: "打開卡片", noAssignee: "任務看板（沒有負責人）", fleetSignIns: "Fleet 登入", signIn: "登入",
     gap: "還沒補齊：{0}", gapUnchecked: "還有 {0} 項沒勾", gapNoResult: "沒有產出總結", gapJoin: "、", acknowledge: "確認", acknowledging: "確認中…", answering: "回覆中…",
     ageNow: "剛剛", ageMin: "{0} 分鐘", ageHour: "{0} 小時", ageDay: "{0} 天",
     notifyTitle: "在這台裝置通知我", notifyOn: "這個瀏覽器的通知已開啟（需要開著分頁）。",
@@ -64,22 +47,18 @@ register("needs", {
     notifyMobile: "在手機上請以聊天 app 的通知為主：每個新項目都會在 General 發一則新訊息。", notifyMobileWeb: "在手機上請打開這個頁面查看等你處理的事。",
     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: "這個請求已不在這裡。",
+    typePrompt: "Fleet 提示", typeAwaiting: "在終端機上", typeInstance: "Instance", typeDelivery: "傳送", typeMissed: "離線時錯過",
   },
 });
 const tn = (k, ...v) => t(`needs.${k}`, ...v);
+/** Stale shells keep the old app-i18n.js; a missing key would otherwise show as app.needs_reason_*. */
+function itemReason(item) {
+  const text = reasonText(item);
+  if (typeof text === "string" && text.startsWith("app.needs_reason_") && (item.type === "missed" || item.reason === "missed_offline")) {
+    return tn("typeMissed");
+  }
+  return text;
+}
 
 /**
  * The page's claims on what Needs you writes, kept for the life of the page — not of a panel or a render (#1463
@@ -115,7 +94,7 @@ const setClaim = (kind, key, value) => claims.set((c) => {
   return { ...c, [kind]: next };
 });
 
-const ICON = { prompt: "chat", awaiting_input: "clock", instance: "alert", delivery: "send", task: "tasks" };
+const ICON = { prompt: "chat", awaiting_input: "clock", instance: "alert", delivery: "send", task: "tasks", missed: "clock" };
 const BAD = new Set(["crashed", "delivery_failed", "hang", "exited"]);
 
 /**
@@ -152,21 +131,9 @@ 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, 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));
+  const { ready, needsLoaded, needs, chatOwner: owner, instances, connections } = useStore(appStore);
   // #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);
@@ -182,14 +149,9 @@ 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 + asks.length ? t("app.needsCount", items.length + asks.length) : null} />
+    <${PanelHeader} title=${tn("title")} sub=${items.length ? t("app.needsCount", items.length) : null} />
     <div data-trust="panel-content" class="panel-body"><div class="col">
-      ${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")} />`
+      ${(!ready || needsLoaded === false) && !items.length ? html`<${Skeleton} variant="rows" lines=${3} />` : !items.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} />`)}
@@ -241,126 +203,22 @@ function NeedsItem({ item, nowMs, owner }) {
   return html`<article data-trust="permission" 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>
+      <div class="n-title"><strong>${itemReason(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}
-        ${item.type === "delivery" ? html`<button type="button" class="btn btn-sm" disabled=${!!ack} onClick=${acknowledge}>
+        ${item.type === "delivery" || item.type === "missed" ? 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}
         ${(item.reason === "auth_paused" || item.reason === "backend_signin") && item.signIn && signInOffered() ? html`<button type="button" class="btn btn-sm btn-primary" onClick=${() => openSignIn(item.signIn)}>${tn("signIn")}</button>` : null}
         ${item.type === "task" && item.card ? html`<a class="btn btn-sm" href=${`/ui/fleet?card=${encodeURIComponent(item.card.code)}`}>${tn("openCard")}</a>` : null}
-        ${item.instance ? html`<a class="btn btn-sm btn-ghost" href=${chatPath(item.instance)}>${tn("open")}</a>` : null}
-      </div>
-    </div>
-  </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>
+        ${item.kiroChoice === true ? html`<a class="btn btn-sm" href="https://github.com/songsid/AgEnD/blob/main/src/general-knowledge/skills/kiro-engine-migration/SKILL.md" target="_blank" rel="noopener noreferrer">${tn("kiroMigration")}</a>` : null}
+        ${item.instance ? html`<a class="btn btn-sm btn-ghost" href=${chatPath(item.instance)}>${tn(item.kiroChoice === true ? "kiroOpen" : "open")}</a>` : null}
       </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();

package/dist/ui/panel-notices.js

@@ -8,7 +8,7 @@ import { appStore, applyNoticesSeen, 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 { Empty, ErrorState, Skeleton } from "/assets/ui-states.js";
 import { Icon } from "/assets/ui-icons.js";
 
 register("notices", {
@@ -64,7 +64,7 @@ function markShown() {
 
 export function NoticesPanel({ navKey }) {
   const lease = useLease(navKey);
-  const { notices, instances } = useStore(appStore);
+  const { notices, noticesError, instances, connections } = useStore(appStore);
   const items = notices && Array.isArray(notices.items) ? notices.items : [];
   // What was unread when the page opened stays marked "New" while it is open (it is marked read on the server at once).
   const [seenAtOpen] = useState(() => (notices ? notices.seen | 0 : 0));
@@ -82,7 +82,8 @@ export function NoticesPanel({ navKey }) {
     <${PanelHeader} title=${tn("title")} />
     <div data-trust="panel-content" class="panel-body"><div class="col">
       ${items.length ? html`<p class="note notice-sub">${tn("sub")}</p>` : null}
-      ${!items.length ? html`<${Empty} icon="bell" title=${tn("empty")} hint=${tn("emptyHint")} />`
+      ${!notices && noticesError ? html`<${ErrorState} onRetry=${() => appStore.get().readNotices?.()} />`
+        : !notices && (connections == null || connections === 0) ? html`<${Skeleton} variant="rows" lines=${3} />` : !items.length ? html`<${Empty} icon="bell" title=${tn("empty")} hint=${tn("emptyHint")} />`
         : items.map((n) => html`<article key=${n.id} class=${`n-item notice${n.id > seenAtOpen ? " unread" : ""}${n.kind === "fleet" ? " bad" : ""}`}>
           <span class="n-icon"><${Icon} name=${ICON[n.kind] || "info"} size=${18} /></span>
           <div class="n-body">