@songsid/agend 2.3.4-beta.6 → 2.3.5-alpha.2

package/dist/ui/native-instance-settings.js

@@ -0,0 +1,47 @@
+// Windows uses the same staged instance settings flow, with its runtime's supported fields.
+import { html, useState } from "/assets/app-html.js";
+import { t, register } from "/assets/app-i18n.js";
+import { Dialog } from "/assets/ui-dialog.js";
+import { ChipList, ModelSelect } from "./settings-dialogs.js";
+import { CliProductMark, cliLabel } from "./cli-picker.js";
+import { useWindowsCliCatalog } from "./windows-cli-catalog.js";
+import { useRuntimeCatalog, instanceMachineId } from "./runtime-catalog.js";
+import { NativeAgendToolsHint, tr } from "./agent-runtime.js";
+register("nativeInstance", {
+  "zh-TW": { fixed:"Runtime 與 CLI 隨此對話保留。", workspace:"此 Agent 的對話會沿用這個工作區。" },
+  en: { fixed:"This conversation keeps its runtime and CLI.", workspace:"This agent's conversation keeps this workspace." },
+});
+const tn = key => t(`settings.${key}`);
+export function NativeInstanceSettings({ name, inst, ctx, onClose }) {
+  const machineId = instanceMachineId(inst);
+  const catalog = useWindowsCliCatalog(!machineId), machines = useRuntimeCatalog(!!machineId);
+  const machine = machines.data?.machines?.find(item => item.id === machineId);
+  const native = (machineId ? machine?.inventory : catalog.data)?.clis?.find(cli => cli.id === inst.backend);
+  const [form,setForm] = useState(() => ({display_name:inst.display_name || name,description:inst.description || "",model:inst.model || "",systemPrompt:inst.systemPrompt || "",native_sandbox:inst.native_sandbox || "read-only",tags:Array.isArray(inst.tags) ? [...inst.tags] : []}));
+  const set = key => value => setForm(current => ({...current,[key]:value}));
+  const ready = !!form.display_name.trim() && !(form.native_sandbox === "read-only" && native?.readOnlySupport === false);
+  const stage = () => {
+    if (!ready) return;
+    const patch = {};
+    for (const [key,value] of Object.entries(form)) {
+      const before = key === "display_name" ? inst.display_name || name : key === "native_sandbox" ? inst.native_sandbox || "read-only" : key === "tags" ? inst.tags || [] : inst[key] || "";
+      const next = typeof value === "string" ? value.trim() : value;
+      if (JSON.stringify(next) !== JSON.stringify(before)) patch[key] = next;
+    }
+    if (Object.keys(patch).length) ctx.stageAgent(name,inst,patch);
+    onClose();
+  };
+  return html`<${Dialog} title=${ctx.shortName(name,inst)} onClose=${onClose} wide=${true} actions=${html`<button type="button" class="btn" onClick=${onClose}>${tn("cancel")}</button><button type="button" class="btn btn-primary" disabled=${!ready} onClick=${stage}>${tn("modalDone")}</button>`}>
+    <div class="form native-instance-settings"><p class="note"><${CliProductMark} id=${inst.backend} size=${20} /> Windows · ${cliLabel(inst.backend)} — ${t("nativeInstance.fixed")}</p>${machineId ? html`<p class="note runtime-instance-machine">${tr("machine")}: ${machine?.name || inst.machine_name || machineId}</p>` : null}
+      <label class="field"><span>${tn("displayName")}</span><input value=${form.display_name} maxLength=${64} onInput=${event => set("display_name")(event.target.value)} /></label>
+      <label class="field"><span>${tn("description")}</span><input value=${form.description} maxLength=${512} onInput=${event => set("description")(event.target.value)} /></label>
+      <div class="field"><label for="native-instance-model">${tn("model")}</label><${ModelSelect} id="native-instance-model" value=${form.model} onChange=${set("model")} backend=${inst.backend} instance=${name} runtime="windows" machineId=${machineId} inherit=${tr("model")} /></div>
+      <label class="field"><span>${tn("workingDir")}</span><input value=${inst.working_directory || ""} readOnly=${true} aria-readonly="true" /><small>${t("nativeInstance.workspace")}</small></label>
+      <label class="field"><span>${tr("access")}</span><select value=${form.native_sandbox} onChange=${event => set("native_sandbox")(event.target.value)}><option value="read-only" disabled=${native?.readOnlySupport === false}>${tr("read")}</option><option value="workspace-write">${tr("write")}</option></select></label>
+      <${NativeAgendToolsHint} cli=${native} sandbox=${form.native_sandbox} />
+      ${!ready && form.native_sandbox === "read-only" && native?.readOnlySupport === false ? html`<p class="note">${tr("noReadOnly")}</p>` : null}
+      <label class="field"><span>${tn("systemPrompt")}</span><textarea rows="5" maxLength=${8000} value=${form.systemPrompt} onInput=${event => set("systemPrompt")(event.target.value)} /></label>
+      <div class="field"><span>${tn("tags")}</span><${ChipList} items=${form.tags} onChange=${set("tags")} placeholder=${tn("tagPlaceholder")} label=${tn("tags")} /></div>
+    </div>
+  </${Dialog}>`;
+}

