diff --git a/routes/admin_observability_routes.py b/routes/admin_observability_routes.py
index aecd803..9f5979a 100644
--- a/routes/admin_observability_routes.py
+++ b/routes/admin_observability_routes.py
@@ -1511,6 +1511,42 @@ def ppt_audit_trigger_aider_heal():
         return jsonify({'ok': False, 'error': f'{type(e).__name__}: {str(e)[:200]}'}), 500
 
 
+@admin_observability_bp.route('/playbooks/toggle/<int:playbook_id>', methods=['POST'])
+@login_required
+def playbook_toggle(playbook_id: int):
+    """Phase 50 N-3：一鍵啟用/停用 playbook（is_active 翻轉）。
+
+    用途：在 host_health 觀測台直接管理 AutoHeal playbook，
+         不需 SSH 188 改 DB。
+    """
+    try:
+        session = get_session()
+        try:
+            row = session.execute(
+                sa_text("SELECT id, name, is_active FROM playbooks WHERE id = :id"),
+                {'id': playbook_id},
+            ).fetchone()
+            if not row:
+                return jsonify({'ok': False, 'error': f'playbook #{playbook_id} 不存在'}), 404
+            new_active = not bool(row[2])
+            session.execute(
+                sa_text("UPDATE playbooks SET is_active = :a, updated_at = NOW() WHERE id = :id"),
+                {'a': new_active, 'id': playbook_id},
+            )
+            session.commit()
+            return jsonify({
+                'ok': True,
+                'playbook_id': playbook_id,
+                'name': row[1],
+                'is_active': new_active,
+                'message': f'Playbook 「{row[1]}」已{"啟用" if new_active else "停用"}',
+            })
+        finally:
+            session.close()
+    except Exception as e:
+        return jsonify({'ok': False, 'error': f'{type(e).__name__}: {str(e)[:200]}'}), 500
+
+
 @admin_observability_bp.route('/host_health/trigger_autoheal', methods=['POST'])
 @login_required
 def host_health_trigger_autoheal():
