@stacksjs/ts-cloud 0.7.105 → 0.7.109

package/dist/ui-src/pages/operations/spend.stx

@@ -0,0 +1,225 @@
+<script client>
+import { usePolling } from '../../functions/usePolling.ts'
+
+const report=state(null),budgets=state([]),enforcement=state([]),anomalies=state([]),notice=state(''),actionError=state(''),tab=state('overview'),busy=state(false),period=state('monthly')
+
+async function api(url,options){const response=await fetch(url,options),body=await response.json();if(!response.ok||body.ok===false)throw new Error(body.error||'Request failed.');return body}
+async function optional(url,key,fallback=[]){try{return(await api(url))[key]??fallback}catch{return fallback}}
+
+async function load(){
+  const [usage,budgetList,gate,anomalyList]=await Promise.all([
+    api(`/api/usage?period=${encodeURIComponent(period())}`).catch(()=>null),
+    optional('/api/spend/budgets','budgets'),
+    optional('/api/spend/enforcement','enforcement'),
+    optional('/api/spend/anomalies','anomalies'),
+  ])
+  report.set(usage);budgets.set(budgetList);enforcement.set(gate);anomalies.set(anomalyList)
+}
+
+const {pollingState,pollingError,lastUpdatedAt,refresh}=usePolling(load,30000)
+
+function form(node){return Object.fromEntries(new FormData(node))}
+function money(cents,currency){if(cents==null)return '—';return new Intl.NumberFormat('en-US',{style:'currency',currency:currency||report()?.currency||'USD'}).format(cents/100)}
+function pct(value){return value==null?'—':`${Number(value).toFixed(value<10?1:0)}%`}
+function scopeOf(item){return item.environmentId?'environment':item.projectId?'project':'organization'}
+function tone(level){return level==='hard_capped'?'bad':level==='soft_capped'||level==='warning'?'warn':'ok'}
+function severityTone(value){return value==='critical'?'bad':value==='warning'?'warn':'ok'}
+function when(value){return value?new Date(value).toLocaleString():'—'}
+/** Confidence below this is why a projection is shown greyed rather than acted on. */
+function trusted(budget){return (budget?.projectionConfidence??0)>=0.35}
+
+async function guard(work,message){
+  busy.set(true);actionError.set('')
+  try{await work();notice.set(message);await refresh()}
+  catch(error){actionError.set(error.message)}
+  finally{busy.set(false)}
+}
+
+async function createBudget(event){
+  event.preventDefault()
+  const value=form(event.currentTarget),node=event.currentTarget
+  await guard(()=>api('/api/spend/budgets',{method:'POST',headers:{'content-type':'application/json'},body:JSON.stringify({
+    name:value.name,
+    scope:value.scope,
+    period:value.period,
+    timezone:value.timezone||undefined,
+    softLimitCents:value.soft?Math.round(Number(value.soft)*100):undefined,
+    hardLimitCents:value.hard?Math.round(Number(value.hard)*100):undefined,
+    graceSeconds:value.graceSeconds?Number(value.graceSeconds):undefined,
+    dryRun:value.dryRun==='on',
+  })}).then(()=>node.reset()),'Budget created.')
+}
+
+async function patchBudget(id,patch){await guard(()=>api('/api/spend/budgets',{method:'PATCH',headers:{'content-type':'application/json'},body:JSON.stringify({id,...patch})}),'Budget updated.')}
+async function removeBudget(id,name){if(!confirm(`Delete the budget "${name}"? Anything it is enforcing is lifted.`))return;await guard(()=>api('/api/spend/budgets',{method:'DELETE',headers:{'content-type':'application/json'},body:JSON.stringify({id})}),'Budget deleted and enforcement lifted.')}
+async function runCheck(apply){const result=await api('/api/spend/check',{method:'POST',headers:{'content-type':'application/json'},body:JSON.stringify({apply})});notice.set(apply?`Applied ${result.result.applied.join(', ')||'nothing'}; released ${result.result.released.join(', ')||'nothing'}.`:'Preview complete — nothing was applied.');await refresh()}
+async function release(budgetId,action){await guard(()=>api('/api/spend/release',{method:'POST',headers:{'content-type':'application/json'},body:JSON.stringify({budgetId,action})}),'Lifted. The next cycle re-applies it if spend is still over.')}
+async function acknowledge(id){await guard(()=>api('/api/spend/anomalies/acknowledge',{method:'POST',headers:{'content-type':'application/json'},body:JSON.stringify({id})}),'Anomaly acknowledged.')}
+function setPeriod(event){period.set(event.currentTarget.value);void refresh()}
+</script>
+<!DOCTYPE html><html lang="en" data-theme="dark"><head>@include('../partials/head',{title:'ts-cloud · Spend & budgets'})</head><body>
+@include('../partials/nav',{active:'spend',env:'production'})
+<main class="wrap" id="main-content"><div class="crumbs">Operations <span class="sep">/</span> Spend &amp; budgets</div>
+
+<header class="page">
+  <div><h1>Spend &amp; budgets</h1><p>Metered usage, soft and hard caps, enforcement in force, and anomaly detection. Costs are estimated from observed usage, so they update within the hour rather than waiting on a provider invoice.</p></div>
+  <div class="header-actions">
+    <select aria-label="Budget period" @change="setPeriod($event)"><option value="monthly">Monthly</option><option value="weekly">Weekly</option><option value="daily">Daily</option></select>
+    <span class="pill" :class="pollingState()==='live'?'ok':'warn'">{{ pollingState() }}</span>
+    <small>{{ lastUpdatedAt()?.toLocaleTimeString()||'connecting' }}</small>
+    <button class="btn ghost sm" @click="refresh()">Refresh</button>
+  </div>
+</header>
+
+<p class="notice" role="status" @show="!!notice()">{{ notice() }}</p>
+<p class="bad notice" role="alert" @show="!!actionError()">{{ actionError() }}</p>
+<p class="bad notice" role="alert" @show="!!pollingError()">{{ pollingError() }}</p>
+
+<div class="notice panel warn" @show="enforcement().some(item=>!item.simulated)">
+  <strong>Spend enforcement is in force.</strong>
+  <span>{{ enforcement().filter(item=>!item.simulated).map(item=>item.action).join(', ') }} — see the Enforcement tab.</span>
+</div>
+
+<nav class="tabs" aria-label="Spend workspace">
+  <button :class="{active:tab()==='overview'}" @click="tab.set('overview')">Overview</button>
+  <button :class="{active:tab()==='budgets'}" @click="tab.set('budgets')">Budgets</button>
+  <button :class="{active:tab()==='enforcement'}" @click="tab.set('enforcement')">Enforcement</button>
+  <button :class="{active:tab()==='anomalies'}" @click="tab.set('anomalies')">Anomalies</button>
+</nav>
+
+<section @show="tab()==='overview'">
+  <div class="summary">
+    <article class="panel"><b>Spent this period</b><strong>{{ money(report()?.totalCents) }}</strong><small>{{ report()?.window?.label||'—' }}</small></article>
+    <article class="panel"><b>Budgets</b><strong>{{ report()?.budgets?.length||0 }}</strong><small>{{ (report()?.budgets||[]).filter(b=>b.dryRun).length }} in dry run</small></article>
+    <article class="panel"><b>Enforcement</b><strong>{{ report()?.enforcement?.strongestAction||'none' }}</strong><small>{{ enforcement().length }} action(s) recorded</small></article>
+    <article class="panel"><b>Anomalies</b><strong>{{ anomalies().filter(a=>!a.acknowledgedAt).length }}</strong><small>unacknowledged</small></article>
+  </div>
+
+  <h2>Budget headroom</h2>
+  <div class="cards-list">
+    <template :for="budget in (report()?.budgets||[])">
+      <article class="row-card panel">
+        <div>
+          <span class="pill" :class="tone(budget.level)">{{ budget.level }}</span>
+          <span class="pill" @show="budget.dryRun">dry run</span>
+          <b>{{ budget.name }}</b>
+          <code>{{ budget.period }}</code>
+        </div>
+        <p class="note">{{ money(budget.spentCents) }} of {{ money(budget.limitCents) }} · {{ pct(budget.usedPercent) }} used · {{ money(budget.remainingCents) }} remaining</p>
+        <progress :value="Math.min(100,budget.usedPercent||0)" max="100"></progress>
+        <p class="note" :class="trusted(budget)?'':'muted'">
+          Projected {{ money(budget.projectedCents) }} ({{ pct(budget.projectedPercent) }}) at {{ pct((budget.projectionConfidence||0)*100) }} confidence.
+          <template :if="!trusted(budget)"><span> Too early in the period to act on this forecast.</span></template>
+          <template :if="budget.timeToCap"><span> Reaches the cap in {{ budget.timeToCap }}.</span></template>
+        </p>
+        <div class="actions" @show="!!budget.activeActions?.length">
+          <span class="bad pill">enforcing {{ budget.activeActions.join(', ') }}</span>
+        </div>
+      </article>
+    </template>
+    <div class="empty panel" @show="!(report()?.budgets||[]).length">
+      <strong>No budgets</strong>
+      <span>Usage is metered regardless, but nothing is capped. Create a budget to get warnings and, if you want them, hard caps.</span>
+    </div>
+  </div>
+
+  <h2>Usage by meter</h2>
+  <div class="panel table-wrap">
+    <table>
+      <thead><tr><th scope="col">Meter</th><th scope="col">Provider</th><th scope="col">Quantity</th><th scope="col">Cost</th></tr></thead>
+      <tbody>
+        <template :for="row in (report()?.byMeter||[])">
+          <tr><td>{{ row.meter }}</td><td>{{ row.provider||'—' }}</td><td>{{ row.quantity.toLocaleString(undefined,{maximumFractionDigits:3}) }}</td><td>{{ money(row.costCents) }}</td></tr>
+        </template>
+      </tbody>
+    </table>
+    <div class="empty" @show="!(report()?.byMeter||[]).length"><strong>No metered usage yet</strong><span>Usage rolls up hourly. A freshly deployed project shows nothing until its first full hour.</span></div>
+  </div>
+</section>
+
+<section @show="tab()==='budgets'" class="split">
+  <div>
+    <template :for="item in budgets()">
+      <article class="row-card panel">
+        <div>
+          <span class="pill" :class="item.enabled?'ok':'warn'">{{ item.enabled?'enabled':'disabled' }}</span>
+          <span class="pill" @show="item.dryRun">dry run</span>
+          <b>{{ item.name }}</b>
+          <code>{{ scopeOf(item) }} · {{ item.period }} · {{ item.timezone }}</code>
+        </div>
+        <p class="note">Soft {{ money(item.softLimitCents,item.currency) }} · hard {{ money(item.hardLimitCents,item.currency) }} · grace {{ item.graceSeconds }}s · hysteresis {{ item.hysteresisPercent }}%</p>
+        <p class="note">Ladder: <template :for="threshold in item.thresholds"><span class="pill">{{ threshold.atPercent }}%{{ threshold.onProjection?' (forecast)':'' }} → {{ threshold.actions.join('+') }}</span></template></p>
+        <div class="actions">
+          <button class="btn ghost sm" :disabled="busy()" @click="patchBudget(item.id,{dryRun:!item.dryRun})">{{ item.dryRun?'Start enforcing':'Return to dry run' }}</button>
+          <button class="btn ghost sm" :disabled="busy()" @click="patchBudget(item.id,{enabled:!item.enabled})">{{ item.enabled?'Disable':'Enable' }}</button>
+          <button class="btn danger ghost sm" :disabled="busy()" @click="removeBudget(item.id,item.name)">Delete</button>
+        </div>
+      </article>
+    </template>
+    <div class="empty panel" @show="!budgets().length"><strong>No budgets configured</strong><span>Nothing is capping this project.</span></div>
+  </div>
+
+  <form class="editor panel" @submit="createBudget($event)">
+    <h2>New budget</h2>
+    <label>Name<input name="name" required placeholder="Production monthly"></label>
+    <label>Scope<select name="scope"><option value="project">This project</option><option value="environment">This environment</option><option value="organization">Whole organization</option></select></label>
+    <label>Period<select name="period"><option value="monthly">Monthly</option><option value="weekly">Weekly</option><option value="daily">Daily</option></select></label>
+    <label>Timezone<input name="timezone" value="UTC" placeholder="America/Los_Angeles"></label>
+    <label>Soft limit (warn only, dollars)<input name="soft" type="number" step="0.01" min="0"></label>
+    <label>Hard limit (enforces, dollars)<input name="hard" type="number" step="0.01" min="0"></label>
+    <label>Grace seconds<input name="graceSeconds" type="number" min="0" value="300"></label>
+    <label class="checkbox"><input name="dryRun" type="checkbox" checked> Dry run — evaluate and report, enforce nothing</label>
+    <button class="btn" type="submit" :disabled="busy()">Create budget</button>
+    <p class="note">New budgets start in dry run. Watch one for a full period before letting it enforce: the first thing enforcement does is stop your deployments.</p>
+  </form>
+</section>
+
+<section @show="tab()==='enforcement'">
+  <div class="header-actions">
+    <button class="btn ghost sm" :disabled="busy()" @click="runCheck(false)">Preview a cycle</button>
+    <button class="btn sm" :disabled="busy()" @click="runCheck(true)">Run and apply</button>
+  </div>
+  <div class="panel table-wrap">
+    <table>
+      <thead><tr><th scope="col">Action</th><th scope="col">Scope</th><th scope="col">Mode</th><th scope="col">Since</th><th scope="col">Reason</th><th scope="col"></th></tr></thead>
+      <tbody>
+        <template :for="item in enforcement()">
+          <tr>
+            <td><span class="pill" :class="item.simulated?'warn':'bad'">{{ item.action }}</span></td>
+            <td>{{ scopeOf(item) }}</td>
+            <td>{{ item.simulated?'dry run':'enforcing' }}</td>
+            <td>{{ when(item.appliedAt) }}</td>
+            <td>{{ item.reason }}</td>
+            <td><button class="btn ghost sm" :disabled="busy()" @click="release(item.budgetId,item.action)">Lift</button></td>
+          </tr>
+        </template>
+      </tbody>
+    </table>
+    <div class="empty" @show="!enforcement().length"><strong>Nothing is being enforced</strong><span>Builds, deployments, and traffic are unrestricted by spend.</span></div>
+  </div>
+  <p class="note">Lifting an action is a stopgap. The next spend cycle re-applies it unless the underlying spend falls back below the threshold, or the budget is raised, disabled, or deleted.</p>
+</section>
+
+<section @show="tab()==='anomalies'">
+  <div class="cards-list">
+    <template :for="item in anomalies()">
+      <article class="row-card panel">
+        <div>
+          <span class="pill" :class="severityTone(item.severity)">{{ item.severity }}</span>
+          <span class="pill">{{ item.direction }}</span>
+          <b>{{ item.signal }}</b>
+          <code>{{ when(item.bucketStart) }}</code>
+        </div>
+        <p class="note">Observed {{ money(item.observed) }} against an expected {{ money(item.expected) }} for this hour · score {{ item.score.toFixed(1) }}</p>
+        <p class="muted note">The baseline is the median of the same hour on previous days, so a normal daily peak is not an anomaly.</p>
+        <div class="actions">
+          <button class="btn ghost sm" @show="!item.acknowledgedAt" :disabled="busy()" @click="acknowledge(item.id)">Acknowledge</button>
+          <span class="note" @show="!!item.acknowledgedAt">Acknowledged {{ when(item.acknowledgedAt) }}</span>
+        </div>
+      </article>
+    </template>
+    <div class="empty panel" @show="!anomalies().length"><strong>No anomalies detected</strong><span>Detection needs several days of history before it reports anything, so a new project stays quiet at first.</span></div>
+  </div>
+</section>
+
+</main></body></html>

