@littlebearapps/platform-admin-sdk 2.1.0 → 2.3.0

package/templates/shared/dashboard/src/components/usage/FeatureBudgetsTable.astro

@@ -0,0 +1,872 @@
+---
+/**
+ * FeatureBudgetsTable Component
+ *
+ * Displays feature-level usage metrics and circuit breaker status.
+ * Data is populated via JavaScript after API fetch.
+ *
+ * Features:
+ * - Feature usage metrics from Analytics Engine
+ * - Circuit breaker status per feature
+ * - Toggle circuit breaker (enable/disable)
+ * - Budget percentage indicators
+ */
+---
+
+<div class="feature-budgets-panel" role="region" aria-label="Feature budgets">
+  <!-- Header -->
+  <div class="panel-header">
+    <div class="header-left">
+      <h3 class="panel-title">Feature Budgets</h3>
+      <span class="feature-count" id="feature-count">0 features</span>
+    </div>
+    <div class="header-actions">
+      <button type="button" class="refresh-btn" id="refresh-features-btn" title="Refresh">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="14"
+          height="14"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <polyline points="23 4 23 10 17 10"></polyline>
+          <polyline points="1 20 1 14 7 14"></polyline>
+          <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>
+        </svg>
+      </button>
+    </div>
+  </div>
+
+  <!-- Empty state -->
+  <div id="features-empty-state" class="empty-state">
+    <div class="empty-icon">📊</div>
+    <p class="empty-title">No feature telemetry yet</p>
+    <p class="empty-desc">
+      Feature usage data will appear once projects start reporting telemetry using the <code
+        >withFeatureBudget()</code
+      > wrapper.
+    </p>
+  </div>
+
+  <!-- Features table -->
+  <div id="features-table-container" class="table-container hidden">
+    <table class="features-table">
+      <thead>
+        <tr>
+          <th class="col-feature">Feature</th>
+          <th class="col-project">Project</th>
+          <th class="col-metrics">D1 Writes</th>
+          <th class="col-metrics">KV Ops</th>
+          <th class="col-metrics">Requests</th>
+          <th class="col-trend">7d Trend</th>
+          <th class="col-status">Status</th>
+          <th class="col-action">Action</th>
+        </tr>
+      </thead>
+      <tbody id="features-tbody">
+        <!-- Rows populated via JavaScript -->
+      </tbody>
+    </table>
+  </div>
+
+  <!-- Last updated -->
+  <div class="panel-footer">
+    <span id="features-last-updated" class="last-updated">Last updated: --</span>
+  </div>
+</div>
+
+<style>
+  .feature-budgets-panel {
+    background: var(--usage-bg-secondary);
+    border: 1px solid var(--usage-border-default);
+    border-radius: var(--usage-radius-xl);
+    padding: 1.25rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .panel-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .header-left {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+  }
+
+  .panel-title {
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--usage-text-primary);
+    margin: 0;
+  }
+
+  .feature-count {
+    font-size: 0.6875rem;
+    color: var(--usage-text-muted);
+    background: var(--usage-bg-tertiary);
+    padding: 0.125rem 0.5rem;
+    border-radius: var(--usage-radius-sm);
+  }
+
+  .header-actions {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .refresh-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    background: var(--usage-bg-tertiary);
+    border: 1px solid var(--usage-border-subtle);
+    border-radius: var(--usage-radius-md);
+    color: var(--usage-text-secondary);
+    cursor: pointer;
+    transition: all var(--usage-transition-fast);
+  }
+
+  .refresh-btn:hover {
+    background: var(--usage-bg-hover);
+    color: var(--usage-text-primary);
+  }
+
+  .refresh-btn.loading svg {
+    animation: spin 1s linear infinite;
+  }
+
+  @keyframes spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  /* Empty state */
+  .empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+    text-align: center;
+  }
+
+  .empty-icon {
+    font-size: 2rem;
+    margin-bottom: 0.75rem;
+  }
+
+  .empty-title {
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--usage-text-primary);
+    margin: 0 0 0.25rem 0;
+  }
+
+  .empty-desc {
+    font-size: 0.75rem;
+    color: var(--usage-text-muted);
+    margin: 0;
+    max-width: 300px;
+  }
+
+  .empty-desc code {
+    font-family: var(--usage-font-mono);
+    font-size: 0.6875rem;
+    background: var(--usage-bg-tertiary);
+    padding: 0.125rem 0.25rem;
+    border-radius: var(--usage-radius-sm);
+  }
+
+  /* Table */
+  .table-container {
+    overflow-x: auto;
+  }
+
+  .features-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.75rem;
+  }
+
+  .features-table th {
+    text-align: left;
+    font-size: 0.625rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.03em;
+    color: var(--usage-text-muted);
+    padding: 0.5rem 0.75rem;
+    border-bottom: 1px solid var(--usage-border-subtle);
+    white-space: nowrap;
+  }
+
+  .features-table td {
+    padding: 0.625rem 0.75rem;
+    border-bottom: 1px solid var(--usage-border-subtle);
+    color: var(--usage-text-primary);
+  }
+
+  .features-table tbody tr:hover {
+    background: var(--usage-bg-hover);
+  }
+
+  .features-table tbody tr:last-child td {
+    border-bottom: none;
+  }
+
+  .col-feature {
+    width: 25%;
+  }
+  .col-project {
+    width: 12%;
+  }
+  .col-metrics {
+    width: 10%;
+    text-align: right;
+  }
+  .col-trend {
+    width: 12%;
+    text-align: center;
+  }
+  .col-status {
+    width: 10%;
+    text-align: center;
+  }
+  .col-action {
+    width: 10%;
+    text-align: center;
+  }
+
+  /* Sparkline */
+  .sparkline {
+    display: block;
+  }
+
+  .sparkline-line {
+    fill: none;
+    stroke: var(--usage-primary);
+    stroke-width: 1.5;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  .sparkline-area {
+    fill: var(--usage-primary);
+    opacity: 0.1;
+  }
+
+  .sparkline-empty {
+    font-size: 0.625rem;
+    color: var(--usage-text-muted);
+  }
+
+  /* Feature key display */
+  .feature-key {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+  }
+
+  .feature-name {
+    font-weight: 500;
+    color: var(--usage-text-primary);
+  }
+
+  .feature-category {
+    font-size: 0.625rem;
+    color: var(--usage-text-muted);
+  }
+
+  /* Metrics cells */
+  .metric-cell {
+    text-align: right;
+    font-family: var(--usage-font-mono);
+    font-size: 0.6875rem;
+  }
+
+  .metric-value {
+    display: block;
+    font-weight: 500;
+  }
+
+  .metric-pct {
+    display: block;
+    font-size: 0.5625rem;
+    color: var(--usage-text-muted);
+  }
+
+  .metric-pct.warning {
+    color: var(--usage-status-warning);
+  }
+
+  .metric-pct.critical {
+    color: var(--usage-status-critical);
+  }
+
+  /* Budget progress bars */
+  .budget-bar {
+    width: 100%;
+    height: 3px;
+    background: var(--usage-border-subtle, #e5e7eb);
+    border-radius: 2px;
+    margin-top: 3px;
+    overflow: hidden;
+  }
+
+  .budget-bar-fill {
+    height: 100%;
+    border-radius: 2px;
+    transition: width 0.3s ease;
+  }
+
+  .budget-bar-fill.ok {
+    background: var(--usage-status-ok, #10b981);
+  }
+
+  .budget-bar-fill.warning {
+    background: var(--usage-status-warning, #f59e0b);
+  }
+
+  .budget-bar-fill.critical {
+    background: var(--usage-status-critical, #ef4444);
+  }
+
+  /* Status badges */
+  .status-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.125rem 0.5rem;
+    font-size: 0.625rem;
+    font-weight: 600;
+    border-radius: var(--usage-radius-sm);
+  }
+
+  .status-badge.enabled {
+    background: var(--usage-status-ok-bg);
+    color: var(--usage-status-ok);
+  }
+
+  .status-badge.disabled {
+    background: var(--usage-status-critical-bg);
+    color: var(--usage-status-critical);
+  }
+
+  .status-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+  }
+
+  .status-badge.enabled .status-dot {
+    background: var(--usage-status-ok);
+  }
+
+  .status-badge.disabled .status-dot {
+    background: var(--usage-status-critical);
+  }
+
+  /* Action buttons */
+  .toggle-btn {
+    padding: 0.25rem 0.5rem;
+    font-size: 0.625rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.03em;
+    border-radius: var(--usage-radius-sm);
+    cursor: pointer;
+    transition: all var(--usage-transition-fast);
+  }
+
+  .toggle-btn.enable {
+    color: var(--usage-status-ok);
+    background: var(--usage-status-ok-bg);
+    border: 1px solid var(--usage-status-ok);
+  }
+
+  .toggle-btn.enable:hover {
+    background: var(--usage-status-ok);
+    color: white;
+  }
+
+  .toggle-btn.disable {
+    color: var(--usage-status-critical);
+    background: var(--usage-status-critical-bg);
+    border: 1px solid var(--usage-status-critical);
+  }
+
+  .toggle-btn.disable:hover {
+    background: var(--usage-status-critical);
+    color: white;
+  }
+
+  .toggle-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  /* Footer */
+  .panel-footer {
+    border-top: 1px solid var(--usage-border-subtle);
+    padding-top: 0.5rem;
+  }
+
+  .last-updated {
+    font-size: 0.625rem;
+    color: var(--usage-text-muted);
+  }
+
+  .hidden {
+    display: none !important;
+  }
+
+  /* Responsive */
+  @media (max-width: 768px) {
+    .features-table th,
+    .features-table td {
+      padding: 0.5rem;
+    }
+
+    .col-metrics {
+      display: none;
+    }
+  }
+</style>
+
+<script>
+  /**
+   * FeatureBudgetsTable JavaScript
+   *
+   * Handles fetching feature data and updating the table using safe DOM methods.
+   */
+
+  interface FeatureMetrics {
+    d1Writes: number;
+    d1Reads: number;
+    kvReads: number;
+    kvWrites: number;
+    doRequests: number;
+    doGbSeconds: number;
+    r2ClassA: number;
+    r2ClassB: number;
+    aiNeurons: number;
+    queueMessages: number;
+    requests: number;
+    cpuMs: number;
+  }
+
+  interface FeatureCircuitBreaker {
+    enabled: boolean;
+    disabledReason?: string;
+    disabledAt?: string;
+    autoResetAt?: string;
+  }
+
+  interface FeatureData {
+    featureKey: string;
+    project: string;
+    category: string;
+    feature: string;
+    metrics: FeatureMetrics;
+    circuitBreaker: FeatureCircuitBreaker;
+  }
+
+  interface HistoryDataPoint {
+    date: string;
+    d1Writes: number;
+    d1Reads: number;
+    kvReads: number;
+    kvWrites: number;
+    doRequests: number;
+    doGbSeconds: number;
+    r2ClassA: number;
+    r2ClassB: number;
+    aiNeurons: number;
+    queueMessages: number;
+    requests: number;
+    timesDisabled: number;
+  }
+
+  type HistoryByFeature = Record<string, HistoryDataPoint[]>;
+
+  interface FeatureBudgets {
+    _defaults: Record<string, { hourly: number; daily: number }>;
+    features: Record<string, Record<string, { hourly: number; daily: number }>>;
+  }
+
+  // Format numbers with K/M suffix
+  function formatNumber(n: number): string {
+    if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
+    if (n >= 1_000) return `${(n / 1_000).toFixed(1)}K`;
+    return n.toFixed(0);
+  }
+
+  // Calculate budget percentage
+  function getBudgetPct(value: number, limit: number): number {
+    if (limit <= 0) return 0;
+    return (value / limit) * 100;
+  }
+
+  // Get status class based on percentage
+  function getPctClass(pct: number): string {
+    if (pct >= 90) return 'critical';
+    if (pct >= 70) return 'warning';
+    return '';
+  }
+
+  // Get bar fill class based on percentage
+  function getBarClass(pct: number): string {
+    if (pct >= 90) return 'critical';
+    if (pct >= 70) return 'warning';
+    return 'ok';
+  }
+
+  // Create a budget progress bar element
+  function createBudgetBar(pct: number): HTMLDivElement {
+    const bar = document.createElement('div');
+    bar.className = 'budget-bar';
+    const fill = document.createElement('div');
+    fill.className = `budget-bar-fill ${getBarClass(pct)}`;
+    fill.style.width = `${Math.min(pct, 100)}%`;
+    bar.appendChild(fill);
+    return bar;
+  }
+
+  // Cached budgets and history
+  let cachedBudgets: FeatureBudgets | null = null;
+  let cachedHistory: HistoryByFeature | null = null;
+
+  /**
+   * Create SVG sparkline from data points
+   */
+  function createSparkline(data: number[], width = 60, height = 20): SVGElement {
+    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    svg.setAttribute('class', 'sparkline');
+    svg.setAttribute('viewBox', `0 0 ${width} ${height}`);
+    svg.setAttribute('width', String(width));
+    svg.setAttribute('height', String(height));
+
+    if (data.length < 2) {
+      return svg; // Empty sparkline
+    }
+
+    const max = Math.max(...data, 1);
+    const min = Math.min(...data);
+    const range = max - min || 1;
+
+    // Calculate points
+    const points: string[] = [];
+    const xStep = width / (data.length - 1);
+
+    for (let i = 0; i < data.length; i++) {
+      const x = i * xStep;
+      const y = height - ((data[i] - min) / range) * (height - 4) - 2;
+      points.push(`${x.toFixed(1)},${y.toFixed(1)}`);
+    }
+
+    // Create area path (filled area under line)
+    const areaPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+    const areaD = `M0,${height} L${points.join(' L')} L${width},${height} Z`;
+    areaPath.setAttribute('d', areaD);
+    areaPath.setAttribute('class', 'sparkline-area');
+    svg.appendChild(areaPath);
+
+    // Create line path
+    const linePath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+    linePath.setAttribute('d', `M${points.join(' L')}`);
+    linePath.setAttribute('class', 'sparkline-line');
+    svg.appendChild(linePath);
+
+    return svg;
+  }
+
+  // Create a table row element safely
+  function createFeatureRow(
+    f: FeatureData,
+    defaults: Record<string, { hourly: number; daily?: number }>
+  ): HTMLTableRowElement {
+    const row = document.createElement('tr');
+    row.dataset.featureKey = f.featureKey;
+
+    // Feature column
+    const featureCell = document.createElement('td');
+    const featureDiv = document.createElement('div');
+    featureDiv.className = 'feature-key';
+    const nameSpan = document.createElement('span');
+    nameSpan.className = 'feature-name';
+    nameSpan.textContent = f.feature;
+    const catSpan = document.createElement('span');
+    catSpan.className = 'feature-category';
+    catSpan.textContent = f.category;
+    featureDiv.appendChild(nameSpan);
+    featureDiv.appendChild(catSpan);
+    featureCell.appendChild(featureDiv);
+    row.appendChild(featureCell);
+
+    // Project column
+    const projectCell = document.createElement('td');
+    projectCell.textContent = f.project;
+    row.appendChild(projectCell);
+
+    // D1 Writes column
+    const d1WritesPct = getBudgetPct(f.metrics.d1Writes, defaults.d1Writes?.hourly ?? 10000);
+    const d1Cell = document.createElement('td');
+    d1Cell.className = 'metric-cell';
+    const d1Value = document.createElement('span');
+    d1Value.className = 'metric-value';
+    d1Value.textContent = formatNumber(f.metrics.d1Writes);
+    const d1Pct = document.createElement('span');
+    d1Pct.className = `metric-pct ${getPctClass(d1WritesPct)}`;
+    d1Pct.textContent = `${d1WritesPct.toFixed(0)}%`;
+    d1Cell.appendChild(d1Value);
+    d1Cell.appendChild(d1Pct);
+    d1Cell.appendChild(createBudgetBar(d1WritesPct));
+    row.appendChild(d1Cell);
+
+    // KV Ops column
+    const kvOps = f.metrics.kvReads + f.metrics.kvWrites;
+    const kvLimit = (defaults.kvReads?.hourly ?? 50000) + (defaults.kvWrites?.hourly ?? 5000);
+    const kvOpsPct = getBudgetPct(kvOps, kvLimit);
+    const kvCell = document.createElement('td');
+    kvCell.className = 'metric-cell';
+    const kvValue = document.createElement('span');
+    kvValue.className = 'metric-value';
+    kvValue.textContent = formatNumber(kvOps);
+    const kvPct = document.createElement('span');
+    kvPct.className = `metric-pct ${getPctClass(kvOpsPct)}`;
+    kvPct.textContent = `${kvOpsPct.toFixed(0)}%`;
+    kvCell.appendChild(kvValue);
+    kvCell.appendChild(kvPct);
+    kvCell.appendChild(createBudgetBar(kvOpsPct));
+    row.appendChild(kvCell);
+
+    // Requests column
+    const reqCell = document.createElement('td');
+    reqCell.className = 'metric-cell';
+    const reqValue = document.createElement('span');
+    reqValue.className = 'metric-value';
+    reqValue.textContent = formatNumber(f.metrics.requests);
+    reqCell.appendChild(reqValue);
+    row.appendChild(reqCell);
+
+    // Trend column (7-day sparkline)
+    const trendCell = document.createElement('td');
+    trendCell.className = 'metric-cell';
+    const historyData = cachedHistory?.[f.featureKey];
+    if (historyData && historyData.length > 0) {
+      // Use requests for the sparkline (or sum of activity)
+      const values = historyData.map((d) => d.requests || d.d1Writes + d.kvReads + d.kvWrites);
+      const sparkline = createSparkline(values);
+      trendCell.appendChild(sparkline);
+    } else {
+      const noData = document.createElement('span');
+      noData.className = 'sparkline-empty';
+      noData.textContent = '—';
+      trendCell.appendChild(noData);
+    }
+    row.appendChild(trendCell);
+
+    // Status column
+    const statusCell = document.createElement('td');
+    const statusBadge = document.createElement('span');
+    statusBadge.className = `status-badge ${f.circuitBreaker.enabled ? 'enabled' : 'disabled'}`;
+    const statusDot = document.createElement('span');
+    statusDot.className = 'status-dot';
+    statusBadge.appendChild(statusDot);
+    statusBadge.appendChild(
+      document.createTextNode(f.circuitBreaker.enabled ? 'Active' : 'Disabled')
+    );
+    statusCell.appendChild(statusBadge);
+    row.appendChild(statusCell);
+
+    // Action column
+    const actionCell = document.createElement('td');
+    const toggleBtn = document.createElement('button');
+    toggleBtn.type = 'button';
+    toggleBtn.className = `toggle-btn ${f.circuitBreaker.enabled ? 'disable' : 'enable'}`;
+    toggleBtn.dataset.featureKey = f.featureKey;
+    toggleBtn.dataset.currentState = String(f.circuitBreaker.enabled);
+    toggleBtn.textContent = f.circuitBreaker.enabled ? 'Disable' : 'Enable';
+    toggleBtn.addEventListener('click', handleToggle);
+    actionCell.appendChild(toggleBtn);
+    row.appendChild(actionCell);
+
+    return row;
+  }
+
+  // Fetch features data from API
+  async function fetchFeatures(): Promise<void> {
+    const refreshBtn = document.getElementById('refresh-features-btn');
+    refreshBtn?.classList.add('loading');
+
+    try {
+      // Fetch features, budgets, and history in parallel
+      const [featuresRes, budgetsRes, historyRes] = await Promise.all([
+        fetch('/api/usage/features', { credentials: 'include' }),
+        cachedBudgets
+          ? Promise.resolve(null)
+          : fetch('/api/usage/features/budgets', { credentials: 'include' }),
+        cachedHistory
+          ? Promise.resolve(null)
+          : fetch('/api/usage/features/history?days=7', { credentials: 'include' }),
+      ]);
+
+      if (!featuresRes.ok) {
+        throw new Error(`Features API returned ${featuresRes.status}`);
+      }
+
+      const featuresData = await featuresRes.json();
+
+      // Cache budgets
+      if (budgetsRes) {
+        const budgetsData = await budgetsRes.json();
+        if (budgetsData.success) {
+          cachedBudgets = budgetsData.budgets;
+        }
+      }
+
+      // Cache history
+      if (historyRes) {
+        const historyData = await historyRes.json();
+        if (historyData.success) {
+          cachedHistory = historyData.features;
+        }
+      }
+
+      if (featuresData.success) {
+        renderFeatures(featuresData.features, cachedBudgets);
+
+        // Update last updated
+        const lastUpdated = document.getElementById('features-last-updated');
+        if (lastUpdated) {
+          lastUpdated.textContent = `Last updated: ${new Date().toLocaleTimeString()}`;
+        }
+      }
+    } catch (error) {
+      console.error('[Features] Error fetching data:', error);
+    } finally {
+      refreshBtn?.classList.remove('loading');
+    }
+  }
+
+  // Render features table using safe DOM methods
+  function renderFeatures(features: FeatureData[], budgets: FeatureBudgets | null): void {
+    const emptyState = document.getElementById('features-empty-state');
+    const tableContainer = document.getElementById('features-table-container');
+    const tbody = document.getElementById('features-tbody');
+    const countEl = document.getElementById('feature-count');
+
+    if (!tbody) return;
+
+    // Update count
+    if (countEl) {
+      countEl.textContent = `${features.length} feature${features.length !== 1 ? 's' : ''}`;
+    }
+
+    // Show empty state or table
+    if (features.length === 0) {
+      emptyState?.classList.remove('hidden');
+      tableContainer?.classList.add('hidden');
+      return;
+    }
+
+    emptyState?.classList.add('hidden');
+    tableContainer?.classList.remove('hidden');
+
+    // Get default budgets
+    const defaults = budgets?._defaults ?? {
+      d1Writes: { hourly: 10000 },
+      kvReads: { hourly: 50000 },
+      kvWrites: { hourly: 5000 },
+    };
+
+    // Clear existing rows
+    while (tbody.firstChild) {
+      tbody.removeChild(tbody.firstChild);
+    }
+
+    // Build table rows using safe DOM methods
+    for (const f of features) {
+      const row = createFeatureRow(f, defaults);
+      tbody.appendChild(row);
+    }
+  }
+
+  // Handle toggle button click
+  async function handleToggle(event: Event): Promise<void> {
+    const button = event.currentTarget as HTMLButtonElement;
+    const featureKey = button.dataset.featureKey;
+    const currentState = button.dataset.currentState === 'true';
+
+    if (!featureKey) return;
+
+    const action = currentState ? 'disable' : 'enable';
+    const confirmed = confirm(
+      `${action.charAt(0).toUpperCase() + action.slice(1)} feature "${featureKey}"?`
+    );
+    if (!confirmed) return;
+
+    button.disabled = true;
+    button.textContent = '...';
+
+    try {
+      const response = await fetch('/api/usage/features/circuit-breakers', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          featureKey,
+          enabled: !currentState,
+        }),
+        credentials: 'include',
+      });
+
+      const result = await response.json();
+
+      if (result.success) {
+        // Refresh the table
+        await fetchFeatures();
+      } else {
+        alert(`Failed to ${action}: ${result.error || 'Unknown error'}`);
+        button.disabled = false;
+        button.textContent = currentState ? 'Disable' : 'Enable';
+      }
+    } catch (error) {
+      console.error('[Features] Toggle error:', error);
+      alert(`Failed to ${action} feature`);
+      button.disabled = false;
+      button.textContent = currentState ? 'Disable' : 'Enable';
+    }
+  }
+
+  // Export for external triggering
+  window.fetchFeatureBudgets = fetchFeatures;
+
+  // Refresh button handler
+  document.getElementById('refresh-features-btn')?.addEventListener('click', fetchFeatures);
+
+  // Initial load when tab becomes visible
+  window.addEventListener('usage:features-tab-visible', fetchFeatures);
+
+  // Type declarations
+  declare global {
+    interface Window {
+      fetchFeatureBudgets: () => Promise<void>;
+    }
+  }
+</script>