@@ -2050,7 +2086,7 @@ def host_health_dashboard():
             # playbooks 庫排行（success_count + fail_count + 是否 active）
             pb_rows = s3.execute(
                 sa_text("""
-                    SELECT name, error_type, action_type, severity_min,
+                    SELECT id, name, error_type, action_type, severity_min,
                            success_count, fail_count, is_active, cooldown_min
                     FROM playbooks
                     ORDER BY (success_count + fail_count) DESC, success_count DESC
@@ -2059,13 +2095,14 @@ def host_health_dashboard():
             ).fetchall()
             playbook_ranking = [
                 {
-                    'name': r[0], 'error_type': r[1], 'action_type': r[2],
-                    'severity': r[3], 'success': int(r[4] or 0),
-                    'fail': int(r[5] or 0), 'is_active': bool(r[6]),
-                    'cooldown_min': int(r[7] or 0),
+                    'id': int(r[0]),
+                    'name': r[1], 'error_type': r[2], 'action_type': r[3],
+                    'severity': r[4], 'success': int(r[5] or 0),
+                    'fail': int(r[6] or 0), 'is_active': bool(r[7]),
+                    'cooldown_min': int(r[8] or 0),
                     'success_rate': (
-                        float(r[4] or 0) / float((r[4] or 0) + (r[5] or 0)) * 100
-                    ) if ((r[4] or 0) + (r[5] or 0)) > 0 else 0,
+                        float(r[5] or 0) / float((r[5] or 0) + (r[6] or 0)) * 100
+                    ) if ((r[5] or 0) + (r[6] or 0)) > 0 else 0,
                 }
                 for r in pb_rows
             ]
diff --git a/templates/admin/ai_calls_dashboard.html b/templates/admin/ai_calls_dashboard.html
index eac1e1e..c2f2136 100644
--- a/templates/admin/ai_calls_dashboard.html
+++ b/templates/admin/ai_calls_dashboard.html
@@ -124,40 +124,14 @@
   </div>
   {% endif %}
 
-  <!-- Phase 47 K-2: 24h 每小時呼叫趨勢 -->
+  <!-- Phase 47 K-2 + Phase 50 N-1: 24h 每小時呼叫趨勢（chart.js）-->
   {% if hourly_trend %}
   <div class="card mb-3">
     <div class="card-header"><strong><i class="fas fa-chart-area me-2"></i>過去 24h 每小時呼叫趨勢</strong>
-      <small class="text-muted">每小時 bucket：呼叫數 · 成本 · 錯誤</small>
+      <small class="text-muted">折線：呼叫數 + 錯誤；柱狀：成本 USD</small>
     </div>
-    <div class="card-body p-0">
-      <table class="table table-sm mb-0" style="font-size: 0.85em;">
-        <thead class="table-light">
-          <tr>
-            <th>時段</th><th>呼叫數</th><th>成本 USD</th><th>錯誤</th><th style="width: 50%;">流量分布</th>
-          </tr>
-        </thead>
-        <tbody>
-          {% set max_calls = (hourly_trend | map(attribute='calls') | max) or 1 %}
-          {% for h in hourly_trend %}
-          <tr>
-            <td><code>{{ h.hour }}</code></td>
-            <td><strong>{{ "{:,}".format(h.calls) }}</strong></td>
-            <td>${{ "%.3f"|format(h.cost) }}</td>
-            <td>
-              {% if h.errors > 0 %}<span class="text-danger">{{ h.errors }}</span>
-              {% else %}<small class="text-muted">0</small>{% endif %}
-            </td>
-            <td>
-              <div class="progress" style="height: 8px;">
-                <div class="progress-bar {% if h.errors > 0 %}bg-warning{% else %}bg-info{% endif %}"
-                     style="width: {{ (h.calls / max_calls * 100) | round | int }}%"></div>
-              </div>
-            </td>
-          </tr>
-          {% endfor %}
-        </tbody>
-      </table>
+    <div class="card-body">
+      <canvas id="hourlyTrendChart" height="80"></canvas>
     </div>
   </div>
   {% endif %}
@@ -292,7 +266,36 @@
   </small></p>
 </div>
 
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
 <script>
+// Phase 50 N-1: hourly trend chart
+(function() {
+  const labels = {{ hourly_trend | map(attribute='hour') | list | tojson }};
+  const calls = {{ hourly_trend | map(attribute='calls') | list | tojson }};
+  const costs = {{ hourly_trend | map(attribute='cost') | list | tojson }};
+  const errors = {{ hourly_trend | map(attribute='errors') | list | tojson }};
+  const el = document.getElementById('hourlyTrendChart');
+  if (!el || !labels.length) return;
+  new Chart(el, {
+    data: {
+      labels: labels,
+      datasets: [
+        { type: 'line', label: '呼叫數', data: calls, borderColor: '#0d6efd', backgroundColor: 'rgba(13,110,253,0.1)', tension: 0.3, fill: true, yAxisID: 'y' },
+        { type: 'line', label: '錯誤次數', data: errors, borderColor: '#dc3545', backgroundColor: 'rgba(220,53,69,0.1)', tension: 0.3, yAxisID: 'y' },
+        { type: 'bar', label: '成本 USD', data: costs, backgroundColor: 'rgba(255,193,7,0.5)', borderColor: '#ffc107', yAxisID: 'y1' },
+      ]
+    },
+    options: {
+      responsive: true,
+      interaction: { mode: 'index', intersect: false },
+      scales: {
+        y:  { type: 'linear', position: 'left', beginAtZero: true, title: { display: true, text: '次數' } },
+        y1: { type: 'linear', position: 'right', beginAtZero: true, grid: { drawOnChartArea: false }, title: { display: true, text: 'USD' } },
+      }
+    }
+  });
+})();
+
 async function triggerCodeReview() {
   if (!confirm('觸發 Code Review Pipeline？\n\n會對最新 commit 跑 5 step 審查（Hermes 掃描 → OpenClaw 摘要 → EA 決策 → NemoTron 行動），背景執行。')) return;
   try {
diff --git a/templates/admin/budget.html b/templates/admin/budget.html
index 330364c..0691a71 100644
--- a/templates/admin/budget.html
+++ b/templates/admin/budget.html
@@ -131,27 +131,14 @@
   </div>
   {% endif %}
 
-  <!-- Phase 47 K-3: 30d daily cost trend by provider -->
+  <!-- Phase 47 K-3 + Phase 50 N-2: 30d cost trend by provider (chart.js stacked) -->
   {% if cost_trend_30d %}
   <div class="card mb-3">
     <div class="card-header"><strong><i class="fas fa-chart-line me-2"></i>過去 30 日每日成本（依 provider）</strong>
-      <small class="text-muted">資料來源：ai_calls 每日 SUM(cost_usd) GROUP BY provider</small>
+      <small class="text-muted">堆疊柱圖：依 provider 分色 · 資料來源 ai_calls 每日 SUM(cost_usd)</small>
     </div>
-    <div class="card-body p-0" style="max-height: 360px; overflow-y: auto;">
-      <table class="table table-sm mb-0" style="font-size: 0.85em;">
-        <thead class="table-light" style="position: sticky; top: 0;">
-          <tr><th>日期</th><th>供應商</th><th class="text-end">成本 USD</th></tr>
-        </thead>
-        <tbody>
-          {% for r in cost_trend_30d %}
-          <tr>
-            <td><code>{{ r.date }}</code></td>
-            <td><span class="badge bg-secondary">{{ r.provider }}</span></td>
-            <td class="text-end">${{ "%.4f"|format(r.cost) }}</td>
-          </tr>
-          {% endfor %}
-        </tbody>
-      </table>
+    <div class="card-body">
+      <canvas id="costTrend30dChart" height="80"></canvas>
     </div>
   </div>
   {% endif %}
@@ -184,7 +171,44 @@
   </small></p>
 </div>
 
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
 <script>
+// Phase 50 N-2: 30d cost trend stacked bar chart
+(function() {
+  const raw = {{ cost_trend_30d | tojson }};
+  if (!raw || !raw.length) return;
+  const dateSet = [...new Set(raw.map(r => r.date))].sort();
+  const providerSet = [...new Set(raw.map(r => r.provider))];
+  const colors = {
+    'gcp_ollama': '#28a745', 'ollama_secondary': '#5cb85c', 'ollama_111': '#a3d9a4',
+    'gemini': '#fd7e14', 'claude': '#6610f2', 'nim': '#0dcaf0',
+    'openrouter': '#6c757d', 'nim_via_elephant': '#20c997',
+  };
+  const datasets = providerSet.map((p, i) => {
+    const bg = colors[p] || `hsl(${(i*47)%360}, 65%, 55%)`;
+    return {
+      label: p,
+      data: dateSet.map(d => {
+        const row = raw.find(r => r.date === d && r.provider === p);
+        return row ? row.cost : 0;
+      }),
+      backgroundColor: bg,
+    };
+  });
+  const el = document.getElementById('costTrend30dChart');
+  if (!el) return;
+  new Chart(el, {
+    type: 'bar',
+    data: { labels: dateSet, datasets: datasets },
+    options: {
+      responsive: true,
+      interaction: { mode: 'index', intersect: false },
+      plugins: { tooltip: { callbacks: { label: c => `${c.dataset.label}: $${c.parsed.y.toFixed(4)}` } } },
+      scales: { x: { stacked: true }, y: { stacked: true, beginAtZero: true, title: { display: true, text: 'USD' } } }
+    }
+  });
+})();
+
 async function forceThrottle() {
   if (!confirm('立即重算所有 provider 的 throttle 狀態？\n（不等下次每小時 cron）')) return;
   try {
diff --git a/templates/admin/host_health.html b/templates/admin/host_health.html
index 88a5cb6..e5ee49e 100644
--- a/templates/admin/host_health.html
+++ b/templates/admin/host_health.html
@@ -370,7 +370,7 @@
             <th>嚴重度</th>
             <th class="text-end">成功</th><th class="text-end">失敗</th>
             <th class="text-end">成功率</th>
-            <th>狀態</th><th class="text-end">冷卻 min</th>
+            <th>狀態</th><th class="text-end">冷卻 min</th><th>切換</th>
           </tr>
         </thead>
         <tbody>
@@ -397,6 +397,12 @@
               {% endif %}
             </td>
             <td class="text-end">{{ p.cooldown_min }}</td>
+            <td>
+              <button class="btn btn-sm {% if p.is_active %}btn-outline-secondary{% else %}btn-outline-success{% endif %}"
+                      onclick="togglePlaybook({{ p.id }}, {{ p.name|tojson }})">
+                {% if p.is_active %}<i class="fas fa-pause me-1"></i>停用{% else %}<i class="fas fa-play me-1"></i>啟用{% endif %}
+              </button>
+            </td>
           </tr>
           {% endfor %}
         </tbody>
@@ -469,6 +475,22 @@
 </div>
 
 <script>
+async function togglePlaybook(id, name) {
+  if (!confirm(`切換 Playbook 「${name}」狀態？`)) return;
+  try {
+    const r = await fetch(`/observability/playbooks/toggle/${id}`, {method: 'POST'});
+    const d = await r.json();
+    if (d.ok) {
+      alert(`✅ ${d.message}`);
+      window.location.reload();
+    } else {
+      alert('❌ ' + (d.error || '切換失敗'));
+    }
+  } catch (e) {
+    alert('Error: ' + e);
+  }
+}
+
 async function triggerAutoHeal(hostLabel) {
   if (!confirm(`觸發 AutoHeal？\n\n主機：${hostLabel}\n\n會跑對應 ADR-013 playbook（DOCKER_RESTART / SSH_CMD / ALERT_ONLY）並寫入 incidents 表。`)) return;
   try {