package/dist/ui-src/pages/partials/nav.stx

@@ -84,6 +84,7 @@ const isActive = (...keys) => keys.includes(active ?? '')
           @if (canView('runtime:read'))<a class="{{ isActive('workloads') ? 'active' : '' }}" href="{{ envHref('/operations/workloads') }}">Workloads</a>@endif
           @if (canView('runtime:logs'))<a class="{{ isActive('observability') ? 'active' : '' }}" href="{{ envHref('/operations/observability') }}">Observability</a>@endif
           @if (canView('runtime:read'))<a class="{{ isActive('alerts') ? 'active' : '' }}" href="{{ envHref('/operations/alerts') }}">Alerts & health</a>@endif
+          @if (canView('billing:read'))<a class="{{ isActive('spend') ? 'active' : '' }}" href="{{ envHref('/operations/spend') }}">Spend & budgets</a>@endif
           @if (canView('runtime:read'))<a href="{{ envHref('/server/metrics') }}">Metrics</a><a href="{{ envHref('/server/services') }}">Runtime services</a>@endif
           @if (canView('automation:read'))<a class="{{ isActive('jobs') ? 'active' : '' }}" href="{{ envHref('/operations/jobs') }}">Workers & schedules</a>@endif
           @if (canView('config:read'))<a class="{{ isActive('configuration') ? 'active' : '' }}" href="{{ envHref('/operations/configuration') }}">Environment &amp; secrets</a>@endif
