ewoooc/templates/admin/budget.html

{% extends "base.html" %}

{% block title %}預算控管{% endblock %}

{% block content %}
<div class="container-fluid mt-3">
  <h2 class="mb-3"><i class="fas fa-wallet me-2"></i>預算控管
    <small class="text-muted">ai_call_budgets × 當月實際支出即時對比</small>
  </h2>

  {% if error %}<div class="alert alert-warning"><strong><i class="fas fa-exclamation-triangle me-1"></i></strong> {{ error }}</div>{% endif %}

  <p class="text-muted small">
    依 ADR-028 預算 + Phase 20 成本節流：每小時 cron 檢查當月支出，
    線性外推月底成本超 110% → 自動節流（claude→gemini fallback）。
    手動編輯預算後立即生效（不需重啟）。
  </p>

  <!-- Phase 39 D-4: 一鍵立即重算 throttle 狀態（L2 自動化）-->
  <div class="mb-3">
    <button class="btn btn-warning btn-sm" onclick="forceThrottle()">
      <i class="fas fa-bolt me-1"></i>立即重算節流狀態（不等 cron）
    </button>
    <small class="text-muted ms-2">用途：發現某 provider 飆超 110% 時立即 evaluate，毋需等下次每小時 cron。</small>
  </div>

  <!-- Phase 39 D-4: RAG 自動建議策略 -->
  {% if budget_strategies %}
  <div class="card mb-3" style="border-left: 4px solid #6f42c1;">
    <div class="card-header bg-light">
      <strong><i class="fas fa-lightbulb me-2"></i>RAG 自動策略建議</strong>
      <small class="text-muted">— 從知識庫 ai_insights 召回過去類似超支情境的應對策略</small>
    </div>
    <div class="card-body p-2">
      <ul class="list-unstyled small mb-0">
        {% for s in budget_strategies %}
        <li class="mb-2 p-2" style="background: #fafafa; border-radius: 4px;">
          <span class="badge bg-info text-dark me-1">{{ s.insight_type }}</span>
          <span class="badge bg-secondary me-1">相似度 {{ "%.2f"|format(s.similarity) }}</span>
          <span>{{ s.content }}{% if s.content|length >= 240 %}…{% endif %}</span>
        </li>
        {% endfor %}
      </ul>
    </div>
  </div>
  {% endif %}

  <table class="table table-hover">
    <thead class="table-light">
      <tr>
        <th>週期</th><th>供應商</th>
        <th class="text-end">已花費 (USD)</th>
        <th>預算 (USD)</th><th>警示閾值 %</th>
        <th class="text-end">使用率</th><th>狀態</th>
        <th>更新時間</th><th>動作</th>
      </tr>
    </thead>
    <tbody>
      {% for r in rows %}
        <tr {% if r.throttled %}class="table-danger"{% elif r.ratio >= 0.8 %}class="table-warning"{% endif %}>
          <td><span class="badge bg-secondary">{{ r.period }}</span></td>
          <td><code>{{ r.provider }}</code></td>
          <td class="text-end">${{ "%.2f"|format(r.spent) }}</td>
          <td>
            <input type="number" step="0.01" min="0.01" value="{{ "%.2f"|format(r.budget_usd) }}"
                   class="form-control form-control-sm budget-input"
                   data-budget-id="{{ r.id }}" style="width: 110px;">
          </td>
          <td>
            <input type="number" min="1" max="100" value="{{ r.alert_pct }}"
                   class="form-control form-control-sm alert-input"
                   data-budget-id="{{ r.id }}" style="width: 80px;">
          </td>
          <td class="text-end">
            <strong class="{% if r.ratio >= 1.10 %}text-danger{% elif r.ratio >= 0.8 %}text-warning{% else %}text-success{% endif %}">
              {{ "%.0f"|format(r.ratio * 100) }}%
            </strong>
          </td>
          <td>
            {% if r.throttled %}
              <span class="badge bg-danger"><i class="fas fa-exclamation-triangle me-1"></i>已節流</span>
            {% elif r.ratio >= 0.8 %}
              <span class="badge bg-warning"><i class="fas fa-exclamation me-1"></i>接近上限</span>
            {% else %}
              <span class="badge bg-success"><i class="fas fa-check me-1"></i>正常</span>
            {% endif %}
          </td>
          <td><small>{{ r.updated_at }}</small></td>
          <td>
            <button class="btn btn-primary btn-sm save-budget-btn"
                    data-budget-id="{{ r.id }}" onclick="saveBudget({{ r.id }})">
              <i class="fas fa-save me-1"></i>儲存
            </button>
          </td>
        </tr>
      {% else %}
        <tr><td colspan="9" class="text-center text-muted">無預算資料（需先跑 migrations/025）</td></tr>
      {% endfor %}
    </tbody>
  </table>

  <p class="text-muted mt-3"><small>
    <i class="fas fa-robot me-1"></i>Operation Ollama-First v5.0 / Phase 29 — 預算控管
  </small></p>
</div>

<script>
async function forceThrottle() {
  if (!confirm('立即重算所有 provider 的 throttle 狀態？\n（不等下次每小時 cron）')) return;
  try {
    const r = await fetch('/observability/budget/force_throttle', {method: 'POST'});
    const d = await r.json();
    if (d.ok) {
      const list = (d.throttled_providers && d.throttled_providers.length > 0)
                   ? d.throttled_providers.join(', ') : '（無）';
      alert(`✅ 已重算：被節流的 provider = ${list}`);
      window.location.reload();
    } else {
      alert('❌ ' + (d.error || '重算失敗'));
    }
  } catch (e) {
    alert('Error: ' + e);
  }
}

async function saveBudget(id) {
  const budgetInput = document.querySelector(`.budget-input[data-budget-id="${id}"]`);
  const alertInput = document.querySelector(`.alert-input[data-budget-id="${id}"]`);
  const btn = document.querySelector(`.save-budget-btn[data-budget-id="${id}"]`);
  btn.disabled = true; btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
  try {
    const r = await fetch(`/observability/budget/update/${id}`, {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({
        budget_usd: parseFloat(budgetInput.value),
        alert_pct: parseInt(alertInput.value),
      }),
    });
    const d = await r.json();
    if (d.ok) {
      btn.innerHTML = '<i class="fas fa-check"></i> 已儲存';
      setTimeout(() => { btn.innerHTML = '<i class="fas fa-save me-1"></i>儲存'; btn.disabled = false; }, 1500);
    } else {
      alert('更新失敗：' + (d.error || 'unknown'));
      btn.disabled = false; btn.innerHTML = '<i class="fas fa-save me-1"></i>儲存';
    }
  } catch (e) {
    alert('Error：' + e);
    btn.disabled = false; btn.innerHTML = '<i class="fas fa-save me-1"></i>儲存';
  }
}
</script>
{% endblock %}