reasonix 0.30.5 → 0.32.0

package/dashboard/dist/app.js

@@ -19264,8 +19264,36 @@ var en = {
     effortHigh: "high (cheaper / faster)",
     webSearch: "web search",
     webSearchNote: "web_fetch + web_search tools",
+    sectionCompute: "Compute",
+    proNext: "/pro one-shot",
+    proArm: "Arm for next turn",
+    proArmed: "Armed \u2014 disarms after next turn",
+    proNextNote: "next turn runs on deepseek-v4-pro, then auto-disarms",
+    sectionBudget: "Budget",
+    budgetOf: "of",
+    budgetSetCap: "set a cap",
+    budgetCustom: "custom",
+    budgetBumpHint: "bump the cap to keep going",
+    budgetClear: "Clear cap",
+    budgetIdleLine: "warns at 80% \xB7 refuses past 100%",
+    budgetWarnLine: "approaching cap \u2014 loop will refuse past 100%",
+    budgetRefusing: "cap exhausted \u2014 next turn refused until bumped or cleared",
+    sectionLoop: "Loop",
+    loopIdleHint: "Auto-resubmit a prompt on a fixed interval.",
+    loopCostHint: "Each iteration costs ~{cost} (last turn).",
+    loopInterval: "interval",
+    loopCustom: "custom",
+    loopRangeError: "interval must fall in 5s..6h",
+    loopPrompt: "prompt",
+    loopPromptPlaceholder: "e.g. check the deploy status and report any errors",
+    loopStart: "Start loop",
+    loopStop: "Stop",
+    loopRunning: "running",
+    loopIter: "iter {iter}",
+    loopFiresIn: "fires in {remaining}",
     sectionRuntime: "Runtime",
     activeModel: "active model",
+    modelPricingLine: "${hit} hit \xB7 ${miss} miss \xB7 ${out} out  per 1M tok",
     editMode: "edit mode",
     editModeNote: "switch from the Chat tab header",
     sectionLanguage: "Language",
@@ -19348,6 +19376,7 @@ var en = {
     tokens7d: "tokens \xB7 7d",
     cacheHit: "cache hit",
     toolCalls24h: "tool calls \xB7 24h",
+    budget: "budget",
     currentSession: "current session",
     noSession: "No live session \u2014 /dashboard from inside reasonix code to attach.",
     promptTok: "prompt tok",
@@ -19578,6 +19607,7 @@ var en = {
     filterPlaceholder: "filter plans",
     active: "active",
     done: "done",
+    idle: "idle",
     steps: "steps",
     pickHint: "Pick a plan on the left.",
     noTitle: "(no title)",
@@ -19607,16 +19637,34 @@ var en = {
     pullModel: "Pull {model}",
     indexStatus: "index status",
     builtStatus: "\u25CF built",
+    incompatibleStatus: "\u25CF incompatible",
     chunks: "chunks",
     files: "files",
     dim: "dim",
     size: "size",
     lastBuild: "last build",
+    builtWith: "built with",
+    currentTarget: "current target",
+    incompatibleHint: "This on-disk index was built for a different provider or model. Run Rebuild to replace it.",
     runIndexHint: "Run an index to enable semantic_search.",
     reIndex: "Re-index",
     build: "Build",
     rebuild: "Rebuild",
     stop: "Stop",
+    provider: "provider",
+    providerType: "service type",
+    openaiCompat: "openai-compatible",
+    apiUrl: "API URL",
+    apiKey: "API key",
+    apiKeyStoredNote: "API key is stored in ~/.reasonix/config.json \u2014 do not share that file.",
+    customRequestBody: "custom request body",
+    invalidCustomRequestBody: "Custom request body must be valid JSON: {error}",
+    customRequestBodyMustBeObject: "Custom request body must be a JSON object.",
+    saveBeforeIndex: "Save semantic settings before starting an index.",
+    extraBody: "extra body",
+    keepExistingKey: "leave blank to keep existing key",
+    remoteProvider: "Remote embedding provider",
+    remoteProviderDesc: "Configure the full OpenAI-compatible embeddings URL here. Reasonix will send requests exactly to the URL you provide.",
     ollama: "ollama",
     binary: "binary",
     found: "found",
@@ -19644,11 +19692,14 @@ var en = {
     nothingSkipped: "nothing skipped \u2014 all walked files would be indexed.",
     firstIncluded: "first {count} included file(s)",
     job: "Job",
+    phaseSetup: "preparing",
     phaseScan: "scanning files",
     phaseEmbed: "embedding chunks",
     phaseWrite: "writing index",
     phaseDone: "done",
     phaseError: "error",
+    phaseCancelled: "cancelled",
+    setupFailed: "setup failed",
     stopping: "stopping",
     scanned: "scanned {count}",
     changed: "changed {count}",
@@ -19709,7 +19760,17 @@ var en = {
     accept: "Accept",
     reject: "Reject",
     arguments: "arguments",
-    revisePlaceholder: "What needs to change before the next step? Leave blank to just continue."
+    revisePlaceholder: "What needs to change before the next step? Leave blank to just continue.",
+    pickerFilter: "Filter\u2026",
+    pickerEmpty: "Nothing to show.",
+    pickerLoadMore: "Load more",
+    pickerPick: "Open",
+    pickerInstall: "Install",
+    pickerUninstall: "Uninstall",
+    pickerRename: "Rename\u2026",
+    pickerNew: "New\u2026",
+    pickerNewPlaceholder: "Name (leave blank for default)",
+    viewerClose: "Close"
   }
 };
 
@@ -19777,8 +19838,36 @@ var zhCN = {
     effortHigh: "high\uFF08\u66F4\u4FBF\u5B9C / \u66F4\u5FEB\uFF09",
     webSearch: "\u7F51\u9875\u641C\u7D22",
     webSearchNote: "web_fetch + web_search \u5DE5\u5177",
+    sectionCompute: "\u8BA1\u7B97",
+    proNext: "/pro \u5355\u8F6E",
+    proArm: "\u4E3A\u4E0B\u4E00\u8F6E\u88C5\u5907",
+    proArmed: "\u5DF2\u88C5\u5907 \u2014 \u4E0B\u4E00\u8F6E\u540E\u81EA\u52A8\u89E3\u9664",
+    proNextNote: "\u4E0B\u4E00\u8F6E\u4F7F\u7528 deepseek-v4-pro\uFF0C\u4E4B\u540E\u81EA\u52A8\u89E3\u9664",
+    sectionBudget: "\u9884\u7B97",
+    budgetOf: "/",
+    budgetSetCap: "\u8BBE\u7F6E\u4E0A\u9650",
+    budgetCustom: "\u81EA\u5B9A\u4E49",
+    budgetBumpHint: "\u63D0\u9AD8\u4E0A\u9650\u4EE5\u7EE7\u7EED",
+    budgetClear: "\u6E05\u9664\u4E0A\u9650",
+    budgetIdleLine: "80% \u65F6\u63D0\u9192 \xB7 100% \u540E\u62D2\u7EDD\u6267\u884C",
+    budgetWarnLine: "\u63A5\u8FD1\u4E0A\u9650 \u2014 \u8D85\u8FC7 100% \u5C06\u62D2\u7EDD\u6267\u884C",
+    budgetRefusing: "\u5DF2\u8D85\u51FA\u4E0A\u9650 \u2014 \u63D0\u9AD8\u6216\u6E05\u9664\u540E\u624D\u4F1A\u7EE7\u7EED",
+    sectionLoop: "\u5FAA\u73AF",
+    loopIdleHint: "\u6309\u56FA\u5B9A\u95F4\u9694\u81EA\u52A8\u91CD\u65B0\u63D0\u4EA4\u4E00\u6BB5\u63D0\u793A\u8BCD\u3002",
+    loopCostHint: "\u6BCF\u6B21\u8FED\u4EE3\u7EA6 {cost}\uFF08\u4E0A\u4E00\u8F6E\u6210\u672C\uFF09\u3002",
+    loopInterval: "\u95F4\u9694",
+    loopCustom: "\u81EA\u5B9A\u4E49",
+    loopRangeError: "\u95F4\u9694\u9700\u5728 5s..6h \u4E4B\u95F4",
+    loopPrompt: "\u63D0\u793A\u8BCD",
+    loopPromptPlaceholder: "\u4F8B\u5982\uFF1A\u68C0\u67E5\u90E8\u7F72\u72B6\u6001\u5E76\u6C47\u62A5\u4EFB\u4F55\u9519\u8BEF",
+    loopStart: "\u542F\u52A8\u5FAA\u73AF",
+    loopStop: "\u505C\u6B62",
+    loopRunning: "\u8FD0\u884C\u4E2D",
+    loopIter: "\u7B2C {iter} \u6B21",
+    loopFiresIn: "{remaining} \u540E\u89E6\u53D1",
     sectionRuntime: "\u8FD0\u884C\u65F6",
     activeModel: "\u5F53\u524D\u6A21\u578B",
+    modelPricingLine: "${hit} \u547D\u4E2D \xB7 ${miss} \u672A\u547D\u4E2D \xB7 ${out} \u8F93\u51FA  / 100 \u4E07 tok",
     editMode: "\u7F16\u8F91\u6A21\u5F0F",
     editModeNote: "\u5728\u5BF9\u8BDD\u6807\u7B7E\u9875\u5934\u90E8\u5207\u6362",
     sectionLanguage: "\u8BED\u8A00",
@@ -19861,6 +19950,7 @@ var zhCN = {
     tokens7d: "tokens \xB7 7 \u5929",
     cacheHit: "\u7F13\u5B58\u547D\u4E2D",
     toolCalls24h: "\u5DE5\u5177\u8C03\u7528 \xB7 24 \u5C0F\u65F6",
+    budget: "\u9884\u7B97",
     currentSession: "\u5F53\u524D\u4F1A\u8BDD",
     noSession: "\u65E0\u6D3B\u8DC3\u4F1A\u8BDD \u2014 \u5728 reasonix code \u5185\u6267\u884C /dashboard \u8FDB\u884C\u8FDE\u63A5\u3002",
     promptTok: "\u63D0\u793A tokens",
@@ -20091,6 +20181,7 @@ var zhCN = {
     filterPlaceholder: "\u7B5B\u9009\u8BA1\u5212",
     active: "\u8FDB\u884C\u4E2D",
     done: "\u5DF2\u5B8C\u6210",
+    idle: "\u672A\u5F00\u59CB",
     steps: "\u6B65\u9AA4",
     pickHint: "\u9009\u62E9\u5DE6\u4FA7\u7684\u8BA1\u5212\u3002",
     noTitle: "\uFF08\u65E0\u6807\u9898\uFF09",
@@ -20120,16 +20211,33 @@ var zhCN = {
     pullModel: "\u62C9\u53D6 {model}",
     indexStatus: "\u7D22\u5F15\u72B6\u6001",
     builtStatus: "\u25CF \u5DF2\u6784\u5EFA",
+    incompatibleStatus: "\u25CF \u4E0D\u517C\u5BB9",
     chunks: "\u5206\u5757",
     files: "\u6587\u4EF6",
     dim: "\u7EF4\u5EA6",
     size: "\u5927\u5C0F",
     lastBuild: "\u4E0A\u6B21\u6784\u5EFA",
+    builtWith: "\u6784\u5EFA\u6765\u6E90",
+    currentTarget: "\u5F53\u524D\u76EE\u6807",
+    incompatibleHint: "\u78C1\u76D8\u4E0A\u7684\u8FD9\u4E2A\u7D22\u5F15\u662F\u4E3A\u4E0D\u540C\u7684 provider \u6216 model \u6784\u5EFA\u7684\u3002\u8FD0\u884C\u201C\u5B8C\u5168\u91CD\u5EFA\u201D\u5373\u53EF\u66FF\u6362\u3002",
     runIndexHint: "\u8FD0\u884C\u7D22\u5F15\u4EE5\u542F\u7528 semantic_search\u3002",
     reIndex: "\u91CD\u5EFA\u7D22\u5F15",
     build: "\u6784\u5EFA",
     rebuild: "\u5B8C\u5168\u91CD\u5EFA",
     stop: "\u505C\u6B62",
+    provider: "\u63D0\u4F9B\u65B9",
+    providerType: "\u670D\u52A1\u7C7B\u578B",
+    openaiCompat: "OpenAI-Compatible",
+    apiUrl: "API URL",
+    apiKey: "API Key",
+    customRequestBody: "\u81EA\u5B9A\u4E49\u8BF7\u6C42\u4F53",
+    invalidCustomRequestBody: "\u81EA\u5B9A\u4E49\u8BF7\u6C42\u4F53\u5FC5\u987B\u662F\u5408\u6CD5 JSON\uFF1A{error}",
+    customRequestBodyMustBeObject: "\u81EA\u5B9A\u4E49\u8BF7\u6C42\u4F53\u5FC5\u987B\u662F JSON \u5BF9\u8C61\u3002",
+    saveBeforeIndex: "\u8BF7\u5148\u4FDD\u5B58\u8BED\u4E49\u8BBE\u7F6E\uFF0C\u518D\u542F\u52A8\u7D22\u5F15\u3002",
+    extraBody: "\u6269\u5C55\u8BF7\u6C42\u4F53",
+    keepExistingKey: "\u7559\u7A7A\u5219\u4FDD\u7559\u73B0\u6709 Key",
+    remoteProvider: "\u8FDC\u7A0B\u5411\u91CF\u670D\u52A1",
+    remoteProviderDesc: "\u5728\u8FD9\u91CC\u914D\u7F6E OpenAI-Compatible embeddings \u7684\u5B8C\u6574 URL\u3002Reasonix \u4F1A\u4E25\u683C\u4F7F\u7528\u4F60\u63D0\u4F9B\u7684 URL \u53D1\u8D77\u8BF7\u6C42\u3002",
     ollama: "Ollama",
     binary: "\u4E8C\u8FDB\u5236",
     found: "\u5DF2\u627E\u5230",
@@ -20157,11 +20265,14 @@ var zhCN = {
     nothingSkipped: "\u65E0\u8DF3\u8FC7 \u2014 \u6240\u6709\u904D\u5386\u7684\u6587\u4EF6\u90FD\u5C06\u88AB\u7D22\u5F15\u3002",
     firstIncluded: "\u524D {count} \u4E2A\u5305\u542B\u7684\u6587\u4EF6",
     job: "\u4EFB\u52A1",
+    phaseSetup: "\u521D\u59CB\u5316\u4E2D",
     phaseScan: "\u626B\u63CF\u6587\u4EF6",
     phaseEmbed: "\u5D4C\u5165\u5206\u5757",
     phaseWrite: "\u5199\u5165\u7D22\u5F15",
     phaseDone: "\u5B8C\u6210",
     phaseError: "\u9519\u8BEF",
+    phaseCancelled: "\u5DF2\u505C\u6B62",
+    setupFailed: "\u521D\u59CB\u5316\u5931\u8D25",
     stopping: "\u505C\u6B62\u4E2D",
     scanned: "\u5DF2\u626B\u63CF {count}",
     changed: "\u5DF2\u53D8\u66F4 {count}",
@@ -20222,7 +20333,17 @@ var zhCN = {
     accept: "\u63A5\u53D7",
     reject: "\u62D2\u7EDD",
     arguments: "\u53C2\u6570",
-    revisePlaceholder: "\u4E0B\u4E00\u6B65\u4E4B\u524D\u9700\u8981\u66F4\u6539\u4EC0\u4E48\uFF1F\u7559\u7A7A\u5219\u76F4\u63A5\u7EE7\u7EED\u3002"
+    revisePlaceholder: "\u4E0B\u4E00\u6B65\u4E4B\u524D\u9700\u8981\u66F4\u6539\u4EC0\u4E48\uFF1F\u7559\u7A7A\u5219\u76F4\u63A5\u7EE7\u7EED\u3002",
+    pickerFilter: "\u8FC7\u6EE4\u2026",
+    pickerEmpty: "\u6682\u65E0\u5185\u5BB9\u3002",
+    pickerLoadMore: "\u52A0\u8F7D\u66F4\u591A",
+    pickerPick: "\u6253\u5F00",
+    pickerInstall: "\u5B89\u88C5",
+    pickerUninstall: "\u5378\u8F7D",
+    pickerRename: "\u91CD\u547D\u540D\u2026",
+    pickerNew: "\u65B0\u5EFA\u2026",
+    pickerNewPlaceholder: "\u540D\u79F0\uFF08\u7559\u7A7A\u4F7F\u7528\u9ED8\u8BA4\uFF09",
+    viewerClose: "\u5173\u95ED"
   }
 };
 
@@ -22930,6 +23051,156 @@ function CheckpointModal({ modal, onResolve }) {
     <//>
   `;
 }
+function PickerModal({
+  modal,
+  onResolve
+}) {
+  useLang();
+  const [selectedId, setSelectedId] = d2(modal.items[0]?.id ?? null);
+  const [query2, setQuery] = d2(modal.query ?? "");
+  const [renameTarget, setRenameTarget] = d2(null);
+  const [renameText, setRenameText] = d2("");
+  const [showNew, setShowNew] = d2(false);
+  const [newText, setNewText] = d2("");
+  const has = (a3) => modal.actions.includes(a3);
+  const selected = modal.items.find((i3) => i3.id === selectedId) ?? null;
+  const submitRefine = (next) => {
+    setQuery(next);
+    if (has("refine")) onResolve("picker", { action: "refine", query: next });
+  };
+  const startRename = (id) => {
+    const item = modal.items.find((i3) => i3.id === id);
+    if (!item) return;
+    setRenameTarget(id);
+    setRenameText(item.title);
+  };
+  const sendRename = () => {
+    if (!renameTarget || !renameText.trim()) return;
+    onResolve("picker", { action: "rename", id: renameTarget, text: renameText });
+    setRenameTarget(null);
+    setRenameText("");
+  };
+  const sendNew = () => {
+    onResolve("picker", newText.trim() ? { action: "new", text: newText } : { action: "new" });
+    setShowNew(false);
+    setNewText("");
+  };
+  return html4`
+    <${ModalCard}
+      accent="#fcd34d"
+      icon="≡"
+      title=${modal.title}
+      subtitle=${modal.hint}
+    >
+      ${has("refine") ? html4`<input
+              class="modal-picker-search"
+              type="search"
+              placeholder=${t4("modal.pickerFilter")}
+              value=${query2}
+              onInput=${(e3) => submitRefine(e3.target.value)}
+            />` : null}
+      <div class="modal-picker-list">
+        ${modal.items.length === 0 ? html4`<div class="modal-picker-empty">${t4("modal.pickerEmpty")}</div>` : modal.items.map(
+    (it) => html4`
+                  <button
+                    key=${it.id}
+                    class=${`modal-picker-row${it.id === selectedId ? " selected" : ""}`}
+                    onClick=${() => setSelectedId(it.id)}
+                    onDblClick=${() => has("pick") && onResolve("picker", { action: "pick", id: it.id })}
+                  >
+                    <span class="modal-picker-title">${it.title}</span>
+                    ${it.badge ? html4`<span class="modal-picker-badge">${it.badge}</span>` : null}
+                    ${it.subtitle ? html4`<span class="modal-picker-subtitle">${it.subtitle}</span>` : null}
+                    ${it.meta ? html4`<span class="modal-picker-meta">${it.meta}</span>` : null}
+                  </button>
+                `
+  )}
+      </div>
+      ${modal.hasMore && has("load-more") ? html4`<button
+              class="modal-picker-more"
+              onClick=${() => onResolve("picker", { action: "load-more" })}
+            >${t4("modal.pickerLoadMore")}</button>` : null}
+      ${renameTarget ? html4`
+            <div class="modal-picker-form">
+              <input
+                type="text"
+                value=${renameText}
+                onInput=${(e3) => setRenameText(e3.target.value)}
+              />
+              <div class="modal-actions">
+                <button class="primary" onClick=${sendRename} disabled=${!renameText.trim()}>${t4("common.save")}</button>
+                <button onClick=${() => setRenameTarget(null)}>${t4("common.back")}</button>
+              </div>
+            </div>
+          ` : showNew ? html4`
+              <div class="modal-picker-form">
+                <input
+                  type="text"
+                  placeholder=${t4("modal.pickerNewPlaceholder")}
+                  value=${newText}
+                  onInput=${(e3) => setNewText(e3.target.value)}
+                />
+                <div class="modal-actions">
+                  <button class="primary" onClick=${sendNew}>${t4("common.add")}</button>
+                  <button onClick=${() => setShowNew(false)}>${t4("common.back")}</button>
+                </div>
+              </div>
+            ` : html4`
+              <div class="modal-actions">
+                ${has("pick") && selected ? html4`<button
+                        class="primary"
+                        onClick=${() => onResolve("picker", { action: "pick", id: selected.id })}
+                      >${t4("modal.pickerPick")}</button>` : null}
+                ${has("install") && selected ? html4`<button
+                        class="primary"
+                        onClick=${() => onResolve("picker", { action: "install", id: selected.id })}
+                      >${t4("modal.pickerInstall")}</button>` : null}
+                ${has("uninstall") && selected ? html4`<button
+                        onClick=${() => onResolve("picker", { action: "uninstall", id: selected.id })}
+                      >${t4("modal.pickerUninstall")}</button>` : null}
+                ${has("rename") && selected ? html4`<button onClick=${() => startRename(selected.id)}>${t4("modal.pickerRename")}</button>` : null}
+                ${has("delete") && selected ? html4`<button
+                        class="danger"
+                        onClick=${() => onResolve("picker", { action: "delete", id: selected.id })}
+                      >${t4("common.delete")}</button>` : null}
+                ${has("new") ? html4`<button onClick=${() => setShowNew(true)}>${t4("modal.pickerNew")}</button>` : null}
+                <button onClick=${() => onResolve("picker", { action: "cancel" })}>${t4("modal.cancel")}</button>
+              </div>
+            `}
+    <//>
+  `;
+}
+function ViewerModal({
+  modal,
+  onResolve
+}) {
+  useLang();
+  return html4`
+    <${ModalCard}
+      accent="#67e8f9"
+      icon="◇"
+      title=${modal.title}
+      subtitle=${modal.meta}
+    >
+      ${modal.steps && modal.steps.length > 0 ? html4`
+            <ol class="modal-viewer-steps">
+              ${modal.steps.map(
+    (s3) => html4`
+                  <li key=${s3.id} class=${`modal-viewer-step modal-viewer-step-${s3.status}`}>
+                    <span class="modal-viewer-step-mark">${s3.status === "done" ? "\u2713" : "\xB7"}</span>
+                    <span class="modal-viewer-step-title">${s3.title}</span>
+                  </li>
+                `
+  )}
+            </ol>
+          ` : null}
+      ${modal.body ? html4`<div class="md modal-viewer-body" dangerouslySetInnerHTML=${{ __html: marked.parse(modal.body) }}></div>` : null}
+      <div class="modal-actions">
+        <button onClick=${() => onResolve("viewer", { action: "close" })}>${t4("modal.viewerClose")}</button>
+      </div>
+    <//>
+  `;
+}
 function RevisionModal({ modal, onResolve }) {
   useLang();
   const riskColor = (r3) => r3 === "high" ? "#f87171" : r3 === "med" ? "#fbbf24" : r3 === "low" ? "#86efac" : "#9ca3af";
@@ -23514,7 +23785,7 @@ function ChatPanel() {
             </div>` : null}
       ${error ? html4`<div class="notice err">${error}</div>` : null}
 
-      ${modal ? modal.kind === "shell" ? html4`<${ShellModal} modal=${modal} onResolve=${resolveModal} />` : modal.kind === "choice" ? html4`<${ChoiceModal} modal=${modal} onResolve=${resolveModal} />` : modal.kind === "plan" ? html4`<${PlanModal} modal=${modal} onResolve=${resolveModal} />` : modal.kind === "edit-review" ? html4`<${EditReviewModal} modal=${modal} onResolve=${resolveModal} />` : modal.kind === "workspace" ? html4`<${WorkspaceModal} modal=${modal} onResolve=${resolveModal} />` : modal.kind === "checkpoint" ? html4`<${CheckpointModal} modal=${modal} onResolve=${resolveModal} />` : modal.kind === "revision" ? html4`<${RevisionModal} modal=${modal} onResolve=${resolveModal} />` : null : null}
+      ${modal ? modal.kind === "shell" ? html4`<${ShellModal} modal=${modal} onResolve=${resolveModal} />` : modal.kind === "choice" ? html4`<${ChoiceModal} modal=${modal} onResolve=${resolveModal} />` : modal.kind === "plan" ? html4`<${PlanModal} modal=${modal} onResolve=${resolveModal} />` : modal.kind === "edit-review" ? html4`<${EditReviewModal} modal=${modal} onResolve=${resolveModal} />` : modal.kind === "workspace" ? html4`<${WorkspaceModal} modal=${modal} onResolve=${resolveModal} />` : modal.kind === "checkpoint" ? html4`<${CheckpointModal} modal=${modal} onResolve=${resolveModal} />` : modal.kind === "revision" ? html4`<${RevisionModal} modal=${modal} onResolve=${resolveModal} />` : modal.kind === "picker" ? html4`<${PickerModal} modal=${modal} onResolve=${resolveModal} />` : modal.kind === "viewer" ? html4`<${ViewerModal} modal=${modal} onResolve=${resolveModal} />` : null : null}
 
       <div class="chat-body">
         <div class="chat-main">
@@ -23599,7 +23870,7 @@ function SideRail({ stats, budgetUsd, activePlan }) {
   const cacheTone = cachePct >= 80 ? "ok" : cachePct >= 50 ? "" : "warn";
   const showBudget = stats != null && typeof budgetUsd === "number" && budgetUsd > 0;
   const budgetPct = showBudget ? Math.min(120, stats.totalCostUsd / budgetUsd * 100) : 0;
-  const budgetTone = budgetPct >= 100 ? "err" : budgetPct >= 80 ? "warn" : "";
+  const budgetTone2 = budgetPct >= 100 ? "err" : budgetPct >= 80 ? "warn" : "";
   const walletCurrency = stats?.balance?.[0]?.currency;
   return html4`
     <aside class="chat-rail">
@@ -23622,8 +23893,8 @@ function SideRail({ stats, budgetUsd, activePlan }) {
               <div class="rh">${t4("chat.railToolBudget")}</div>
               <div class="progress-row">
                 <span class="lbl">${t4("chat.railSpend")}</span>
-                <div class=${`progress ${budgetTone}`}><div class="progress-fill" style=${`width:${Math.min(100, budgetPct)}%`}></div></div>
-                <span class="v" style=${budgetTone === "err" ? "color:var(--c-err)" : budgetTone === "warn" ? "color:var(--c-warn)" : ""}>${fmtCost(stats.totalCostUsd, walletCurrency)} / ${fmtCost(budgetUsd, walletCurrency)}</span>
+                <div class=${`progress ${budgetTone2}`}><div class="progress-fill" style=${`width:${Math.min(100, budgetPct)}%`}></div></div>
+                <span class="v" style=${budgetTone2 === "err" ? "color:var(--c-err)" : budgetTone2 === "warn" ? "color:var(--c-warn)" : ""}>${fmtCost(stats.totalCostUsd, walletCurrency)} / ${fmtCost(budgetUsd, walletCurrency)}</span>
               </div>
             </div>
           ` : null}
@@ -24564,6 +24835,35 @@ function MemoryPanel() {
   `;
 }
 
+// dashboard/src/lib/budget.ts
+function deriveBudgetState(cap, spent) {
+  const safeSpent = typeof spent === "number" && spent >= 0 ? spent : 0;
+  if (typeof cap !== "number" || cap <= 0) {
+    return { kind: "off", spent: safeSpent };
+  }
+  const pct = safeSpent / cap * 100;
+  if (pct >= 100) return { kind: "exhausted", cap, spent: safeSpent, pct };
+  if (pct >= 80) return { kind: "warn", cap, spent: safeSpent, pct };
+  return { kind: "running", cap, spent: safeSpent, pct };
+}
+var QUICK_CAPS_USD = [1, 5, 10, 25, 50];
+function bumpSuggestions(currentCap) {
+  if (currentCap <= 0) return [];
+  return [niceUp(currentCap * 1.5), niceUp(currentCap * 2), niceUp(currentCap * 4)];
+}
+function niceUp(n3) {
+  const eps = 1e-9;
+  if (n3 < 1) return Math.ceil((n3 - eps) * 10) / 10;
+  if (n3 < 10) return Math.ceil((n3 - eps) * 2) / 2;
+  if (n3 < 100) return Math.ceil(n3 - eps);
+  return Math.ceil((n3 - eps) / 5) * 5;
+}
+function budgetTone(state) {
+  if (state.kind === "exhausted") return "err";
+  if (state.kind === "warn") return "warn";
+  return "";
+}
+
 // dashboard/src/lib/use-poll.ts
 function usePoll(path, intervalMs = 2e3) {
   const [data, setData] = d2(null);
@@ -24634,6 +24934,19 @@ function balanceKpi(c3) {
   const symbol = c3.balance.currency === "CNY" ? "\xA5" : c3.balance.currency === "USD" ? "$" : "";
   return kpi(t4("overview.balance"), `${symbol}${c3.balance.total}`, c3.balance.currency, "flat");
 }
+function budgetKpi(o3) {
+  const state = deriveBudgetState(o3.budgetUsd, o3.cockpit?.currentSession?.totalCostUsd ?? null);
+  if (state.kind === "off") return null;
+  const tone = budgetTone(state);
+  const valueColor = tone === "err" ? "color:var(--c-err)" : tone === "warn" ? "color:var(--c-warn)" : "";
+  return html4`
+    <div class="kpi cock-w-1">
+      <div class="label">${t4("overview.budget")}</div>
+      <div class="value" style=${valueColor}>${fmtUsd(state.spent)} / ${fmtUsd(state.cap)}</div>
+      <div class=${`progress ${tone}`} style="margin-top:4px"><div class="progress-fill" style=${`width:${Math.min(100, state.pct)}%`}></div></div>
+    </div>
+  `;
+}
 function tokens7dKpi(c3) {
   if (!c3.tokens7d) return kpi(t4("overview.tokens7d"), "\u2014", t4("overview.noUsageYet"), "flat");
   const d3 = deltaPctText(c3.tokens7d.deltaPct);
@@ -24789,6 +25102,7 @@ function OverviewPanel() {
         ${tokens7dKpi(c3)}
         ${cacheHitKpi(c3)}
         ${toolCallsKpi(c3)}
+        ${budgetKpi(o3)}
 
         ${currentSessionBlock(c3)}
         ${costTrendSpark(c3)}
@@ -25001,7 +25315,7 @@ function PermissionsPanel() {
 function statusPill(p3) {
   if (p3.completionRatio >= 1) return html4`<span class="pill ok">${t4("plans.done")}</span>`;
   if (p3.completionRatio > 0) return html4`<span class="pill info">${t4("plans.active")}</span>`;
-  return html4`<span class="pill">idle</span>`;
+  return html4`<span class="pill">${t4("plans.idle")}</span>`;
 }
 function PlansPanel() {
   useLang();
@@ -25114,13 +25428,20 @@ function PlansPanel() {
 function SemanticPanel() {
   useLang();
   const [data, setData] = d2(null);
+  const [draft, setDraft] = d2(null);
+  const [draftDirty, setDraftDirty] = d2(false);
+  const draftDirtyRef = A2(false);
   const [error, setError] = d2(null);
   const [busy, setBusy] = d2(false);
   const [info, setInfo] = d2(null);
   const load = q2(async () => {
     try {
-      const r3 = await api("/semantic");
-      setData(r3);
+      const [semantic, config] = await Promise.all([
+        api("/semantic"),
+        api("/semantic/config")
+      ]);
+      setData(semantic);
+      setDraft((current) => current && draftDirtyRef.current ? current : toConfigDraft(config));
     } catch (err) {
       setError(err.message);
     }
@@ -25128,7 +25449,7 @@ function SemanticPanel() {
   y2(() => {
     load();
     const phase2 = data?.job?.phase;
-    const running2 = phase2 === "scan" || phase2 === "embed" || phase2 === "write";
+    const running2 = isActiveSemanticPhase(phase2);
     const pulling2 = data?.pull?.status === "pulling";
     const ms = running2 || pulling2 ? 1200 : 5e3;
     const id = setInterval(load, ms);
@@ -25136,10 +25457,18 @@ function SemanticPanel() {
   }, [load, data?.job?.phase, data?.pull?.status]);
   const start = q2(
     async (rebuild) => {
+      if (!draft) return;
       setBusy(true);
       setError(null);
       setInfo(null);
       try {
+        const validation = validateSemanticDraft(draft);
+        if (draftDirty) {
+          throw new Error(t4("semantic.saveBeforeIndex"));
+        }
+        if (validation.error) {
+          throw new Error(validation.error);
+        }
         await api("/semantic/start", { method: "POST", body: { rebuild: !!rebuild } });
         setInfo(rebuild ? t4("semantic.rebuildStarted") : t4("semantic.incrementalStarted"));
         await load();
@@ -25149,7 +25478,7 @@ function SemanticPanel() {
         setBusy(false);
       }
     },
-    [load]
+    [draft, draftDirty, load]
   );
   const stop = q2(async () => {
     setBusy(true);
@@ -25169,10 +25498,11 @@ function SemanticPanel() {
     setError(null);
     setInfo(t4("semantic.startingDaemon"));
     try {
-      const r3 = await api("/semantic/ollama/start", { method: "POST", body: {} });
-      setInfo(
-        r3.ready ? t4("semantic.daemonUp") : t4("semantic.daemonTimeout")
-      );
+      const r3 = await api("/semantic/ollama/start", {
+        method: "POST",
+        body: {}
+      });
+      setInfo(r3.ready ? t4("semantic.daemonUp") : t4("semantic.daemonTimeout"));
       await load();
     } catch (err) {
       setError(err.message);
@@ -25196,10 +25526,44 @@ function SemanticPanel() {
     },
     [load]
   );
-  if (!data && !error)
+  const saveProviderConfig = q2(async () => {
+    if (!draft) return;
+    setBusy(true);
+    setError(null);
+    setInfo(null);
+    try {
+      const extraBody = semanticValidation.extraBody;
+      await api("/semantic/config", {
+        method: "POST",
+        body: {
+          provider: draft.provider,
+          ollama: {
+            baseUrl: draft.ollama.baseUrl,
+            model: draft.ollama.model
+          },
+          openaiCompat: {
+            baseUrl: draft.openaiCompat.baseUrl,
+            apiKey: draft.openaiCompat.apiKey,
+            model: draft.openaiCompat.model,
+            extraBody
+          }
+        }
+      });
+      setDraftDirty(false);
+      draftDirtyRef.current = false;
+      setInfo(t4("semantic.savedConfig", { count: 1 }));
+      await load();
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setBusy(false);
+    }
+  }, [draft, load]);
+  if (!data && !error) {
     return html4`<div class="card" style="color:var(--fg-3)">${t4("common.loading")}</div>`;
+  }
   if (error && !data) return html4`<div class="card accent-err">${error}</div>`;
-  if (!data) return null;
+  if (!data || !draft) return null;
   if (!data.attached) {
     return html4`
       <div class="card" style="color:var(--fg-3)">
@@ -25210,35 +25574,168 @@ function SemanticPanel() {
   }
   const job = data.job;
   const phase = job?.phase;
-  const running = phase === "scan" || phase === "embed" || phase === "write";
+  const running = isActiveSemanticPhase(phase);
   const pull = data.pull;
   const pulling = pull?.status === "pulling";
-  const o3 = data.ollama ?? {};
-  const binaryFound = o3.binaryFound === true;
-  const daemonRunning = o3.daemonRunning === true;
-  const modelPulled = o3.modelPulled === true;
-  const modelName = o3.modelName ?? "nomic-embed-text";
-  const installedModels = o3.installedModels ?? [];
-  const ready = binaryFound && daemonRunning && modelPulled;
+  const provider = data.providerStatus?.kind ?? draft.provider;
+  const ready = data.providerStatus?.ready === true;
+  const isOllama = provider === "ollama";
+  const ollama = data.providerStatus?.kind === "ollama" ? data.providerStatus : null;
+  const remote = data.providerStatus?.kind === "openai-compat" ? data.providerStatus : null;
+  const binaryFound = ollama?.binaryFound === true;
+  const daemonRunning = ollama?.daemonRunning === true;
+  const modelPulled = ollama?.modelPulled === true;
+  const modelName = isOllama ? ollama?.modelName ?? draft.ollama.model ?? "nomic-embed-text" : draft.openaiCompat.model;
   const sectionH3 = (text) => html4`
     <h3 style="margin:18px 0 8px;font-family:var(--font-mono);font-size:11px;color:var(--fg-3);text-transform:uppercase;letter-spacing:.1em">${text}</h3>
   `;
   const idx = data.index;
+  const indexReady = idx?.exists === true && idx.compatible !== false;
+  const indexMismatch = idx?.exists === true && idx.compatible === false;
+  const semanticValidation = validateSemanticDraft(draft);
+  const semanticDraftBlocked = draftDirty || semanticValidation.error !== null;
   return html4`
     <div style="display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:14px;align-items:start">
       <div style="display:flex;flex-direction:column;gap:10px;min-width:0">
         <div class="chips">
-          <span class=${`chip-f static ${idx?.exists ? "active" : ""}`}>
-            ${idx?.exists ? t4("semantic.indexBuilt") : t4("semantic.noIndex")}
+          <span class=${`chip-f static ${indexReady ? "active" : ""}`}>
+            ${indexReady ? t4("semantic.indexBuilt") : t4("semantic.noIndex")}
           </span>
           ${ready ? html4`<span class="chip-f static" style="border-color:var(--c-ok);color:var(--c-ok)">${t4("semantic.ready")}</span>` : html4`<span class="chip-f static" style="border-color:var(--c-warn);color:var(--c-warn)">${t4("semantic.setupNeeded")}</span>`}
         </div>
-        ${info ? html4`<div><span class="pill info">${info}</span></div>` : null}
         ${error ? html4`<div class="card accent-err">${error}</div>` : null}
 
-        ${idx?.exists ? html4`<${SemanticSearchSection} />` : null}
+        <div class="card">
+          <div class="card-h"><span class="title">${t4("semantic.provider")}</span></div>
+          <div class="form-row">
+            <span class="lbl">${t4("semantic.providerType")}</span>
+            <select
+              class="input mono"
+              value=${draft.provider}
+              onInput=${(e3) => {
+    draftDirtyRef.current = true;
+    setDraftDirty(true);
+    setDraft({
+      ...draft,
+      provider: e3.target.value
+    });
+  }}
+            >
+              <option value="ollama">Ollama</option>
+              <option value="openai-compat">OpenAI-Compatible</option>
+            </select>
+          </div>
+          ${draft.provider === "ollama" ? html4`
+                <div class="form-row">
+                  <span class="lbl">${t4("semantic.model")}</span>
+                  <input
+                    class="input mono"
+                    type="text"
+                    value=${draft.ollama.model}
+                    onInput=${(e3) => {
+    draftDirtyRef.current = true;
+    setDraftDirty(true);
+    setDraft({
+      ...draft,
+      ollama: { ...draft.ollama, model: e3.target.value }
+    });
+  }}
+                  />
+                </div>
+              ` : html4`
+                <div class="form-row">
+                  <span class="lbl">${t4("semantic.apiUrl")}</span>
+                  <input
+                    class="input mono"
+                    type="text"
+                    placeholder="https://api.openai.com/v1/embeddings"
+                    value=${draft.openaiCompat.baseUrl}
+                    onInput=${(e3) => {
+    draftDirtyRef.current = true;
+    setDraftDirty(true);
+    setDraft({
+      ...draft,
+      openaiCompat: {
+        ...draft.openaiCompat,
+        baseUrl: e3.target.value
+      }
+    });
+  }}
+                  />
+                </div>
+                <div class="form-row">
+                  <span class="lbl">${t4("semantic.apiKey")}</span>
+                  <input
+                    class="input mono"
+                    type="password"
+                    placeholder=${draft.openaiCompat.apiKeySet ? t4("semantic.keepExistingKey") : "sk-..."}
+                    value=${draft.openaiCompat.apiKey}
+                    onInput=${(e3) => {
+    draftDirtyRef.current = true;
+    setDraftDirty(true);
+    setDraft({
+      ...draft,
+      openaiCompat: {
+        ...draft.openaiCompat,
+        apiKey: e3.target.value
+      }
+    });
+  }}
+                  />
+                  <div style="color:var(--fg-3);font-size:12px">${t4("semantic.apiKeyStoredNote")}</div>
+                </div>
+                <div class="form-row">
+                  <span class="lbl">${t4("semantic.model")}</span>
+                  <input
+                    class="input mono"
+                    type="text"
+                    value=${draft.openaiCompat.model}
+                    onInput=${(e3) => {
+    draftDirtyRef.current = true;
+    setDraftDirty(true);
+    setDraft({
+      ...draft,
+      openaiCompat: {
+        ...draft.openaiCompat,
+        model: e3.target.value
+      }
+    });
+  }}
+                  />
+                </div>
+                <details style="margin-top:10px">
+                  <summary style="cursor:pointer;color:var(--fg-2);font-size:12px">${t4("semantic.customRequestBody")}</summary>
+                  <div class="form-row" style="margin-top:10px">
+                    <span class="lbl">${t4("semantic.customRequestBody")}</span>
+                    <textarea
+                      class="input mono"
+                      rows="6"
+                      value=${draft.openaiCompat.extraBodyText}
+                      onInput=${(e3) => {
+    draftDirtyRef.current = true;
+    setDraftDirty(true);
+    setDraft({
+      ...draft,
+      openaiCompat: {
+        ...draft.openaiCompat,
+        extraBodyText: e3.target.value
+      }
+    });
+  }}
+                    ></textarea>
+                  </div>
+                </details>
+                ${semanticValidation.error ? html4`<div style="color:var(--c-err);font-size:12px;margin-top:-2px">${semanticValidation.error}</div>` : null}
+              `}
+          <div style="display:flex;gap:6px;margin-top:10px">
+            <button class="btn primary" disabled=${busy || semanticValidation.error !== null} onClick=${saveProviderConfig}>${t4("common.save")}</button>
+          </div>
+        </div>
+        ${info ? html4`<div><span class="pill info">${info}</span></div>` : null}
+
+        ${indexReady ? html4`<${SemanticSearchSection} />` : null}
 
-        ${!binaryFound ? html4`
+        ${isOllama && !binaryFound ? html4`
               <div class="card">
                 <div class="card-h"><span class="title">${t4("semantic.installOllama")}</span></div>
                 <div class="card-b" style="font-size:13px">
@@ -25251,7 +25748,7 @@ function SemanticPanel() {
                 </div>
               </div>
             ` : null}
-        ${binaryFound && !daemonRunning ? html4`
+        ${isOllama && binaryFound && !daemonRunning ? html4`
               <div class="card">
                 <div class="card-h"><span class="title">${t4("semantic.daemon")}</span></div>
                 <div class="card-b" style="font-size:13px">
@@ -25263,7 +25760,7 @@ function SemanticPanel() {
                 </div>
               </div>
             ` : null}
-        ${daemonRunning && !modelPulled ? html4`
+        ${isOllama && daemonRunning && !modelPulled ? html4`
               <div class="card">
                 <div class="card-h"><span class="title">${t4("semantic.model")}</span></div>
                 <div class="card-b" style="font-size:13px">
@@ -25283,6 +25780,14 @@ function SemanticPanel() {
                 </div>
               </div>
             ` : null}
+        ${!isOllama ? html4`
+              <div class="card">
+                <div class="card-h"><span class="title">${t4("semantic.remoteProvider")}</span></div>
+                <div class="card-b" style="font-size:13px;color:var(--fg-2)">
+                  ${t4("semantic.remoteProviderDesc")}
+                </div>
+              </div>
+            ` : null}
 
         ${job ? html4`
               ${sectionH3(t4("semantic.job"))}
@@ -25295,42 +25800,42 @@ function SemanticPanel() {
           <div class="card-h">
             <span class="title">${t4("semantic.indexStatus")}</span>
             <span class="meta">
-              ${idx?.exists ? html4`<span class="pill ok">${t4("semantic.builtStatus")}</span>` : html4`<span class="pill">${t4("system.none")}</span>`}
+              ${idx?.exists ? idx.compatible === false ? html4`<span class="pill warn">${t4("semantic.incompatibleStatus")}</span>` : html4`<span class="pill ok">${t4("semantic.builtStatus")}</span>` : html4`<span class="pill">${t4("system.none")}</span>`}
             </span>
           </div>
           ${idx?.exists ? html4`
+                <div class="rail-kv"><span class="k">${t4("semantic.provider")}</span><span class="v">${idx.builtWith?.provider ?? idx.provider ?? provider}</span></div>
                 <div class="rail-kv"><span class="k">${t4("semantic.chunks")}</span><span class="v">${fmtNum(idx.chunks)}</span></div>
                 <div class="rail-kv"><span class="k">${t4("semantic.files")}</span><span class="v">${fmtNum(idx.files)}</span></div>
-                <div class="rail-kv"><span class="k">${t4("semantic.model")}</span><span class="v" style="font-size:11px">${idx.model ?? modelName}</span></div>
+                <div class="rail-kv"><span class="k">${t4("semantic.model")}</span><span class="v" style="font-size:11px">${idx.builtWith?.model ?? idx.model ?? modelName}</span></div>
                 <div class="rail-kv"><span class="k">${t4("semantic.dim")}</span><span class="v">${fmtNum(idx.dim)}</span></div>
                 <div class="rail-kv"><span class="k">${t4("semantic.size")}</span><span class="v">${fmtBytes(idx.sizeBytes)}</span></div>
                 <div class="rail-kv"><span class="k">${t4("semantic.lastBuild")}</span><span class="v">${fmtRelativeTime(idx.lastBuiltMs ?? null)}</span></div>
-              ` : html4`
-                <div style="color:var(--fg-3);font-size:12.5px;padding:6px 0">
-                  ${t4("semantic.runIndexHint")}
-                </div>
-              `}
+                ${idx.compatible === false ? html4`
+                      <div class="rail-kv"><span class="k">${t4("semantic.builtWith")}</span><span class="v" style="font-size:11px">${idx.builtWith?.provider} · ${idx.builtWith?.model}</span></div>
+                      <div class="rail-kv"><span class="k">${t4("semantic.currentTarget")}</span><span class="v" style="font-size:11px">${idx.current?.provider} · ${idx.current?.model}</span></div>
+                      <div style="color:var(--c-warn);font-size:12px;padding-top:8px">${t4("semantic.incompatibleHint")}</div>
+                    ` : null}
+              ` : html4`<div style="color:var(--fg-3);font-size:12.5px;padding:6px 0">${t4("semantic.runIndexHint")}</div>`}
           <div style="display:flex;gap:6px;margin-top:10px;flex-wrap:wrap">
-            <button class="primary" disabled=${busy || running || !ready} onClick=${() => start(false)}>${idx?.exists ? t4("semantic.reIndex") : t4("semantic.build")}</button>
-            ${idx?.exists ? html4`<button disabled=${busy || running || !ready} onClick=${() => start(true)}>${t4("semantic.rebuild")}</button>` : null}
+            <button class="primary" disabled=${busy || running || !ready || semanticDraftBlocked} onClick=${() => start(false)}>${indexReady ? t4("semantic.reIndex") : t4("semantic.build")}</button>
+            ${idx?.exists ? html4`<button disabled=${busy || running || !ready || semanticDraftBlocked} onClick=${() => start(true)}>${t4("semantic.rebuild")}</button>` : null}
             ${running ? html4`<button onClick=${stop} style="border-color:var(--c-err);color:var(--c-err)">${t4("semantic.stop")}</button>` : null}
           </div>
         </div>
 
         <div class="card">
-          <div class="card-h"><span class="title">${t4("semantic.ollama")}</span></div>
-          <div class="rail-kv">
-            <span class="k">${t4("semantic.binary")}</span>
-            <span class="v">${binaryFound ? html4`<span class="pill ok">${t4("semantic.found")}</span>` : html4`<span class="pill err">${t4("semantic.missing")}</span>`}</span>
-          </div>
-          <div class="rail-kv">
-            <span class="k">${t4("semantic.daemonStatus")}</span>
-            <span class="v">${daemonRunning ? html4`<span class="pill ok">${t4("semantic.up")}</span>` : html4`<span class="pill warn">${t4("semantic.down")}</span>`}</span>
-          </div>
-          <div class="rail-kv">
-            <span class="k">${t4("semantic.model")}</span>
-            <span class="v">${modelPulled ? html4`<span class="pill ok">${t4("semantic.pulled")}</span>` : html4`<span class="pill warn">${t4("semantic.missing")}</span>`}</span>
-          </div>
+          <div class="card-h"><span class="title">${isOllama ? t4("semantic.ollama") : t4("semantic.openaiCompat")}</span></div>
+          ${isOllama ? html4`
+                <div class="rail-kv"><span class="k">${t4("semantic.binary")}</span><span class="v">${binaryFound ? html4`<span class="pill ok">${t4("semantic.found")}</span>` : html4`<span class="pill err">${t4("semantic.missing")}</span>`}</span></div>
+                <div class="rail-kv"><span class="k">${t4("semantic.daemonStatus")}</span><span class="v">${daemonRunning ? html4`<span class="pill ok">${t4("semantic.up")}</span>` : html4`<span class="pill warn">${t4("semantic.down")}</span>`}</span></div>
+                <div class="rail-kv"><span class="k">${t4("semantic.model")}</span><span class="v">${modelPulled ? html4`<span class="pill ok">${t4("semantic.pulled")}</span>` : html4`<span class="pill warn">${t4("semantic.missing")}</span>`}</span></div>
+              ` : html4`
+                <div class="rail-kv"><span class="k">${t4("semantic.apiUrl")}</span><span class="v" style="font-size:11px;max-width:160px;overflow-wrap:anywhere;word-break:break-word;text-align:right">${remote?.baseUrl ?? draft.openaiCompat.baseUrl}</span></div>
+                <div class="rail-kv"><span class="k">${t4("semantic.apiKey")}</span><span class="v">${remote?.apiKeySet ? html4`<span class="pill ok">${t4("semantic.found")}</span>` : html4`<span class="pill warn">${t4("semantic.missing")}</span>`}</span></div>
+                <div class="rail-kv"><span class="k">${t4("semantic.model")}</span><span class="v" style="font-size:11px">${remote?.model ?? draft.openaiCompat.model}</span></div>
+                <div class="rail-kv"><span class="k">${t4("semantic.extraBody")}</span><span class="v">${fmtNum(remote?.extraBodyKeys.length ?? 0)}</span></div>
+              `}
         </div>
 
         <${SemanticExcludesCard} />
@@ -25338,6 +25843,44 @@ function SemanticPanel() {
     </div>
   `;
 }
+function toConfigDraft(config) {
+  return {
+    provider: config.provider,
+    ollama: {
+      baseUrl: config.ollama.baseUrl,
+      model: config.ollama.model
+    },
+    openaiCompat: {
+      baseUrl: config.openaiCompat.baseUrl,
+      apiKey: "",
+      model: config.openaiCompat.model,
+      extraBodyText: JSON.stringify(config.openaiCompat.extraBody ?? {}, null, 2),
+      apiKeySet: config.openaiCompat.apiKeySet
+    }
+  };
+}
+function validateSemanticDraft(draft) {
+  if (draft.provider !== "openai-compat") {
+    return { extraBody: {}, error: null };
+  }
+  const raw = draft.openaiCompat.extraBodyText.trim();
+  if (!raw) {
+    return { extraBody: {}, error: null };
+  }
+  let parsed;
+  try {
+    parsed = JSON.parse(raw);
+  } catch (err) {
+    return {
+      extraBody: {},
+      error: t4("semantic.invalidCustomRequestBody", { error: err.message })
+    };
+  }
+  if (!isPlainObject(parsed)) {
+    return { extraBody: {}, error: t4("semantic.customRequestBodyMustBeObject") };
+  }
+  return { extraBody: parsed, error: null };
+}
 function SemanticSearchSection() {
   useLang();
   const [query2, setQuery] = d2("");
@@ -25510,11 +26053,7 @@ function SemanticExcludesCard() {
       <div class="card-h">
         <span class="title">${t4("semantic.indexConfig")}</span>
         <span class="meta">
-          <a
-            class="mono"
-            style="color:var(--c-brand);text-decoration:none;font-size:11px;cursor:pointer"
-            onClick=${reset}
-          >${t4("semantic.reset")}</a>
+          <a class="mono" style="color:var(--c-brand);text-decoration:none;font-size:11px;cursor:pointer" onClick=${reset}>${t4("semantic.reset")}</a>
         </span>
       </div>
       ${info ? html4`<div style="margin-bottom:8px"><span class="pill ok">${info}</span></div>` : null}
@@ -25546,11 +26085,7 @@ function SemanticExcludesCard() {
         placeholder="**/*.test.ts"
       />
 
-      <div
-        class="checkbox-row"
-        style="margin-top:8px;cursor:pointer"
-        onClick=${() => setDraft({ ...draft, respectGitignore: !draft.respectGitignore })}
-      >
+      <div class="checkbox-row" style="margin-top:8px;cursor:pointer" onClick=${() => setDraft({ ...draft, respectGitignore: !draft.respectGitignore })}>
         <span class=${`box ${draft.respectGitignore ? "on" : ""}`}>${draft.respectGitignore ? "\u2713" : ""}</span>
         <span>${t4("semantic.respectGitignore")}</span>
       </div>
@@ -25570,9 +26105,7 @@ function SemanticExcludesCard() {
       </div>
 
       <div style="display:flex;gap:6px;margin-top:10px">
-        <button class="btn ghost" style="flex:1" disabled=${busy} onClick=${runPreview}>
-          <span class="g">⊕</span><span>${t4("semantic.preview")}</span>
-        </button>
+        <button class="btn ghost" style="flex:1" disabled=${busy} onClick=${runPreview}><span class="g">⊕</span><span>${t4("semantic.preview")}</span></button>
         <button class="btn primary" style="flex:1" disabled=${busy} onClick=${save}>${t4("common.save")}</button>
       </div>
 
@@ -25597,19 +26130,17 @@ function ExcludesPreview({ preview }) {
   ].filter((k3) => (buckets[k3] || 0) > 0);
   return html4`
     <div class="excludes-preview">
-      <div class="summary">
-        ${t4("semantic.previewSummary", { included: preview.filesIncluded, skipped: totalSkipped })}
-      </div>
+      <div class="summary">${t4("semantic.previewSummary", { included: preview.filesIncluded, skipped: totalSkipped })}</div>
       ${reasons.length === 0 ? html4`<div style="color:var(--fg-3)">${t4("semantic.nothingSkipped")}</div>` : reasons.map(
     (r3) => html4`
-                <details>
-                  <summary><strong>${r3}: ${buckets[r3]}</strong></summary>
-                  <ul>
-                    ${(samples[r3] || []).map((p3) => html4`<li><code>${p3}</code></li>`)}
-                    ${(buckets[r3] || 0) > (samples[r3] || []).length ? html4`<li style="color:var(--fg-3)">…${(buckets[r3] || 0) - (samples[r3] || []).length} more</li>` : null}
-                  </ul>
-                </details>
-              `
+              <details>
+                <summary><strong>${r3}: ${buckets[r3]}</strong></summary>
+                <ul>
+                  ${(samples[r3] || []).map((p3) => html4`<li><code>${p3}</code></li>`)}
+                  ${(buckets[r3] || 0) > (samples[r3] || []).length ? html4`<li style="color:var(--fg-3)">…${(buckets[r3] || 0) - (samples[r3] || []).length} more</li>` : null}
+                </ul>
+              </details>
+            `
   )}
       ${preview.sampleIncluded?.length ? html4`
             <details>
@@ -25642,10 +26173,7 @@ function ChipFormRow({
   };
   return html4`
     <div class="form-row">
-      <span class="lbl">
-        ${label}
-        ${sub ? html4`<span style="color:var(--fg-3);font-weight:400;text-transform:none;letter-spacing:0"> · ${sub}</span>` : null}
-      </span>
+      <span class="lbl">${label}${sub ? html4`<span style="color:var(--fg-3);font-weight:400;text-transform:none;letter-spacing:0"> · ${sub}</span>` : null}</span>
       <div style="display:flex;flex-wrap:wrap;gap:4px">
         ${value.map(
     (e3) => html4`
@@ -25676,22 +26204,27 @@ function ChipFormRow({
 function SemanticJobView({ job, running }) {
   useLang();
   const phaseLabel = {
+    setup: t4("semantic.phaseSetup"),
     scan: t4("semantic.phaseScan"),
     embed: t4("semantic.phaseEmbed"),
     write: t4("semantic.phaseWrite"),
     done: t4("semantic.phaseDone"),
-    error: t4("semantic.phaseError")
+    error: t4("semantic.phaseError"),
+    cancelled: t4("semantic.phaseCancelled")
   }[job.phase] ?? job.phase;
   const total = job.chunksTotal ?? 0;
   const doneN = job.chunksDone ?? 0;
   const ratio = total > 0 ? Math.min(1, doneN / total) : 0;
-  const elapsed = ((Date.now() - job.startedAt) / 1e3).toFixed(1);
+  const elapsedBase = job.finishedAt ?? Date.now();
+  const elapsedSeconds = (elapsedBase - job.startedAt) / 1e3;
+  const elapsed = elapsedSeconds < 0.1 ? "<0.1s" : `${elapsedSeconds.toFixed(1)}s`;
+  const phaseSummary = job.phase === "error" && job.lastPhase === "setup" ? t4("semantic.setupFailed") : phaseLabel;
   return html4`
     <div class="kv">
       <div><span class="kv-key">phase</span>
-        <span class=${`pill ${job.phase === "error" ? "pill-err" : running ? "pill-active" : "pill-dim"}`}>${phaseLabel}</span>
-        ${job.aborted ? html4`<span class="pill warn" style="margin-left: 6px;">${t4("semantic.stopping")}</span>` : null}
-        <span style="color:var(--fg-3);margin-left:8px">${elapsed}s</span>
+        <span class=${`pill ${job.phase === "error" ? "pill-err" : job.phase === "cancelled" ? "warn" : running ? "pill-active" : "pill-dim"}`}>${phaseSummary}</span>
+        ${job.aborted && running ? html4`<span class="pill warn" style="margin-left: 6px;">${t4("semantic.stopping")}</span>` : null}
+        <span style="color:var(--fg-3);margin-left:8px">${elapsed}</span>
       </div>
       ${job.filesScanned !== null && job.filesScanned !== void 0 ? html4`<div><span class="kv-key">${t4("semantic.files")}</span>${t4("semantic.scanned", { count: job.filesScanned })}${job.filesChanged != null ? ` \xB7 ${t4("semantic.changed", { count: job.filesChanged })}` : ""}${job.filesSkipped ? ` \xB7 ${t4("semantic.skipped", { count: job.filesSkipped })}` : ""}</div>` : null}
       ${total > 0 ? html4`
@@ -25725,6 +26258,14 @@ function SkipBucketsView({ buckets }) {
   const parts = order.filter(([k3]) => (buckets[k3] || 0) > 0).map(([k3, label]) => `${label}: ${buckets[k3]}`);
   return html4`<div><span class="kv-key">${t4("semantic.skipped")}</span>${t4("semantic.skippedFiles", { total, details: parts.join(", ") })}</div>`;
 }
+function isActiveSemanticPhase(phase) {
+  return phase === "setup" || phase === "scan" || phase === "embed" || phase === "write";
+}
+function isPlainObject(value) {
+  if (value === null || typeof value !== "object" || Array.isArray(value)) return false;
+  const proto = Object.getPrototypeOf(value);
+  return proto === Object.prototype || proto === null;
+}
 
 // dashboard/src/panels/sessions.ts
 function SessionsPanel() {
@@ -25828,7 +26369,314 @@ function SessionsPanel() {
   `;
 }
 
+// dashboard/src/lib/loop-control.ts
+var INTERVAL_PRESETS_MS = [
+  { ms: 3e4, label: "30s" },
+  { ms: 6e4, label: "1m" },
+  { ms: 5 * 6e4, label: "5m" },
+  { ms: 15 * 6e4, label: "15m" },
+  { ms: 60 * 6e4, label: "1h" },
+  { ms: 6 * 60 * 6e4, label: "6h" }
+];
+var UNIT_TO_MS = {
+  s: 1e3,
+  m: 6e4,
+  h: 60 * 6e4
+};
+var MIN_INTERVAL_MS = 5e3;
+var MAX_INTERVAL_MS = 6 * 60 * 6e4;
+function parseCustomInterval(value, unit) {
+  const n3 = Number.parseFloat(value);
+  if (!Number.isFinite(n3) || n3 <= 0) return null;
+  const ms = Math.round(n3 * UNIT_TO_MS[unit]);
+  if (ms < MIN_INTERVAL_MS || ms > MAX_INTERVAL_MS) return null;
+  return ms;
+}
+function formatRemaining(ms) {
+  const safe = Math.max(0, Math.floor(ms / 1e3));
+  const h3 = Math.floor(safe / 3600);
+  const m3 = Math.floor(safe % 3600 / 60);
+  const s3 = safe % 60;
+  if (h3 > 0) return m3 > 0 ? `${h3}h ${m3}m` : `${h3}h`;
+  if (m3 > 0) return s3 > 0 ? `${m3}m ${s3}s` : `${m3}m`;
+  return `${s3}s`;
+}
+
 // dashboard/src/panels/settings.ts
+function fmtUsd22(n3) {
+  return `$${n3.toFixed(n3 < 1 ? 4 : 2)}`;
+}
+function formatPricing(p3) {
+  if (!p3) return null;
+  return t4("settings.modelPricingLine", {
+    hit: p3.inputCacheHit.toFixed(3),
+    miss: p3.inputCacheMiss.toFixed(3),
+    out: p3.output.toFixed(3)
+  });
+}
+function ModelRow({
+  current,
+  catalog,
+  saving,
+  onPick
+}) {
+  const list2 = catalog?.models ?? null;
+  const ready = list2 && list2.length > 0;
+  if (!ready) {
+    return html4`<code class="mono">${current ?? "\u2014"}</code>`;
+  }
+  const options2 = list2.includes(current) ? list2 : [current, ...list2];
+  const price = catalog?.pricing[current];
+  return html4`
+    <span style="display:inline-flex;flex-direction:column;gap:4px">
+      <select
+        value=${current}
+        onChange=${(e3) => {
+    const next = e3.target.value;
+    if (next && next !== current) onPick(next);
+  }}
+        disabled=${saving}
+        style="font-family:var(--font-mono);min-width:200px"
+      >
+        ${options2.map((m3) => html4`<option key=${m3} value=${m3}>${m3}</option>`)}
+      </select>
+      ${price ? html4`<span style="color:var(--fg-3);font-size:11px;font-family:var(--font-mono)">${formatPricing(price)}</span>` : null}
+    </span>
+  `;
+}
+function BudgetGauge({ state }) {
+  if (state.kind === "off") return null;
+  const tone = budgetTone(state);
+  const fill = Math.min(100, state.pct);
+  const valueColor = tone === "err" ? "color:var(--c-err)" : tone === "warn" ? "color:var(--c-warn)" : "color:var(--fg-1)";
+  return html4`
+    <div style="display:flex;flex-direction:column;gap:6px">
+      <div style="display:flex;justify-content:space-between;align-items:baseline;font-size:13px">
+        <span style=${valueColor}>
+          <strong style="font-family:var(--font-mono)">${fmtUsd22(state.spent)}</strong>
+          <span style="color:var(--fg-3)"> ${t4("settings.budgetOf")} </span>
+          <strong style="font-family:var(--font-mono)">${fmtUsd22(state.cap)}</strong>
+        </span>
+        <span style=${`font-family:var(--font-mono);font-size:11px;${valueColor}`}>${state.pct.toFixed(1)}%</span>
+      </div>
+      <div class=${`progress ${tone}`}><div class="progress-fill" style=${`width:${fill}%`}></div></div>
+      <span style="color:var(--fg-3);font-size:11px">
+        ${state.kind === "exhausted" ? t4("settings.budgetRefusing") : state.kind === "warn" ? t4("settings.budgetWarnLine") : t4("settings.budgetIdleLine")}
+      </span>
+    </div>
+  `;
+}
+function BudgetSection({ state, saving, onSetCap, onClear }) {
+  const [custom, setCustom] = d2("");
+  const submitCustom = () => {
+    const n3 = Number.parseFloat(custom);
+    if (Number.isFinite(n3) && n3 > 0) {
+      onSetCap(n3);
+      setCustom("");
+    }
+  };
+  const quickButtons = (caps) => caps.map(
+    (c3) => html4`
+        <button
+          key=${c3}
+          class="btn"
+          style="font-family:var(--font-mono)"
+          disabled=${saving}
+          onClick=${() => onSetCap(c3)}
+        >$${c3}</button>
+      `
+  );
+  const customField = html4`
+    <span style="display:inline-flex;align-items:center;gap:4px;margin-left:auto">
+      <span style="color:var(--fg-3);font-size:11px">${t4("settings.budgetCustom")}</span>
+      <input
+        type="number"
+        min="0.01"
+        step="0.01"
+        value=${custom}
+        placeholder="0.00"
+        onInput=${(e3) => setCustom(e3.target.value)}
+        onKeyDown=${(e3) => {
+    if (e3.key === "Enter") submitCustom();
+  }}
+        style="width:72px;font-family:var(--font-mono)"
+        disabled=${saving}
+      />
+      <button
+        class="btn primary"
+        disabled=${saving || !(Number.parseFloat(custom) > 0)}
+        onClick=${submitCustom}
+      >→</button>
+    </span>
+  `;
+  return html4`
+    <div class="card" style="display:flex;flex-direction:column;gap:12px">
+      <${BudgetGauge} state=${state} />
+
+      ${state.kind === "off" ? html4`
+              <div>
+                <div style="color:var(--fg-3);font-size:11px;margin-bottom:6px">${t4("settings.budgetSetCap")}</div>
+                <div style="display:flex;gap:6px;align-items:center;flex-wrap:wrap">
+                  ${quickButtons(QUICK_CAPS_USD)}
+                  ${customField}
+                </div>
+              </div>
+            ` : state.kind === "warn" || state.kind === "exhausted" ? html4`
+                <div>
+                  <div style="color:var(--fg-3);font-size:11px;margin-bottom:6px">${t4("settings.budgetBumpHint")}</div>
+                  <div style="display:flex;gap:6px;align-items:center;flex-wrap:wrap">
+                    ${bumpSuggestions(state.cap).map(
+    (next) => html4`
+                        <button
+                          key=${next}
+                          class="btn primary"
+                          style="font-family:var(--font-mono)"
+                          disabled=${saving}
+                          onClick=${() => onSetCap(next)}
+                        >→ $${next % 1 === 0 ? next : next.toFixed(2)}</button>
+                      `
+  )}
+                    ${customField}
+                  </div>
+                  <div style="margin-top:8px">
+                    <button class="btn" disabled=${saving} onClick=${onClear}>${t4("settings.budgetClear")}</button>
+                  </div>
+                </div>
+              ` : html4`
+                <div style="display:flex;gap:6px;align-items:center;flex-wrap:wrap">
+                  ${bumpSuggestions(state.cap).map(
+    (next) => html4`
+                      <button
+                        key=${next}
+                        class="btn"
+                        style="font-family:var(--font-mono)"
+                        disabled=${saving}
+                        onClick=${() => onSetCap(next)}
+                      >→ $${next % 1 === 0 ? next : next.toFixed(2)}</button>
+                    `
+  )}
+                  ${customField}
+                  <button
+                    class="btn"
+                    style="margin-left:8px"
+                    disabled=${saving}
+                    onClick=${onClear}
+                  >${t4("settings.budgetClear")}</button>
+                </div>
+              `}
+    </div>
+  `;
+}
+function LoopSection({
+  status,
+  remainingMs,
+  avgIterCostUsd,
+  busy,
+  onStart,
+  onStop
+}) {
+  const [intervalMs, setIntervalMs] = d2(INTERVAL_PRESETS_MS[1].ms);
+  const [prompt, setPrompt] = d2("");
+  const [customValue, setCustomValue] = d2("");
+  const [customUnit, setCustomUnit] = d2("m");
+  if (status) {
+    return html4`
+      <div class="card" style="display:flex;flex-direction:column;gap:10px">
+        <div style="display:flex;justify-content:space-between;align-items:baseline">
+          <span style="color:var(--c-warn);font-family:var(--font-mono);font-size:11px">⟳ ${t4("settings.loopRunning")}</span>
+          <span style="color:var(--fg-3);font-size:11px">
+            ${t4("settings.loopIter", { iter: status.iter })} · ${t4("settings.loopFiresIn", { remaining: formatRemaining(remainingMs) })}
+          </span>
+        </div>
+        <div style="background:var(--bg-elev-2);border:1px solid var(--bd);border-radius:var(--r);padding:8px 10px;font-family:var(--font-mono);font-size:12px;color:var(--fg-1);white-space:pre-wrap;max-height:120px;overflow-y:auto">${status.prompt}</div>
+        <div>
+          <button class="btn danger" disabled=${busy} onClick=${onStop}>${t4("settings.loopStop")}</button>
+        </div>
+      </div>
+    `;
+  }
+  const customMs = parseCustomInterval(customValue, customUnit);
+  const canStart = !busy && intervalMs > 0 && prompt.trim().length > 0;
+  return html4`
+    <div class="card" style="display:flex;flex-direction:column;gap:10px">
+      <div style="color:var(--fg-3);font-size:11px">
+        ${t4("settings.loopIdleHint")}
+        ${typeof avgIterCostUsd === "number" && avgIterCostUsd > 0 ? html4` ${t4("settings.loopCostHint", { cost: `$${avgIterCostUsd.toFixed(4)}` })}` : null}
+      </div>
+      <div style="display:flex;flex-direction:column;gap:6px">
+        <span style="color:var(--fg-3);font-size:11px">${t4("settings.loopInterval")}</span>
+        <div style="display:flex;gap:6px;align-items:center;flex-wrap:wrap">
+          ${INTERVAL_PRESETS_MS.map(
+    (p3) => html4`
+              <button
+                key=${p3.ms}
+                class=${`btn ${intervalMs === p3.ms && customValue === "" ? "primary" : ""}`}
+                style="font-family:var(--font-mono)"
+                disabled=${busy}
+                onClick=${() => {
+      setIntervalMs(p3.ms);
+      setCustomValue("");
+    }}
+              >${p3.label}</button>
+            `
+  )}
+          <span style="display:inline-flex;align-items:center;gap:4px;margin-left:auto">
+            <span style="color:var(--fg-3);font-size:11px">${t4("settings.loopCustom")}</span>
+            <input
+              type="number"
+              min="1"
+              step="1"
+              value=${customValue}
+              onInput=${(e3) => {
+    const raw = e3.target.value;
+    setCustomValue(raw);
+    const ms = parseCustomInterval(raw, customUnit);
+    if (ms !== null) setIntervalMs(ms);
+  }}
+              style="width:64px;font-family:var(--font-mono)"
+              disabled=${busy}
+            />
+            <select
+              value=${customUnit}
+              onChange=${(e3) => {
+    const next = e3.target.value;
+    setCustomUnit(next);
+    if (customValue) {
+      const ms = parseCustomInterval(customValue, next);
+      if (ms !== null) setIntervalMs(ms);
+    }
+  }}
+              disabled=${busy}
+            >
+              <option value="s">s</option>
+              <option value="m">m</option>
+              <option value="h">h</option>
+            </select>
+          </span>
+        </div>
+        ${customValue && customMs === null ? html4`<span style="color:var(--c-err);font-size:11px">${t4("settings.loopRangeError")}</span>` : null}
+      </div>
+      <div style="display:flex;flex-direction:column;gap:6px">
+        <span style="color:var(--fg-3);font-size:11px">${t4("settings.loopPrompt")}</span>
+        <textarea
+          rows="3"
+          placeholder=${t4("settings.loopPromptPlaceholder")}
+          value=${prompt}
+          onInput=${(e3) => setPrompt(e3.target.value)}
+          style="width:100%;font-family:var(--font-mono);resize:vertical"
+          disabled=${busy}
+        ></textarea>
+      </div>
+      <div>
+        <button
+          class="btn primary"
+          disabled=${!canStart}
+          onClick=${() => onStart(intervalMs, prompt.trim())}
+        >${t4("settings.loopStart")}</button>
+      </div>
+    </div>
+  `;
+}
 function SettingsPanel() {
   useLang();
   const [data, setData] = d2(null);
@@ -25836,6 +26684,12 @@ function SettingsPanel() {
   const [saving, setSaving] = d2(false);
   const [saved, setSaved] = d2(null);
   const [draft, setDraft] = d2({});
+  const [catalog, setCatalog] = d2(null);
+  const [loopStatus, setLoopStatus] = d2(null);
+  const [loopAvgCost, setLoopAvgCost] = d2(null);
+  const [loopBusy, setLoopBusy] = d2(false);
+  const lastStatusSyncRef = A2(0);
+  const [now, setNow] = d2(() => Date.now());
   const load = q2(async () => {
     try {
       const r3 = await api("/settings");
@@ -25848,6 +26702,64 @@ function SettingsPanel() {
   y2(() => {
     load();
   }, [load]);
+  y2(() => {
+    api("/models").then(setCatalog).catch(() => void 0);
+  }, []);
+  const refreshLoop = q2(async () => {
+    try {
+      const r3 = await api("/loop/status");
+      setLoopStatus(r3.status);
+      lastStatusSyncRef.current = Date.now();
+    } catch {
+    }
+    try {
+      const r3 = await api("/overview");
+      setLoopAvgCost(r3.stats?.lastTurnCostUsd ?? null);
+    } catch {
+    }
+  }, []);
+  y2(() => {
+    let cancelled = false;
+    refreshLoop();
+    const id = setInterval(() => {
+      if (!cancelled) refreshLoop();
+    }, 5e3);
+    return () => {
+      cancelled = true;
+      clearInterval(id);
+    };
+  }, [refreshLoop]);
+  y2(() => {
+    if (!loopStatus) return;
+    const id = setInterval(() => setNow(Date.now()), 1e3);
+    return () => clearInterval(id);
+  }, [loopStatus]);
+  const remainingMs = loopStatus ? Math.max(0, loopStatus.nextFireMs - (now - lastStatusSyncRef.current)) : 0;
+  const startLoop = q2(
+    async (intervalMs, prompt) => {
+      setLoopBusy(true);
+      try {
+        await api("/loop/start", { method: "POST", body: { intervalMs, prompt } });
+        await refreshLoop();
+      } catch (err) {
+        setError(err.message);
+      } finally {
+        setLoopBusy(false);
+      }
+    },
+    [refreshLoop]
+  );
+  const stopLoop = q2(async () => {
+    setLoopBusy(true);
+    try {
+      await api("/loop/stop", { method: "POST" });
+      await refreshLoop();
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setLoopBusy(false);
+    }
+  }, [refreshLoop]);
   const save = q2(
     async (fields) => {
       setSaving(true);
@@ -25991,11 +26903,50 @@ function SettingsPanel() {
   )}
       </div>
 
+      ${sectionH3(t4("settings.sectionCompute"))}
+      <div class="card">
+        ${fieldRow(
+    t4("settings.proNext"),
+    html4`
+            <button
+              class=${`btn ${v3.proNext ? "primary" : ""}`}
+              onClick=${() => save({ proNext: !v3.proNext })}
+              disabled=${saving}
+            >${v3.proNext ? t4("settings.proArmed") : t4("settings.proArm")}</button>
+          `,
+    t4("settings.proNextNote")
+  )}
+      </div>
+
+      ${sectionH3(t4("settings.sectionBudget"))}
+      <${BudgetSection}
+        state=${deriveBudgetState(v3.budgetUsd, v3.sessionSpendUsd)}
+        saving=${saving}
+        onSetCap=${(usd) => save({ budgetUsd: usd })}
+        onClear=${() => save({ budgetUsd: null })}
+      />
+
+      ${sectionH3(t4("settings.sectionLoop"))}
+      <${LoopSection}
+        status=${loopStatus}
+        remainingMs=${remainingMs}
+        avgIterCostUsd=${loopAvgCost}
+        busy=${loopBusy}
+        onStart=${startLoop}
+        onStop=${stopLoop}
+      />
+
       ${sectionH3(t4("settings.sectionRuntime"))}
       <div class="card">
         ${fieldRow(
     t4("settings.activeModel"),
-    html4`<code class="mono">${v3.model ?? "\u2014"}</code>`
+    html4`<${ModelRow}
+            current=${v3.model ?? "\u2014"}
+            catalog=${catalog}
+            saving=${saving}
+            onPick=${(m3) => save({ model: m3 })}
+          />`,
+    t4("settings.appliesNextTurn")
   )}
         ${fieldRow(
     t4("settings.editMode"),