@songsid/agend 2.3.5-alpha.3 → 2.3.5-alpha.4

package/dist/ui/panel-windows-cli.js

@@ -5,7 +5,7 @@ import { PanelHeader, setTitle } from "/assets/app-shell.js";
 import { Icon } from "/assets/ui-icons.js";
 import { CliPicker, CliProductMark, cliLabel } from "./cli-picker.js";
 import { ModelSelect } from "./settings-dialogs.js";
-import { useWindowsCliCatalog, WindowsCliDiscoveryStatus } from "./windows-cli-catalog.js";
+import { useWindowsCliCatalog, WindowsCliDiscoveryStatus, WindowsCliHostIdentity } from "./windows-cli-catalog.js";
 
 register("wincli", {
   "zh-TW": { intro:"在 Windows 上執行一次性任務，使用本機已安裝的 CLI 和登入。", probe:"偵測 Windows CLI", probing:"正在偵測…", newTask:"派送 Windows Codex 任務", folder:"Windows 工作目錄", prompt:"任務內容", access:"檔案存取", readOnly:"唯讀", write:"工作目錄可寫入", limits:"目前支援 Codex 單次任務，同時一個，五分鐘後請求取消。使用 CLI 的沙箱與核准政策；此頁不提供互動核准按鈕。Claude 目前提供偵測。", run:"開始任務", results:"任務與結果", refresh:"更新", signedIn:"已登入", signedOut:"尚未登入", unknown:"登入狀態未知", missing:"未找到執行檔", empty:"還沒有任務。", cancel:"取消任務", starting:"準備啟動", running:"執行中", cancelling:"正在取消", cancelled:"已取消", completed:"已完成", failed:"失敗", waiting:"正在接收 Windows CLI 的輸出…", uncertain:"提交結果不明，請按「更新」確認任務狀態，勿立即重送。" },
@@ -20,13 +20,24 @@ register("wincli", {
   "zh-TW": { newTask:"派送 Windows CLI 任務", taskHint:"選擇本機 CLI 與模型，在指定專案中執行任務。", ready:"CLI 已就緒", unavailable:"請先確認 CLI 已安裝並登入", model:"模型", defaultModel:"使用 CLI 預設模型", write:"使用本機 CLI 權限", writeHint:"依照此 CLI 的本機核准設定", writeHintClaude:"可修改工作目錄內的檔案；目錄外的寫入、會修改檔案的 Shell 指令與網路都會被拒絕（唯讀指令仍會執行）", noReadOnly:"此 CLI 無法保證唯讀，請明確選擇本機 CLI 權限。", noProviders:"沒有找到已安裝的 CLI。安裝後可重新偵測。" },
   en: { newTask:"Run a Windows CLI task", taskHint:"Choose a local CLI and model, then run a task in your project.", ready:"CLI is ready", unavailable:"Check that the CLI is installed and signed in", model:"Model", defaultModel:"Use the CLI default model", write:"Use native CLI permissions", writeHint:"Uses this CLI's local approval settings", writeHintClaude:"Edits files in the working directory; writes outside it, shell commands that change files and network access are denied (read-only commands still run)", noReadOnly:"This CLI cannot guarantee read-only access. Choose native CLI permissions explicitly.", noProviders:"No installed CLIs found. Detect again after installation." },
 });
+register("wincli", {
+  en: { remoteIntro:"Inspect CLIs and run a one-off task on the selected Windows computer.", offline:"This computer is offline. Showing its last reported inventory; reconnect its Runtime to detect or run tasks.", removed:"This Runtime is unavailable or no longer approved. Select another computer.", historyLoading:"Loading this computer's task status…", outcomePending:"A task outcome is unconfirmed. Reconnect this Runtime to reconcile before sending another task.", remoteHistory:"Latest 20 tasks on this computer", remoteWorkspace:"Selected Windows computer", remoteHint:"Choose this computer's CLI and model, then run a task in its working directory." },
+  "zh-TW": { remoteIntro:"查看所選 Windows 電腦的 CLI，並在該電腦執行一次性任務。", offline:"這台電腦已離線。目前顯示上次回報的清單；請重新連接該 Runtime，才能偵測或派送任務。", removed:"此 Runtime 無法使用或已不再核准，請選擇另一台電腦。", historyLoading:"正在讀取這台電腦的任務狀態…", outcomePending:"有任務的執行結果尚未確認，請重新連接該 Runtime 完成確認後再派工。", remoteHistory:"保留這台電腦最近 20 筆任務", remoteWorkspace:"所選 Windows 電腦", remoteHint:"選擇這台電腦的 CLI 與模型，在該電腦的工作目錄執行任務。" },
+});
+register("wincli", {
+  en: { testCli:"Test CLI", testHint:"Optional: send a one-off task to check execution on this computer.", closeKeepsTask:"Closing this window keeps submitted tasks running. Reopen this computer's diagnostics to check their status.", lastDetection:"Last detection: {0}", inventoryTitle:"Detected CLIs", neverDetection:"No detection recorded yet", modelsFound:"Models reported by this CLI", localDisabled:"This computer's Windows CLI access is disabled." },
+  "zh-TW": { testCli:"測試 CLI", testHint:"選用：送出一次性任務，確認這台電腦的 CLI 執行能力。", closeKeepsTask:"關閉視窗後，已提交的任務會繼續執行；重開這台電腦的診斷即可查看狀態。", lastDetection:"最近偵測：{0}", inventoryTitle:"偵測到的 CLI", neverDetection:"尚未有偵測紀錄", modelsFound:"此 CLI 回報的模型", localDisabled:"這台電腦的 Windows CLI 存取已停用。" },
+});
 const active = task => ["starting","running","cancelling"].includes(task.status);
 
-function CliCard({ cli, probing }) {
+function CliCard({ cli, probing, diagnostic = false }) {
   const signedIn = cli.authenticated === true;
   const checking = probing && !cli.path;
   const authKey = checking ? "checking" : !cli.path ? "missing" : signedIn ? "signedIn" : cli.authenticated === false ? "signedOut" : "unknown";
   const providerLabel = cli.company || ({codex:"OpenAI","claude-code":"Anthropic",antigravity:"Google",grok:"xAI","kiro-cli":"AWS",opencode:"Anomaly",muse:"Meta"})[cli.id];
+  if(diagnostic) return html`<details class="windows-cli-diagnostic-row"><summary><${CliProductMark} id=${cli.id} size=${24} /><strong>${cliLabel(cli.id)}</strong><span class="windows-cli-diagnostic-version">${cli.version || "—"}</span><span class=${`windows-cli-auth ${signedIn ? "tone-ready" : "tone-neutral"}`}><span class="windows-cli-dot"></span>${tn(authKey)}</span><${Icon} name="chevron" size=${16} /></summary>
+    <div class="windows-cli-diagnostic-facts"><span class=${`windows-cli-badge ${cli.runnable ? "tone-ready" : "tone-neutral"}`}>${tn(cli.runnable ? "available" : cli.supports?.execution === false ? "detectionOnly" : "unavailableBadge")}</span><dl><dt>${tn("path")}</dt><dd><code class="windows-cli-path">${cli.path || tn("missing")}</code></dd>${cli.models?.length ? html`<dt>${tn("modelsFound")}</dt><dd><ul class="windows-cli-model-list">${cli.models.map(model=>html`<li key=${model.id}><code>${model.id}</code>${model.label && model.label!==model.id ? html`<span>${model.label}</span>` : null}</li>`)}</ul></dd>` : null}</dl>${cli.reason ? html`<p class="note">${cli.reason}</p>` : null}</div>
+  </details>`;
   return html`<article class=${`windows-cli-provider is-${cli.id}`}>
     <div class="windows-cli-provider-head">
       <span class="windows-cli-brand"><${CliProductMark} id=${cli.id} size=${28} /></span>
@@ -46,23 +57,35 @@ function TaskResult({ task, latest, cancel }) {
     <summary><span class=${`windows-cli-task-state tone-${tone}`}><span class="windows-cli-dot"></span>${tn(task.status)}</span><time dateTime=${new Date(task.startedAt).toISOString()}>${new Date(task.startedAt).toLocaleTimeString([], { hour:"2-digit", minute:"2-digit" })}</time><${Icon} name="chevron" size=${16} /></summary>
     <code class="windows-cli-path windows-cli-task-cwd">${task.cwd}</code>
     <div class="windows-cli-task-detail"><span class="windows-cli-output-label"><${Icon} name="view" size=${14} />${tn("output")}</span><pre class="windows-cli-output" tabIndex="0">${task.output || tn(active(task) ? "waiting" : "noOutput")}</pre>${task.error ? html`<p class="error">${task.error}</p>` : null}
-      ${["starting","running"].includes(task.status) ? html`<button type="button" class="btn btn-sm btn-ghost danger" onClick=${() => cancel(task.id)}><${Icon} name="stop" size=${14} />${tn("cancel")}</button>` : null}
+      ${cancel && ["starting","running"].includes(task.status) ? html`<button type="button" class="btn btn-sm btn-ghost danger" onClick=${() => cancel(task.id)}><${Icon} name="stop" size=${14} />${tn("cancel")}</button>` : null}
     </div>
   </details>`;
 }
 
-export function WindowsCliPanel({ navKey, embedded = false }) {
+export function WindowsCliPanel({ navKey, embedded = false, machineId = "", machine, drafts, onInventoryChanged, diagnostic = false, enabled = true, session, taskLease }) {
   const lease = useLease(navKey);
-  const discovery = useWindowsCliCatalog();
+  const approved = enabled && (!machineId || ["online","offline"].includes(machine?.status));
+  const online = enabled && (!machineId || machine?.status === "online");
+  const discovery = useWindowsCliCatalog(approved,machineId);
+  const apiBase = machineId ? `/ui/runtimes/machines/${encodeURIComponent(machineId)}` : "/ui/windows-cli";
+  const initialDraft = drafts?.get(machineId) || {};
   const clis = discovery.data?.clis || [];
   const probing = discovery.loading;
-  const [tasks,setTasks] = useState([]), [cwd,setCwd] = useState("");
-  const [prompt,setPrompt] = useState(""), [sandbox,setSandbox] = useState("read-only");
-  const [selected,setSelected] = useState("codex"), [model,setModel] = useState("");
-  const [submitting,setSubmitting] = useState(false), [error,setError] = useState("");
-  const submission = useRef(null), claimed = useRef(false), readGeneration = useRef(0), polling = useRef(false);
-  const api = async (path,body) => {
-    const r = await lease.fetch(path, { credentials:"same-origin", ...(body === undefined ? {} : { method:"POST", headers:{ "Content-Type":"application/json" }, body:JSON.stringify(body) }) });
+  const [tasks,setTasks] = useState([]), [cwd,setCwd] = useState(initialDraft.cwd || "");
+  const [prompt,setPrompt] = useState(initialDraft.prompt || ""), [access,setAccess] = useState(initialDraft.access || "read-only");
+  const [selected,setSelected] = useState(initialDraft.selected || "codex"), [model,setModel] = useState(initialDraft.model || "");
+  // The page owns a send across diagnostic-dialog close/reopen. Closing never aborts a submitted POST.
+  const ownSession = useRef({requestId:null,pending:false,error:""});
+  const operation = session || ownSession.current;
+  const [submitting,setSubmitting] = useState(!!operation.requestId), [error,setError] = useState(operation.error || "");
+  const [testOpen,setTestOpen] = useState(initialDraft.testOpen || false);
+  const readGeneration = useRef(0), polling = useRef(false);
+  const [historyReady,setHistoryReady] = useState(false);
+  const latestDraft = useRef(null), directoryInitialized = useRef(!!initialDraft.cwd);
+  latestDraft.current = {cwd,prompt,access,selected,model,testOpen};
+  useEffect(() => () => { drafts?.set(machineId,latestDraft.current); },[drafts,machineId]);
+  const api = async (path,body,owner = lease) => {
+    const r = await owner.fetch(path, { credentials:"same-origin", ...(body === undefined ? {} : { method:"POST", headers:{ "Content-Type":"application/json" }, body:JSON.stringify(body) }) });
     const data = await r.json();
     if (!r.ok) { const e = new Error(data.error || `HTTP ${r.status}`); e.rejected = true; throw e; }
     return data;
@@ -70,38 +93,45 @@ export function WindowsCliPanel({ navKey, embedded = false }) {
   const refresh = async () => {
     const generation = ++readGeneration.current;
     try {
-      const data = await api("/ui/windows-cli/tasks");
+      const data = await api(`${apiBase}/tasks`);
       if (!lease.current() || generation !== readGeneration.current) return;
-      setTasks(data.tasks);
-      if (submission.current && data.tasks.some(task => task.id === submission.current)) { submission.current = null; claimed.current = false; setSubmitting(false); }
-    } catch (e) { if (lease.current()) setError(e.message); }
+      setTasks(data.tasks); setHistoryReady(true);
+      if (operation.requestId && data.tasks.some(task => task.id === operation.requestId)) { operation.requestId = null; operation.pending = false; operation.error = ""; }
+      setSubmitting(!!operation.requestId);
+      if(operation.error) setError(operation.error);
+    } catch (e) { if (lease.current() && generation === readGeneration.current) setError(e.message); }
   };
-  const probe = () => discovery.refresh();
-  useEffect(() => { if (!embedded) setTitle("Windows CLI"); void refresh(); },[lease]);
-  useEffect(() => { if (discovery.data) setCwd(old => old || discovery.data.home); },[discovery.data]);
+  const probe = async () => { if (!online || !approved) return; const result = await discovery.refresh(); if (result && lease.current()) onInventoryChanged?.(); };
+  useEffect(() => { if (!embedded) setTitle("Windows CLI"); if (approved) void refresh(); },[lease,approved,online]);
+  useEffect(() => { if (discovery.data?.home && !directoryInitialized.current) { directoryInitialized.current = true; setCwd(discovery.data.home); } },[discovery.data]);
   const running = tasks.some(active);
+  const uncertain = tasks.some(task => task.outcomeConfirmed === false);
   useEffect(() => {
-    if (!running) return;
+    if ((!running && !uncertain && !operation.requestId) || !online || !approved) return;
     const timer = lease.interval(async () => { if (polling.current) return; polling.current = true; try { await refresh(); } finally { polling.current = false; } },1000);
     return () => lease.clear(timer);
-  },[lease,running]);
+  },[lease,running,uncertain,online,approved,submitting]);
   const run = async () => {
-    if (claimed.current) return;
-    claimed.current = true; setSubmitting(true); setError("");
-    const input = { requestId:crypto.randomUUID(), cli:selected, ...(model.trim() ? {model:model.trim()} : {}), cwd:cwd.trim(), prompt, sandbox };
-    submission.current = input.requestId;
-    try { await api("/ui/windows-cli/tasks",input); }
+    if (operation.requestId || !online || !approved || !historyReady || running || uncertain) return;
+    const input = { requestId:crypto.randomUUID(), cli:selected, ...(model.trim() ? {model:model.trim()} : {}), cwd:cwd.trim(), prompt, sandbox:access };
+    operation.requestId = input.requestId; operation.pending = true; operation.error = "";
+    setSubmitting(true);setError("");
+    try { await api(`${apiBase}/tasks`,input,taskLease || lease); }
     catch (e) {
-      if (!lease.current()) return;
-      setError(e.rejected ? e.message : `${e.message}\n${tn("uncertain")}`);
-      if (e.rejected) { submission.current = null; claimed.current = false; setSubmitting(false); }
+      if(operation.requestId === input.requestId) {
+        operation.error = e.rejected ? e.message : `${e.message}\n${tn("uncertain")}`;
+        if(e.rejected) operation.requestId = null;
+        if (lease.current()) setError(operation.error || e.message);
+      }
+    } finally {
+      if(operation.requestId === input.requestId) operation.pending = false;
     }
     if (lease.current()) await refresh();
   };
-  const cancel = async id => { try { await api(`/ui/windows-cli/tasks/${id}/cancel`,{}); if (lease.current()) await refresh(); } catch(e) { if (lease.current()) setError(e.message); } };
+  const cancel = async id => { if (!online || !approved) return; try { await api(`${apiBase}/tasks/${id}/cancel`,{}); if (lease.current()) await refresh(); } catch(e) { if (lease.current()) setError(e.message); } };
   const current = clis.find(cli => cli.id === selected);
-  const permissionReady = sandbox !== "read-only" || current?.readOnlySupport !== false;
-  const runnable = current?.runnable === true && permissionReady;
+  const permissionReady = access !== "read-only" || current?.readOnlySupport !== false;
+  const runnable = current?.runnable === true && permissionReady && online && approved && historyReady && !uncertain;
   const providers = clis.filter(cli => cli.path);
   const choices = providers.filter(cli => cli.supports?.execution !== false).map(cli => ({value:cli.id,label:cliLabel(cli.id),disabled:!cli.runnable,description:cli.authenticated === false ? tn("signedOut") : cli.version || "Windows"}));
   useEffect(() => {
@@ -112,32 +142,38 @@ export function WindowsCliPanel({ navKey, embedded = false }) {
   },[clis]);
   return html`<div class=${embedded ? "p-windows-cli windows-cli-settings" : "panel p-windows-cli"}>${!embedded ? html`<${PanelHeader} title="Windows CLI" />` : null}
     <div class=${embedded ? "windows-cli-settings-body" : "panel-body"}><div class="windows-cli-content">
-      <header class="windows-cli-intro"><div><span class="windows-cli-eyebrow"><${Icon} name="view" size=${14} />${tn("native")}</span><h2>${tn("workspace")}</h2><p>${tn("intro")}</p></div>
-        <button type="button" class="btn windows-cli-probe" disabled=${probing} onClick=${probe}><${Icon} name="restart" size=${16} cls=${probing ? "windows-cli-spin" : ""} />${tn(probing ? "probing" : "probe")}</button>
+      <header class="windows-cli-intro"><div>${diagnostic ? html`<p>${discovery.data?.probedAt ? t("wincli.lastDetection",new Date(discovery.data.probedAt).toLocaleString()) : tn("neverDetection")}</p>` : html`<span class="windows-cli-eyebrow"><${Icon} name="view" size=${14} />${tn("native")}</span><h2>${tn(machineId ? "remoteWorkspace" : "workspace")}</h2><p>${tn(machineId ? "remoteIntro" : "intro")}</p>`}</div>
+        <button type="button" class="btn windows-cli-probe" disabled=${probing || !online || !approved} onClick=${probe}><${Icon} name="restart" size=${16} cls=${probing ? "windows-cli-spin" : ""} />${tn(probing ? "probing" : "probe")}</button>
       </header>
-      <${WindowsCliDiscoveryStatus} state=${discovery} />
-      <section class="windows-cli-cards" aria-label=${tn("providers")}>${providers.map(cli => html`<${CliCard} key=${cli.id} cli=${cli} probing=${probing} />`)}${discovery.data && !providers.length && !probing && !discovery.error ? html`<p class="note">${tn("noProviders")}</p>` : null}</section>
+      ${!diagnostic ? html`<${WindowsCliHostIdentity} inventory=${discovery.data} machineId=${machineId} machine=${machine} />` : null}
+      ${!approved || !online ? html`<p class="note" role="status">${tn(!enabled ? "localDisabled" : approved ? "offline" : "removed")}</p>` : null}
+      ${approved ? html`<${WindowsCliDiscoveryStatus} state=${{...discovery,refresh:probe}} disabled=${!online} />` : null}
+      <section class=${diagnostic ? "windows-cli-diagnostic-list" : "windows-cli-cards"} aria-label=${tn(diagnostic ? "inventoryTitle" : "providers")}>${providers.map(cli => html`<${CliCard} key=${cli.id} cli=${cli} probing=${probing} diagnostic=${diagnostic} />`)}${discovery.data && !providers.length && !probing && !discovery.error ? html`<p class="note">${tn("noProviders")}</p>` : null}</section>
       ${error ? html`<p class="error windows-cli-error" role="alert"><${Icon} name="alert" size=${18} /><span>${error}</span></p>` : null}
+      <details class=${diagnostic ? "windows-cli-test-disclosure" : "windows-cli-test-disclosure is-standalone"} open=${!diagnostic || testOpen || running || uncertain || submitting} onToggle=${event=>{if(event.target===event.currentTarget)setTestOpen(event.currentTarget.open);}}>
+        ${diagnostic ? html`<summary><${Icon} name="view" size=${19} /><span><strong>${tn("testCli")}</strong><small>${tn("testHint")}</small></span><${Icon} name="chevron" size=${16} /></summary>` : null}
       <div class="windows-cli-workbench">
-        <section class="windows-cli-card windows-cli-composer" aria-labelledby="windows-task-title"><div class="windows-cli-section-head"><span class="windows-cli-section-icon"><${Icon} name="edit" size=${19} /></span><div><h2 id="windows-task-title">${tn("newTask")}</h2><p>${tn("taskHint")}</p></div></div>
+        <section class="windows-cli-card windows-cli-composer" aria-labelledby="windows-task-title"><div class="windows-cli-section-head"><span class="windows-cli-section-icon"><${Icon} name="edit" size=${19} /></span><div><h2 id="windows-task-title">${tn("newTask")}</h2><p>${tn(machineId ? "remoteHint" : "taskHint")}</p></div></div>
           <form onSubmit=${e => { e.preventDefault(); if (runnable && !submitting && !running && cwd.trim() && prompt.trim()) void run(); }}>
             <div class="windows-cli-field"><label>CLI</label><${CliPicker} label="CLI" value=${selected} choices=${choices} disabled=${!choices.length || submitting || running} onChange=${value => { setSelected(value); setModel(""); }} /></div>
             <div class="windows-cli-field"><label for="windows-model">${tn("model")}</label><${ModelSelect} key=${selected} id="windows-model" value=${model} onChange=${setModel} catalogOverride=${current?.models || []} inherit=${tn("defaultModel")} /></div>
             <div class="windows-cli-field"><label for="windows-cwd">${tn("folder")}</label><input id="windows-cwd" class="windows-cli-directory" value=${cwd} placeholder="J:\\Project\\Game" aria-describedby="windows-cwd-hint" required spellcheck=${false} onInput=${e => setCwd(e.target.value)} /><p id="windows-cwd-hint">${tn("folderHint")}</p></div>
             <div class="windows-cli-field"><label for="windows-prompt">${tn("prompt")}</label><textarea id="windows-prompt" rows="5" value=${prompt} placeholder=${tn("promptPlaceholder")} required maxLength=${16384} onInput=${e => setPrompt(e.target.value)} /></div>
             <fieldset class="windows-cli-access"><legend>${tn("access")}</legend><div class="windows-cli-access-options">
-              ${[["read-only","readOnly","readHint","eye"],["workspace-write","write","writeHint","edit"]].map(([value,label,hint,icon]) => html`<label key=${value} class=${`windows-cli-access-option${sandbox === value ? " selected" : ""}`}><input type="radio" name="windows-sandbox" value=${value} checked=${sandbox === value} disabled=${value === "read-only" && current?.readOnlySupport === false} onChange=${() => setSandbox(value)} /><span><strong><${Icon} name=${icon} size=${15} />${tn(label)}</strong><small>${tn(value === "workspace-write" && current?.id === "claude-code" ? "writeHintClaude" : hint)}</small></span></label>`)}
+              ${[["read-only","readOnly","readHint","eye"],["workspace-write","write","writeHint","edit"]].map(([value,label,hint,icon]) => html`<label key=${value} class=${`windows-cli-access-option${access === value ? " selected" : ""}`}><input type="radio" name="windows-sandbox" value=${value} checked=${access === value} disabled=${value === "read-only" && current?.readOnlySupport === false} onChange=${() => setAccess(value)} /><span><strong><${Icon} name=${icon} size=${15} />${tn(label)}</strong><small>${tn(value === "workspace-write" && current?.id === "claude-code" ? "writeHintClaude" : hint)}</small></span></label>`)}
             </div></fieldset>
             ${!permissionReady ? html`<p class="note">${tn("noReadOnly")}</p>` : null}
             <details class="windows-cli-policy"><summary><${Icon} name="info" size=${14} />${tn("policy")}<${Icon} name="chevron" size=${14} /></summary><p>${tn("policyText")}</p></details>
-            <div class="windows-cli-submit"><span class=${`windows-cli-readiness ${runnable && !running ? "tone-ready" : "tone-neutral"}`} role="status"><span class="windows-cli-dot"></span>${tn(running ? "busy" : runnable ? "ready" : "unavailable")}</span><button type="submit" class="btn btn-primary" disabled=${!runnable || submitting || running || !cwd.trim() || !prompt.trim()}><${Icon} name=${submitting ? "clock" : "play"} size=${16} />${tn(submitting ? "submitting" : "run")}</button></div>
+            <div class="windows-cli-submit"><span class=${`windows-cli-readiness ${runnable && !running ? "tone-ready" : "tone-neutral"}`} role="status"><span class="windows-cli-dot"></span>${tn(uncertain ? "outcomePending" : !historyReady ? "historyLoading" : running ? "busy" : runnable ? "ready" : "unavailable")}</span><button type="submit" class="btn btn-primary" disabled=${!runnable || submitting || running || !cwd.trim() || !prompt.trim()}><${Icon} name=${submitting ? "clock" : "play"} size=${16} />${tn(submitting ? "submitting" : "run")}</button></div>
             <p class="windows-cli-limits"><${Icon} name="clock" size=${13} />${tn("taskLimits")}</p>
           </form>
         </section>
         <section class="windows-cli-card windows-cli-history" aria-labelledby="windows-history-title"><div class="windows-cli-section-head"><span class="windows-cli-section-icon"><${Icon} name="clock" size=${19} /></span><div><h2 id="windows-history-title">${tn("results")} <span class="windows-cli-count">${tasks.length}</span></h2><p>${tn("historyHint")}</p></div><button type="button" class="icon-btn" aria-label=${tn("refresh")} title=${tn("refresh")} onClick=${refresh}><${Icon} name="restart" size=${16} /></button></div>
-          <div class="windows-cli-task-list">${!tasks.length ? html`<div class="windows-cli-empty"><span><${Icon} name="view" size=${28} /></span><h3>${tn("empty")}</h3><p>${tn("emptyHint")}</p></div>` : tasks.map((task,index) => html`<${TaskResult} key=${task.id} task=${task} cancel=${cancel} latest=${index === 0} />`)}</div>
-          <p class="windows-cli-history-note">${tn("historyNote")}</p>
+          <div class="windows-cli-task-list">${!tasks.length ? html`<div class="windows-cli-empty"><span><${Icon} name="view" size=${28} /></span><h3>${tn("empty")}</h3><p>${tn("emptyHint")}</p></div>` : tasks.map((task,index) => html`<${TaskResult} key=${task.id} task=${task} cancel=${online && approved ? cancel : null} latest=${index === 0} />`)}</div>
+          <p class="windows-cli-history-note">${tn(machineId ? "remoteHistory" : "historyNote")}</p>
         </section>
       </div>
+      ${diagnostic ? html`<p class="windows-cli-close-note"><${Icon} name="info" size=${15} />${tn("closeKeepsTask")}</p>` : null}
+      </details>
     </div></div></div>`;
 }

package/dist/ui/settings-agent-filters.js

@@ -0,0 +1,94 @@
+// View-only Agent list filters. They never stage settings or read another endpoint.
+import { html } from "/assets/app-html.js";
+import { register, t } from "/assets/app-i18n.js";
+import { instanceMachineId } from "./runtime-catalog.js";
+
+register("agentFilters", {
+  en: {
+    title: "Filter Agents", runtime: "Runtime", status: "Status", allRuntimes: "All Runtimes", allStatuses: "All statuses",
+    wsl: "WSL / Linux", local: "Windows local", remote: "Windows remote", machine: "{0} · Windows remote", unknownRuntime: "Unknown Runtime",
+    revokedMachine: "{0} · revoked", revokedComputer: "Revoked computer · {0}", unknownComputer: "Unknown computer · {0}",
+    machineGone: "This computer is no longer connected. Open the Agent's settings and change its Runtime. ({0})",
+    running: "Running", paused: "Paused", stopped: "Stopped", crashed: "Crashed", unknown: "Unknown status", offline: "Runtime offline",
+    results: "Showing {0} of {1} Agents", clear: "Clear filters", noMatch: "No matching Agents", noMatchHint: "Try a different search, Runtime, or status.",
+  },
+  "zh-TW": {
+    title: "篩選 Agent", runtime: "Runtime", status: "狀態", allRuntimes: "所有 Runtime", allStatuses: "所有狀態",
+    wsl: "WSL / Linux", local: "Windows 本機", remote: "Windows 遠端", machine: "{0} · Windows 遠端", unknownRuntime: "未知 Runtime",
+    revokedMachine: "{0} · 已撤銷", revokedComputer: "已撤銷的電腦 · {0}", unknownComputer: "未知電腦 · {0}",
+    machineGone: "這台電腦已不再連線。請開啟 Agent 設定，變更 Runtime。（{0}）",
+    running: "執行中", paused: "已暫停", stopped: "已停止", crashed: "已當掉", unknown: "未知狀態", offline: "Runtime 離線",
+    results: "顯示 {0} / {1} 個 Agent", clear: "清除篩選", noMatch: "沒有符合條件的 Agent", noMatchHint: "請調整搜尋、Runtime 或狀態。",
+  },
+});
+export const agentFilterText = (key, ...values) => t(`agentFilters.${key}`, ...values);
+const STATUSES = ["running", "paused", "stopped", "crashed"];
+
+/** A computer is named by what the Runtime page shows; only an id that names no computer is shown as (the start of) the id. */
+const shortId = (id) => String(id).slice(0, 8);
+/**
+ * One computer's label. `found` is false once the computer list has loaded and has no such computer; until then (or when
+ * the list cannot be read) an unnamed one is simply "Windows remote" rather than a claim that it is gone.
+ */
+export function machineLabel(id, name, status, found = true) {
+  if (name) return { label: agentFilterText(status === "revoked" ? "revokedMachine" : "machine", name), title: status === "revoked" ? agentFilterText("machineGone", id) : name, gone: status === "revoked" };
+  if (status === "revoked") return { label: agentFilterText("revokedComputer", shortId(id)), title: agentFilterText("machineGone", id), gone: true };
+  if (!found) return { label: agentFilterText("unknownComputer", shortId(id)), title: agentFilterText("machineGone", id), gone: true };
+  return { label: agentFilterText("remote"), title: id, gone: false };
+}
+/** Missing runtime is the configured WSL default; invalid explicit values are not WSL. `machines` (id → {name, status}) is the loaded computer list, or null. */
+export function agentRuntime(inst, live, machines = null) {
+  if (inst?.runtime === undefined || inst?.runtime === "wsl") return { kind: "wsl", machineId: "", label: agentFilterText("wsl") };
+  if (inst?.runtime !== "windows") return { kind: "unknown", machineId: "", label: agentFilterText("unknownRuntime") };
+  const id = instanceMachineId(inst);
+  if (id && typeof id !== "string") return { kind: "unknown", machineId: "", label: agentFilterText("unknownRuntime") };
+  if (!id) return { kind: "windows-local", machineId: "", label: agentFilterText("local") };
+  const sameLive = instanceMachineId(live) === id, row = machines?.get(id);
+  const name = inst.machine_name || (sameLive ? live?.machine_name : "") || row?.name || "";
+  const status = (sameLive ? live?.machine_status : "") === "revoked" || row?.status === "revoked" ? "revoked" : row?.status || (sameLive ? live?.machine_status : "");
+  return { kind: "windows-remote", machineId: id, ...machineLabel(id, name, status, !machines || !!row || !!name) };
+}
+
+/** Unknown/unreadable snapshots must not be reported as stopped. */
+export function agentStatus(live) {
+  return STATUSES.includes(live?.status) ? live.status : "unknown";
+}
+export const agentRuntimeOffline = (inst, live) => agentRuntime(inst, live).kind === "windows-remote" && live?.machine_status === "offline";
+
+/** Search and grouping have already run; preserve their ordering and group identities. */
+export function filterAgentGroups(groups, instances, live, { runtime = "", status = "" } = {}) {
+  return groups.map((group) => ({ ...group, names: group.names.filter((name) => {
+    const target = agentRuntime(instances[name], live[name]);
+    const matchesRuntime = !runtime || (runtime.startsWith("machine:") ? target.machineId === runtime.slice(8) && target.kind === "windows-remote" : target.kind === runtime);
+    const matchesStatus = !status || (status === "runtime-offline" ? agentRuntimeOffline(instances[name], live[name]) : agentStatus(live[name]) === status);
+    return matchesRuntime && matchesStatus;
+  }) })).filter((group) => group.names.length);
+}
+
+export function AgentFilters({ instances, live, machines = null, runtime, status, matched, total, active, onRuntime, onStatus, onClear }) {
+  const labels = new Map();
+  let unknownRuntime = runtime === "unknown", offline = status === "runtime-offline";
+  for (const [name, inst] of Object.entries(instances)) {
+    const target = agentRuntime(inst, live[name], machines);
+    if (target.machineId) labels.set(target.machineId, target.label);
+    if (target.kind === "unknown") unknownRuntime = true;
+    if (agentRuntimeOffline(inst, live[name])) offline = true;
+  }
+  // Preserve a selected machine across a snapshot/config refresh instead of silently selecting another Runtime.
+  if (runtime.startsWith("machine:") && !labels.has(runtime.slice(8))) labels.set(runtime.slice(8), machineLabel(runtime.slice(8), "", "", false).label);
+  return html`<div class="s-agent-filters" role="group" aria-label=${agentFilterText("title")}>
+    <div class="s-agent-filter-controls">
+      <label><span>${agentFilterText("runtime")}</span><select value=${runtime} onChange=${(event) => onRuntime(event.target.value)}>
+        <option value="">${agentFilterText("allRuntimes")}</option><option value="wsl">${agentFilterText("wsl")}</option><option value="windows-local">${agentFilterText("local")}</option><option value="windows-remote">${agentFilterText("remote")}</option>
+        ${[...labels].sort((a, b) => a[1].localeCompare(b[1])).map(([id, label]) => html`<option key=${id} value=${`machine:${id}`}>${label}</option>`)}
+        ${unknownRuntime ? html`<option value="unknown">${agentFilterText("unknownRuntime")}</option>` : null}
+      </select></label>
+      <label><span>${agentFilterText("status")}</span><select value=${status} onChange=${(event) => onStatus(event.target.value)}>
+        <option value="">${agentFilterText("allStatuses")}</option>${[...STATUSES, "unknown"].map((value) => html`<option key=${value} value=${value}>${agentFilterText(value)}</option>`)}
+        ${offline ? html`<option value="runtime-offline">${agentFilterText("offline")}</option>` : null}
+      </select></label>
+      <button type="button" class="btn btn-sm s-agent-filter-clear" disabled=${!active} onClick=${onClear}>${agentFilterText("clear")}</button>
+    </div>
+    <p class="s-agent-filter-count" role="status" aria-live="polite">${agentFilterText("results", matched, total)}</p>
+  </div>`;
+}

package/dist/ui/settings-appearance.js

@@ -5,6 +5,8 @@ import { html, useEffect, useRef, useState } from "/assets/app-html.js";
 import { register, t } from "/assets/app-i18n.js";
 import { recordEdit } from "/assets/text-undo.js";
 import { appStore, useStore } from "/assets/app-store.js";
+// #2978 merge: from their own module, never from the long-lived shell (a stale tab's shell lacks them).
+import { DEFAULT_SETTINGS_CONTENT_WIDTH, SETTINGS_CONTENT_WIDTHS, settingsContentWidthStore, setSettingsContentWidth } from "/assets/settings-width.js";
 import { ModsCard } from "./settings-mods.js";
 import { Icon } from "/assets/ui-icons.js";
 import { toast } from "/assets/ui-toast.js";
@@ -22,6 +24,22 @@ import { CardTitle } from "./settings-learn.js";
 import "./settings-strings.js";
 
 const tn = (k, ...v) => t(`settings.${k}`, ...v);
+register("settingsContentWidth", {
+  en: {
+    label: "Settings content width",
+    device: "This device · saves immediately",
+    hint: "Applies to every Settings page; adapts to narrow windows.",
+    option: "{0} px",
+    defaultOption: "{0} px (default)",
+  },
+  "zh-TW": {
+    label: "設定頁內容寬度",
+    device: "此裝置・立即儲存",
+    hint: "套用到所有設定頁；窄視窗會自動配合可用空間。",
+    option: "{0} px",
+    defaultOption: "{0} px（預設）",
+  },
+});
 /** #2390: a refusal's detail in the page's language when the host named it (detail_key), else its English as sent. */
 export function appIconDetail(body) {
   const key = body && typeof body.detail_key === "string" ? `appIconDetail_${body.detail_key}` : null;
@@ -61,16 +79,85 @@ export function AppearanceSection(props = {}) {
   const part = props.part || "look";
   const publicLink = typeof document !== "undefined" && document.body && document.body.dataset.publicLink === "1";
   // #2347 regrouping: Look (the person's own), this device's switches (in Preferences) and the host-wide cards (in Web
-  // dashboard) are drawn where each belongs. None of it is offered over the public link (Look says so).
-  if (publicLink) return part === "look" ? html`<section class="card s-appearance"><h3>${tn("cssTitle")}</h3><p class="sub">${tn("cssPublicLink")}</p></section>` : null;
+  // dashboard) are drawn where each belongs. Public Look keeps the existing browser-only theme choice; customization stays unavailable there.
+  if (publicLink) return part === "look" ? html`<div class="s-look-workspace s-look-public"><div class="s-look-main">
+    <${ThemeModeCard} publicLink=${true} />
+    <section class="card s-appearance"><h3>${tn("cssTitle")}</h3><p class="sub">${tn("cssPublicLink")}</p></section>
+  </div></div>` : null;
   if (part === "device") return html`<${MotionCard} ...${props} /><${DeviceCard} ...${props} />`;
-  if (part === "dashboard") return html`<${AppIconCard} /><${CardLimitsCard} />`;
-  const group = (key) => html`<h2 class="s-ap-group">${tn(key)}</h2>`;
-  return html`${group("groupLook")}<${ThemesCard} ...${props} /><${IdentityColorCard} /><${CardSizeCard} />
-    ${group("groupLayout")}<${SidebarWidgetCard} />
-    ${group("groupCss")}<${OwnerCssCard} />
-    ${group("groupMods")}<${ModsCard} />
-    <${RestoreDefaultsCard} ...${props} />`;
+  if (part === "dashboard") return html`<${AppIconCard} /><details class="s-look-disclosure s-dashboard-limits"><summary><${Icon} name="sliders" size=${17} /><span>${tn("cardLimitsTitle")}</span><${Icon} name="chevron" size=${16} /></summary><div class="s-look-disclosure-body"><${CardLimitsCard} /></div></details>`;
+  return html`<div class="s-look-workspace">
+    <div class="s-look-basics">
+    <div class="s-look-main">
+      <${ThemeModeCard} />
+      <section class="card s-appearance s-look-identity"><h3>${tn("lookIdentityGroup")}</h3>
+        <div class="s-look-identity-controls"><${CardSizeCard} /><${IdentityColorCard} /></div>
+      </section>
+      <section class="card s-appearance s-look-motion"><${CardTitle} title=${tn("lookMotionGroup")} topic="themes" />
+        <${ThemesCard} compact=${true} ...${props} /><${MotionCard} compact=${true} ...${props} />
+      </section>
+    </div>
+    <${AppearancePreview} />
+    </div>
+    <div class="s-look-advanced">
+      <${AppearanceDisclosure} title=${tn("widgetTitle")} icon="sliders"><${SidebarWidgetCard} /></${AppearanceDisclosure}>
+      <${AppearanceDisclosure} title=${tn("cssTitle")} icon="code"><${OwnerCssCard} /><${DeviceCard} ...${props} /></${AppearanceDisclosure}>
+      <${AppearanceDisclosure} title=${tn("modsTitle")} icon="plug"><${ModsCard} /></${AppearanceDisclosure}>
+      <${AppearanceDisclosure} title=${tn("restoreTitle")} icon="restart" danger=${true}><${RestoreDefaultsCard} ...${props} /></${AppearanceDisclosure}>
+    </div>
+  </div>`;
+}
+
+/** Theme remains a normal personal preference, including the public dashboard's existing browser-only choice. */
+function ThemeModeCard({ publicLink = false }) {
+  const [theme, setTheme] = useState(typeof AgendTheme !== "undefined" ? AgendTheme.get() : "system");
+  useEffect(() => (typeof AgendTheme !== "undefined" && typeof AgendTheme.onChange === "function" ? AgendTheme.onChange(setTheme) : undefined), []);
+  const choose = (value) => { setTheme(value); if (typeof AgendTheme !== "undefined") AgendTheme.set(value); savePref("theme", value); };
+  return html`<section class="card s-appearance s-look-display"><h3>${tn("lookDisplayGroup")}</h3>
+    <fieldset id="pref-theme" class="s-theme-picker"><legend>${t("app.theme")}</legend><div class="s-theme-options">
+      ${[["light", "themeLight"], ["dark", "themeDark"], ["system", "themeSystem"]].map(([value, key]) => html`<label key=${value} class=${`s-theme-choice${theme === value ? " selected" : ""}`}>
+        <input type="radio" name="pref-theme-choice" value=${value} checked=${theme === value} onChange=${(event) => { if (event.currentTarget.checked) choose(value); }} />
+        <span class=${`s-theme-miniature is-${value}`} aria-hidden="true"><span class="s-theme-mini-side"><i></i><i></i><i></i></span><span class="s-theme-mini-main"><i></i><i></i><i></i></span></span>
+        <span class="s-theme-choice-label">${t(`app.${key}`)}</span>
+      </label>`)}
+    </div></fieldset>
+    <${SettingsContentWidth} />
+    ${publicLink ? html`<p class="sub">${tn("syncedPublicLink")}</p>` : null}
+  </section>`;
+}
+
+/** This device's layout choice is independent of the Settings Save/Discard bar. */
+function SettingsContentWidth() {
+  const { width } = useStore(settingsContentWidthStore);
+  return html`<div class="s-settings-content-width">
+    <label for="settings-content-width">${t("settingsContentWidth.label")}<span class="s-scope">${t("settingsContentWidth.device")}</span></label>
+    <select id="settings-content-width" value=${width} aria-describedby="settings-content-width-hint" onChange=${(event) => setSettingsContentWidth(Number(event.currentTarget.value))}>
+      ${SETTINGS_CONTENT_WIDTHS.map((value) => html`<option key=${value} value=${value}>${t(`settingsContentWidth.${value === DEFAULT_SETTINGS_CONTENT_WIDTH ? "defaultOption" : "option"}`, value)}</option>`)}
+    </select>
+    <p id="settings-content-width-hint" class="sub">${t("settingsContentWidth.hint")}</p>
+  </div>`;
+}
+
+/** The panels stay mounted inside native details, so drafts, CSS trials and deep links survive disclosure changes. */
+function AppearanceDisclosure({ title, icon, danger = false, children }) {
+  return html`<details class=${`s-look-disclosure${danger ? " is-restore" : ""}`}>
+    <summary><${Icon} name=${icon} size=${17} /><span>${title}</span><${Icon} name="chevron" size=${16} /></summary>
+    <div class="s-look-disclosure-body">${children}</div>
+  </details>`;
+}
+
+/** This preview uses the same live colour and default-size preferences as the existing controls. */
+function AppearancePreview() {
+  useIdentityColors();
+  useStore(cardSizeStore);
+  const size = cardSizeDefault();
+  return html`<aside class="card s-look-preview" aria-labelledby="look-preview-title">
+    <h3 id="look-preview-title">${tn("lookPreview")}</h3>
+    <p class="sub">${tn("lookPreviewHint")}</p>
+    <div class="s-look-sidebar-sample"><${ColorSample} places=${defaultPlaces()} off=${colorsOff()} /></div>
+    <div class=${`s-look-card-sample is-${size}`} aria-hidden="true"><span class="s-look-preview-avatar">A</span>
+      <strong>${tn("colorSample")}</strong><span>${tn("cardSizeTitle")} · ${t(`card.size${size.toUpperCase()}Name`)}</span></div>
+  </aside>`;
 }
 
 /** #2347: the staged keys of this device's own switches (Restore defaults sets them, so their staged change goes). */
@@ -106,17 +193,23 @@ function IdentityColorCard() {
   useIdentityColors();
   const places = defaultPlaces(), off = colorsOff();
   const toggle = (p) => setDefaultPlaces(places.includes(p) ? places.filter((x) => x !== p) : [...places, p]);
-  return html`<section class="card s-appearance s-synced s-colors"><${CardTitle} title=${tn("colorTitle")} topic="colors" />
-    <p class="sub">${tn("colorLead")}</p>
-    <div class="s-colors-row">
-      <fieldset class="idc-places" disabled=${off}><legend>${tn("colorPlaces")}</legend>
-        ${PLACEMENTS.map((p) => html`<label key=${p} class="check"><input type="checkbox" checked=${places.includes(p)} onChange=${() => toggle(p)} /> ${t(`color.place_${p}`)}</label>`)}
-      </fieldset>
-      <${ColorSample} places=${places} off=${off} />
+  return html`<details class="card s-appearance s-synced s-colors"><summary class="s-color-summary">
+    <${CardTitle} title=${tn("colorTitle")} topic="colors" />
+    <span class="s-color-summary-places">${off ? html`<span>${tn("colorOff")}</span>` : places.map((p) => html`<span key=${p}>${t(`color.place_${p}`)}</span>`)}</span>
+    <${Icon} name="chevron" size=${16} />
+    </summary>
+    <div class="s-color-settings">
+      <p class="sub">${tn("colorLead")}</p>
+      <div class="s-colors-row">
+        <fieldset class="idc-places" disabled=${off}><legend>${tn("colorPlaces")}</legend>
+          ${PLACEMENTS.map((p) => html`<label key=${p} class="check"><input type="checkbox" checked=${places.includes(p)} onChange=${() => toggle(p)} /> ${t(`color.place_${p}`)}</label>`)}
+        </fieldset>
+        <${ColorSample} places=${places} off=${off} />
+      </div>
+      <label class="check"><input type="checkbox" class="s-colors-off" checked=${off} onChange=${(e) => setColorsOff(e.target.checked)} /> <span>${tn("colorOff")}</span></label>
+      <p class="sub">${tn("colorOffLead")}</p>
     </div>
-    <label class="check"><input type="checkbox" class="s-colors-off" checked=${off} onChange=${(e) => setColorsOff(e.target.checked)} /> <span>${tn("colorOff")}</span></label>
-    <p class="sub">${tn("colorOffLead")}</p>
-  </section>`;
+  </details>`;
 }
 
 /**
@@ -233,7 +326,7 @@ function AppIconCard() {
     if (auth && auth.canWrite) Promise.resolve(auth.canWrite()).then((v) => setCanWrite(v === true), () => {});
   }, []);
   useEffect(() => () => { if (picked) URL.revokeObjectURL(picked.url); }, [picked]);
-  const title = html`<${CardTitle} title=${tn("appIconTitle")} topic="app-icon" />`;
+  const title = html`<div class="s-app-icon-heading"><h3 class="s-brand-title">${tn("lookBrandGroup")}</h3><${CardTitle} title=${tn("appIconTitle")} topic="app-icon" /></div>`;
   if (!state) return html`<section class="card s-appearance s-app-icon">${title}<p class="sub">…</p></section>`;
   if (state.failed) return html`<section class="card s-appearance s-app-icon">${title}<p class="err">${tn("appIconLoadFailed")}</p></section>`;
 
@@ -290,7 +383,7 @@ function AppIconCard() {
       ${state.custom && !picked ? html`<button type="button" class="btn" disabled=${busy} onClick=${reset}>${tn("appIconReset")}</button>` : null}
     </div>` : html`<p class="sub">${tn("appIconReadOnly")}</p>`}
     <p class="sub">${tn("appIconWho")}</p>
-    <p class="sub">${tn("appIconIos")}</p>
+    <details class="s-app-icon-help"><summary>${tn("lookIconMore")}</summary><p class="sub">${tn("appIconIos")}</p></details>
   </section>`;
 }
 
@@ -335,7 +428,7 @@ function CardLimitsCard() {
     if (r.ok) { setMsg(tn("cardLimitsSaved")); load(); } else setMsg(tn("cardLimitsFailed", (r.body && r.body.error) || r.status));
   };
   const warnings = Array.isArray(view.warnings) ? view.warnings : [];
-  return html`<section class="card s-appearance"><${CardTitle} title=${tn("cardLimitsTitle")} topic="limits" />
+  return html`<section class="card s-appearance s-card-limits"><${CardTitle} title=${tn("cardLimitsTitle")} topic="limits" />
     <p class="sub">${tn("cardLimitsLead")}</p>
     <fieldset class="form" disabled=${busy}>
       ${["portrait", "banner", "instance_quota"].map((g) => html`<div key=${g} class="grid3">
@@ -355,8 +448,11 @@ function CardLimitsCard() {
 }
 
 /** #1629 r2 (d): whether this person's screens show agents' themes (and, as they come, effects) — synced. */
-function ThemesCard() {
+function ThemesCard({ compact = false } = {}) {
   const s = useStore(themesStore);
+  if (compact) return html`<div class="s-look-toggle-line s-themes"><label for="fx-show-themes">${tn("themesShow")}</label>
+    <input id="fx-show-themes" class="s-ui-toggle" type="checkbox" checked=${s.shown} disabled=${safeMode()} onChange=${(e) => setThemesShown(e.target.checked)} />
+    <p class="sub">${safeMode() ? tn("themesSafeMode") : tn("themesShowLead")}</p></div>`;
   return html`<section class="card s-appearance s-synced s-themes"><${CardTitle} title=${tn("themesTitle")} topic="themes" />
     <label class="check"><input id="fx-show-themes" type="checkbox" checked=${s.shown} disabled=${safeMode()} onChange=${(e) => setThemesShown(e.target.checked)} />
       <span>${tn("themesShow")}</span></label>
@@ -510,6 +606,9 @@ function MotionCard(props = {}) {
   const [follow, setFollow] = useState(followsReducedMotion);
   useEffect(() => onMotionChange(() => setFollow(followsReducedMotion())), []);
   const setFollowHere = deviceChoice(props, DEVICE_CHOICES[0], tn("themesFollowMotion"), followsReducedMotion, setFollowsReducedMotion);
+  if (props.compact) return html`<div class="s-look-toggle-line s-motion"><label for="fx-follow-reduced-motion">${tn("themesFollowMotion")}<span class="s-scope">${tn("cssDeviceTitle")}</span></label>
+    <input type="checkbox" class="s-ui-toggle" id="fx-follow-reduced-motion" checked=${follow} onChange=${(e) => setFollowHere(e.target.checked)} />
+    <p class="sub">${tn("themesFollowMotionLead")}</p></div>`;
   return html`<section class="card s-appearance s-local s-motion"><h3>${tn("motionTitle")}</h3>
     <label class="check"><input type="checkbox" id="fx-follow-reduced-motion" checked=${follow} onChange=${(e) => setFollowHere(e.target.checked)} />
       <span>${tn("themesFollowMotion")}</span></label>

package/dist/ui/settings-dialogs.js

@@ -17,6 +17,7 @@ import { startOperation } from "./settings-apply.js";
 import { goToTarget } from "./settings-registry.js";
 import { sectionPath } from "/assets/app-route.js";
 import { backendLabel } from "/assets/instance-nav.js";
+import {AgentRuntimeSettings} from "./agent-runtime-settings.js";
 import "./settings-strings.js";   // its words, wherever a picker of this file is used (#2072: Fleet's create dialog too)
 import { backendChoices, modelChoices, OTHER_MODEL, useBackendRows, useModelCatalogState } from "./settings-catalog.js";
 import {
@@ -146,9 +147,9 @@ export function ChipList({ items, onChange, placeholder, label }) {
 const replyHint = (backend, mode, kiroUi) => (replyGuardSupported(backend, mode, kiroUi) ? tn("replyGuardSupported") : tn("replyGuardUnsupported", backend, mode));
 
 /** The dialog every editor uses: Cancel / Stage change; the footer says what the changes made so far will cost (#2346: only the fields that changed). */
-function EditDialog({ title, subtitle, onClose, onStage, impacts, schema, children, ready = true, wide = true }) {
+function EditDialog({ title, subtitle, onClose, onStage, impacts, schema, children, ready = true, wide = true, drawer = false }) {
   const kinds = [...new Set((impacts || []).map((f) => impactOf(schema, f)))];
-  return html`<${Dialog} title=${title} label=${subtitle ? `${title} — ${subtitle}` : title} onClose=${onClose} wide=${wide}
+  return html`<${Dialog} title=${title} label=${subtitle ? `${title} — ${subtitle}` : title} onClose=${onClose} wide=${wide} drawer=${drawer}
     actions=${html`${kinds.length ? html`<span class="note dlg-impact">${kinds.map(impactText).join(" · ")}</span>` : null}
       <button type="button" class="btn" onClick=${onClose}>${tn("cancel")}</button>
       <button type="button" class="btn btn-primary" disabled=${!ready} onClick=${onStage}>${tn("modalDone")}</button>`}>
@@ -302,14 +303,13 @@ export function AgentDialog({ name, inst, ctx, onClose }) {
   const inh = (k, value, target, kind, set = hasOwn(defaults, k)) => ({ text: valueText(value, kind), builtin: !set, from: target ? inAgentDefaults(target) : null });
   const inheritedBackend = !inst.backend && f.backend === (defaults.backend || "claude-code");
   const L = (text, field, id) => html`<${Label} text=${text} schema=${schema} field=${field} htmlFor=${id} />`;
-  return html`<${EditDialog} title=${ctx.shortName(name, inst)} subtitle=${tn("idLine", name)} onClose=${onClose} onStage=${stage} ready=${ready} impacts=${Object.keys(pending()).map((k) => `instance.${k}`)} schema=${schema}>
+  return html`<${EditDialog} title=${ctx.shortName(name, inst)} subtitle=${tn("idLine", name)} onClose=${onClose} onStage=${stage} ready=${ready} drawer=${true} impacts=${Object.keys(pending()).map((k) => `instance.${k}`)} schema=${schema}>
+    <${AgentRuntimeSettings} name=${name} inst=${{...inst,backend:f.backend}} inherited=${inheritedBackend ? html`<${Inherited} ...${inh("backend", f.backend, "#g-be", "backend")} />` : null} disabled=${Object.keys(pending()).length>0||ctx.staged?.size>0} onChanged=${()=>{ctx.reload();onClose();}}/>
     <div class="grid2">
       <div class="field">${L(tn("displayName"), "instance.display_name", "ag-dn")}
         <${Override} inherit=${f.inherit.display_name} onInherit=${setInherit("display_name")} inherited=${inh("display_name", defaults.display_name || name, null, "", !!defaults.display_name)}>
           <input id="ag-dn" type="text" placeholder=${name} disabled=${f.inherit.display_name} value=${shown("display_name", f.display_name, defaults.display_name || "")} onInput=${(e) => set("display_name")(e.target.value)} /></${Override}></div>
       <div class="field">${L(tn("description"), "instance.description", "ag-desc")}<input id="ag-desc" type="text" value=${f.description} onInput=${(e) => set("description")(e.target.value)} /></div>
-      <div class="field">${L(tn("backend"), "instance.backend", "ag-be")}<${BackendSelect} id="ag-be" value=${f.backend} onChange=${set("backend")} />
-        ${inheritedBackend ? html`<${Inherited} ...${inh("backend", f.backend, "#g-be", "backend")} />` : null}</div>
       <div class="field">${L(tn("model"), "instance.model", "ag-model")}<${ModelSelect} id="ag-model" value=${f.model} onChange=${set("model")}
         backend=${f.backend || defaults.backend || "claude-code"} instance=${name} inherit=${tn("inheritValue", defaults.model || tn("modelCliDefault"))} /></div>
     </div>