@@ -95,6 +96,7 @@ const isActive = (...keys) => keys.includes(active ?? '')
       @if (canView('data:read') || canView('fleet:read') || canView('security:read') || canView('runtime:terminal'))
         <section class="nav-group">
           <h2>Infrastructure</h2>
+          @if (canView('fleet:read'))<a class="{{ isActive('topology') ? 'active' : '' }}" href="{{ envHref('/infrastructure/topology') }}">Infrastructure map</a>@endif
           @if (canView('data:read'))<a class="{{ isActive('data-services') ? 'active' : '' }}" href="{{ envHref('/data/services') }}">Data services</a>@endif
           @if (canView('data:read'))<a class="{{ isActive('volumes') ? 'active' : '' }}" href="{{ envHref('/data/volumes') }}">Persistent volumes</a>@endif
           @if (canView('fleet:read'))<a href="{{ envHref('/server/firewall') }}">Network & firewall</a><a href="{{ envHref('/server/ssh-keys') }}">SSH keys</a>@endif
@@ -125,6 +127,7 @@ const isActive = (...keys) => keys.includes(active ?? '')
       @if (canView('secrets:read') || canView('fleet:read') || canView('runtime:read'))
         <section class="nav-group">
           <h2>Settings</h2>
+          @if (canView('fleet:read'))<a class="{{ isActive('topology') ? 'active' : '' }}" href="{{ envHref('/infrastructure/topology') }}">Infrastructure map</a>@endif
           @if (canView('config:read'))<a class="{{ isActive('configuration') ? 'active' : '' }}" href="{{ envHref('/operations/configuration') }}">Environment &amp; secrets</a>@endif
           @if (canView('fleet:read'))<a href="{{ envHref('/serverless/firewall') }}">Network</a>@endif
           @if (canView('runtime:read'))<a href="{{ envHref('/serverless/alarms') }}">Alerts</a>@endif