package/dist/ui/native-pane-recovery.js

@@ -0,0 +1,45 @@
+/** Retained-pane recovery uses an explicit admin attestation; it never resubmits a chat message. */
+import { html, useEffect, useRef, useState } from "/assets/app-html.js";
+import { t } from "/assets/app-i18n.js";
+import { guestPage } from "/assets/app-store.js";
+import { Dialog } from "/assets/ui-dialog.js";
+import { toast } from "/assets/ui-toast.js";
+import "./chat-strings.js";
+export function NativePaneRecovery({ name, inst, lease }) {
+  const [dialog, setDialog] = useState(false), [checked, setChecked] = useState(false), [busy, setBusy] = useState(false);
+  const confirmation = useRef(null), inFlight = useRef(false), recovery = inst.native_recovery;
+  const latest = useRef(null); latest.current = {name,recovery};
+  useEffect(() => { confirmation.current=null; setDialog(false); setChecked(false); }, [recovery?.launchId, recovery?.sessionId, recovery?.kind]);
+  const act = async (path, body) => {
+    if (inFlight.current || !lease.current()) return;
+    inFlight.current = true; setBusy(true);
+    try {
+      const response = await lease.fetch(path, { method: "POST", headers: { "Content-Type": "application/json" }, ...(body ? { body: JSON.stringify(body) } : {}) });
+      const result = await response.json();
+      if (!lease.current()) return;
+      if (!response.ok || result.error) toast(result.error || t("chat.disconnected"), false);
+      else { setDialog(false); setChecked(false); }
+    } catch (error) { if (lease.current()) toast(error.message || t("chat.disconnected"), false); }
+    finally { inFlight.current = false; if (lease.current()) setBusy(false); }
+  };
+  if (guestPage() || inst.native_adapter !== "pane") return null;
+  if (!recovery) return ["stopped", "crashed"].includes(inst.status)
+    ? html`<div class="windows-agent-blocked"><button type="button" class="btn" disabled=${busy} onClick=${() => act(`/ui/start/${encodeURIComponent(name)}`)}>${t("chat.start")}</button></div>` : null;
+  if (recovery.kind === "session-unconfirmed") return html`<div class="windows-agent-blocked" role="alert">
+    <p>${t(recovery.provider === "codex" ? "chat.paneCodexSessionUnconfirmed" : "chat.paneSessionUnconfirmed")}</p>
+    <button type="button" class="btn" disabled=${busy || !recovery.launchId} onClick=${() => { confirmation.current = {name,launchId:recovery.launchId,sessionId:recovery.sessionId??null}; setDialog(true); }}>${t("chat.paneNewConversation")}</button>
+    ${dialog ? html`<${Dialog} title=${t("chat.paneNewConversation")} onClose=${() => { if (!busy) setDialog(false); }}>
+      <p>${t("chat.paneNewConversationConfirm",inst.display_name || name)}</p>
+      <button type="button" class="btn" disabled=${busy || confirmation.current?.name !== name || confirmation.current?.launchId !== recovery.launchId || confirmation.current?.sessionId !== (recovery.sessionId??null)} onClick=${() => { const target=confirmation.current, now=latest.current; if(target?.name===now.name && target.launchId===now.recovery?.launchId && target.sessionId===(now.recovery?.sessionId??null)) act(`/ui/instances/${encodeURIComponent(name)}/new-conversation`,{confirmedNewConversation:true,launchId:target.launchId,sessionId:target.sessionId}); }}>${t("chat.paneNewConversation")}</button>
+    </${Dialog}>` : null}
+  </div>`;
+  return html`<div class="windows-agent-blocked" role="alert"><p>${t(recovery.kind === "host-upgrade" ? "chat.paneHostUpgrade" : "chat.paneRecoveryNeeded")}</p>
+    ${recovery.kind === "host-upgrade" ? html`<button type="button" class="btn" disabled=${busy} onClick=${() => act(`/ui/stop/${encodeURIComponent(name)}`)}>${t("chat.stopInstance")}</button>` : recovery.launchId ? html`<button type="button" class="btn" disabled=${busy} onClick=${() => { confirmation.current = {name,launchId:recovery.launchId}; setChecked(false); setDialog(true); }}>${t("chat.paneRecover")}</button>` : null}
+    <button type="button" class="btn" disabled=${busy} onClick=${() => act(`/ui/start/${encodeURIComponent(name)}`)}>${t("chat.start")}</button>
+    ${dialog ? html`<${Dialog} title=${t("chat.paneRecover")} onClose=${() => { if (!busy) setDialog(false); }}>
+      <p>${t("chat.paneRecoverConfirm", inst.display_name || name)}</p>
+      <label><input type="checkbox" checked=${checked} disabled=${busy} onChange=${event => setChecked(event.target.checked)} />${t("chat.paneProcessesStopped")}</label>
+      <button type="button" class="btn" disabled=${!checked || busy || confirmation.current?.name !== name || confirmation.current?.launchId !== recovery.launchId} onClick=${() => { if (checked && confirmation.current?.name === name && confirmation.current?.launchId === recovery.launchId) act(`/ui/instances/${encodeURIComponent(name)}/recover-pane`, { confirmedStopped: true, launchId: confirmation.current.launchId }); }}>${t("chat.paneRecoverConfirmed")}</button>
+    </${Dialog}>` : null}
+  </div>`;
+}

