feat(graph-console): 加「追加预算」按钮

run 撞墙钟/调用次数/token 上限 blocked 时，之前界面上没有入口，只能开发者工具手搓 fetch 调 POST /:id/budget。加一个按钮 + 小弹窗，三维增量（留空不追加）+ 追加后立即启动，复用现有的 act() 提交入口与 confirmAuto 同款 modal 样式。 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01U7xYyvv3pzuV9diMVUH5QL

feat(graph-console): 加「追加预算」按钮
run 撞墙钟/调用次数/token 上限 blocked 时，之前界面上没有入口，只能开发者工具手搓 fetch 调 POST /:id/budget。加一个按钮 + 小弹窗，三维增量（留空不追加）+ 追加后立即启动，复用现有的 act() 提交入口与 confirmAuto 同款 modal 样式。 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01U7xYyvv3pzuV9diMVUH5QL
yibo
1 parent a77934e7
Showing 1 changed file with 59 additions and 0 deletions
web/src/components/graph-console/GraphRunPane.vue
@@ -28,6 +28,7 @@
       <button class="btn"       :disabled="busy || !can('pause')"  @click="act('pause')">⏸ 暂停</button>
       <button class="btn"       :disabled="busy || !can('stop')"   @click="act('stop')">⏹ 停止</button>
       <button class="btn retry" :disabled="busy || !canRetry"      @click="onRetry">🔁 重试</button>
+      <button class="btn budget" :disabled="busy || !canExtendBudget" @click="openBudgetModal">💰 追加预算</button>
       <span v-if="nextNodes.length === 1" class="next-hint">下一步将执行 <code>{{ nextNode.name || nextNode.defNodeId }}</code></span>
       <span v-else-if="nextNodes.length > 1" class="next-hint">自动模式下一批最多并发 <code>{{ nextNodes.length }}</code> 个：
         <code v-for="n in nextNodes" :key="n.defNodeId">{{ n.name || n.defNodeId }}</code></span>
@@ -67,6 +68,35 @@
         </div>
       </div>
     </div>
+
+    <!-- 追加预算：撞顶（尤其是墙钟）之前只能开发者工具手搓 fetch 调 POST /:id/budget，
+         界面上没有入口。三维各自是**增量**（叠加在当前上限上，不是替换），
+         留空的维度不追加——后端 extendBudget 本来就是这个语义（§四.C）。 -->
+    <div v-if="showBudgetModal" class="modal-back" @click.self="showBudgetModal = false">
+      <div class="modal">
+        <h3>追加预算</h3>
+        <p class="lead">这条 run 已经 blocked。三个维度都是往当前上限上加，留空 = 不追加那一维。</p>
+        <ul class="est" v-if="budget">
+          <li>当前剩余：<b>{{ remain.calls }}</b> 次调用 · <b>{{ fmtNum(remain.tokens) }}</b> tokens</li>
+        </ul>
+        <label class="budget-field">墙钟时长（小时）
+          <input type="number" min="0" step="1" v-model.number="budgetForm.hours" placeholder="例如 8" />
+        </label>
+        <label class="budget-field">调用次数
+          <input type="number" min="0" step="1" v-model.number="budgetForm.calls" placeholder="留空不追加" />
+        </label>
+        <label class="budget-field">tokens
+          <input type="number" min="0" step="1" v-model.number="budgetForm.tokens" placeholder="留空不追加" />
+        </label>
+        <label class="budget-resume">
+          <input type="checkbox" v-model="budgetForm.resume" /> 追加后立即启动（沿用当前的 手动/自动 选择）
+        </label>
+        <div class="modal-btns">
+          <button class="btn" @click="showBudgetModal = false">取消</button>
+          <button class="btn go" :disabled="!budgetHasAnyDelta" @click="submitBudget">追加</button>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
  
@@ -116,6 +146,8 @@ const err = ref(&#39;&#39;);
 const notice = ref('');
 const mode = ref('manual');
 const confirmAuto = ref(false);
+const showBudgetModal = ref(false);
+const budgetForm = ref({ hours: 8, calls: '', tokens: '', resume: true });
 const sseStatus = ref('idle');
  
 let es = null;
@@ -138,6 +170,14 @@ const nextNodes = computed(() =&gt; {
 const nextNode = computed(() => nextNodes.value[0] || null); // 手动模式「下一步」提示仍用单数
 const selectedNode = computed(() => nodes.value.find((n) => String(n.defNodeId) === selectedDefId.value) || null);
 const canRetry = computed(() => selectedNode.value && ['fail', 'blocked'].includes(selectedNode.value.status));
+// 与后端 ensureStatus 同一张表（§四.C）：/budget 只在 run_status='blocked' 时可用；
+// budget 为 null 说明这一层不是挂预算的 root run（扣减与熔断只在 root run 上生效），
+// 追加了也没有意义，按钮直接不亮
+const canExtendBudget = computed(() => !!budget.value && run.value?.run_status === 'blocked');
+const budgetHasAnyDelta = computed(() => {
+  const f = budgetForm.value;
+  return [f.hours, f.calls, f.tokens].some((v) => Number(v) > 0);
+});
  
 const remain = computed(() => {
   const b = budget.value || {};
@@ -277,6 +317,21 @@ function onStart() {
 }
 function onRetry() { if (canRetry.value) act('retry'); }
  
+function openBudgetModal() {
+  budgetForm.value = { hours: 8, calls: '', tokens: '', resume: true };
+  showBudgetModal.value = true;
+}
+function submitBudget() {
+  const f = budgetForm.value;
+  const patch = {};
+  if (Number(f.hours) > 0) patch.wallclock_ms = Number(f.hours) * 3600 * 1000;
+  if (Number(f.calls) > 0) patch.total_agent_calls = Number(f.calls);
+  if (Number(f.tokens) > 0) patch.total_tokens = Number(f.tokens);
+  patch.resume = !!f.resume;
+  showBudgetModal.value = false;
+  act('budget', patch);
+}
+
 function onSelect(node) {
   selectedDefId.value = String(node.defNodeId);
   emit('select', node);
@@ -374,6 +429,7 @@ function fmtNum(n) { return (n || 0).toLocaleString(); }
 .btn:disabled { opacity:.4; cursor:not-allowed; }
 .btn.go { background:#1a7f37; border-color:#1a7f37; color:#fff; }
 .btn.retry { border-color:#c96a00; color:#c96a00; }
+.btn.budget { border-color:#8a5cd6; color:#8a5cd6; }
 .next-hint { font-size:11px; color:#666; }
 .next-hint code { background:#eef4ff; padding:1px 5px; border-radius:3px; }
 .notice { color: var(--text-secondary); background: var(--bg-overlay); border: 1px dashed var(--border-primary);
@@ -389,4 +445,7 @@ function fmtNum(n) { return (n || 0).toLocaleString(); }
 .est { font-size:12.5px; color:#444; padding-left:18px; margin:0 0 16px; }
 .est li { margin-bottom:4px; }
 .modal-btns { display:flex; justify-content:flex-end; gap:8px; }
+.budget-field { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:12.5px; color:#444; margin-bottom:8px; }
+.budget-field input { width:140px; font-size:12.5px; padding:3px 6px; border:1px solid #ddd; border-radius:4px; }
+.budget-resume { display:flex; align-items:center; gap:6px; font-size:12.5px; color:#444; margin:4px 0 14px; }
 </style>