@@ -156,6 +159,7 @@ const isActive = (...keys) => keys.includes(active ?? '')
         @if (canView('runtime:read'))<a class="{{ isActive('workloads') ? 'active' : '' }}" href="{{ envHref('/operations/workloads') }}">Workloads</a>@endif
         @if (canView('runtime:logs'))<a class="{{ isActive('observability') ? 'active' : '' }}" href="{{ envHref('/operations/observability') }}">Observability</a>@endif
         @if (canView('runtime:read'))<a class="{{ isActive('alerts') ? 'active' : '' }}" href="{{ envHref('/operations/alerts') }}">Alerts & health</a>@endif
+          @if (canView('billing:read'))<a class="{{ isActive('spend') ? 'active' : '' }}" href="{{ envHref('/operations/spend') }}">Spend & budgets</a>@endif
         @if (canView('automation:read'))<a class="{{ isActive('jobs') ? 'active' : '' }}" href="{{ envHref('/operations/jobs') }}">Workers & schedules</a>@endif
       </section>
     @endif

package/dist/ui-src/pages/server/firewall.stx

@@ -18,13 +18,65 @@ const newPort = state('')
 const message = state('')
 const messageKind = state('')
 const reserved = [22, 80, 443]
+const posture = state(null)
+const ipRules = state({ allow: [], block: [] })
+const busy = state(false)
 function setMessage(text, kind) { message.set(text); messageKind.set(kind || '') }
 function applyLine(apply) {
   if (!apply) return ''
   if (apply.ok === false) return ' Live UFW apply failed: ' + (apply.error || 'unknown error') + '.'
   return ' Applied to UFW live on the box.'
 }