package/dist/ui/panel-chat.js

@@ -1,3 +1,4 @@
+import { NativePaneRecovery } from "./native-pane-recovery.js";
 // #1408 step 1: the chat panel. Behind the session gate (/ui/js/), loaded by the app with a dynamic import in "full"
 // mode only. boot() runs once per page (the chat store must hear the stream from the first frame); <ChatPanel> mounts
 // for /ui and /ui/chat/<name>.
@@ -11,9 +12,9 @@ import { lang, t } from "/assets/app-i18n.js";
 import { appStore, createStore, guestPage, guestTrusted, useStore } from "/assets/app-store.js";
 import { ComposerAuth } from "/assets/web-authorize.js";
 import { useLease } from "/assets/app-ctx.js";
-import { modelText, namesOf, namesStore, navStore as instanceNavStore } from "/assets/instance-nav.js";
+import { modelText, namesOf, namesStore, navStore as instanceNavStore, supportsInstanceFeature } from "/assets/instance-nav.js";
 import { PanelHeader, onPanelKey, setTitle, statusClass, statusLabel, openDrawer, requestNewInstance } from "/assets/app-shell.js";
-import { detailsPath, textLinkSegments } from "/assets/app-route.js";
+import { detailsPath, textLinkSegments, sectionPath } from "/assets/app-route.js";
 import { InstanceSwitch } from "/assets/instance-switch.js";
 import { HeaderTools } from "/assets/header-tools.js";
 import { navigate, navStore } from "/assets/app-nav.js";
@@ -29,7 +30,6 @@ import { applyTheme, clearAmbient, resolvedMode, themeFor, themeImageUrl, themeM
 import { colorMenuItem } from "/assets/identity-color.js";
 import { brokenPictures, cardFoldable, IdentityCard, useCard } from "/assets/identity-card.js";
 import { AgentWidget, instanceBinds, widgetFor } from "/assets/agent-widget.js";
-
 // #1629 r4 §1: the identity card under the chat's header — hidden by default; shown or not is this device's choice.
 // #2217 (the user, 2026-10-19): no row of its own; its picture and bio can be folded away (the banner stays) — this
 // device's choice too, kept the same way. The user (2026-10-20): no control on the card — one card button in the header
@@ -214,7 +214,7 @@ export function ChatPanel({ route, navKey }) {
     store.setCurrent(name && inst ? name : null);
     return () => store.setCurrent(null);
   }, [name, !!inst]);
