@x47base/pocketbase-addon 0.1.0 → 0.2.0

package/security/security.go

@@ -18,18 +18,27 @@ import (
 	"github.com/pocketbase/pocketbase/tools/router"
 )
 
+// OperatorConcurrency matches the reserved gateway lane and allows parallel admin assets.
+const OperatorConcurrency = 8
+
 type bucket struct {
 	tokens  float64
 	updated time.Time
 }
 type Observation struct {
-	Family   string `json:"family"`
-	Count    int    `json:"count"`
-	Rejected int    `json:"rejected"`
-	Failures int    `json:"failures"`
-	Slow     int    `json:"slow"`
+	BodyReadBytes         uint64 `json:"bodyReadBytes,omitempty"`
+	DeclaredRejectedBytes uint64 `json:"declaredRejectedBytes,omitempty"`
+	Family                string `json:"family"`
+	Count                 int    `json:"count"`
+	Rejected              int    `json:"rejected"`
+	Failures              int    `json:"failures"`
+	Slow                  int    `json:"slow"`
 }
 type Incident struct {
+	Source       string      `json:"source,omitempty"`
+	SourceID     string      `json:"sourceId,omitempty"`
+	Reason       string      `json:"reason,omitempty"`
+	Severity     string      `json:"severity,omitempty"`
 	ID           uint64      `json:"id"`
 	Family       string      `json:"family"`
 	Phase        string      `json:"phase"`
@@ -49,6 +58,7 @@ type subscriptionState struct {
 }
 
 type TrafficWindow struct {
+	Seconds  float64   `json:"seconds"`
 	At       time.Time `json:"at"`
 	Count    int       `json:"count"`
 	Rejected int       `json:"rejected"`
@@ -57,6 +67,10 @@ type TrafficWindow struct {
 }
 
 type Service struct {
+	edge               *EdgeTelemetry
+	edgeSession        string
+	edgeSequence       uint64
+	edgeError          bool
 	startedAt          time.Time
 	lastEvaluated      time.Time
 	history            []TrafficWindow
@@ -98,12 +112,13 @@ func New(c Config) (*Service, error) {
 	s.loadState()
 	go func() {
 		defer close(s.done)
-		t := time.NewTicker(10 * time.Second)
+		t := time.NewTicker(time.Second)
 		defer t.Stop()
 		for {
 			select {
 			case now := <-t.C:
 				s.evaluate(now)
+				s.readEdge(now)
 				s.persist()
 			case <-s.stop:
 				return
@@ -354,7 +369,7 @@ func (s *Service) Bind(r *router.Router[*core.RequestEvent]) {
 		allowed := true
 		status := 429
 		if management {
-			allowed = s.active["management"] < 4
+			allowed = s.active["management"] < OperatorConcurrency
 			status = 503
 		} else {
 			allowed = consume(&s.global, c.RequestsPerSecond, c.Burst, start)
@@ -440,7 +455,11 @@ func (s *Service) evaluate(now time.Time) {
 		s.observations = map[string]*Observation{}
 		return
 	}
-	sample := TrafficWindow{At: now}
+	seconds := now.Sub(s.lastEvaluated).Seconds()
+	if s.lastEvaluated.IsZero() {
+		seconds = now.Sub(s.startedAt).Seconds()
+	}
+	sample := TrafficWindow{At: now, Seconds: max(0.001, seconds)}
 	for _, o := range s.observations {
 		sample.Count += o.Count
 		sample.Rejected += o.Rejected
@@ -467,26 +486,31 @@ func (s *Service) evaluate(now time.Time) {
 		}
 		idx := -1
 		for i := len(s.incidents) - 1; i >= 0; i-- {
-			if s.incidents[i].Family == f && s.incidents[i].Phase != "resolved" {
+			if s.incidents[i].Source != "edge" && s.incidents[i].Family == f && s.incidents[i].Phase != "resolved" {
 				idx = i
 				break
 			}
 		}
-		if s.streak[f] >= 3 {
+		if s.streak[f] >= 1 {
 			if idx < 0 {
 				s.nextID++
-				s.incidents = append(s.incidents, Incident{ID: s.nextID, Family: f, FirstSeen: now.Add(-30 * time.Second), Phase: "active"})
+				s.incidents = append(s.incidents, Incident{ID: s.nextID, Family: f, FirstSeen: now.Add(-time.Duration(sample.Seconds * float64(time.Second))), Source: "pocketbase", Severity: "warning", Phase: "active"})
 				if len(s.incidents) > 256 {
 					s.incidents = s.incidents[1:]
 				}
 				idx = len(s.incidents) - 1
 			}
 			s.incidents[idx].LastSeen = now
-			s.incidents[idx].Evidence = *o
+			e := &s.incidents[idx].Evidence
+			e.Family = f
+			e.Count += o.Count
+			e.Rejected += o.Rejected
+			e.Failures += o.Failures
+			e.Slow += o.Slow
 			s.incidents[idx].Phase = "active"
 		} else if idx >= 0 && s.clear[f] > 0 {
 			s.incidents[idx].Phase = "recovering"
-			if s.clear[f] >= 6 {
+			if now.Sub(s.incidents[idx].LastSeen) >= time.Minute {
 				s.incidents[idx].Phase = "resolved"
 			}
 		}

package/security/security_test.go

@@ -144,3 +144,57 @@ func TestConcurrentObservations(t *testing.T) {
 		t.Fatal(s.total)
 	}
 }
+
+func TestParallelAdminAssetsUseReservedGatewayCapacity(t *testing.T) {
+	app, err := tests.NewTestApp()
+	if err != nil {
+		t.Fatal(err)
+	}
+	defer app.Cleanup()
+	c := DefaultConfig()
+	c.Mode = "enforce"
+	c.OperatorPeers = []string{"192.0.2.10/32"}
+	s, err := New(c)
+	if err != nil {
+		t.Fatal(err)
+	}
+	defer s.Close()
+	r, _ := apis.NewRouter(app)
+	s.Bind(r)
+	entered := make(chan struct{}, 8)
+	release := make(chan struct{})
+	r.GET("/admin-asset", func(e *core.RequestEvent) error { entered <- struct{}{}; <-release; return e.NoContent(204) })
+	mux, err := r.BuildMux()
+	if err != nil {
+		t.Fatal(err)
+	}
+	request := func() int {
+		req := httptest.NewRequest("GET", "/admin-asset", nil)
+		req.RemoteAddr = "192.0.2.10:1"
+		req.Header.Set("X-Spink-Operator", "1")
+		w := httptest.NewRecorder()
+		mux.ServeHTTP(w, req)
+		return w.Code
+	}
+	var wg sync.WaitGroup
+	defer func() { close(release); wg.Wait() }()
+	for i := 0; i < 8; i++ {
+		wg.Add(1)
+		go func() {
+			defer wg.Done()
+			if code := request(); code != 204 {
+				t.Errorf("parallel asset: %d", code)
+			}
+		}()
+	}
+	for i := 0; i < 8; i++ {
+		select {
+		case <-entered:
+		case <-time.After(2 * time.Second):
+			t.Fatal("admin assets rejected before the gateway lane was full")
+		}
+	}
+	if code := request(); code != 503 {
+		t.Fatalf("unbounded operator lane: %d", code)
+	}
+}

package/security/state.go

@@ -11,12 +11,14 @@ import (
 )
 
 type checkpoint struct {
-	Version   int               `json:"version"`
-	Revision  uint64            `json:"revision"`
-	Policy    Config            `json:"policy"`
-	Incidents []Incident        `json:"incidents"`
-	Actions   map[string]Action `json:"actions"`
-	NextID    uint64            `json:"nextId"`
+	EdgeSession  string            `json:"edgeSession,omitempty"`
+	EdgeSequence uint64            `json:"edgeSequence,omitempty"`
+	Version      int               `json:"version"`
+	Revision     uint64            `json:"revision"`
+	Policy       Config            `json:"policy"`
+	Incidents    []Incident        `json:"incidents"`
+	Actions      map[string]Action `json:"actions"`
+	NextID       uint64            `json:"nextId"`
 }
 
 func (s *Service) loadState() {
@@ -59,8 +61,11 @@ func (s *Service) loadState() {
 	}
 	state.Policy.OperatorPeers = s.config.OperatorPeers
 	state.Policy.StatePath = s.config.StatePath
+	state.Policy.EdgeStatePath = s.config.EdgeStatePath
 	state.Policy.Mode = s.config.Mode
 	s.config = state.Policy
+	s.edgeSession = state.EdgeSession
+	s.edgeSequence = state.EdgeSequence
 	s.revision = state.Revision
 	s.incidents = state.Incidents
 	s.actions = state.Actions
@@ -74,7 +79,7 @@ func (s *Service) persist() {
 	defer s.journalMu.Unlock()
 	s.mu.Lock()
 	path := s.config.StatePath
-	state := checkpoint{Version: 1, Revision: s.revision, Policy: cloneConfig(s.config), Incidents: append([]Incident{}, s.incidents...), Actions: maps.Clone(s.actions), NextID: s.nextID}
+	state := checkpoint{EdgeSession: s.edgeSession, EdgeSequence: s.edgeSequence, Version: 1, Revision: s.revision, Policy: cloneConfig(s.config), Incidents: append([]Incident{}, s.incidents...), Actions: maps.Clone(s.actions), NextID: s.nextID}
 	s.mu.Unlock()
 	if path == "" {
 		return

package/security/ui/dashboard.css

@@ -1,4 +1,11 @@
-.pb-security{padding:28px 32px;overflow:auto;display:block!important;--sec-bg:light-dark(#fff,#22252c);--sec-text:light-dark(#222832,#e7eaf0);--sec-muted:light-dark(#616b79,#b2bac7);--sec-line:light-dark(#dce1e7,#434956);--sec-soft:light-dark(#f5f7fa,#2c3039);color:var(--sec-text)}
+.pb-security{--sec-bg:var(--surfaceColor);--sec-text:var(--surfaceTxtColor);--sec-muted:var(--surfaceTxtHintColor);--sec-line:var(--surfaceAlt3Color);--sec-soft:var(--surfaceAlt1Color);color:var(--sec-text)}
+.pb-security>.page-content{padding:28px 32px;max-width:1500px;width:100%;min-width:0;margin:0 auto}
 .pb-security *{box-sizing:border-box}.pb-security h1{font-size:28px;margin:2px 0 8px}.pb-security h2{font-size:18px;margin:0 0 12px}.pb-security p{line-height:1.5}.pb-security .sec-heading{display:flex;justify-content:space-between;gap:24px;align-items:center}.pb-security .sec-eyebrow{font-size:11px;letter-spacing:.13em;font-weight:600;color:var(--sec-muted);margin:0}.pb-security .sec-refresh{display:flex;flex-direction:column;gap:8px;align-items:end;white-space:nowrap}.pb-security [data-updated],.pb-security .sec-muted,.pb-security small{color:var(--sec-muted);font-size:13px}.pb-security .sec-tabs{display:flex;gap:8px;border-bottom:1px solid var(--sec-line);margin:20px 0}.pb-security .sec-tab{padding:12px 18px;border:0;background:transparent;color:inherit;font:inherit;cursor:pointer;border-bottom:3px solid transparent}.pb-security .sec-tab[aria-current=page]{border-bottom-color:light-dark(#315cbf,#8fb4ff);font-weight:600}.pb-security button:focus-visible,.pb-security input:focus-visible,.pb-security select:focus-visible,.pb-security textarea:focus-visible,.pb-security summary:focus-visible{outline:3px solid #749cfa;outline-offset:3px}.pb-security .sec-notice{padding:12px 16px;background:var(--sec-soft);border-radius:8px;margin:12px 0}.pb-security .sec-error{background:light-dark(#fff1ef,#482c2b);color:light-dark(#982d22,#ffc1b9)}.pb-security .sec-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:16px;margin-bottom:20px}.pb-security .sec-stat{display:flex;flex-direction:column;gap:8px;padding:18px;border:1px solid var(--sec-line);border-radius:10px;background:var(--sec-bg)}.pb-security .sec-stat>span{font-size:13px;color:var(--sec-muted)}.pb-security .sec-stat strong{font-size:26px;font-weight:600;text-transform:capitalize}.pb-security .sec-columns{display:grid;grid-template-columns:1.4fr 1fr;gap:20px}.pb-security .sec-panel{padding:22px;background:var(--sec-bg);border:1px solid var(--sec-line);border-radius:10px;margin-bottom:20px}.pb-security .sec-chart{height:150px;display:flex;gap:3px;align-items:end;border-bottom:1px solid var(--sec-line);margin:20px 0}.pb-security .sec-bar{min-width:2px;max-width:28px;flex:1;background:#557bc5;display:flex;align-items:end;border-radius:3px 3px 0 0}.pb-security .sec-bar span{width:100%;background:#c79030}.pb-security .sec-facts{display:grid;grid-template-columns:auto 1fr;gap:12px 18px;font-size:14px}.pb-security dt{color:var(--sec-muted)}.pb-security dd{margin:0;overflow-wrap:anywhere}.pb-security .sec-context{color:var(--sec-muted);font-size:13px}.pb-security .sec-filters{display:flex;gap:18px;margin-bottom:20px}.pb-security .sec-field{display:flex;flex-direction:column;gap:8px;flex:1;min-width:0;margin:0 0 18px;font-size:14px}.pb-security .sec-field>span{font-weight:600}.pb-security input,.pb-security select,.pb-security textarea{display:block;width:100%;height:auto;min-height:42px;padding:10px 12px;border:1px solid var(--sec-line);background:var(--sec-bg);color:var(--sec-text);border-radius:6px;font:inherit;outline-offset:2px;appearance:auto}.pb-security .sec-empty{color:var(--sec-muted);padding-top:12px;padding-bottom:12px}.pb-security .sec-incident-heading{display:flex;gap:16px;align-items:start;justify-content:space-between}.pb-security .sec-badge{display:inline-block;font-size:12px;font-weight:600;padding:5px 10px;border-radius:30px;background:var(--sec-soft);white-space:nowrap}.pb-security .sec-active{background:light-dark(#fff0cf,#493c25);color:light-dark(#78510a,#ffd383)}.pb-security .sec-recovering{background:light-dark(#e7efff,#293a58);color:light-dark(#2c559c,#a9c8ff)}.pb-security .sec-resolved{background:light-dark(#e4f3e9,#263d2e);color:light-dark(#226c3f,#a4dfb8)}.pb-security details{margin:14px 0 20px}.pb-security summary{cursor:pointer;font-weight:600;padding:8px 0}.pb-security .sec-action{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 0;border-bottom:1px solid var(--sec-line)}.pb-security .sec-action>span:nth-child(2){flex:1;overflow-wrap:anywhere}.pb-security .sec-action-form{display:grid;grid-template-columns:1fr .7fr 1.4fr;gap:16px;align-items:start;margin-top:20px}.pb-security .sec-action-form>button{grid-column:1/-1;justify-self:start}.pb-security .sec-policy-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px}.pb-security .sec-buttons{display:flex;gap:12px;flex-wrap:wrap}.pb-security .btn{max-width:100%;white-space:normal}
-@media(max-width:760px){.pb-security{padding:20px 16px}.pb-security .sec-heading{display:block}.pb-security .sec-refresh{align-items:start}.pb-security .sec-columns,.pb-security .sec-action-form,.pb-security .sec-policy-fields{grid-template-columns:1fr}.pb-security .sec-tabs{gap:0}.pb-security .sec-tab{padding:12px}.pb-security .sec-filters{display:block}.pb-security .sec-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.pb-security .sec-stat{padding:12px}.pb-security .sec-stat strong{font-size:22px}.pb-security .sec-panel{padding:16px}.pb-security .sec-facts{grid-template-columns:1fr;gap:6px}.pb-security dd{margin-bottom:10px}.pb-security input,.pb-security select,.pb-security textarea{font-size:16px}}
+@media(max-width:760px){.pb-security>.page-content{padding:20px 16px}.pb-security .sec-heading{display:block}.pb-security .sec-refresh{align-items:start}.pb-security .sec-columns,.pb-security .sec-action-form,.pb-security .sec-policy-fields{grid-template-columns:1fr}.pb-security .sec-tabs{gap:0}.pb-security .sec-tab{padding:12px}.pb-security .sec-filters{display:block}.pb-security .sec-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.pb-security .sec-stat{padding:12px}.pb-security .sec-stat strong{font-size:22px}.pb-security .sec-panel{padding:16px}.pb-security .sec-facts{grid-template-columns:1fr;gap:6px}.pb-security dd{margin-bottom:10px}.pb-security input,.pb-security select,.pb-security textarea{font-size:16px}}
 .pb-security .sec-field input[type=checkbox]{appearance:auto;width:20px;height:20px;min-height:20px;margin:4px 0;justify-self:start}.pb-security .sec-field input[type=file]{height:auto;min-height:44px;padding:8px}.pb-security form>.btn{margin:4px 10px 12px 0}
+
+.pb-security .sec-edge{border-top:3px solid var(--infoColor)}
+.pb-security .sec-reason{display:flex;justify-content:space-between;gap:18px;border-bottom:1px solid var(--sec-line);padding:10px 0;font-size:14px}
+.pb-security .sec-reason strong{font-variant-numeric:tabular-nums}
+.pb-security .sec-warning{border-left:3px solid #c79030;padding:12px 16px;background:var(--sec-soft)}
+.pb-security .sec-stat strong{overflow-wrap:anywhere;font-variant-numeric:tabular-nums}

package/security/ui/dashboard.js

@@ -1,4 +1,4 @@
-import { families, familyLabels, filterIncidents, percent, rate, timestamp, sessionRequest } from './model.js';
+import { families, familyLabels, filterIncidents, percent, rate, timestamp, sessionRequest, reasonLabels, bytes, edgeState } from './model.js';
 
 const fields = [
     ['requestsPerSecond','Global requests / second','Total admission rate before authentication.'],
@@ -19,13 +19,9 @@ function badge(label, state) { return el('span',label,'sec-badge sec-'+state); }
 function labelField(label, input, hint) { const wrap=el('label',null,'sec-field');wrap.append(el('span',label),input);if(hint)wrap.append(el('small',hint));return wrap; }
 function select(options, value='') { const node=el('select');for(const [key,label] of options){const option=el('option',label);option.value=key;node.append(option);}node.value=options.some(([key])=>key===value)?value:(options[0]?.[0]||'');return node; }
 
-export function securityPage(app) {
-    let destroy=()=>{};
-    return t.div({className:'page pb-security',onmount:root=>{destroy=mount(root,app);},onunmount:()=>destroy()});
-}
-function mount(root, app) {
+export function mount(root, app) {
     app.store.title='Security';
-    let view='overview', phase='', family='', status=null, incidents=[], draft=null, revision='', dirty=false, timer, busy=false, mutation=false;
+    let view='overview', phase='', family='', source='', status=null, incidents=[], draft=null, revision='', dirty=false, timer, busy=false, mutation=false;
     let closed=false, sessionGone=false, lastRefresh=null, operatorNotice=false;
     const session=()=>app.pb.authStore.token;
     const client=sessionRequest((url,options)=>app.pb.send(url,options),session,()=>app.pb.authStore.clear());
@@ -37,24 +33,76 @@ function mount(root, app) {
     const unsubscribe=app.pb.authStore.onChange(()=>{if(!checkSession()) window.location.hash='#/login';});
     function failure(error){if(closed||!checkSession())return;message(error.status===409?'The policy changed in another session. Your draft is preserved. Reload the current policy before saving.':error.status===403?'This connection is outside the management network. Ask the operator to configure access; dashboard login does not bypass this restriction.':error.message||'Security data could not be refreshed. Try again.',true);}
     const tabs=root.querySelector('.sec-tabs');
-    function renderTabs(){tabs.replaceChildren();for(const [id,label] of [['overview','Overview'],['incidents','Incidents'],['protection','Protection']]){const b=button(label,()=>{view=id;render();},'sec-tab');b.setAttribute('aria-current',view===id?'page':'false');tabs.append(b);}}
+    function renderTabs(){
+        if (!tabs.childElementCount) for (const [id,label] of [['overview','Overview'],['incidents','Incidents'],['protection','Protection']]) {
+            const tab=button(label,()=>{view=id;render();},'sec-tab');tab.dataset.view=id;tabs.append(tab);
+        }
+        for (const tab of tabs.children) tab.setAttribute('aria-current',view===tab.dataset.view?'page':'false');
+    }
     function stats(parent, rows){const grid=el('div',null,'sec-stats');for(const [label,value,note] of rows){const card=el('section',null,'sec-stat');card.append(el('span',label),el('strong',String(value)),el('small',note));grid.append(card);}parent.append(grid);}
     function render(){if(closed||!checkSession())return;renderTabs();content.replaceChildren();if(!status){content.append(el('p','Security data is not available yet.'));return;}if(view==='overview')overview();if(view==='incidents')incidentView();if(view==='protection')protection();}
     function overview(){
-        const active=incidents.filter(i=>i.phase!=='resolved').length, last=status.traffic?.at(-1);
-        stats(content,[['Protection mode',status.mode,status.mode==='enforce'?'Configured limits can reject requests.':status.mode==='observe'?'Limits are observed without blocking.':'Admission protection and detection are disabled.'],['Open incidents',active,'Active or recovering suspected patterns.'],['Recent traffic',last?rate(last).toFixed(1)+' req/s':'Waiting','Last completed 10-second window.'],['Flagged requests',status.rejected,status.mode==='observe'?'Would be limited; requests still proceed.':'Admission decisions since this process started.']]);
-        const grid=el('div',null,'sec-columns');const traffic=el('section',null,'sec-panel');traffic.append(el('h2','Traffic over time'),el('p','Last 10 minutes · each bar is a 10-second window.','sec-muted'));
-        if(status.traffic?.length){const chart=el('div',null,'sec-chart');chart.setAttribute('role','img');chart.setAttribute('aria-label','Request volume for '+status.traffic.length+' recent ten-second windows');const peak=Math.max(1,...status.traffic.map(w=>w.count));for(const w of status.traffic){const bar=el('div',null,'sec-bar');bar.style.height=Math.max(2,100*w.count/peak)+'%';bar.title=timestamp(w.at)+': '+w.count+' requests, '+w.rejected+' flagged';const limited=el('span');limited.style.height=percent(w.rejected,w.count)+'%';bar.append(limited);chart.append(bar);}traffic.append(chart,el('p',timestamp(status.traffic[0].at)+' → '+timestamp(last.at)+' · Peak '+peak+' requests / window.','sec-muted'),el('p','Blue: requests · amber: flagged requests.','sec-muted'));if(last)traffic.append(el('p',`${last.count} requests · ${last.rejected} flagged · ${last.failures} failed · ${last.slow} slow in the latest window.`));}
-        else traffic.append(el('p',status.mode==='disabled'?'Enable observation to collect traffic windows.':'Waiting for the first 10-second observation window.','sec-empty'));
-        const health=el('section',null,'sec-panel');health.append(el('h2','Operational context'));const dl=el('dl',null,'sec-facts');for(const [key,value] of [['Detector','Heuristic patterns; no automatic blocks'],['Last evaluation',timestamp(status.lastEvaluated)],['Process started',timestamp(status.startedAt)],['Restart checkpoint',status.storageDegraded?'Write/read failure — recent state may be lost':status.checkpointEnabled?'Enabled (best effort)':'Not configured'],['Subscriptions',String(status.subscriptions)],['Active requests',Number(status.active?.ordinary||0)+Number(status.active?.realtime||0)+Number(status.active?.management||0)]])dl.append(el('dt',key),el('dd',String(value)));health.append(dl);grid.append(traffic,health);content.append(grid);
+        edgeOverview();
+        content.append(el('h2','PocketBase application traffic'));
+        const active=incidents.filter(i=>i.source!=='edge'&&i.phase!=='resolved').length, last=status.traffic?.at(-1);
+        stats(content,[['Application protection',status.mode,status.mode==='enforce'?'Configured limits can reject requests.':status.mode==='observe'?'Limits are observed without blocking.':'Admission protection and detection are disabled.'],['Open incidents',active,'Active or recovering suspected patterns.'],['Recent traffic',last?rate(last).toFixed(1)+' req/s':'Waiting','Latest completed evaluation window.'],['Application flags',status.rejected,status.mode==='observe'?'Would be limited; requests still proceed.':'Admission decisions since this process started.']]);
+        const grid=el('div',null,'sec-columns');const traffic=el('section',null,'sec-panel');traffic.append(el('h2','Traffic over time'),el('p','Last 60 evaluations · normally one per second.','sec-muted'));
+        if(status.traffic?.length){const chart=el('div',null,'sec-chart');chart.setAttribute('role','img');chart.setAttribute('aria-label','Request volume for '+status.traffic.length+' recent evaluation windows');const peak=Math.max(1,...status.traffic.map(w=>w.count));for(const w of status.traffic){const bar=el('div',null,'sec-bar');bar.style.height=Math.max(2,100*w.count/peak)+'%';bar.title=timestamp(w.at)+': '+w.count+' requests, '+w.rejected+' flagged';const limited=el('span');limited.style.height=percent(w.rejected,w.count)+'%';bar.append(limited);chart.append(bar);}traffic.append(chart,el('p',timestamp(status.traffic[0].at)+' → '+timestamp(last.at)+' · Peak '+peak+' requests / window.','sec-muted'),el('p','Blue: requests · amber: flagged requests.','sec-muted'));if(last)traffic.append(el('p',`${last.count} requests · ${last.rejected} flagged · ${last.failures} failed · ${last.slow} slow in the latest window.`));}
+        else traffic.append(el('p',status.mode==='disabled'?'Enable observation to collect traffic windows.':'Waiting for the first observation window.','sec-empty'));
+        const health=el('section',null,'sec-panel');health.append(el('h2','Operational context'));const dl=el('dl',null,'sec-facts');for(const [key,value] of [['Detector','One-second application evaluation; edge denials recorded immediately'],['Last evaluation',timestamp(status.lastEvaluated)],['Process started',timestamp(status.startedAt)],['Restart checkpoint',status.storageDegraded?'Write/read failure — recent state may be lost':status.checkpointEnabled?'Enabled (best effort)':'Not configured'],['Subscriptions',String(status.subscriptions)],['Active requests',Number(status.active?.ordinary||0)+Number(status.active?.realtime||0)+Number(status.active?.management||0)]])dl.append(el('dt',key),el('dd',String(value)));health.append(dl);grid.append(traffic,health);content.append(grid);
         content.append(el('p','An incident is a suspected pattern, not proof of an attacker. Legitimate bursts, shared-source traffic and outages can produce the same signals.','sec-context'));
         content.append(button('Review incidents',()=>{view='incidents';render();}));
     }
+    function edgeOverview() {
+        const state = edgeState(status), edge = status.edge;
+        const panel = el('section', null, 'sec-panel sec-edge');
+        const heading = el('div', null, 'sec-incident-heading');
+        heading.append(el('h2', 'Public firewall'), badge(state === 'live' ? 'Telemetry live' : state === 'unconfigured' ? 'Not connected' : 'Telemetry unavailable', state === 'live' ? 'resolved' : 'active'));
+        panel.append(heading);
+        if (state !== 'live') panel.append(el('p', state === 'unconfigured' ? 'Firewall traffic is not connected. Requests blocked before PocketBase are invisible here. Configure PB_SECURITY_EDGE_STATE_PATH and the separate telemetry volume.' : 'The firewall snapshot is missing, invalid or older than five seconds. Values below are the last known state, not current protection status.', 'sec-warning'));
+        if (edge) {
+            const open=(edge.incidents||[]).filter(i=>i.phase!=='resolved');
+            if (open.length) panel.append(el('p',open.length+' firewall event groups active or recovering in this snapshot · '+open.filter(i=>i.severity==='warning').length+' elevated signals. Open Incidents to review the evidence.','sec-warning'));
+            stats(panel, [
+                ['Public requests', Number(edge.requests).toLocaleString(), 'Since firewall process start'],
+                ['Blocked at firewall', Number(edge.rejected).toLocaleString(), percent(edge.rejected,edge.requests)+'% · never forwarded'],
+                ['Forwarded', Number(edge.forwarded).toLocaleString(), 'Admitted to the upstream proxy'],
+                ['Body bytes read', bytes(edge.bodyReadBytes), 'HTTP payload read by the firewall'],
+            ]);
+            const grid=el('div',null,'sec-columns'), reasons=el('section');
+            reasons.append(el('h3','Why requests were blocked'));
+            const list=el('div',null,'sec-reasons');
+            const rows=Object.entries(edge.reasons||{}).sort((a,b)=>b[1]-a[1]);
+            for (const [key,count] of rows) { const row=el('div',null,'sec-reason');row.append(el('span',reasonLabels[key]||key),el('strong',Number(count).toLocaleString()));list.append(row); }
+            if (!rows.length) list.append(el('p','No public requests rejected in this firewall session.','sec-muted'));
+            reasons.append(list);
+            const limits=el('section');limits.append(el('h3','Capacity and upload limits'));
+            const facts=el('dl',null,'sec-facts');
+            for (const [label,value] of [
+                ['Policy',edge.policyReady?'Ready':'Unavailable — fails closed'],['Upstream health',edge.upstreamHealthy?'Responding':'Unavailable'],
+                ['Active requests',edge.active+' / '+edge.maxConcurrent],['Concurrent / client',edge.maxClientConcurrent],
+                ['Maximum upload',bytes(edge.maxBodyBytes)],['Upload deadline',edge.bodyReadTimeoutSeconds+' seconds'],
+                ['Upstream errors',edge.upstreamFailures],['Claimed bytes rejected',bytes(edge.declaredRejectedBytes)],
+                ['Firewall started',timestamp(edge.startedAt)],['Snapshot',timestamp(edge.updatedAt)],
+            ]) facts.append(el('dt',label),el('dd',String(value)));
+            limits.append(facts);grid.append(reasons,limits);panel.append(grid);
+            if (edge.traffic?.length) {
+                panel.append(el('h3','Public traffic · last minute'));
+                const chart=el('div',null,'sec-chart');chart.setAttribute('role','img');chart.setAttribute('aria-label','Public requests and denials in one-second buckets');
+                const windows=Array.from({length:60},(_,i)=>{const at=Math.floor(new Date(edge.updatedAt).valueOf()/1000)-(59-i);return edge.traffic.find(w=>Math.floor(new Date(w.at).valueOf()/1000)===at)||{count:0,rejected:0};});
+                const peak=Math.max(1,...windows.map(w=>Math.max(w.count,w.rejected)));
+                for (const w of windows) { const bar=el('div',null,'sec-bar');bar.style.height=Math.max(1,100*Math.max(w.count,w.rejected)/peak)+'%';bar.title=(w.at?timestamp(w.at)+': ':'')+w.count+' arrivals, '+w.rejected+' rejections';const blocked=el('span');blocked.style.height=percent(w.rejected,Math.max(w.count,w.rejected))+'%';bar.append(blocked);chart.append(bar); }
+                panel.append(chart,el('p','Blue: arrivals · amber: rejection decisions. Uploads can finish in a later bucket.','sec-muted'));
+            }
+        }
+        panel.append(el('p','Firewall and application counts cover different stages and must not be added together. Claimed size comes from Content-Length; it is not transferred bandwidth. Connections rejected before HTTP parsing and provider-level traffic are not measured here.','sec-context'));
+        content.append(panel);
+    }
     function incidentView(){
-        const filters=el('div',null,'sec-filters');const phaseInput=select([['','All states'],['active','Active'],['recovering','Recovering'],['resolved','Resolved'],['unreviewed','Not acknowledged']],phase);phaseInput.onchange=()=>{phase=phaseInput.value;render();};const familyInput=select([['','All traffic'],...families.map(f=>[f,familyLabels[f]])],family);familyInput.onchange=()=>{family=familyInput.value;render();};filters.append(labelField('Incident state',phaseInput),labelField('Traffic family',familyInput));content.append(filters);
-        const rows=filterIncidents(incidents,phase,family);
-        if(!rows.length){const empty=el('section',null,'sec-panel sec-empty');empty.append(el('h2',incidents.length?'No matching incidents':'No incidents recorded'),el('p',incidents.length?'Change the filters to see other activity.':'Detection needs three consecutive suspicious 10-second windows. Short tests may not produce an incident.'));content.append(empty);return;}
-        const list=el('div',null,'sec-incidents');for(const item of rows){const card=el('article',null,'sec-panel');const heading=el('div',null,'sec-incident-heading');heading.append(el('h2',(familyLabels[item.family]||item.family)+' · #'+item.id),badge(item.phase,item.phase));card.append(heading,el('p','First seen '+timestamp(item.firstSeen)+' · Latest evidence '+timestamp(item.lastSeen),'sec-muted'));const o=item.evidence||{};stats(card,[['Requests',o.count||0,'Latest evidence window'],['Flagged',percent(o.rejected,o.count)+'%',(o.rejected||0)+' admission decisions'],['Failures',o.failures||0,(o.slow||0)+' slow requests']]);const details=el('details');details.append(el('summary','How to interpret this incident'),el('p','Compare traffic with client releases, database health and provider metrics. Acknowledging records review; it does not block traffic or resolve the detector state.'));card.append(details);const ack=button(item.acknowledged?'Acknowledged':'Acknowledge',()=>mutate(async()=>{await client.request('incidents/'+item.id+'/acknowledge',{method:'POST'});},'Incident acknowledged.'));ack.disabled=item.acknowledged||mutation;card.append(ack);list.append(card);}content.append(list);
+        const filters=el('div',null,'sec-filters');const phaseInput=select([['','All states'],['active','Active'],['recovering','Recovering'],['resolved','Resolved'],['unreviewed','Not acknowledged']],phase);phaseInput.onchange=()=>{phase=phaseInput.value;render();};const familyInput=select([['','All traffic'],...families.map(f=>[f,familyLabels[f]])],family);familyInput.onchange=()=>{family=familyInput.value;render();};filters.append(labelField('Incident state',phaseInput),labelField('Traffic family (PocketBase)',familyInput));const sourceInput=select([['','All sources'],['edge','Public firewall'],['pocketbase','PocketBase']],source);sourceInput.onchange=()=>{source=sourceInput.value;if(source==='edge')family='';render();};familyInput.disabled=source==='edge';filters.append(labelField('Source',sourceInput));content.append(filters);
+        const rows=filterIncidents(incidents,phase,family).filter(i=>!source||(i.source||'pocketbase')===source);
+        if(!rows.length){const empty=el('section',null,'sec-panel sec-empty');empty.append(el('h2',incidents.length?'No matching incidents':'No incidents recorded'),el('p',incidents.length?'Change the filters to see other activity.':'Detection needs one suspicious application window. Firewall denials are recorded individually and grouped by reason.'));content.append(empty);return;}
+        const list=el('div',null,'sec-incidents');for(const item of rows){const card=el('article',null,'sec-panel');const heading=el('div',null,'sec-incident-heading');heading.append(el('h2',(item.source==='edge'?(reasonLabels[item.reason]||item.reason):(familyLabels[item.family]||item.family))+' · #'+item.id),badge(item.phase,item.phase));card.append(heading,el('p','First seen '+timestamp(item.firstSeen)+' · Latest evidence '+timestamp(item.lastSeen),'sec-muted'));card.append(el('p',(item.source==='edge'?'Public firewall':'PocketBase')+' · '+(item.severity==='warning'?'Elevated signal — review recommended':'Policy event — not proof of an attack'),'sec-muted'));const o=item.evidence||{};stats(card,item.source==='edge'?[['Blocked requests',o.rejected||0,'Accumulated for this event'],['Body bytes read',bytes(o.bodyReadBytes),'Payload read before rejection'],['Claimed size',bytes(o.declaredRejectedBytes),'Content-Length; not received bandwidth']]:[['Requests',o.count||0,'Accumulated evidence'],['Flagged',percent(o.rejected,o.count)+'%',(o.rejected||0)+' admission decisions'],['Failures',o.failures||0,(o.slow||0)+' slow requests']]);const details=el('details');details.append(el('summary','How to interpret this incident'),el('p','Compare traffic with client releases, database health and provider metrics. Acknowledging records review; it does not block traffic or resolve the detector state.'));card.append(details);const ack=button(item.acknowledged?'Acknowledged':'Acknowledge',()=>mutate(async()=>{await client.request('incidents/'+item.id+'/acknowledge',{method:'POST'});},'Incident acknowledged.'));ack.disabled=item.acknowledged||mutation;card.append(ack);list.append(card);}content.append(list);
     }
     function renderActions(list=content.querySelector('[data-sec-actions]')) {
         if(!list||!status)return;list.replaceChildren();
@@ -76,8 +124,8 @@ function mount(root, app) {
         if(!draft){const snapshot=await getPolicy();draft=snapshot.policy;revision=snapshot.revision;}
         if(!checkSession())return;status=nextStatus;incidents=all;lastRefresh=new Date();updated.textContent='Updated '+lastRefresh.toLocaleTimeString();
     }
-    async function refresh(manual=false){if(busy||mutation||closed||!checkSession())return;busy=true;refreshButton.disabled=true;try{const firstLoad=!status;await load();if(firstLoad||(view!=='protection'&&!content.contains(document.activeElement))||(manual&&!dirty))render();else if(view==='protection')renderActions();if(!operatorNotice)message('');}catch(error){failure(error);}finally{busy=false;refreshButton.disabled=false;if(!closed&&!sessionGone)timer=setTimeout(()=>refresh(),5000);}}
-    async function mutate(operation,success){if(mutation||closed||!checkSession())return;if(busy){message('A refresh is finishing. Please try the action again.');return;}mutation=true;operatorNotice=true;content.inert=true;content.setAttribute('aria-busy','true');clearTimeout(timer);try{await operation();await load();render();message(success);}catch(error){failure(error);}finally{mutation=false;content.inert=false;content.removeAttribute('aria-busy');if(!closed&&!sessionGone)render();if(!closed&&!sessionGone)timer=setTimeout(()=>refresh(),5000);}}
+    async function refresh(manual=false){if(document.hidden&&!manual){timer=setTimeout(()=>refresh(),2000);return;}if(busy||mutation||closed||!checkSession())return;busy=true;refreshButton.disabled=true;try{const firstLoad=!status;await load();if(firstLoad||(view!=='protection'&&!content.contains(document.activeElement))||(manual&&!dirty))render();else if(view==='protection')renderActions();if(!operatorNotice)message('');}catch(error){failure(error);}finally{busy=false;refreshButton.disabled=false;if(!closed&&!sessionGone)timer=setTimeout(()=>refresh(),2000);}}
+    async function mutate(operation,success){if(mutation||closed||!checkSession())return;if(busy){message('A refresh is finishing. Please try the action again.');return;}mutation=true;operatorNotice=true;content.inert=true;content.setAttribute('aria-busy','true');clearTimeout(timer);try{await operation();await load();render();message(success);}catch(error){failure(error);}finally{mutation=false;content.inert=false;content.removeAttribute('aria-busy');if(!closed&&!sessionGone)render();if(!closed&&!sessionGone)timer=setTimeout(()=>refresh(),2000);}}
     refreshButton.onclick=()=>{clearTimeout(timer);refresh(true);};renderTabs();refresh();
     return ()=>{closed=true;clearTimeout(timer);unsubscribe();client.close();root.replaceChildren();};
 }

package/security/ui/main.js

@@ -4,11 +4,23 @@ if (!app.routes?.superuserOnly || !app.store?.headerLinks || !app.pb?.send) {
 const base = app.pb.buildURL('/_/extensions/security/');
 const stylesheet = document.createElement('link');
 stylesheet.rel = 'stylesheet';
-stylesheet.href = base + 'dashboard.css';
+stylesheet.href = base + 'dashboard.css?v=2';
 document.head.append(stylesheet);
-app.routes.superuserOnly('#/security', async () => {
-    const { securityPage } = await import(base + 'dashboard.js');
-    return securityPage(app);
+app.routes.superuserOnly('#/security', () => {
+    let cancelled = false, dispose = () => {};
+    return t.div({className: 'page pb-security'}, t.div({
+        className: 'page-content',
+        onmount: async root => {
+            root.textContent = 'Loading security…';
+            try {
+                const { mount } = await import(base + 'dashboard.js?v=2');
+                if (!cancelled && root.isConnected) dispose = mount(root, app);
+            } catch {
+                if (!cancelled) root.textContent = 'Security could not be loaded. Refresh the page to try again.';
+            }
+        },
+        onunmount: () => { cancelled = true; dispose(); },
+    }));
 });
 if (!app.store.headerLinks.some(link => link.href === '#/security')) {
     app.store.headerLinks.push({ href: '#/security', label: 'Security', icon: 'ri-shield-check-line' });

package/security/ui/model.js

@@ -1,6 +1,6 @@
 export const families = ['auth', 'reads', 'writes', 'files', 'realtime', 'other'];
 export const familyLabels = { auth: 'Authentication', reads: 'Record reads', writes: 'Record writes', files: 'Files', realtime: 'Realtime', other: 'Other / health' };
-export function rate(window) { return Number(window?.count || 0) / 10; }
+export function rate(window) { return Number(window?.count || 0) / Math.max(0.001, Number(window?.seconds || 10)); }
 export function percent(part, total) { return total > 0 ? Math.round(100 * part / total) : 0; }
 export function filterIncidents(items, phase, family) {
     return items.filter(i => (!phase || (phase === 'unreviewed' ? !i.acknowledged : i.phase === phase)) && (!family || i.family === family)).sort((a,b) => b.id-a.id);
@@ -30,3 +30,25 @@ export function sessionRequest(send, getSession, onExpired = () => {}) {
         valid() { return alive && getSession() === initial; },
     };
 }
+
+export const reasonLabels = {
+    body_too_large: 'Upload exceeds size limit', body_timeout: 'Upload exceeded time limit',
+    body_read_error: 'Interrupted or invalid upload', private_route: 'Private or unlisted route',
+    blocked_path: 'Blocked path', blocked_network: 'Blocked network', invalid_path: 'Ambiguous URL',
+    invalid_client: 'Invalid client address', policy_unavailable: 'Policy missing or stale',
+    global_rate: 'Global request rate', client_rate: 'Client request rate',
+    client_capacity: 'Client tracking capacity', global_concurrency: 'Concurrent request capacity',
+    client_concurrency: 'Concurrent requests from one client', family_block: 'Temporary family block',
+};
+export function bytes(value) {
+    const n = Math.max(0, Number(value || 0));
+    if (n < 1024) return n.toLocaleString() + ' B';
+    const unit = Math.min(4, Math.floor(Math.log2(n) / 10));
+    return (n / 1024 ** unit).toLocaleString(undefined, {maximumFractionDigits: 1}) + ' ' + ['B','KiB','MiB','GiB','TiB'][unit];
+}
+export function edgeState(status, now = Date.now()) {
+    if (!status?.edgeConfigured) return 'unconfigured';
+    if (!status.edge) return 'unavailable';
+    if (status.edgeStale || now - new Date(status.edge.updatedAt).valueOf() > 5000) return 'stale';
+    return 'live';
+}

package/security/ui/model.test.mjs

@@ -23,3 +23,15 @@ test('authentication failure invokes login handling',async()=>{
  const client=sessionRequest(async()=>{throw Object.assign(new Error('expired'),{status:401});},()=> 'same',()=>expired=true);
  await assert.rejects(client.request('status'));assert.equal(expired,true);
 });
+
+test('one-second rates and absent or stale edge snapshots are explicit', async()=>{
+ const {edgeState,bytes}=await import('./model.js');
+ assert.equal(rate({count:120,seconds:1}),120);
+ assert.equal(rate({count:120,seconds:2}),60);
+ assert.equal(edgeState({edgeConfigured:false}),'unconfigured');
+ assert.equal(edgeState({edgeConfigured:true}),'unavailable');
+ const now=Date.now();const status={edgeConfigured:true,edge:{updatedAt:new Date(now).toISOString()}};
+ assert.equal(edgeState(status,now),'live');
+ assert.equal(edgeState(status,now+6000),'stale');
+ assert.equal(bytes(1<<30),'1 GiB');
+});