reasonix 0.30.4 → 0.31.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)",
@@ -19709,7 +19739,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 +19817,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 +19929,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 +20160,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",
@@ -20222,7 +20292,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 +23010,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 +23744,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 +23829,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 +23852,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 +24794,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 +24893,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 +25061,7 @@ function OverviewPanel() {
         ${tokens7dKpi(c3)}
         ${cacheHitKpi(c3)}
         ${toolCallsKpi(c3)}
+        ${budgetKpi(o3)}
 
         ${currentSessionBlock(c3)}
         ${costTrendSpark(c3)}
@@ -25001,7 +25274,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();
@@ -25828,7 +26101,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 +26416,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 +26434,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 +26635,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"),