+async function loadProtection() {
+  try {
+    const data = await requestJson('/api/protection')
+    posture.set(data.posture || null)
+    ipRules.set(data.controls?.ipRules || { allow: [], block: [] })
+  } catch { posture.set(null) }
+}
+async function protect(path, body, note) {
+  busy.set(true)
+  try {
+    await requestJson(path, { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify(body) })
+    setMessage(note, 'ok')
+    await loadProtection()
+  } catch (e) { setMessage((e && e.message) || 'Request failed.', 'bad') }
+  finally { busy.set(false) }
+}
+async function toggleAttackMode(on) {
+  if (on && !confirm('Attack mode challenges every visitor, including legitimate ones. Continue?')) return
+  await protect('/api/protection/attack-mode', on ? { enabled: true, reason: 'Enabled from the dashboard.' } : { enabled: false }, on ? 'Attack mode is on. It lifts itself automatically.' : 'Attack mode is off.')
+}
+async function togglePause(on) {
+  if (on) {
+    const reason = prompt('Pausing mitigation serves and bills all traffic, including attacks. Why are you pausing it?')
+    if (!reason) return
+    await protect('/api/protection/pause', { enabled: true, reason }, 'Mitigation paused. It resumes automatically.')
+    return
+  }
+  await protect('/api/protection/pause', { enabled: false }, 'Automatic mitigation resumed.')
+}
+async function addIpRule(list, cidr) {
+  if (!cidr) return
+  await protect('/api/protection/ip-rules', { list, cidr }, `Added ${cidr} to the ${list} list.`)
+}
+async function removeIpRule(list, cidr) {
+  busy.set(true)
+  try {
+    await requestJson('/api/protection/ip-rules', { method: 'DELETE', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ list, cidr }) })
+    setMessage(`Removed ${cidr} from the ${list} list.`, 'ok')
+    await loadProtection()
+  } catch (e) { setMessage((e && e.message) || 'Request failed.', 'bad') }
+  finally { busy.set(false) }
+}
+function submitIpRule(event) {
+  event.preventDefault()
+  const value = Object.fromEntries(new FormData(event.currentTarget))
+  void addIpRule(value.list, String(value.cidr || '').trim()).then(() => event.currentTarget.reset())
+}
+
 async function load() {
+  void loadProtection()
   try {
     const res = await fetch('/api/firewall')
     if (!res.ok) throw new Error('Could not read firewall config.')
@@ -75,6 +127,43 @@ onMount(() => { load() })
       <div class="cmds header-actions"><span class="accent cmd">cloud server:secure {{ server.name }}</span></div>
     </header>
 
+    <div class="section">
+      <h2>Mitigation posture</h2>
+      <div class="panel">
+        <p class="notice" :class="posture()?.attackMode || posture()?.mitigationPaused ? 'warn' : ''" @show="!!posture()">{{ posture()?.summary }}</p>
+        <p class="note" @show="!posture()">Protection controls are unavailable for this account.</p>
+        <div class="actions" @show="!!posture()">
+          <button class="btn ghost sm" :disabled="busy()" @click="toggleAttackMode(!posture()?.attackMode)">{{ posture()?.attackMode ? 'Turn attack mode off' : 'Turn attack mode on' }}</button>
+          <button class="btn danger ghost sm" :disabled="busy()" @click="togglePause(!posture()?.mitigationPaused)">{{ posture()?.mitigationPaused ? 'Resume mitigation' : 'Pause mitigation' }}</button>
+        </div>
+        <p class="note">Attack mode challenges every visitor, so it is time-boxed and lifts itself. Pausing mitigation serves and bills all traffic, including attacks, and is capped at 24 hours.</p>
+      </div>
+    </div>
+
+    <div class="section">
+      <h2>IP rules</h2>
+      <div class="panel">
+        <form class="inline-form" @submit="submitIpRule($event)">
+          <select name="list" aria-label="List"><option value="block">Block</option><option value="allow">Allow</option></select>
+          <input name="cidr" placeholder="203.0.113.0/24" aria-label="IP or CIDR" required>
+          <button class="btn sm" type="submit" :disabled="busy()">Add</button>
+        </form>
+        <table>
+          <thead><tr><th scope="col">List</th><th scope="col">CIDR</th><th scope="col"></th></tr></thead>
+          <tbody>
+            <template :for="cidr in ipRules().allow">
+              <tr><td><span class="ok pill">allow</span></td><td class="mono">{{ cidr }}</td><td><button class="btn ghost sm" :disabled="busy()" @click="removeIpRule('allow', cidr)">Remove</button></td></tr>
+            </template>
+            <template :for="cidr in ipRules().block">
+              <tr><td><span class="bad pill">block</span></td><td class="mono">{{ cidr }}</td><td><button class="btn ghost sm" :disabled="busy()" @click="removeIpRule('block', cidr)">Remove</button></td></tr>
+            </template>
+          </tbody>
+        </table>
+        <div class="empty" @show="!ipRules().allow.length && !ipRules().block.length"><strong>No IP rules</strong><span>Allowed ranges bypass every limit; blocked ranges are dropped at the kernel.</span></div>
+        <p class="note">Allow wins over block, so a range cannot sit on both lists. Rules apply on the next deploy.</p>
+      </div>
+    </div>
+
     <div class="section">
       <h2>Always open</h2>
       <div class="panel">

package/dist/ui-src/pages/server/metrics.stx

@@ -25,6 +25,27 @@ const bytes = value => {
   if (n >= 1024 ** 2) return (n / 1024 ** 2).toFixed(1) + ' MB'
   return Math.round(n / 1024) + ' KB'
 }
+const rate = value => {
+  const n = Number(value || 0)
+  if (n >= 1024 ** 3) return (n / 1024 ** 3).toFixed(2) + ' GB/s'
+  if (n >= 1024 ** 2) return (n / 1024 ** 2).toFixed(1) + ' MB/s'
+  if (n >= 1024) return Math.round(n / 1024) + ' KB/s'
+  return Math.round(n) + ' B/s'
+}
+const monthBytes = Number(m.networkRxBytesMonth || 0) + Number(m.networkTxBytesMonth || 0)
+// Providers quote allowances in decimal TB and bill overage the same way, so the
+// projection has to use the same unit the invoice will.
+const bandwidthBudget = Number(__d?.bandwidthBudgetBytes || 0)
+const bandwidthNote = (() => {
+  const now = new Date()
+  const dayOfMonth = now.getUTCDate()
+  const daysInMonth = new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth() + 1, 0)).getUTCDate()
+  const projected = dayOfMonth > 0 ? monthBytes / dayOfMonth * daysInMonth : monthBytes
+  const tb = value => (value / 1000 ** 4).toFixed(2) + ' TB'
+  if (!bandwidthBudget) return `On track for ${tb(projected)} by month end`
+  const pct = Math.round(monthBytes / bandwidthBudget * 100)
+  return `${pct}% of ${tb(bandwidthBudget)} — on track for ${tb(projected)}`
+})()
 const memUsedGb = gb(m.memUsedMb)
 const memTotalGb = gb(m.memTotalMb)
 const memAvailableGb = gb(m.memAvailableMb || Math.max(0, m.memTotalMb - m.memUsedMb))
