neoagent 2.4.2-beta.3 → 2.4.2-beta.5

package/server/admin/analytics.js

@@ -2,12 +2,21 @@
 
 // ── Analytics ─────────────────────────────────────────────────────────────
 
+let _analyticsRange = 30;
+
+function setAnalyticsRange(days, btn) {
+  _analyticsRange = days;
+  document.querySelectorAll('.range-btn').forEach((b) => b.classList.remove('active'));
+  if (btn) btn.classList.add('active');
+  loadAnalytics();
+}
+
 async function loadAnalytics() {
   const el = document.getElementById('analytics-content');
   if (!el) return;
   el.innerHTML = '<div class="empty"><span class="spinner"></span></div>';
   try {
-    const data = await api('/admin/api/analytics').then((r) => r.json());
+    const data = await api(`/admin/api/analytics?range=${_analyticsRange}`).then((r) => r.json());
     renderAnalytics(el, data);
     setTs('analytics-ts', 'Updated');
   } catch (err) {
@@ -15,89 +24,285 @@ async function loadAnalytics() {
   }
 }
 
-function renderAnalytics(el, { stats, topUsers, recentRuns }) {
+function renderAnalytics(el, { stats, runsByDay, usersByDay, modelBreakdown, statusBreakdown, topUsers, recentRuns }) {
   const s = stats || {};
   el.innerHTML = `
-    <div class="stat-grid">
-      <div class="stat-card">
-        <div class="stat-value">${fmtNum(s.totalUsers)}</div>
-        <div class="stat-label">Total Users</div>
-      </div>
-      <div class="stat-card">
-        <div class="stat-value">${fmtNum(s.activeToday)}</div>
-        <div class="stat-label">Active Today</div>
-      </div>
-      <div class="stat-card">
-        <div class="stat-value">${fmtNum(s.newThisWeek)}</div>
-        <div class="stat-label">New This Week</div>
-      </div>
-      <div class="stat-card">
-        <div class="stat-value">${fmtNum(s.totalRuns)}</div>
-        <div class="stat-label">Total Runs</div>
+    ${renderStatGrid(s)}
+    ${renderCharts(runsByDay || [], usersByDay || [], _analyticsRange)}
+    ${renderBreakdowns(modelBreakdown || [], statusBreakdown || [])}
+    ${renderTopUsers(topUsers || [])}
+    ${renderRecentRuns(recentRuns || [])}
+  `;
+}
+
+// ── Stat cards ─────────────────────────────────────────────────────────────
+
+function renderStatGrid(s) {
+  const cards = [
+    { label: 'Total Users',     value: fmtNum(s.totalUsers),     sub: null },
+    { label: 'Active Today',    value: fmtNum(s.activeToday),    sub: null },
+    { label: 'New This Week',   value: fmtNum(s.newThisWeek),    sub: null },
+    { label: 'Active Sessions', value: fmtNum(s.activeSessions), sub: null },
+    { label: 'Total Runs',      value: fmtNum(s.totalRuns),      sub: null },
+    { label: 'Runs Today',      value: fmtNum(s.runsToday),      sub: null },
+    { label: 'Runs This Week',  value: fmtNum(s.runsThisWeek),   sub: null },
+    { label: 'Success Rate',    value: (s.successRate ?? '—') + (s.successRate != null ? '%' : ''), sub: null },
+    { label: 'Total Tokens',    value: fmtTokens(s.totalTokens), sub: null },
+    { label: 'Tokens Today',    value: fmtTokens(s.tokensToday), sub: null },
+    { label: 'Avg Tokens/Run',  value: fmtTokens(s.avgTokensPerRun), sub: null },
+    { label: 'Artifact Storage',value: fmtBytes(s.totalStorage), sub: null },
+  ];
+  return `<div class="stat-grid">${cards.map((c) => `
+    <div class="stat-card">
+      <div class="stat-value">${c.value}</div>
+      <div class="stat-label">${c.label}</div>
+    </div>`).join('')}
+  </div>`;
+}
+
+// ── SVG Charts ─────────────────────────────────────────────────────────────
+
+function renderCharts(runsByDay, usersByDay, range) {
+  return `
+    <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px;">
+      <div class="card">
+        <div class="card-title" style="margin-bottom:12px;">Runs per Day</div>
+        ${buildBarChart(fillDates(runsByDay, range, 'runs'), 'runs', 'tokens')}
       </div>
-      <div class="stat-card">
-        <div class="stat-value">${fmtNum(s.runsToday)}</div>
-        <div class="stat-label">Runs Today</div>
+      <div class="card">
+        <div class="card-title" style="margin-bottom:12px;">Tokens per Day</div>
+        ${buildAreaChart(fillDates(runsByDay, range, 'tokens'), 'tokens')}
       </div>
-      <div class="stat-card">
-        <div class="stat-value">${fmtTokens(s.totalTokens)}</div>
-        <div class="stat-label">Total Tokens</div>
+    </div>`;
+}
+
+function fillDates(data, range, _key) {
+  const map = new Map((data || []).map((d) => [d.date, d]));
+  const out = [];
+  for (let i = range - 1; i >= 0; i--) {
+    const d = new Date(Date.now() - i * 86_400_000);
+    const key = d.toISOString().slice(0, 10);
+    out.push(map.get(key) || { date: key, runs: 0, tokens: 0 });
+  }
+  return out;
+}
+
+function buildBarChart(data, key, altKey) {
+  const W = 560, H = 110, pad = { top: 8, bottom: 22, left: 4, right: 4 };
+  const vals = data.map((d) => d[key] || 0);
+  const max = Math.max(...vals, 1);
+  const n = data.length;
+  const gap = 2;
+  const barW = Math.max(1, Math.floor((W - pad.left - pad.right - (n - 1) * gap) / n));
+  const innerH = H - pad.top - pad.bottom;
+
+  const accentColor = 'var(--accent)';
+  const mutedColor = 'rgba(126,210,126,0.18)';
+
+  const bars = data.map((d, i) => {
+    const v = d[key] || 0;
+    const bh = v === 0 ? 1 : Math.max(2, Math.round((v / max) * innerH));
+    const x = pad.left + i * (barW + gap);
+    const y = pad.top + innerH - bh;
+    const altV = altKey ? (d[altKey] || 0) : 0;
+    const label = altKey ? `${d.date}\n${key}: ${fmtNum(v)}\n${altKey}: ${fmtTokens(altV)}` : `${d.date}: ${fmtNum(v)}`;
+    return `<rect x="${x}" y="${y}" width="${barW}" height="${bh}"
+      fill="${v > 0 ? accentColor : mutedColor}" rx="1">
+      <title>${esc(label)}</title></rect>`;
+  });
+
+  // X-axis date labels — only first, middle, last
+  const labelIdxs = [0, Math.floor(n / 2), n - 1];
+  const labels = labelIdxs.map((i) => {
+    const x = pad.left + i * (barW + gap) + barW / 2;
+    const y = H - 4;
+    return `<text x="${x}" y="${y}" text-anchor="middle" font-size="9" fill="var(--text-muted)">${esc(data[i]?.date?.slice(5) || '')}</text>`;
+  });
+
+  return `<svg viewBox="0 0 ${W} ${H}" style="width:100%;height:${H}px;display:block;">${bars.join('')}${labels.join('')}</svg>`;
+}
+
+function buildAreaChart(data, key) {
+  const W = 560, H = 110, pad = { top: 8, bottom: 22, left: 4, right: 4 };
+  const vals = data.map((d) => d[key] || 0);
+  const max = Math.max(...vals, 1);
+  const n = data.length;
+  const innerW = W - pad.left - pad.right;
+  const innerH = H - pad.top - pad.bottom;
+
+  const pts = data.map((d, i) => {
+    const x = pad.left + (n <= 1 ? innerW / 2 : (i / (n - 1)) * innerW);
+    const v = d[key] || 0;
+    const y = pad.top + innerH - Math.max(0, (v / max) * innerH);
+    return [x, y, d.date, v];
+  });
+
+  if (!pts.length) return `<svg viewBox="0 0 ${W} ${H}" style="width:100%;height:${H}px;display:block;"></svg>`;
+
+  const linePts = pts.map(([x, y]) => `${x},${y}`).join(' ');
+  const bottomY = pad.top + innerH;
+  const areaPath = `M ${pts[0][0]},${bottomY} L ${pts.map(([x, y]) => `${x},${y}`).join(' L ')} L ${pts[pts.length - 1][0]},${bottomY} Z`;
+
+  const dots = pts.map(([x, y, date, v]) =>
+    `<circle cx="${x}" cy="${y}" r="2.5" fill="var(--accent)" opacity="0.85">
+      <title>${esc(date)}: ${fmtTokens(v)}</title>
+    </circle>`);
+
+  const labelIdxs = [0, Math.floor(n / 2), n - 1];
+  const labels = labelIdxs.map((i) => {
+    const [x, , date] = pts[i] || [];
+    if (x == null) return '';
+    return `<text x="${x}" y="${H - 4}" text-anchor="middle" font-size="9" fill="var(--text-muted)">${esc((date || '').slice(5))}</text>`;
+  });
+
+  return `<svg viewBox="0 0 ${W} ${H}" style="width:100%;height:${H}px;display:block;">
+    <defs>
+      <linearGradient id="areaGrad" x1="0" y1="0" x2="0" y2="1">
+        <stop offset="0%" stop-color="var(--accent)" stop-opacity="0.28"/>
+        <stop offset="100%" stop-color="var(--accent)" stop-opacity="0.03"/>
+      </linearGradient>
+    </defs>
+    <path d="${areaPath}" fill="url(#areaGrad)"/>
+    <polyline points="${linePts}" fill="none" stroke="var(--accent)" stroke-width="1.5" stroke-linejoin="round" stroke-linecap="round"/>
+    ${dots.join('')}
+    ${labels.join('')}
+  </svg>`;
+}
+
+// ── Breakdowns ─────────────────────────────────────────────────────────────
+
+function renderBreakdowns(modelBreakdown, statusBreakdown) {
+  return `
+    <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px;">
+      ${renderModelBreakdown(modelBreakdown)}
+      ${renderStatusBreakdown(statusBreakdown)}
+    </div>`;
+}
+
+function renderModelBreakdown(models) {
+  if (!models.length) return '<div class="card"><div class="card-title">Model Usage</div><div class="empty" style="padding:20px 0;">No data</div></div>';
+  const maxRuns = Math.max(...models.map((m) => m.runs), 1);
+  return `
+    <div class="card">
+      <div class="card-title" style="margin-bottom:12px;">Model Usage (selected period)</div>
+      <table class="analytics-table">
+        <thead><tr><th>Model</th><th style="text-align:right;">Runs</th><th style="text-align:right;">Tokens</th><th style="width:80px;"></th></tr></thead>
+        <tbody>${models.map((m) => `
+          <tr>
+            <td style="font-family:var(--font-mono);font-size:11px;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">${esc(m.model)}</td>
+            <td style="text-align:right;">${fmtNum(m.runs)}</td>
+            <td style="text-align:right;">${fmtTokens(m.tokens)}</td>
+            <td><div class="mini-bar"><div class="mini-bar-fill" style="width:${Math.round((m.runs / maxRuns) * 100)}%"></div></div></td>
+          </tr>`).join('')}
+        </tbody>
+      </table>
+    </div>`;
+}
+
+const STATUS_COLORS = {
+  completed: 'var(--success)',
+  error:     'var(--danger)',
+  running:   'var(--accent)',
+  pending:   'var(--text-muted)',
+};
+
+function renderStatusBreakdown(statuses) {
+  if (!statuses.length) return '<div class="card"><div class="card-title">Run Status</div><div class="empty" style="padding:20px 0;">No data</div></div>';
+  const total = statuses.reduce((a, s) => a + s.count, 0);
+  const pills = statuses.map((s) => {
+    const pct = total > 0 ? Math.round((s.count / total) * 100) : 0;
+    const color = STATUS_COLORS[s.status] || 'var(--text-muted)';
+    return `<div style="display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border);">
+      <div style="display:flex;align-items:center;gap:10px;">
+        <div style="width:10px;height:10px;border-radius:50%;background:${color};flex-shrink:0;"></div>
+        <span style="font-size:13px;text-transform:capitalize;">${esc(s.status)}</span>
       </div>
-      <div class="stat-card">
-        <div class="stat-value">${fmtNum(s.activeSessions)}</div>
-        <div class="stat-label">Active Sessions</div>
+      <div style="display:flex;align-items:center;gap:12px;">
+        <span style="font-family:var(--font-mono);font-size:13px;font-weight:600;">${fmtNum(s.count)}</span>
+        <span style="font-size:11px;color:var(--text-muted);width:34px;text-align:right;">${pct}%</span>
       </div>
-      <div class="stat-card">
-        <div class="stat-value">${fmtBytes(s.totalStorage)}</div>
-        <div class="stat-label">Artifact Storage</div>
+    </div>`;
+  });
+
+  // Mini donut from status percentages using SVG
+  const donut = buildDonut(statuses, total);
+
+  return `
+    <div class="card">
+      <div class="card-title" style="margin-bottom:12px;">Run Status (all time)</div>
+      <div style="display:flex;gap:20px;align-items:flex-start;">
+        <div style="flex:1;">${pills.join('')}</div>
+        <div style="flex-shrink:0;margin-top:4px;">${donut}</div>
       </div>
-    </div>
+    </div>`;
+}
 
-    ${renderTopUsers(topUsers || [])}
-    ${renderRecentRuns(recentRuns || [])}
-  `;
+function buildDonut(statuses, total) {
+  const R = 36, cx = 44, cy = 44, strokeW = 12;
+  const circum = 2 * Math.PI * R;
+  let offset = 0;
+  const slices = statuses.map((s) => {
+    const pct = total > 0 ? s.count / total : 0;
+    const dash = pct * circum;
+    const gap  = circum - dash;
+    const color = STATUS_COLORS[s.status] || 'var(--text-muted)';
+    const slice = `<circle cx="${cx}" cy="${cy}" r="${R}" fill="none"
+      stroke="${color}" stroke-width="${strokeW}"
+      stroke-dasharray="${dash} ${gap}"
+      stroke-dashoffset="${-offset}"
+      transform="rotate(-90 ${cx} ${cy})"/>`;
+    offset += dash;
+    return slice;
+  });
+  return `<svg width="88" height="88" viewBox="0 0 88 88">
+    <circle cx="${cx}" cy="${cy}" r="${R}" fill="none" stroke="var(--border)" stroke-width="${strokeW}"/>
+    ${slices.join('')}
+  </svg>`;
 }
 
+// ── Top Users ───────────────────────────────────────────────────────────────
+
 function renderTopUsers(users) {
   if (!users.length) return '';
-  const maxRuns = Math.max(...users.map((u) => u.runs), 1);
+  const maxTokens = Math.max(...users.map((u) => u.tokens), 1);
   return `
-    <div class="card" style="margin-top:20px;">
-      <div class="card-title">Top Users by Runs</div>
+    <div class="card" style="margin-top:16px;">
+      <div class="card-title" style="margin-bottom:12px;">Top Users by Token Usage</div>
       <table class="analytics-table">
         <thead><tr>
-          <th>User</th><th>Runs</th><th>Tokens</th><th>Storage</th><th>Activity</th>
+          <th>User</th><th style="text-align:right;">Runs</th><th style="text-align:right;">Tokens</th><th style="text-align:right;">Storage</th><th style="width:100px;"></th>
         </tr></thead>
         <tbody>${users.map((u) => `
           <tr>
             <td><span class="user-avatar">${esc((u.display_name || u.username || '?')[0]).toUpperCase()}</span> ${esc(u.display_name || u.username)}</td>
-            <td>${fmtNum(u.runs)}</td>
-            <td>${fmtTokens(u.tokens)}</td>
-            <td>${fmtBytes(u.storage)}</td>
-            <td>
-              <div class="mini-bar"><div class="mini-bar-fill" style="width:${Math.round((u.runs / maxRuns) * 100)}%"></div></div>
-            </td>
+            <td style="text-align:right;">${fmtNum(u.runs)}</td>
+            <td style="text-align:right;">${fmtTokens(u.tokens)}</td>
+            <td style="text-align:right;">${fmtBytes(u.storage)}</td>
+            <td><div class="mini-bar"><div class="mini-bar-fill" style="width:${Math.round((u.tokens / maxTokens) * 100)}%"></div></div></td>
           </tr>`).join('')}
         </tbody>
       </table>
     </div>`;
 }
 
+// ── Recent Runs ─────────────────────────────────────────────────────────────
+
 function renderRecentRuns(runs) {
   if (!runs.length) return '';
   return `
     <div class="card" style="margin-top:16px;">
-      <div class="card-title">Recent Runs</div>
+      <div class="card-title" style="margin-bottom:12px;">Recent Runs</div>
       <table class="analytics-table">
         <thead><tr>
-          <th>User</th><th>Title</th><th>Status</th><th>Tokens</th><th>Started</th>
+          <th>User</th><th>Title</th><th>Model</th><th>Status</th><th style="text-align:right;">Tokens</th><th>Started</th>
         </tr></thead>
         <tbody>${runs.map((r) => `
           <tr>
             <td>${esc(r.username)}</td>
             <td class="cell-truncate">${esc(r.title || '(untitled)')}</td>
+            <td style="font-family:var(--font-mono);font-size:11px;color:var(--text-muted);">${esc(r.model || '—')}</td>
             <td><span class="run-badge run-${esc(r.status)}">${esc(r.status)}</span></td>
-            <td>${fmtTokens(r.total_tokens)}</td>
+            <td style="text-align:right;">${fmtTokens(r.total_tokens)}</td>
             <td>${fmtTime(r.created_at)}</td>
           </tr>`).join('')}
         </tbody>
@@ -105,7 +310,7 @@ function renderRecentRuns(runs) {
     </div>`;
 }
 
-// ── Shared number helpers (also used by other modules) ────────────────────
+// ── Shared number helpers ──────────────────────────────────────────────────
 
 function fmtNum(n) {
   if (n == null) return '—';
@@ -114,6 +319,7 @@ function fmtNum(n) {
 
 function fmtTokens(n) {
   if (!n) return '0';
+  if (n >= 1_000_000_000) return (n / 1_000_000_000).toFixed(1) + 'B';
   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 String(n);

package/server/admin/index.html

@@ -915,9 +915,16 @@
       <div class="page-header">
         <div>
           <h1 class="page-title">Analytics</h1>
-          <p class="page-subtitle">Usage statistics, top users, and recent activity</p>
+          <p class="page-subtitle">Usage statistics, model breakdown, and recent activity</p>
+        </div>
+        <div style="display:flex;align-items:center;gap:10px;">
+          <div style="display:flex;gap:4px;">
+            <button class="range-btn" onclick="setAnalyticsRange(7,this)">7d</button>
+            <button class="range-btn active" onclick="setAnalyticsRange(30,this)">30d</button>
+            <button class="range-btn" onclick="setAnalyticsRange(90,this)">90d</button>
+          </div>
+          <span class="refresh-hint" id="analytics-ts" aria-live="polite"></span>
         </div>
-        <span class="refresh-hint" id="analytics-ts" aria-live="polite"></span>
       </div>
       <div class="content">
         <div id="analytics-content"><div class="empty"><span class="spinner"></span></div></div>
@@ -934,6 +941,33 @@
         <span class="toolbar-count" id="users-count" aria-live="polite" style="padding-top:6px;"></span>
       </div>
       <div class="content">
+
+        <!-- Default rate limits card -->
+        <div class="card" style="margin-bottom:20px;">
+          <div style="display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;">
+            <div>
+              <div style="font-size:15px;font-weight:700;color:var(--text);margin-bottom:4px;">Default Rate Limits</div>
+              <div style="font-size:12px;color:var(--text-muted);max-width:480px;">
+                Applied to every user unless they have a custom override. Leave empty for no limit.
+              </div>
+            </div>
+            <button class="btn btn-primary" style="flex-shrink:0;" onclick="saveDefaultRateLimits(this)">Save Defaults</button>
+          </div>
+          <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px;" id="default-limits-fields">
+            <div>
+              <label style="display:block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-muted);margin-bottom:6px;">4-Hour Limit (tokens)</label>
+              <input type="number" min="0" step="1" id="default-limit-4h" placeholder="e.g. 500000 — empty = no limit"
+                style="width:100%;padding:9px 12px;background:var(--bg-input);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:13px;">
+            </div>
+            <div>
+              <label style="display:block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-muted);margin-bottom:6px;">Weekly Limit (tokens)</label>
+              <input type="number" min="0" step="1" id="default-limit-weekly" placeholder="e.g. 2000000 — empty = no limit"
+                style="width:100%;padding:9px 12px;background:var(--bg-input);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:13px;">
+            </div>
+          </div>
+        </div>
+
+        <!-- Users table card -->
         <div class="card">
           <div class="toolbar" style="margin-bottom:14px;">
             <input type="search" id="user-search" placeholder="Search by username or email…"

package/server/admin/users.js

@@ -5,8 +5,37 @@
 let _userSearchTimer = null;
 
 async function loadUsers() {
-  const q = document.getElementById('user-search')?.value?.trim() || '';
-  await fetchUsers(q);
+  await Promise.all([loadDefaultRateLimits(), fetchUsers(document.getElementById('user-search')?.value?.trim() || '')]);
+}
+
+async function loadDefaultRateLimits() {
+  try {
+    const data = await api('/admin/api/config/rate-limits').then(r => r.json());
+    const f4h = document.getElementById('default-limit-4h');
+    const fw = document.getElementById('default-limit-weekly');
+    if (f4h) f4h.value = data.rate_limit_4h ?? '';
+    if (fw) fw.value = data.rate_limit_weekly ?? '';
+  } catch (_) {}
+}
+
+async function saveDefaultRateLimits(btn) {
+  const v4h = document.getElementById('default-limit-4h')?.value;
+  const vw = document.getElementById('default-limit-weekly')?.value;
+  const parse = (v) => (v !== '' && v != null) ? parseInt(v, 10) : null;
+  btn.disabled = true;
+  const orig = btn.textContent;
+  btn.textContent = 'Saving…';
+  try {
+    const res = await api('/admin/api/config/rate-limits', {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ rate_limit_4h: parse(v4h), rate_limit_weekly: parse(vw) }),
+    });
+    if (!res.ok) { const b = await res.json().catch(() => ({})); alert(b.error || 'Failed'); }
+    else { btn.textContent = 'Saved!'; setTimeout(() => { btn.textContent = orig; btn.disabled = false; }, 2000); return; }
+  } catch (_) { alert('Network error'); }
+  btn.disabled = false;
+  btn.textContent = orig;
 }
 
 async function fetchUsers(q = '') {
@@ -46,6 +75,7 @@ function renderUsersTable(el, users) {
         <th>Last Login</th>
         <th>Runs</th>
         <th>Storage</th>
+        <th>Rate Limits</th>
         <th style="text-align:right;">Actions</th>
       </tr></thead>
       <tbody>${users.map((u) => `
@@ -69,6 +99,14 @@ function renderUsersTable(el, users) {
           <td style="font-size:12px;color:var(--text-muted);">${u.last_login ? fmtDate(u.last_login) : '—'}</td>
           <td style="font-family:var(--font-mono);font-size:12px;">${fmtNum(u.run_count)}</td>
           <td style="font-family:var(--font-mono);font-size:12px;">${fmtBytes(u.storage_bytes)}</td>
+          <td style="font-size:11px;">
+            ${u.rate_limit_4h || u.rate_limit_weekly
+              ? `<div style="display:flex;flex-direction:column;gap:3px;">
+                  ${u.rate_limit_4h ? `<span class="badge badge-idle" style="font-size:10px;">4h: ${fmtTokens(u.rate_limit_4h)}</span>` : ''}
+                  ${u.rate_limit_weekly ? `<span class="badge badge-idle" style="font-size:10px;">7d: ${fmtTokens(u.rate_limit_weekly)}</span>` : ''}
+                 </div>`
+              : `<span style="color:var(--text-muted);">none</span>`}
+          </td>
           <td>
             <div style="display:flex;gap:6px;justify-content:flex-end;">
               <button class="btn btn-ghost" style="padding:5px 10px;font-size:11px;"
@@ -143,6 +181,13 @@ async function deleteUser(id, displayName, btn) {
   }
 }
 
+function fmtTokens(n) {
+  if (!n) return '—';
+  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
+  if (n >= 1_000) return `${(n / 1_000).toFixed(0)}k`;
+  return String(n);
+}
+
 function fmtDate(iso) {
   if (!iso) return '—';
   try {
@@ -152,69 +197,81 @@ function fmtDate(iso) {
 
 async function editRateLimits(id, username) {
   try {
-    const res = await api(`/admin/api/users/${id}/rate-limits`).then(r => r.json());
-    const limits = res.limits || {};
-    const limit4h = limits.rate_limit_4h || '';
-    const limitWeekly = limits.rate_limit_weekly || '';
-    
+    const [userRes, globalRes] = await Promise.all([
+      api(`/admin/api/users/${id}/rate-limits`).then(r => r.json()),
+      api('/admin/api/config/rate-limits').then(r => r.json()).catch(() => ({})),
+    ]);
+    const limits = userRes.limits || {};
+    const custom4h = limits.rate_limit_4h ?? null;
+    const customWeekly = limits.rate_limit_weekly ?? null;
+    const global4h = globalRes.rate_limit_4h ?? null;
+    const globalWeekly = globalRes.rate_limit_weekly ?? null;
+
+    const hint4h = global4h ? `Default: ${fmtTokens(global4h)} — empty inherits default` : 'Empty = no limit';
+    const hintWeekly = globalWeekly ? `Default: ${fmtTokens(globalWeekly)} — empty inherits default` : 'Empty = no limit';
+
     const overlay = document.createElement('div');
     overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.6);display:flex;align-items:center;justify-content:center;z-index:9999;backdrop-filter:blur(2px);';
     const modal = document.createElement('div');
     modal.className = 'card';
-    modal.style.cssText = 'width:420px;background:var(--bg-primary);box-shadow:0 10px 40px rgba(0,0,0,0.5);border:1px solid var(--border);border-radius:12px;padding:24px;';
+    modal.style.cssText = 'width:440px;background:var(--bg-primary);box-shadow:0 10px 40px rgba(0,0,0,0.5);border:1px solid var(--border);border-radius:12px;padding:24px;';
     modal.innerHTML = `
-      <div style="font-size:16px;font-weight:700;color:var(--text);margin-bottom:6px;">Rate Limits</div>
-      <div style="font-size:13px;color:var(--text-muted);margin-bottom:20px;">Configure token limits for <span style="color:var(--text);font-weight:600;">@${esc(username)}</span>.</div>
-      
-      <div>
-        <label style="display:block;font-size:12px;font-weight:600;margin-bottom:8px;color:var(--text);text-transform:uppercase;letter-spacing:0.05em;">4-Hour Limit (Tokens)</label>
-        <input type="number" min="0" step="1" id="limit-4h" value="${limit4h}" placeholder="e.g. 500000" style="width:100%;padding:10px 12px;margin-bottom:6px;background:var(--bg-input);border:1px solid var(--border);border-radius:6px;color:var(--text);">
-        <div style="font-size:11px;color:var(--text-muted);margin-bottom:20px;">Leave empty for no limit</div>
-        
-        <label style="display:block;font-size:12px;font-weight:600;margin-bottom:8px;color:var(--text);text-transform:uppercase;letter-spacing:0.05em;">Weekly Limit (Tokens)</label>
-        <input type="number" min="0" step="1" id="limit-weekly" value="${limitWeekly}" placeholder="e.g. 2000000" style="width:100%;padding:10px 12px;margin-bottom:6px;background:var(--bg-input);border:1px solid var(--border);border-radius:6px;color:var(--text);">
-        <div style="font-size:11px;color:var(--text-muted);margin-bottom:24px;">Leave empty for no limit</div>
+      <div style="font-size:16px;font-weight:700;color:var(--text);margin-bottom:4px;">Rate Limits</div>
+      <div style="font-size:13px;color:var(--text-muted);margin-bottom:20px;">
+        Custom overrides for <span style="color:var(--text);font-weight:600;">@${esc(username)}</span>.
+        Leave empty to inherit the global default.
       </div>
-      
+
+      <div style="margin-bottom:18px;">
+        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;">
+          <label style="font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-muted);">4-Hour Limit (tokens)</label>
+          ${custom4h !== null ? '<span class="badge badge-warn" style="font-size:10px;">custom</span>' : (global4h ? '<span class="badge badge-idle" style="font-size:10px;">inheriting default</span>' : '<span class="badge badge-idle" style="font-size:10px;">no limit</span>')}
+        </div>
+        <input type="number" min="0" step="1" id="limit-4h" value="${custom4h ?? ''}" placeholder="${hint4h}"
+          style="width:100%;padding:10px 12px;background:var(--bg-input);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:13px;">
+      </div>
+
+      <div style="margin-bottom:24px;">
+        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;">
+          <label style="font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-muted);">Weekly Limit (tokens)</label>
+          ${customWeekly !== null ? '<span class="badge badge-warn" style="font-size:10px;">custom</span>' : (globalWeekly ? '<span class="badge badge-idle" style="font-size:10px;">inheriting default</span>' : '<span class="badge badge-idle" style="font-size:10px;">no limit</span>')}
+        </div>
+        <input type="number" min="0" step="1" id="limit-weekly" value="${customWeekly ?? ''}" placeholder="${hintWeekly}"
+          style="width:100%;padding:10px 12px;background:var(--bg-input);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:13px;">
+      </div>
+
       <div style="display:flex;gap:12px;justify-content:flex-end;">
         <button class="btn btn-ghost" id="btn-cancel" style="padding:8px 16px;">Cancel</button>
-        <button class="btn btn-primary" id="btn-save" style="padding:8px 16px;">Save Limits</button>
+        <button class="btn btn-primary" id="btn-save" style="padding:8px 16px;">Save</button>
       </div>
     `;
     overlay.appendChild(modal);
     document.body.appendChild(overlay);
-    
+
     document.getElementById('btn-cancel').onclick = () => overlay.remove();
     document.getElementById('btn-save').onclick = async () => {
       const v4 = document.getElementById('limit-4h').value;
       const vw = document.getElementById('limit-weekly').value;
-      const parseLimit = (v) => {
-        if (!v) return null;
-        const n = Number(v);
-        return Number.isInteger(n) && n >= 0 ? n : null;
-      };
+      const parseLimit = (v) => { if (!v) return null; const n = Number(v); return Number.isInteger(n) && n >= 0 ? n : null; };
       const bSave = document.getElementById('btn-save');
       bSave.disabled = true;
-      bSave.textContent = 'Saving...';
+      bSave.textContent = 'Saving…';
       try {
-        const payload = {
-          rate_limit_4h: parseLimit(v4),
-          rate_limit_weekly: parseLimit(vw)
-        };
         const putRes = await api(`/admin/api/users/${id}/rate-limits`, {
           method: 'PUT',
-          headers: {'Content-Type': 'application/json'},
-          body: JSON.stringify(payload)
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ rate_limit_4h: parseLimit(v4), rate_limit_weekly: parseLimit(vw) }),
         });
         if (!putRes.ok) throw new Error('Save failed');
         overlay.remove();
-      } catch (err) {
+        await fetchUsers(document.getElementById('user-search')?.value?.trim() || '');
+      } catch (_) {
         alert('Failed to save rate limits');
         bSave.disabled = false;
-        bSave.textContent = 'Save Limits';
+        bSave.textContent = 'Save';
       }
     };
-  } catch (err) {
+  } catch (_) {
     alert('Failed to fetch rate limits');
   }
 }

package/server/public/.last_build_id

@@ -1 +1 @@
-376fa02eacafdcb41cb88d165edcb99a
+15d41acc002ea2eaaa9deb2490573dd5

package/server/public/assets/AssetManifest.bin

@@ -1 +1 @@
-
+

package/server/public/assets/AssetManifest.bin.json

@@ -1 +1 @@
-"DQ4HIWFzc2V0cy9icmFuZGluZy9hcHBfaWNvbl8xMDI0LnBuZwwBDQEHBWFzc2V0ByFhc3NldHMvYnJhbmRpbmcvYXBwX2ljb25fMTAyNC5wbmcHIGFzc2V0cy9icmFuZGluZy9hcHBfaWNvbl8yNTYucG5nDAENAQcFYXNzZXQHIGFzc2V0cy9icmFuZGluZy9hcHBfaWNvbl8yNTYucG5nByBhc3NldHMvYnJhbmRpbmcvYXBwX2ljb25fNTEyLnBuZwwBDQEHBWFzc2V0ByBhc3NldHMvYnJhbmRpbmcvYXBwX2ljb25fNTEyLnBuZwcnYXNzZXRzL2JyYW5kaW5nL2FwcF9pY29uX2xpZ2h0XzEwMjQucG5nDAENAQcFYXNzZXQHJ2Fzc2V0cy9icmFuZGluZy9hcHBfaWNvbl9saWdodF8xMDI0LnBuZwcmYXNzZXRzL2JyYW5kaW5nL2FwcF9pY29uX2xpZ2h0XzI1Ni5wbmcMAQ0BBwVhc3NldAcmYXNzZXRzL2JyYW5kaW5nL2FwcF9pY29uX2xpZ2h0XzI1Ni5wbmcHJmFzc2V0cy9icmFuZGluZy9hcHBfaWNvbl9saWdodF81MTIucG5nDAENAQcFYXNzZXQHJmFzc2V0cy9icmFuZGluZy9hcHBfaWNvbl9saWdodF81MTIucG5nByRhc3NldHMvYnJhbmRpbmcvb25ib2FyZGluZ19pbnRyby5tcDQMAQ0BBwVhc3NldAckYXNzZXRzL2JyYW5kaW5nL29uYm9hcmRpbmdfaW50cm8ubXA0Byxhc3NldHMvYnJhbmRpbmcvdHJheV9pY29uX2xpZ2h0X3RlbXBsYXRlLnBuZwwBDQEHBWFzc2V0Byxhc3NldHMvYnJhbmRpbmcvdHJheV9pY29uX2xpZ2h0X3RlbXBsYXRlLnBuZwcmYXNzZXRzL2JyYW5kaW5nL3RyYXlfaWNvbl90ZW1wbGF0ZS5wbmcMAQ0BBwVhc3NldAcmYXNzZXRzL2JyYW5kaW5nL3RyYXlfaWNvbl90ZW1wbGF0ZS5wbmcHMnBhY2thZ2VzL2N1cGVydGlub19pY29ucy9hc3NldHMvQ3VwZXJ0aW5vSWNvbnMudHRmDAENAQcFYXNzZXQHMnBhY2thZ2VzL2N1cGVydGlub19pY29ucy9hc3NldHMvQ3VwZXJ0aW5vSWNvbnMudHRmByxwYWNrYWdlcy9taXhwYW5lbF9mbHV0dGVyL2Fzc2V0cy9taXhwYW5lbC5qcwwBDQEHBWFzc2V0ByxwYWNrYWdlcy9taXhwYW5lbF9mbHV0dGVyL2Fzc2V0cy9taXhwYW5lbC5qcwc3cGFja2FnZXMvcmVjb3JkX3dlYi9hc3NldHMvanMvcmVjb3JkLmZpeHdlYm1kdXJhdGlvbi5qcwwBDQEHBWFzc2V0BzdwYWNrYWdlcy9yZWNvcmRfd2ViL2Fzc2V0cy9qcy9yZWNvcmQuZml4d2VibWR1cmF0aW9uLmpzBy9wYWNrYWdlcy9yZWNvcmRfd2ViL2Fzc2V0cy9qcy9yZWNvcmQud29ya2xldC5qcwwBDQEHBWFzc2V0By9wYWNrYWdlcy9yZWNvcmRfd2ViL2Fzc2V0cy9qcy9yZWNvcmQud29ya2xldC5qcwcWd2ViL2ljb25zL0ljb24tMTkyLnBuZwwBDQEHBWFzc2V0BxZ3ZWIvaWNvbnMvSWNvbi0xOTIucG5n"
+"DQ0HIWFzc2V0cy9icmFuZGluZy9hcHBfaWNvbl8xMDI0LnBuZwwBDQEHBWFzc2V0ByFhc3NldHMvYnJhbmRpbmcvYXBwX2ljb25fMTAyNC5wbmcHIGFzc2V0cy9icmFuZGluZy9hcHBfaWNvbl8yNTYucG5nDAENAQcFYXNzZXQHIGFzc2V0cy9icmFuZGluZy9hcHBfaWNvbl8yNTYucG5nByBhc3NldHMvYnJhbmRpbmcvYXBwX2ljb25fNTEyLnBuZwwBDQEHBWFzc2V0ByBhc3NldHMvYnJhbmRpbmcvYXBwX2ljb25fNTEyLnBuZwcnYXNzZXRzL2JyYW5kaW5nL2FwcF9pY29uX2xpZ2h0XzEwMjQucG5nDAENAQcFYXNzZXQHJ2Fzc2V0cy9icmFuZGluZy9hcHBfaWNvbl9saWdodF8xMDI0LnBuZwcmYXNzZXRzL2JyYW5kaW5nL2FwcF9pY29uX2xpZ2h0XzI1Ni5wbmcMAQ0BBwVhc3NldAcmYXNzZXRzL2JyYW5kaW5nL2FwcF9pY29uX2xpZ2h0XzI1Ni5wbmcHJmFzc2V0cy9icmFuZGluZy9hcHBfaWNvbl9saWdodF81MTIucG5nDAENAQcFYXNzZXQHJmFzc2V0cy9icmFuZGluZy9hcHBfaWNvbl9saWdodF81MTIucG5nByRhc3NldHMvYnJhbmRpbmcvb25ib2FyZGluZ19pbnRyby5tcDQMAQ0BBwVhc3NldAckYXNzZXRzL2JyYW5kaW5nL29uYm9hcmRpbmdfaW50cm8ubXA0Byxhc3NldHMvYnJhbmRpbmcvdHJheV9pY29uX2xpZ2h0X3RlbXBsYXRlLnBuZwwBDQEHBWFzc2V0Byxhc3NldHMvYnJhbmRpbmcvdHJheV9pY29uX2xpZ2h0X3RlbXBsYXRlLnBuZwcmYXNzZXRzL2JyYW5kaW5nL3RyYXlfaWNvbl90ZW1wbGF0ZS5wbmcMAQ0BBwVhc3NldAcmYXNzZXRzL2JyYW5kaW5nL3RyYXlfaWNvbl90ZW1wbGF0ZS5wbmcHMnBhY2thZ2VzL2N1cGVydGlub19pY29ucy9hc3NldHMvQ3VwZXJ0aW5vSWNvbnMudHRmDAENAQcFYXNzZXQHMnBhY2thZ2VzL2N1cGVydGlub19pY29ucy9hc3NldHMvQ3VwZXJ0aW5vSWNvbnMudHRmBzdwYWNrYWdlcy9yZWNvcmRfd2ViL2Fzc2V0cy9qcy9yZWNvcmQuZml4d2VibWR1cmF0aW9uLmpzDAENAQcFYXNzZXQHN3BhY2thZ2VzL3JlY29yZF93ZWIvYXNzZXRzL2pzL3JlY29yZC5maXh3ZWJtZHVyYXRpb24uanMHL3BhY2thZ2VzL3JlY29yZF93ZWIvYXNzZXRzL2pzL3JlY29yZC53b3JrbGV0LmpzDAENAQcFYXNzZXQHL3BhY2thZ2VzL3JlY29yZF93ZWIvYXNzZXRzL2pzL3JlY29yZC53b3JrbGV0LmpzBxZ3ZWIvaWNvbnMvSWNvbi0xOTIucG5nDAENAQcFYXNzZXQHFndlYi9pY29ucy9JY29uLTE5Mi5wbmc="