-  useEffect(() => { setTitle(name || t("app.chat")); }, [name, navKey]);
+  useEffect(() => { setTitle(inst?.runtime === "windows" ? inst.display_name || name : name || t("app.chat")); }, [name, navKey, inst?.runtime, inst?.display_name]);
   if (!name) {
     // #1854 (rank 7): one instruction — pick an agent, or with none at all, the one way to make one. Connecting a chat
     // app (the first-run card, #1519 P7) is offered in Settings, not here: it competed with the first agent.
@@ -259,6 +259,7 @@ function useResolvedMode(lease) {
 }
 
 function ChatView({ name, inst, lease, navKey, exec, awaiting }) {
+  const attachmentsSupported = supportsInstanceFeature(inst,"attachments");
   const names = useStore(namesStore);   // #1722: which name leads (the title)
   // #1629: this agent's theme, on this surface only; redrawn when the themes, the viewer's switch or the mode move.
   useStore(themesStore);
@@ -267,6 +268,17 @@ function ChatView({ name, inst, lease, navKey, exec, awaiting }) {
   const themeKey = JSON.stringify(theme);
   const card = useCard(name, inst.card_v);
   const [dialog, setDialog] = useState(null);       // "delete" | null
+  const [recovering,setRecovering] = useState(false);
+  const recoverNative = async () => {
+    if (recovering) return;
+    setRecovering(true);
+    try {
+      const response = await lease.fetch(`/ui/instances/${encodeURIComponent(name)}/recover`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({confirmedStopped:true})});
+      const result = await response.json();
+      if (lease.current() && (!response.ok || result.error)) toast(result.error || t("chat.disconnected"),false);
+    } catch(error) { if (lease.current()) toast(error.message || t("chat.disconnected"),false); }
+    finally { if (lease.current()) setRecovering(false); }
+  };
   const [wrap, setWrap] = useState(codeWrap);
   const wide = useStore(chatWide).on;
   const view = useRef(null), split = useRef(null), thread = useRef(null), bg = useRef(null), effectSurface = useRef(null);
@@ -289,12 +301,14 @@ function ChatView({ name, inst, lease, navKey, exec, awaiting }) {
     const el = view.current; if (!el) return undefined;
     let depth = 0;
     const hasFiles = (e) => !!(e.dataTransfer && [...e.dataTransfer.types].includes("Files"));
-    lease.on(el, "dragenter", (e) => { if (hasFiles(e)) { depth++; el.classList.add("dragging"); } });
-    lease.on(el, "dragover", (e) => { if (hasFiles(e)) e.preventDefault(); });
-    lease.on(el, "dragleave", (e) => { if (hasFiles(e) && --depth <= 0) { depth = 0; el.classList.remove("dragging"); } });
-    lease.on(el, "drop", (e) => { depth = 0; el.classList.remove("dragging"); if (e.dataTransfer && e.dataTransfer.files.length) { e.preventDefault(); store.addFiles(name, e.dataTransfer.files); } });
-    return undefined;
-  }, [lease]);
+    const offs = [
+      lease.on(el, "dragenter", (e) => { if (attachmentsSupported && hasFiles(e)) { depth++; el.classList.add("dragging"); } }),
+      lease.on(el, "dragover", (e) => { if (hasFiles(e)) e.preventDefault(); }),
+      lease.on(el, "dragleave", (e) => { if (hasFiles(e) && --depth <= 0) { depth = 0; el.classList.remove("dragging"); } }),
+      lease.on(el, "drop", (e) => { depth = 0; el.classList.remove("dragging"); if (e.dataTransfer && e.dataTransfer.files.length) { e.preventDefault(); if (attachmentsSupported) store.addFiles(name, e.dataTransfer.files); else toast(t("chat.runtimeNoAttachments"),false); } }),
+    ];
+    return () => offs.forEach(off => off());
+  }, [lease,attachmentsSupported]);
   // Esc stops the agent's reply (as Esc in its terminal would): from the chat, while it works, and only when nothing
   // else that Esc would close is open (a dialog, a menu, the Session menu).
   useEffect(() => lease.hold(onPanelKey((e) => {
@@ -317,10 +331,11 @@ function ChatView({ name, inst, lease, navKey, exec, awaiting }) {
   };
   const items = [
     // #1523 N2: Details is a page now (the Fleet side of this instance), not a dialog.
-    { key: "details", label: t("chat.details"), icon: "info", onSelect: () => navigate(detailsPath(name)) },
-    running ? null : { key: "start", label: t("chat.start"), icon: "play", onSelect: () => action("start") },
-    running ? { key: "restart", label: t("chat.restart"), icon: "restart", onSelect: () => action("restart") } : null,
-    running ? { key: "stop", label: t("chat.stopInstance"), icon: "stop", onSelect: () => action("stop") } : null,
+    supportsInstanceFeature(inst,"details") ? { key: "details", label: t("chat.details"), icon: "info", onSelect: () => navigate(detailsPath(name)) } : null,
+    inst.runtime === "windows" ? {key:"settings",label:t("app.settings"),icon:"settings",onSelect:() => navigate(sectionPath("agents"))} : null,
+    running || !supportsInstanceFeature(inst,"lifecycle") ? null : { key: "start", label: t("chat.start"), icon: "play", onSelect: () => action("start") },
+    running && supportsInstanceFeature(inst,"lifecycle") ? { key: "restart", label: t("chat.restart"), icon: "restart", onSelect: () => action("restart") } : null,
+    running && supportsInstanceFeature(inst,"lifecycle") ? { key: "stop", label: t("chat.stopInstance"), icon: "stop", onSelect: () => action("stop") } : null,
     // #1958: its identity colour and where it shows (the public link too, as profile edits).
     colorMenuItem(name, inst),
     // #1629: a person's control over this agent's theme — not over the public link (it only views themes).
@@ -337,10 +352,12 @@ function ChatView({ name, inst, lease, navKey, exec, awaiting }) {
   // #1269 quick actions: the model and effort it runs, each a way to /model or /effort (the same pick list).
   const pick = (command) => store.runCommand(name, command, "", { alive: () => lease.current() });
   const sub = html`<span class="status"><span class=${`dot ${cls}`} aria-hidden="true"></span>${statusLabel(inst, exec, awaiting)}</span>
-    ${inst.model ? html`<button type="button" class="hd-chip" title=${t("chat.chipModel", modelText(inst))} aria-label=${t("chat.chipModel", modelText(inst))} onClick=${() => pick("model")}>${modelText(inst)}</button>` : null}
-    ${inst.effort ? html`<button type="button" class="hd-chip" title=${t("chat.chipEffort", inst.effort)} aria-label=${t("chat.chipEffort", inst.effort)} onClick=${() => pick("effort")}>${inst.effort}</button>` : null}`;
+    ${inst.runtime === "windows" ? html`<span class="tag">Windows</span>` : null}
+    ${inst.machine_id ? html`<span class="tag runtime-machine-tag" title=${t("chat.machineName",inst.machine_name || inst.machine_id)}>${inst.machine_name || inst.machine_id}</span>${inst.machine_status !== "online" ? html`<span class="tag runtime-machine-offline">${t(inst.machine_status === "revoked" ? "chat.machineRevoked" : "chat.machineOffline")}</span>` : null}` : null}
+    ${inst.model ? html`<button type="button" class="hd-chip" title=${t("chat.chipModel", modelText(inst))} aria-label=${t("chat.chipModel", modelText(inst))} onClick=${() => supportsInstanceFeature(inst,"commands") ? pick("model") : navigate(sectionPath("agents"))}>${modelText(inst)}</button>` : null}
+    ${inst.effort && supportsInstanceFeature(inst,"effort") ? html`<button type="button" class="hd-chip" title=${t("chat.chipEffort", inst.effort)} aria-label=${t("chat.chipEffort", inst.effort)} onClick=${() => pick("effort")}>${inst.effort}</button>` : null}`;
   return html`<div class=${`panel p-chat${wrap ? " wrap-code" : ""}`} data-width=${wide ? "full" : undefined} ref=${view}>
-    <${PanelHeader} title=${headerName(namesOf(inst || { name }, names.primary))} sub=${sub} nav=${guest ? (guestTrusted() ? html`<${InstanceSwitch} name=${name} current="chat" guest=${true} />` : null) : html`<${InstanceSwitch} name=${name} current="chat" />`}><${CardMenu} card=${card} /><${HeaderTools} navKey=${navKey} />${guest ? null : html`<${Menu} items=${items} label=${t("app.more")} />`}</${PanelHeader}>
+    <${PanelHeader} title=${inst.runtime === "windows" ? inst.display_name || name : headerName(namesOf(inst || { name }, names.primary))} sub=${sub} nav=${guest ? (guestTrusted() ? html`<${InstanceSwitch} name=${name} instance=${inst} current="chat" guest=${true} />` : null) : html`<${InstanceSwitch} name=${name} instance=${inst} current="chat" />`}><${CardMenu} card=${card} /><${HeaderTools} navKey=${navKey} usage=${supportsInstanceFeature(inst,"usage")} />${guest ? null : html`<${Menu} items=${items} label=${t("app.more")} />`}</${PanelHeader}>
     <${ChatCard} key=${name} name=${name} card=${card} />
     <${AgentWidget} slot="chat_header" widget=${widgetFor(name, "chat_header")} binds=${instanceBinds(inst, exec, awaiting)} />
     <div class="chat-split" ref=${split}>
@@ -348,7 +365,9 @@ function ChatView({ name, inst, lease, navKey, exec, awaiting }) {
         ${theme && theme.background ? html`<img ref=${bg} class=${`th-bg th-bg-${theme.background.fit}`} src=${themeImageUrl(name, theme.background.image)} alt="" aria-hidden="true" decoding="async" />` : null}
         <${ChatAmbient} name=${name} surface=${effectSurface} part="layer" />
         <${AmbientMotionNote} name=${name} />
-        <${Thread} name=${name} th=${thread} />
+        <${NativePaneRecovery} name=${name} inst=${inst} lease=${lease} />
+        ${inst.native_blocked ? html`<div class="windows-agent-blocked" role="alert"><p>${t("chat.nativeBlocked")}</p><button type="button" class="btn" disabled=${recovering} onClick=${recoverNative}>${t("chat.nativeRecover")}</button></div>` : null}
+        <${Thread} name=${name} label=${inst.runtime === "windows" ? inst.display_name || name : name} th=${thread} />
         <${Dock} name=${name} inst=${inst} lease=${lease} exec=${exec} awaiting=${awaiting} workingLabel=${theme ? theme.workingLabel : undefined} />
         <${ChatAmbient} name=${name} surface=${effectSurface} part="front" />
       </div>
@@ -356,8 +375,8 @@ function ChatView({ name, inst, lease, navKey, exec, awaiting }) {
         keyOf=${msgKey} reveal=${(k) => thread.current && thread.current.reveal(k)} download=${downloadHtml} allow=${(commit) => setPreviewOptIn(true, commit)} />
     </div>
     <${LightboxHost} />
-    <div data-trust="drop" class="drop-overlay" aria-hidden="true"><div class="drop-card"><${Icon} name="attach" size=${32} /><span>${t("chat.dropHere")}</span></div></div>
-    ${dialog === "delete" ? html`<${DeleteDialog} name=${name} onClose=${() => setDialog(null)} />` : null}
+    ${attachmentsSupported ? html`<div data-trust="drop" class="drop-overlay" aria-hidden="true"><div class="drop-card"><${Icon} name="attach" size=${32} /><span>${t("chat.dropHere")}</span></div></div>` : null}
+    ${dialog === "delete" ? html`<${DeleteDialog} name=${name} inst=${inst} onClose=${() => setDialog(null)} />` : null}
   </div>`;
 }
 
@@ -467,10 +486,11 @@ function follow(name, thread) {
 }
 
 /** The thread's view: Preact owns the scroller and the jump pill; the kept list (chat-thread.js) is put inside it. */
-function Thread({ name, th }) {
+function Thread({ name, label = name, th }) {
   const scroller = useRef(null), host = useRef(null);
   const [jump, setJump] = useState({ show: false, unseen: 0 });
   const [empty, setEmpty] = useState(false);
+  useLayoutEffect(() => { keptThreads.get(name)?.list.setAttribute("aria-label",t("chat.conversationWith",label)); },[name,label]);
   useLayoutEffect(() => {
     const doc = host.current.ownerDocument;
     let e = keptThreads.get(name);
@@ -484,6 +504,7 @@ function Thread({ name, th }) {
     if (kept) trimKept(name);
     const shownAt = now();
     const thread = e.thread, sc = scroller.current, ls = e.list;
+    ls.setAttribute("aria-label",t("chat.conversationWith",label));
     e.sink = { setJump, setEmpty };
     host.current.append(ls);
     thread.attach(sc);
@@ -544,9 +565,9 @@ function Dock({ name, inst, lease, exec, awaiting, workingLabel }) {
     <${CommandCard} name=${name} lease=${lease} />
     <${QuickActions} name=${name} inst=${inst} lease=${lease} />
     ${s.waking[name] ? html`<p class="send-waking" role="status">${t("chat.waking", name)}</p>` : null}
-    <${Composer} name=${name} label=${composerLabel(inst, name)} lease=${lease} busy=${R().isBusy(exec)} />
+    <${Composer} name=${name} inst=${inst} label=${composerLabel(inst, name)} lease=${lease} busy=${R().isBusy(exec)} />
     <div class="composer-row">${guestPage() ? html`<span class="guest-note" title=${t("chat.guestNote")}>${t("chat.guestNote")}</span>` : html`<${ComposerAuth} />`}<span
-      class="hint" title=${t(guestPage() ? "chat.guestMore" : "chat.composerMore")}>${t(touchScreen() ? "chat.composerHintTouch" : "chat.composerHint")}</span></div>
+      class="hint" title=${t(guestPage() || !supportsInstanceFeature(inst,"commands") ? "chat.guestMore" : "chat.composerMore")}>${t(supportsInstanceFeature(inst,"commands") ? touchScreen() ? "chat.composerHintTouch" : "chat.composerHint" : touchScreen() ? "chat.nativeComposerHintTouch" : "chat.nativeComposerHint")}</span></div>
   </div></div>`;
 }
 
@@ -641,7 +662,7 @@ function replySnippet(r) {
   return text || (r.media === "photo" ? t("chat.replyPhoto") : r.media === "document" ? t("chat.replyFile") : "");
 }
 
-function Composer({ name, label = name, lease, busy }) {
+function Composer({ name, inst, label = name, lease, busy }) {
   const s = store.state;
   const input = useRef(null), fileIn = useRef(null);
   const [, tick] = useState(0);
@@ -662,7 +683,10 @@ function Composer({ name, label = name, lease, busy }) {
   const guest = guestPage();
   const app = useStore(appStore);
   const guestAllowed = guest ? (app.instances.find((i) => i.name === name)?.commands ?? []) : null;
-  const palette = files.length || closedFor === value || (guest && !guestAllowed.length) ? null : paletteFor(value, guestAllowed || undefined);
+  const attachmentsSupported = supportsInstanceFeature(inst,"attachments"), commandsSupported = supportsInstanceFeature(inst,"commands");
+  const machineUnavailable = !!inst?.machine_id && inst.machine_status !== "online";
+  const sendingBlocked = machineUnavailable || inst?.native_blocked || inst?.native_busy || (busy && !supportsInstanceFeature(inst,"send_while_busy"));
+  const palette = !commandsSupported || files.length || closedFor === value || (guest && !guestAllowed.length) ? null : paletteFor(value, guestAllowed || undefined);
   const pick = palette && palette.length ? palette[Math.min(sel, palette.length - 1)] : null;
   // Grow with the text, up to a limit: set through the CSSOM, never a style attribute (#1300). Empty, it is one line
   // (#2478 — a long name's placeholder made the box two lines tall).
@@ -684,6 +708,9 @@ function Composer({ name, label = name, lease, busy }) {
   // #2342: a completion is a step Ctrl+Z goes back from (to what was typed); a command that runs consumes the line.
   const complete = (c) => { recordEdit(input.current); setValue(`/${c.name}${c.arg ? " " : ""}`); };
   const submit = () => {
+    if (sendingBlocked) return;
+    if (!attachmentsSupported && files.length) { toast(t("chat.runtimeNoAttachments"),false); return; }
+    if (!commandsSupported && parseCommandLine(value)) { toast(t("chat.runtimeNoCommands"),false); return; }
     if (pick) {
       if (value === `/${pick.name}` && !needsArgument(pick.name)) runLine({ command: pick.name, args: "" });
       else complete(pick);
@@ -719,11 +746,13 @@ function Composer({ name, label = name, lease, busy }) {
   const onPaste = (e) => {
     const list = e.clipboardData && e.clipboardData.files;
     const text = e.clipboardData ? e.clipboardData.getData("text") : "";
-    if (list && list.length) { store.addFiles(name, list); if (!text) e.preventDefault(); return; }
-    if (R().isLongPaste(text) && store.attachPastedText(name, text)) e.preventDefault();
+    if (list && list.length) { if (!attachmentsSupported) { if (!text) e.preventDefault(); toast(t("chat.runtimeNoAttachments"),false); return; } store.addFiles(name, list); if (!text) e.preventDefault(); return; }
+    if (attachmentsSupported && R().isLongPaste(text) && store.attachPastedText(name, text)) e.preventDefault();
   };
   const optId = (c) => `cmd-${c.name}`;
   return html`<div class="composer-box">
+    ${machineUnavailable ? html`<p class="note runtime-machine-unavailable" role="status">${t(inst.machine_status === "revoked" ? "chat.machineRevokedHint" : "chat.machineUnavailable",inst.machine_name || inst.machine_id)}</p>` : null}
+    ${inst?.native_busy && !busy && !inst?.native_blocked ? html`<p class="note" role="status">${t("chat.nativeBusy")}</p>` : null}
     ${palette ? html`<ul data-trust="palette" class="cmd-palette" id="cmdPalette" role="listbox" aria-label=${t("chat.cmdCommands")}>
       ${palette.length ? palette.map((c) => html`<li key=${c.name} id=${optId(c)} role="option" aria-selected=${c === pick ? "true" : "false"}
           class=${c === pick ? "on" : ""} onMouseDown=${(e) => { e.preventDefault(); complete(c); }}>
@@ -737,9 +766,9 @@ function Composer({ name, label = name, lease, busy }) {
     </div>` : null}
     ${files.length ? html`<div class="pending-files">${files.map((f, i) => html`<${FileChip} key=${`${f.name}-${i}`} f=${f} i=${i} name=${name} />`)}</div>` : null}
     <div class="composer">
-      <button id="attachBtn" type="button" class="icon-btn" title=${t("chat.attachTitle")} aria-label=${t("chat.attachTitle")} onClick=${() => fileIn.current && fileIn.current.click()}><${Icon} name="attach" /></button>
+      ${attachmentsSupported ? html`<button id="attachBtn" type="button" class="icon-btn" title=${t("chat.attachTitle")} aria-label=${t("chat.attachTitle")} onClick=${() => fileIn.current && fileIn.current.click()}><${Icon} name="attach" /></button>
       <input ref=${fileIn} type="file" multiple hidden
-        onChange=${(e) => { store.addFiles(name, e.target.files); e.target.value = ""; }} />
+        onChange=${(e) => { store.addFiles(name, e.target.files); e.target.value = ""; }} />` : null}
       ${/* #2478: the placeholder is drawn beside the box, one line ending in "…" — a textarea's own placeholder is clipped,
           never ellipsized, and a long name wrapped it to two lines. The box keeps the words as its accessible name. Its own
           placeholder is one space: :placeholder-shown hides the drawn one (app.css) the moment the box holds text, an
@@ -751,7 +780,7 @@ function Composer({ name, label = name, lease, busy }) {
         placeholder=" "></textarea><span class="composer-ph" aria-hidden="true">${t("chat.composerPlaceholder", label)}</span></span>
       <button id="stopBtn" type="button" class="btn btn-stop" hidden=${!busy} title=${t("chat.stopReplyTitle")}
         disabled=${!!s.cancelling[name]} onClick=${() => store.cancelReply(name)}><${Icon} name="stop" size=${14} /><span class="stop-label">${t("chat.stopReply")}</span></button>
-      <button id="sendBtn" type="button" class="btn btn-primary btn-send" hidden=${busy && !content} disabled=${!content}
+      <button id="sendBtn" type="button" class="btn btn-primary btn-send" hidden=${busy && !content} disabled=${!content || sendingBlocked}
         onMouseDown=${(e) => e.preventDefault()}
         aria-label=${t("chat.send")} title=${t("chat.send")} onClick=${submit}><${Icon} name="send" size=${16} /><span class="send-label">${t("chat.send")}</span></button>
     </div></div>`;
@@ -775,7 +804,7 @@ function FileChip({ f, i, name }) {
 
 // ── Dialogs ──
 
-function DeleteDialog({ name, onClose }) {
+function DeleteDialog({ name, inst, onClose }) {
   // The dialog's own lease: it ends when the dialog goes (closed, or the chat left for another page). The delete
   // may still finish on the server, and says so, but a dialog that is gone never closes or navigates the page the
   // person is on now (#1425 review).
@@ -791,7 +820,7 @@ function DeleteDialog({ name, onClose }) {
     // follows the request. From then on the dialog is done: the decision is said in a toast, and it never closes or
     // navigates anything (the person may be anywhere by then).
     try {
-      const res = await confirmedWrite(`/ui/instances/${encodeURIComponent(name)}/delete`, { method: "POST", body: { confirm: typed }, label: t("chat.deleteTitle", name),
+      const res = await confirmedWrite(inst?.runtime === "windows" ? `/ui/instances/${encodeURIComponent(name)}` : `/ui/instances/${encodeURIComponent(name)}/delete`, { method: inst?.runtime === "windows" ? "DELETE" : "POST", body: inst?.runtime === "windows" ? {} : { confirm: typed }, label: t("chat.deleteTitle", name),
         onPending: (_id, view) => { handedOver = true; toast(t(selfConfirmed(view) ? "app.pendingSelfSent" : "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 && err.message ? err.message : t("chat.disconnected") }; }

package/dist/ui/panel-details.js

@@ -1,3 +1,4 @@
+import { NativePaneRecovery } from "./native-pane-recovery.js";
 // #1523 N2 (§3.3, Q1 = B): Details — "the Fleet side of one instance", at /ui/fleet/agent/<name>. Behind the session
 // gate (/ui/js/). What it holds:
 // - runtime and recent activity (what Chat's details dialog showed, now a page);
@@ -158,7 +159,7 @@ function DetailsView({ name, inst, navKey, exec, awaiting }) {
   }
   return html`<div data-effect-panel="details" class="panel p-details">
     <${PanelHeader} title=${name} sub=${sub} nav=${html`<${InstanceSwitch} name=${name} current="details" />`}><${HeaderTools} navKey=${navKey} /><${Menu} items=${items} label=${t("app.more")} /></${PanelHeader}>
-    <div data-trust="panel-content" class="panel-body"><div class="col" ref=${body}>${busy ? html`<p class="note" role="status">${t("chat.dWorking")}</p>` : null}<${IdentityCard} name=${name} card=${card} />
+    <div data-trust="panel-content" class="panel-body"><div class="col" ref=${body}><${NativePaneRecovery} name=${name} inst=${inst} lease=${lease} />${busy ? html`<p class="note" role="status">${t("chat.dWorking")}</p>` : null}<${IdentityCard} name=${name} card=${card} />
       <${AgentWidget} slot="details" widget=${widgetFor(name, "details")} binds=${instanceBinds(inst, exec, awaiting)} />${content}</div></div>
   </div>`;
 }

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}>`;
 }