@@ -75,6 +96,10 @@ function historyParams() {
       'host.memory.used_percent', 'host.memory.used', 'host.memory.total',
       'host.disk.used_percent', 'host.swap.used_percent',
       'host.disk.inode_used_percent',
+      'host.network.rx_rate', 'host.network.tx_rate',
+      'storage.egress.day', 'storage.egress.month',
+      'storage.egress.budget', 'storage.egress.budget_used_percent',
+      'storage.egress.projected_month',
     ].join(','),
     aggregation: 'avg',
     bucketMs: String(bucketMs),
@@ -117,6 +142,27 @@ function liveBytes(value) {
   if (n >= 1024 ** 2) return (n / 1024 ** 2).toFixed(1) + ' MB'
   return Math.round(n / 1024) + ' KB'
 }
+function liveRate(value) {
+  const n = Number(value || 0)
+  if (n >= 1024 ** 3) return (n / 1024 ** 3).toFixed(2) + ' GB/s'
+  if (n >= 1024 ** 2) return (n / 1024 ** 2).toFixed(1) + ' MB/s'
+  if (n >= 1024) return Math.round(n / 1024) + ' KB/s'
+  return Math.round(n) + ' B/s'
+}
+function liveMonthBytes() {
+  return Number(liveMetric().networkRxBytesMonth || 0) + Number(liveMetric().networkTxBytesMonth || 0)
+}
+function liveBandwidthNote() {
+  const used = liveMonthBytes()
+  const budget = Number(currentData()?.bandwidthBudgetBytes || 0)
+  const now = new Date()
+  const dayOfMonth = now.getUTCDate()
+  const daysInMonth = new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth() + 1, 0)).getUTCDate()
+  const projected = dayOfMonth > 0 ? used / dayOfMonth * daysInMonth : used
+  const tb = value => (value / 1000 ** 4).toFixed(2) + ' TB'
+  if (!budget) return `On track for ${tb(projected)} by month end`
+  return `${Math.round(used / budget * 100)}% of ${tb(budget)} — on track for ${tb(projected)}`
+}
 const liveCards = derived(() => [
   { label: 'CPU utilization', pct: liveCpu(), detail: `${liveMetric().load} load across ${liveMetric().cpus} vCPU` },
   { label: 'Memory', pct: liveMemory(), detail: `${liveGb(liveMetric().memUsedMb)} / ${liveGb(liveMetric().memTotalMb)} GB` },
@@ -133,7 +179,50 @@ function ratioPoints(primary, numerator, denominator, multiplier = 100) {
     .filter(point => Number(den.get(point.timestamp)) > 0)
     .map(point => ({ ...point, value: Math.max(0, Math.min(100, Number(point.value) / Number(den.get(point.timestamp)) * multiplier)) }))
 }
+const RATE_METRICS = { 'network-in': 'host.network.rx_rate', 'network-out': 'host.network.tx_rate' }
+const BYTE_METRICS = { 'egress-daily': 'storage.egress.day' }
+function isByteMetric(name) { return Object.hasOwn(BYTE_METRICS, name) }
+function bytesLabel(value) {
+  const n = Number(value || 0)
+  if (n >= 1000 ** 4) return (n / 1000 ** 4).toFixed(2) + ' TB'
+  if (n >= 1000 ** 3) return (n / 1000 ** 3).toFixed(1) + ' GB'
+  if (n >= 1000 ** 2) return (n / 1000 ** 2).toFixed(1) + ' MB'
+  return Math.round(n / 1000) + ' KB'
+}
+function latestValue(name) {
+  const values = points(name)
+  return values.length ? Number(values.at(-1).value) : null
+}
+function egressBudget() { return latestValue('storage.egress.budget') }
+function egressMonth() { return latestValue('storage.egress.month') }
+function egressProjected() { return latestValue('storage.egress.projected_month') }
+function egressPercent() { return latestValue('storage.egress.budget_used_percent') }
+function hasEgress() { return points('storage.egress.day').length > 0 || egressMonth() != null }
+function egressTone() {
+  const pct = egressPercent()
+  if (pct == null) return 'ok'
+  return pct >= 90 ? 'bad' : pct >= 75 ? 'warn' : 'ok'
+}
+function egressSummary() {
+  const month = egressMonth()
+  if (month == null) return 'No egress reported yet.'
+  const budget = egressBudget()
+  const projected = egressProjected()
+  const projectedNote = projected == null ? '' : ` — on track for ${bytesLabel(projected)}`
+  if (!budget) return `${bytesLabel(month)} this month${projectedNote}`
+  return `${bytesLabel(month)} of ${bytesLabel(budget)} (${egressPercent() ?? 0}%)${projectedNote}`
+}
+// A projection above the allowance is the whole point of the panel: it is the
+// window in which the overrun is still avoidable.
+function egressWillExceed() {
+  const budget = egressBudget()
+  const projected = egressProjected()
+  return !!budget && projected != null && projected > budget
+}
+function isRateMetric(name) { return Object.hasOwn(RATE_METRICS, name) }
 function metricPoints(name) {
+  if (isRateMetric(name)) return points(RATE_METRICS[name])
+  if (isByteMetric(name)) return points(BYTE_METRICS[name])
   if (name === 'cpu') return ratioPoints('host.cpu.used_percent', 'host.load', 'host.cpu.capacity')
   if (name === 'memory') return ratioPoints('host.memory.used_percent', 'host.memory.used', 'host.memory.total')
   if (name === 'disk') return points('host.disk.used_percent')
@@ -144,7 +233,9 @@ function metricPoints(name) {
 function linePath(metric) {
   const values = metricPoints(metric)
   if (!values.length) return ''
-  const max = metric === 'load' ? Math.max(1, ...values.map(point => Number(point.value))) : 100
+  const max = metric === 'load' || isRateMetric(metric) || isByteMetric(metric)
+    ? Math.max(1, ...values.map(point => Number(point.value)))
+    : 100
   return values.map((point, index) => {
     const x = values.length === 1 ? 50 : index / (values.length - 1) * 100
     const y = 42 - Math.max(0, Math.min(1, Number(point.value) / max)) * 38
@@ -163,7 +254,12 @@ function peak(metric) {
   const values = metricPoints(metric)
   return values.length ? Math.max(...values.map(point => Number(point.value))) : null
 }
-function display(value, suffix = '%') { return value == null ? 'No data' : `${value.toFixed(value >= 10 ? 0 : 1)}${suffix}` }
+function display(value, suffix = '%') {
+  if (value == null) return 'No data'
+  if (suffix === 'rate') return liveRate(value)
+  if (suffix === 'bytes') return bytesLabel(value)
+  return `${value.toFixed(value >= 10 ? 0 : 1)}${suffix}`
+}
 function samples(metric) { return metricPoints(metric).length }
 const historyCards = [
   { key: 'cpu', label: 'CPU utilization', note: 'Actual busy time, with load-per-core fallback for older samples', tone: 'blue' },
@@ -172,6 +268,8 @@ const historyCards = [
   { key: 'swap', label: 'Swap usage', note: 'Swap pressure across the selected period', tone: 'violet' },
   { key: 'load', label: 'Load average', note: 'One-minute runnable and waiting task average', tone: 'cyan', suffix: '' },
   { key: 'inodes', label: 'Inode usage', note: 'Root filesystem inode capacity consumed', tone: 'rose' },
+  { key: 'network-out', label: 'Network out', note: 'Egress throughput — the metric providers meter and bill', tone: 'amber', suffix: 'rate' },
+  { key: 'network-in', label: 'Network in', note: 'Ingress throughput across all non-loopback interfaces', tone: 'blue', suffix: 'rate' },
 ]
 function setRange(value) { historyRange.set(value); refresh() }
 </script>
@@ -214,8 +312,9 @@ function setRange(value) { historyRange.set(value); refresh() }
         <div class="vital"><div class="vlabel">Memory available</div><div class="vval">{{ liveGb(liveMetric().memAvailableMb) }} <small>GB</small></div><div class="vnote">{{ liveGb(liveMetric().memCacheMb) }} GB cache</div></div>
         <div class="vital"><div class="vlabel">Disk inodes</div><div class="vval">{{ liveMetric().inodeUsedPct }}<small>% used</small></div><div class="vnote">Filesystem entry capacity</div></div>
         <div class="vital"><div class="vlabel">Processes</div><div class="vval">{{ liveMetric().processes }}</div><div class="vnote">Current process count</div></div>
-        <div class="vital"><div class="vlabel">Network received</div><div class="vval">{{ liveBytes(liveMetric().networkRxBytes) }}</div><div class="vnote">Since host boot</div></div>
-        <div class="vital"><div class="vlabel">Network sent</div><div class="vval">{{ liveBytes(liveMetric().networkTxBytes) }}</div><div class="vnote">Since host boot</div></div>
+        <div class="vital"><div class="vlabel">Network in</div><div class="vval">{{ liveRate(liveMetric().networkRxBytesPerSec) }}</div><div class="vnote">{{ liveBytes(liveMetric().networkRxBytesToday) }} today</div></div>
+        <div class="vital"><div class="vlabel">Network out</div><div class="vval">{{ liveRate(liveMetric().networkTxBytesPerSec) }}</div><div class="vnote">{{ liveBytes(liveMetric().networkTxBytesToday) }} today</div></div>
+        <div class="vital"><div class="vlabel">Bandwidth this month</div><div class="vval">{{ liveBytes(liveMonthBytes()) }}</div><div class="vnote">{{ liveBandwidthNote() }}</div></div>
         <div class="vital"><div class="vlabel">Disk free</div><div class="vval">{{ Math.max(0, Number(liveMetric().diskTotalGb) - Number(liveMetric().diskUsedGb)) }} <small>GB</small></div><div class="vnote">{{ liveMetric().diskTotalGb }} GB total</div></div>
         <div class="vital"><div class="vlabel">Swap</div><div class="vval">{{ liveSwap() }}<small>% used</small></div><div class="vnote">{{ liveGb(liveMetric().swapUsedMb) }} / {{ liveGb(liveMetric().swapTotalMb) }} GB</div></div>
       </div>
@@ -257,8 +356,9 @@ function setRange(value) { historyRange.set(value); refresh() }
         <div class="vital"><div class="vlabel">Memory available</div><div class="vval">{{ live ? memAvailableGb : 'Unavailable' }} @if (live)<small>GB</small>@endif</div><div class="vnote">{{ live ? `${gb(m.memCacheMb)} GB cache` : unavailableNote }}</div></div>
         <div class="vital"><div class="vlabel">Swap</div><div class="vval">{{ live ? swapPct : 'Unavailable' }}@if (live)<small>% used</small>@endif</div><div class="vnote">{{ live ? `${gb(m.swapUsedMb)} / ${gb(m.swapTotalMb)} GB` : unavailableNote }}</div></div>
         <div class="vital"><div class="vlabel">Disk inodes</div><div class="vval">{{ live ? m.inodeUsedPct : 'Unavailable' }}@if (live)<small>% used</small>@endif</div><div class="vnote">Filesystem entry capacity</div></div>
-        <div class="vital"><div class="vlabel">Network received</div><div class="vval">{{ live ? bytes(m.networkRxBytes) : 'Unavailable' }}</div><div class="vnote">Since host boot</div></div>
-        <div class="vital"><div class="vlabel">Network sent</div><div class="vval">{{ live ? bytes(m.networkTxBytes) : 'Unavailable' }}</div><div class="vnote">Since host boot</div></div>
+        <div class="vital"><div class="vlabel">Network in</div><div class="vval">{{ live ? rate(m.networkRxBytesPerSec) : 'Unavailable' }}</div><div class="vnote">{{ live ? `${bytes(m.networkRxBytesToday)} today` : unavailableNote }}</div></div>
+        <div class="vital"><div class="vlabel">Network out</div><div class="vval">{{ live ? rate(m.networkTxBytesPerSec) : 'Unavailable' }}</div><div class="vnote">{{ live ? `${bytes(m.networkTxBytesToday)} today` : unavailableNote }}</div></div>
+        <div class="vital"><div class="vlabel">Bandwidth this month</div><div class="vval">{{ live ? bytes(monthBytes) : 'Unavailable' }}</div><div class="vnote">{{ live ? bandwidthNote : unavailableNote }}</div></div>
         <div class="vital"><div class="vlabel">Processes</div><div class="vval">{{ live ? m.processes : 'Unavailable' }}</div><div class="vnote">Current process count</div></div>
         <div class="vital"><div class="vlabel">Disk free</div><div class="vval">{{ live ? diskFreeGb : 'Unavailable' }} @if (live)<small>GB</small>@endif</div><div class="vnote">{{ live ? `${m.diskTotalGb} GB total` : unavailableNote }}</div></div>
       </div>
@@ -291,10 +391,44 @@ function setRange(value) { historyRange.set(value); refresh() }
           </article>
         </template>
       </div>
+      <div class="egress-panel panel" :class="egressTone()" @show="hasEgress()">
+        <div class="egress-head">
+          <div>
+            <h3>Object storage egress</h3>
+            <p>Reported by the applications that serve the downloads — these bytes never cross this host's network interface.</p>
+          </div>
+          <strong>{{ egressSummary() }}</strong>
+        </div>
+        <div class="egress-track" @show="!!egressBudget()">
+          <i :style="'width:' + Math.min(100, egressPercent() ?? 0) + '%'"></i>
+        </div>
+        <p class="bad notice" role="status" @show="egressWillExceed()">
+          Projected to exceed the monthly allowance — {{ bytesLabel(egressProjected()) }} against {{ bytesLabel(egressBudget()) }}.
+        </p>
+        <svg viewBox="0 0 100 46" preserveAspectRatio="none" role="img" aria-label="Daily object storage egress">
+          <line x1="0" x2="100" y1="23" y2="23" class="history-gridline"></line>
+          <path :d="areaPath('egress-daily')" class="history-area"></path>
+          <path :d="linePath('egress-daily')" class="history-line"></path>
+        </svg>
+        <div class="history-meta">
+          <span>{{ samples('egress-daily') }} days</span>
+          <span>peak {{ display(peak('egress-daily'), 'bytes') }}</span>
+        </div>
+      </div>
       <p class="note">Retention, source freshness, comparisons, logs, and exports are available in <a href="/operations/observability">Observability</a>.</p>
     </div>
   </div>
   <style>
+    .egress-panel { margin-top:18px; padding:18px; }
+    .egress-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
+    .egress-head h3 { margin:0; font-size:14px; }
+    .egress-head p { margin:4px 0 0; color:var(--txt3); font-size:11px; max-width:52ch; }
+    .egress-head strong { color:var(--txt); font-size:13px; white-space:nowrap; }
+    .egress-track { height:7px; margin:14px 0 4px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.07); }
+    .egress-track > i { display:block; height:100%; border-radius:999px; background:var(--ok); }
+    .egress-panel.warn .egress-track > i { background:var(--warn); }
+    .egress-panel.bad .egress-track > i { background:var(--bad); }
+    .egress-panel svg { width:100%; height:88px; margin-top:10px; }
     .host-vitals { grid-template-columns: repeat(4, minmax(0, 1fr)); }
     .live-gauges { grid-template-columns: repeat(4, minmax(0, 1fr)); }
     .live-bars { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 24px; }