feat(web): port PoW challenge page from vanilla JS to Preact

Replace the imperative DOM manipulation in web/js/main.ts with a
declarative Preact component (web/js/main.tsx). The project already
uses Preact for the timed-delay challenge (lib/challenge/preact/),
so this aligns the PoW challenge with the existing codebase direction.

## Approach

Convert web/js/main.ts to a Preact TSX component. The worker
orchestration layer (web/js/algorithms/fast.ts) stays untouched --
it is already cleanly separated and works via a Promise API.

## What changed

web/js/main.ts -> web/js/main.tsx:
  - Phase-based state machine (loading -> computing -> reading/error)
    replaces scattered imperative DOM updates.
  - Worker lifecycle managed in useEffect; progress callback drives
    state setters for speed and progress percentage.
  - Speed updates remain throttled to 1 second intervals.
  - i18n functions (initTranslations, t(), loadTranslations) kept as
    module-level state -- no need for React context in a single-
    component app.
  - The <details> section stays in the templ file as server-rendered
    HTML; the Preact component tracks its toggle state via useRef.
  - Uses esbuild automatic JSX transform (--jsx=automatic
    --jsx-import-source=preact) instead of classic pragmas.

web/build.sh:
  - Add js/**/*.tsx to the glob so esbuild bundles TSX files.
  - Pass --jsx=automatic --jsx-import-source=preact for .tsx files.

web/tsconfig.json (new):
  - IDE-only config (noEmit) so TypeScript understands Preact JSX
    types for editor diagnostics and autocompletion.

lib/challenge/proofofwork/proofofwork.templ:
  - Replace individual DOM elements (img#image, p#status,
    div#progress) with a <div id="app"> Preact mount point
    containing server-rendered fallback (pensive image + loading
    text).
  - Keep <details>, <noscript>, and <div id="testarea"> outside the
    Preact tree as server-rendered content.

lib/anubis.go:
  - Add challenge method to the "new challenge issued" log line.

docs/docs/CHANGELOG.md:
  - Add entry for the Preact rewrite.

## What stayed the same

  - web/js/algorithms/fast.ts -- untouched
  - web/js/algorithms/index.ts -- untouched
  - web/js/worker/sha256-*.ts -- untouched
  - Server-side Go code (proofofwork.go) -- untouched
  - JSON script data embedding -- untouched
  - Redirect URL construction -- same logic, same parameters
  - Progress bar CSS in web/index.templ -- untouched

Signed-off-by: Xe Iaso <me@xeiaso.net>
Assisted-by: Claude Opus 4.6 via Claude Code
Signed-off-by: Xe Iaso <me@xeiaso.net>

docs/docs/CHANGELOG.md

@@ -11,8 +11,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+- fix: prevent nil pointer panic in challenge validation when threshold rules match during PassChallenge (#1463)
 - Instruct reverse proxies to not cache error pages.
 - Fixed mixed tab/space indentation in Caddy documentation code block
+- Rewrite main proof of work challenge to use Preact instead of Vanilla.js ([#1149](https://github.com/TecharoHQ/anubis/issues/1149))
 
 <!-- This changes the project to: -->
 

docs/docs/admin/environments/haproxy.mdx

@@ -48,6 +48,8 @@ This simply enables SSL offloading, sets some useful and required headers and ro
 
 Due to the fact that HAProxy can decode JWT, we are able to verify the Anubis token directly in HAProxy and route the traffic to the specific backends ourselves.
 
+Mind that rule logic to allow Git HTTP and other legit bot traffic to bypass is delegated from Anubis to HAProxy then. If required, you should implement any whitelisting in HAProxy using `acl_anubis_ignore` yourself.
+
 In this example are three applications behind one HAProxy frontend. Only App1 and App2 are secured via Anubis; App3 is open for everyone. The path `/excluded/path` can also be accessed by anyone.
 
 ```mermaid

docs/docs/admin/environments/kubernetes.mdx

@@ -130,3 +130,52 @@ Then point your Ingress to the Anubis port:
               # diff-add
               name: anubis
 ```
+
+## Envoy Gateway
+
+If you are using envoy-gateway, the `X-Real-Ip` header is not set by default, but Anubis does require it. You can resolve this by adding the header, either on the specific `HTTPRoute` where Anubis is listening, or on the `ClientTrafficPolicy` to apply it to any number of Gateways:
+
+HTTPRoute:
+```yaml
+apiVersion: gateway.networking.k8s.io/v1
+kind: HTTPRoute
+metadata:
+  name: app-route
+spec:
+  hostnames: ["app.domain.tld"]
+  parentRefs:
+    - name: envoy-external
+      namespace: network
+      sectionName: https
+  rules:
+    - backendRefs:
+        - identifier: *app
+          port: anubis
+      filters:
+        - type: RequestHeaderModifier
+          requestHeaderModifier:
+            set:
+              - name: X-Real-Ip
+                value: "%DOWNSTREAM_REMOTE_ADDRESS_WITHOUT_PORT%"
+```
+
+Applying to any number of Gateways:
+```yaml
+apiVersion: gateway.envoyproxy.io/v1alpha1
+kind: ClientTrafficPolicy
+metadata:
+  name: envoy
+spec:
+  headers:
+    earlyRequestHeaders:
+      set:
+        - name: X-Real-Ip
+          value: "%DOWNSTREAM_REMOTE_ADDRESS_WITHOUT_PORT%"
+  clientIPDetection:
+    xForwardedFor:
+      trustedCIDRs:
+        - 10.96.0.0/16 # Cluster pod CIDR
+  targetSelectors: # These will apply to all Gateways
+    - group: gateway.networking.k8s.io
+      kind: Gateway
+```

lib/anubis.go

@@ -106,6 +106,13 @@ func (s *Server) issueChallenge(ctx context.Context, r *http.Request, lg *slog.L
 		//return nil, errors.New("[unexpected] this codepath should be impossible, asked to issue a challenge for a non-challenge rule")
 	}
 
+	if rule.Challenge == nil {
+		rule.Challenge = &config.ChallengeRules{
+			Difficulty: s.policy.DefaultDifficulty,
+			Algorithm:  config.DefaultAlgorithm,
+		}
+	}
+
 	id, err := uuid.NewV7()
 	if err != nil {
 		return nil, err
@@ -134,7 +141,7 @@ func (s *Server) issueChallenge(ctx context.Context, r *http.Request, lg *slog.L
 		return nil, err
 	}
 
-	lg.Info("new challenge issued", "challenge", id.String())
+	lg.Info("new challenge issued", "challenge", id.String(), "method", chall.Method)
 
 	return &chall, err
 }
@@ -491,7 +498,11 @@ func (s *Server) PassChallenge(w http.ResponseWriter, r *http.Request) {
 	chall, err := s.getChallenge(r)
 	if err != nil {
 		lg.Error("getChallenge failed", "err", err)
-		s.respondWithError(w, r, fmt.Sprintf("%s: %s", localizer.T("internal_server_error"), rule.Challenge.Algorithm), makeCode(err))
+		algorithm := "unknown"
+		if rule.Challenge != nil {
+			algorithm = rule.Challenge.Algorithm
+		}
+		s.respondWithError(w, r, fmt.Sprintf("%s: %s", localizer.T("internal_server_error"), algorithm), makeCode(err))
 		return
 	}
 
@@ -638,8 +649,16 @@ func (s *Server) check(r *http.Request, lg *slog.Logger) (policy.CheckResult, *p
 		}
 
 		if matches {
+			challRules := t.Challenge
+			if challRules == nil {
+				// Non-CHALLENGE thresholds (ALLOW/DENY) don't have challenge config.
+				// Use an empty struct so hydrateChallengeRule can fill from stored
+				// challenge data during validation, rather than baking in defaults
+				// that could mismatch the difficulty the client actually solved for.
+				challRules = &config.ChallengeRules{}
+			}
 			return cr("threshold/"+t.Name, t.Action, weight), &policy.Bot{
-				Challenge: t.Challenge,
+				Challenge: challRules,
 				Rules:     &checker.List{},
 			}, nil
 		}

lib/challenge/error.go

@@ -10,6 +10,7 @@ var (
 	ErrFailed        = errors.New("challenge: user failed challenge")
 	ErrMissingField  = errors.New("challenge: missing field")
 	ErrInvalidFormat = errors.New("challenge: field has invalid format")
+	ErrInvalidInput  = errors.New("challenge: input is nil or missing required fields")
 )
 
 func NewError(verb, publicReason string, privateReason error) *Error {

lib/challenge/interface.go

@@ -1,6 +1,7 @@
 package challenge
 
 import (
+	"fmt"
 	"log/slog"
 	"net/http"
 	"sort"
@@ -50,12 +51,44 @@ type IssueInput struct {
 	Store     store.Interface
 }
 
+func (in *IssueInput) Valid() error {
+	if in == nil {
+		return fmt.Errorf("%w: IssueInput is nil", ErrInvalidInput)
+	}
+	if in.Rule == nil {
+		return fmt.Errorf("%w: Rule is nil", ErrInvalidInput)
+	}
+	if in.Rule.Challenge == nil {
+		return fmt.Errorf("%w: Rule.Challenge is nil", ErrInvalidInput)
+	}
+	if in.Challenge == nil {
+		return fmt.Errorf("%w: Challenge is nil", ErrInvalidInput)
+	}
+	return nil
+}
+
 type ValidateInput struct {
 	Rule      *policy.Bot
 	Challenge *Challenge
 	Store     store.Interface
 }
 
+func (in *ValidateInput) Valid() error {
+	if in == nil {
+		return fmt.Errorf("%w: ValidateInput is nil", ErrInvalidInput)
+	}
+	if in.Rule == nil {
+		return fmt.Errorf("%w: Rule is nil", ErrInvalidInput)
+	}
+	if in.Rule.Challenge == nil {
+		return fmt.Errorf("%w: Rule.Challenge is nil", ErrInvalidInput)
+	}
+	if in.Challenge == nil {
+		return fmt.Errorf("%w: Challenge is nil", ErrInvalidInput)
+	}
+	return nil
+}
+
 type Impl interface {
 	// Setup registers any additional routes with the Impl for assets or API routes.
 	Setup(mux *http.ServeMux)

lib/challenge/metarefresh/metarefresh.go

@@ -24,6 +24,10 @@ type Impl struct{}
 func (i *Impl) Setup(mux *http.ServeMux) {}
 
 func (i *Impl) Issue(w http.ResponseWriter, r *http.Request, lg *slog.Logger, in *challenge.IssueInput) (templ.Component, error) {
+	if err := in.Valid(); err != nil {
+		return nil, err
+	}
+
 	u, err := r.URL.Parse(anubis.BasePrefix + "/.within.website/x/cmd/anubis/api/pass-challenge")
 	if err != nil {
 		return nil, fmt.Errorf("can't render page: %w", err)
@@ -49,6 +53,10 @@ func (i *Impl) Issue(w http.ResponseWriter, r *http.Request, lg *slog.Logger, in
 }
 
 func (i *Impl) Validate(r *http.Request, lg *slog.Logger, in *challenge.ValidateInput) error {
+	if err := in.Valid(); err != nil {
+		return challenge.NewError("validate", "invalid input", err)
+	}
+
 	wantTime := in.Challenge.IssuedAt.Add(time.Duration(in.Rule.Challenge.Difficulty) * 800 * time.Millisecond)
 
 	if time.Now().Before(wantTime) {

lib/challenge/preact/preact.go

@@ -39,6 +39,10 @@ type impl struct{}
 func (i *impl) Setup(mux *http.ServeMux) {}
 
 func (i *impl) Issue(w http.ResponseWriter, r *http.Request, lg *slog.Logger, in *challenge.IssueInput) (templ.Component, error) {
+	if err := in.Valid(); err != nil {
+		return nil, err
+	}
+
 	u, err := r.URL.Parse(anubis.BasePrefix + "/.within.website/x/cmd/anubis/api/pass-challenge")
 	if err != nil {
 		return nil, fmt.Errorf("can't render page: %w", err)
@@ -57,6 +61,10 @@ func (i *impl) Issue(w http.ResponseWriter, r *http.Request, lg *slog.Logger, in
 }
 
 func (i *impl) Validate(r *http.Request, lg *slog.Logger, in *challenge.ValidateInput) error {
+	if err := in.Valid(); err != nil {
+		return challenge.NewError("validate", "invalid input", err)
+	}
+
 	wantTime := in.Challenge.IssuedAt.Add(time.Duration(in.Rule.Challenge.Difficulty) * 80 * time.Millisecond)
 
 	if time.Now().Before(wantTime) {

lib/challenge/proofofwork/proofofwork.go

@@ -33,6 +33,10 @@ func (i *Impl) Issue(w http.ResponseWriter, r *http.Request, lg *slog.Logger, in
 }
 
 func (i *Impl) Validate(r *http.Request, lg *slog.Logger, in *chall.ValidateInput) error {
+	if err := in.Valid(); err != nil {
+		return chall.NewError("validate", "invalid input", err)
+	}
+
 	rule := in.Rule
 	challenge := in.Challenge.RandomData
 

lib/challenge/proofofwork/proofofwork.templ

@@ -7,13 +7,12 @@ import (
 
 templ page(localizer *localization.SimpleLocalizer) {
 	<div class="centered-div">
-		<img id="image" style="width:100%;max-width:256px;" src={ anubis.BasePrefix + "/.within.website/x/cmd/anubis/static/img/pensive.webp?cacheBuster=" + anubis.Version }/>
 		<img style="display:none;" style="width:100%;max-width:256px;" src={ anubis.BasePrefix + "/.within.website/x/cmd/anubis/static/img/happy.webp?cacheBuster=" + anubis.Version }/>
-		<p id="status">{ localizer.T("loading") }</p>
+		<div id="app">
-		<script async type="module" src={ anubis.BasePrefix + "/.within.website/x/cmd/anubis/static/js/main.mjs?cacheBuster=" + anubis.Version }></script>
+			<img style="width:100%;max-width:256px;" src={ anubis.BasePrefix + "/.within.website/x/cmd/anubis/static/img/pensive.webp?cacheBuster=" + anubis.Version }/>
-		<div id="progress" role="progressbar" aria-labelledby="status">
+			<p id="status">{ localizer.T("loading") }</p>
-			<div class="bar-inner"></div>
 		</div>
+		<script async type="module" src={ anubis.BasePrefix + "/.within.website/x/cmd/anubis/static/js/main.mjs?cacheBuster=" + anubis.Version }></script>
 		<details>
 			if anubis.UseSimplifiedExplanation {
 				<p>

lib/challenge/proofofwork/proofofwork_templ.go

@@ -34,27 +34,27 @@ func page(localizer *localization.SimpleLocalizer) templ.Component {
 			templ_7745c5c3_Var1 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div class=\"centered-div\"><img id=\"image\" style=\"width:100%;max-width:256px;\" src=\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div class=\"centered-div\"><img style=\"display:none;\" style=\"width:100%;max-width:256px;\" src=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var2 string
-		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(anubis.BasePrefix + "/.within.website/x/cmd/anubis/static/img/pensive.webp?cacheBuster=" + anubis.Version)
+		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(anubis.BasePrefix + "/.within.website/x/cmd/anubis/static/img/happy.webp?cacheBuster=" + anubis.Version)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `proofofwork.templ`, Line: 10, Col: 165}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `proofofwork.templ`, Line: 10, Col: 174}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "\"> <img style=\"display:none;\" style=\"width:100%;max-width:256px;\" src=\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "\"><div id=\"app\"><img style=\"width:100%;max-width:256px;\" src=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var3 string
-		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(anubis.BasePrefix + "/.within.website/x/cmd/anubis/static/img/happy.webp?cacheBuster=" + anubis.Version)
+		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(anubis.BasePrefix + "/.within.website/x/cmd/anubis/static/img/pensive.webp?cacheBuster=" + anubis.Version)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `proofofwork.templ`, Line: 11, Col: 174}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `proofofwork.templ`, Line: 12, Col: 155}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
 		if templ_7745c5c3_Err != nil {
@@ -67,26 +67,26 @@ func page(localizer *localization.SimpleLocalizer) templ.Component {
 		var templ_7745c5c3_Var4 string
 		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(localizer.T("loading"))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `proofofwork.templ`, Line: 12, Col: 41}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `proofofwork.templ`, Line: 13, Col: 42}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "</p><script async type=\"module\" src=\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "</p></div><script async type=\"module\" src=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var5 string
 		templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(anubis.BasePrefix + "/.within.website/x/cmd/anubis/static/js/main.mjs?cacheBuster=" + anubis.Version)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `proofofwork.templ`, Line: 13, Col: 136}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `proofofwork.templ`, Line: 15, Col: 136}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "\"></script><div id=\"progress\" role=\"progressbar\" aria-labelledby=\"status\"><div class=\"bar-inner\"></div></div><details>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "\"></script><details>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -98,7 +98,7 @@ func page(localizer *localization.SimpleLocalizer) templ.Component {
 			var templ_7745c5c3_Var6 string
 			templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(localizer.T("simplified_explanation"))
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `proofofwork.templ`, Line: 20, Col: 44}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `proofofwork.templ`, Line: 19, Col: 44}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
 			if templ_7745c5c3_Err != nil {
@@ -116,7 +116,7 @@ func page(localizer *localization.SimpleLocalizer) templ.Component {
 			var templ_7745c5c3_Var7 string
 			templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(localizer.T("ai_companies_explanation"))
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `proofofwork.templ`, Line: 24, Col: 46}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `proofofwork.templ`, Line: 23, Col: 46}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
 			if templ_7745c5c3_Err != nil {
@@ -129,7 +129,7 @@ func page(localizer *localization.SimpleLocalizer) templ.Component {
 			var templ_7745c5c3_Var8 string
 			templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(localizer.T("anubis_compromise"))
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `proofofwork.templ`, Line: 27, Col: 39}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `proofofwork.templ`, Line: 26, Col: 39}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
 			if templ_7745c5c3_Err != nil {
@@ -142,7 +142,7 @@ func page(localizer *localization.SimpleLocalizer) templ.Component {
 			var templ_7745c5c3_Var9 string
 			templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(localizer.T("hack_purpose"))
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `proofofwork.templ`, Line: 30, Col: 34}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `proofofwork.templ`, Line: 29, Col: 34}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
 			if templ_7745c5c3_Err != nil {
@@ -155,7 +155,7 @@ func page(localizer *localization.SimpleLocalizer) templ.Component {
 			var templ_7745c5c3_Var10 string
 			templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(localizer.T("jshelter_note"))
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `proofofwork.templ`, Line: 33, Col: 35}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `proofofwork.templ`, Line: 32, Col: 35}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
 			if templ_7745c5c3_Err != nil {
@@ -173,7 +173,7 @@ func page(localizer *localization.SimpleLocalizer) templ.Component {
 		var templ_7745c5c3_Var11 string
 		templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(localizer.T("javascript_required"))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `proofofwork.templ`, Line: 39, Col: 40}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `proofofwork.templ`, Line: 38, Col: 40}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
 		if templ_7745c5c3_Err != nil {

lib/challenge/proofofwork/proofofwork_test.go

@@ -30,6 +30,62 @@ func mkRequest(t *testing.T, values map[string]string) *http.Request {
 	return req
 }
 
+// TestValidateNilRuleChallenge reproduces the panic from
+// https://github.com/TecharoHQ/anubis/issues/1463
+//
+// When a threshold rule matches during PassChallenge, check() can return
+// a policy.Bot with Challenge == nil. After hydrateChallengeRule fails to
+// run (or the error path hits before it), Validate dereferences
+// rule.Challenge.Difficulty and panics.
+func TestValidateNilRuleChallenge(t *testing.T) {
+	i := &Impl{Algorithm: "fast"}
+	lg := slog.With()
+
+	// This is the exact response for SHA256("hunter" + "0") with 0 leading zeros required.
+	const challengeStr = "hunter"
+	const response = "2652bdba8fb4d2ab39ef28d8534d7694c557a4ae146c1e9237bd8d950280500e"
+
+	req := mkRequest(t, map[string]string{
+		"nonce":       "0",
+		"elapsedTime": "69",
+		"response":    response,
+	})
+
+	for _, tc := range []struct {
+		name  string
+		input *challenge.ValidateInput
+	}{
+		{
+			name: "nil-rule-challenge",
+			input: &challenge.ValidateInput{
+				Rule:      &policy.Bot{},
+				Challenge: &challenge.Challenge{RandomData: challengeStr},
+			},
+		},
+		{
+			name: "nil-rule",
+			input: &challenge.ValidateInput{
+				Challenge: &challenge.Challenge{RandomData: challengeStr},
+			},
+		},
+		{
+			name:  "nil-challenge",
+			input: &challenge.ValidateInput{Rule: &policy.Bot{Challenge: &config.ChallengeRules{Algorithm: "fast"}}},
+		},
+		{
+			name:  "nil-input",
+			input: nil,
+		},
+	} {
+		t.Run(tc.name, func(t *testing.T) {
+			err := i.Validate(req, lg, tc.input)
+			if !errors.Is(err, challenge.ErrInvalidInput) {
+				t.Fatalf("expected ErrInvalidInput, got: %v", err)
+			}
+		})
+	}
+}
+
 func TestBasic(t *testing.T) {
 	i := &Impl{Algorithm: "fast"}
 	bot := &policy.Bot{

lib/http.go

@@ -219,8 +219,12 @@ func (s *Server) RenderIndex(w http.ResponseWriter, r *http.Request, cr policy.C
 	chall, err := s.issueChallenge(r.Context(), r, lg, cr, rule)
 	if err != nil {
 		lg.Error("can't get challenge", "err", err)
+		algorithm := "unknown"
+		if rule.Challenge != nil {
+			algorithm = rule.Challenge.Algorithm
+		}
 		s.ClearCookie(w, CookieOpts{Name: anubis.TestCookieName, Host: r.Host})
-		s.respondWithError(w, r, fmt.Sprintf("%s: %s", localizer.T("internal_server_error"), rule.Challenge.Algorithm), makeCode(err))
+		s.respondWithError(w, r, fmt.Sprintf("%s: %s", localizer.T("internal_server_error"), algorithm), makeCode(err))
 		return
 	}
 
@@ -245,9 +249,13 @@ func (s *Server) RenderIndex(w http.ResponseWriter, r *http.Request, cr policy.C
 
 	impl, ok := challenge.Get(chall.Method)
 	if !ok {
-		lg.Error("check failed", "err", "can't get algorithm", "algorithm", rule.Challenge.Algorithm)
+		algorithm := "unknown"
+		if rule.Challenge != nil {
+			algorithm = rule.Challenge.Algorithm
+		}
+		lg.Error("check failed", "err", "can't get algorithm", "algorithm", algorithm)
 		s.ClearCookie(w, CookieOpts{Name: anubis.TestCookieName, Host: r.Host})
-		s.respondWithError(w, r, fmt.Sprintf("%s: %s", localizer.T("internal_server_error"), rule.Challenge.Algorithm), makeCode(err))
+		s.respondWithError(w, r, fmt.Sprintf("%s: %s", localizer.T("internal_server_error"), algorithm), makeCode(err))
 		return
 	}
 

web/build.sh

@@ -41,15 +41,22 @@ cp ../lib/localization/locales/*.json static/locales/
 
 shopt -s nullglob globstar
 
-for file in js/**/*.ts js/**/*.mjs; do
+for file in js/**/*.ts js/**/*.tsx js/**/*.mjs; do
   out="static/${file}"
-  if [[ "$file" == *.ts ]]; then
+  if [[ "$file" == *.tsx ]]; then
+    out="static/${file%.tsx}.mjs"
+  elif [[ "$file" == *.ts ]]; then
     out="static/${file%.ts}.mjs"
   fi
 
   mkdir -p "$(dirname "$out")"
 
-  esbuild "$file" --sourcemap --bundle --minify --outfile="$out" --banner:js="$LICENSE"
+  JSX_FLAGS=""
+  if [[ "$file" == *.tsx ]]; then
+    JSX_FLAGS="--jsx=automatic --jsx-import-source=preact"
+  fi
+
+  esbuild "$file" --sourcemap --bundle --minify --outfile="$out" $JSX_FLAGS --banner:js="$LICENSE"
   gzip -f -k -n "$out"
   zstd -f -k --ultra -22 "$out"
   brotli -fZk "$out"

web/js/main.ts

@@ -1,281 +0,0 @@
-import algorithms from "./algorithms";
-
-// from Xeact
-const u = (url: string = "", params: Record<string, any> = {}) => {
-  let result = new URL(url, window.location.href);
-  Object.entries(params).forEach(([k, v]) => result.searchParams.set(k, v));
-  return result.toString();
-};
-
-const j = (id: string): any | null => {
-  const elem = document.getElementById(id);
-  if (elem === null) {
-    return null;
-  }
-
-  return JSON.parse(elem.textContent);
-};
-
-const imageURL = (mood, cacheBuster, basePrefix) =>
-  u(`${basePrefix}/.within.website/x/cmd/anubis/static/img/${mood}.webp`, {
-    cacheBuster,
-  });
-
-// Detect available languages by loading the manifest
-const getAvailableLanguages = async () => {
-  const basePrefix = j("anubis_base_prefix");
-  if (basePrefix === null) {
-    return;
-  }
-
-  try {
-    const response = await fetch(
-      `${basePrefix}/.within.website/x/cmd/anubis/static/locales/manifest.json`,
-    );
-    if (response.ok) {
-      const manifest = await response.json();
-      return manifest.supportedLanguages || ["en"];
-    }
-  } catch (error) {
-    console.warn(
-      "Failed to load language manifest, falling back to default languages",
-    );
-  }
-
-  // Fallback to default languages if manifest loading fails
-  return ["en"];
-};
-
-// Use the browser language from the HTML lang attribute which is set by the server settings or request headers
-const getBrowserLanguage = async () => document.documentElement.lang;
-
-// Load translations from JSON files
-const loadTranslations = async (lang) => {
-  const basePrefix = j("anubis_base_prefix");
-  if (basePrefix === null) {
-    return;
-  }
-
-  try {
-    const response = await fetch(
-      `${basePrefix}/.within.website/x/cmd/anubis/static/locales/${lang}.json`,
-    );
-    return await response.json();
-  } catch (error) {
-    console.warn(
-      `Failed to load translations for ${lang}, falling back to English`,
-    );
-    if (lang !== "en") {
-      return await loadTranslations("en");
-    }
-    throw error;
-  }
-};
-
-const getRedirectUrl = () => {
-  const publicUrl = j("anubis_public_url");
-  if (publicUrl === null) {
-    return;
-  }
-  if (publicUrl && window.location.href.startsWith(publicUrl)) {
-    const urlParams = new URLSearchParams(window.location.search);
-    return urlParams.get("redir");
-  }
-  return window.location.href;
-};
-
-let translations = {};
-let currentLang;
-
-// Initialize translations
-const initTranslations = async () => {
-  currentLang = await getBrowserLanguage();
-  translations = await loadTranslations(currentLang);
-};
-
-const t = (key) => translations[`js_${key}`] || translations[key] || key;
-
-(async () => {
-  // Initialize translations first
-  await initTranslations();
-
-  const dependencies = [
-    {
-      name: "Web Workers",
-      msg: t("web_workers_error"),
-      value: window.Worker,
-    },
-    {
-      name: "Cookies",
-      msg: t("cookies_error"),
-      value: navigator.cookieEnabled,
-    },
-  ];
-
-  const status: HTMLParagraphElement = document.getElementById(
-    "status",
-  ) as HTMLParagraphElement;
-  const image: HTMLImageElement = document.getElementById(
-    "image",
-  ) as HTMLImageElement;
-  const title: HTMLHeadingElement = document.getElementById(
-    "title",
-  ) as HTMLHeadingElement;
-  const progress: HTMLDivElement = document.getElementById(
-    "progress",
-  ) as HTMLDivElement;
-
-  const anubisVersion = j("anubis_version");
-  const basePrefix = j("anubis_base_prefix");
-  const details = document.querySelector("details");
-  let userReadDetails = false;
-
-  if (details) {
-    details.addEventListener("toggle", () => {
-      if (details.open) {
-        userReadDetails = true;
-      }
-    });
-  }
-
-  const ohNoes = ({ titleMsg, statusMsg, imageSrc }) => {
-    title.innerHTML = titleMsg;
-    status.innerHTML = statusMsg;
-    image.src = imageSrc;
-    progress.style.display = "none";
-  };
-
-  status.innerHTML = t("calculating");
-
-  for (const { value, name, msg } of dependencies) {
-    if (!value) {
-      ohNoes({
-        titleMsg: `${t("missing_feature")} ${name}`,
-        statusMsg: msg,
-        imageSrc: imageURL("reject", anubisVersion, basePrefix),
-      });
-      return;
-    }
-  }
-
-  const { challenge, rules } = j("anubis_challenge");
-
-  const process = algorithms[rules.algorithm];
-  if (!process) {
-    ohNoes({
-      titleMsg: t("challenge_error"),
-      statusMsg: t("challenge_error_msg"),
-      imageSrc: imageURL("reject", anubisVersion, basePrefix),
-    });
-    return;
-  }
-
-  status.innerHTML = `${t("calculating_difficulty")} ${rules.difficulty}, `;
-  progress.style.display = "inline-block";
-
-  // the whole text, including "Speed:", as a single node, because some browsers
-  // (Firefox mobile) present screen readers with each node as a separate piece
-  // of text.
-  const rateText = document.createTextNode(`${t("speed")} 0kH/s`);
-  status.appendChild(rateText);
-
-  let lastSpeedUpdate = 0;
-  let showingApology = false;
-  const likelihood = Math.pow(16, -rules.difficulty);
-
-  try {
-    const t0 = Date.now();
-    const { hash, nonce } = await process(
-      { basePrefix, version: anubisVersion },
-      challenge.randomData,
-      rules.difficulty,
-      null,
-      (iters) => {
-        const delta = Date.now() - t0;
-        // only update the speed every second so it's less visually distracting
-        if (delta - lastSpeedUpdate > 1000) {
-          lastSpeedUpdate = delta;
-          rateText.data = `${t("speed")} ${(iters / delta).toFixed(3)}kH/s`;
-        }
-        // the probability of still being on the page is (1 - likelihood) ^ iters.
-        // by definition, half of the time the progress bar only gets to half, so
-        // apply a polynomial ease-out function to move faster in the beginning
-        // and then slow down as things get increasingly unlikely. quadratic felt
-        // the best in testing, but this may need adjustment in the future.
-
-        const probability = Math.pow(1 - likelihood, iters);
-        const distance = (1 - Math.pow(probability, 2)) * 100;
-        progress["aria-valuenow"] = distance;
-        if (progress.firstElementChild !== null) {
-          (progress.firstElementChild as HTMLElement).style.width =
-            `${distance}%`;
-        }
-
-        if (probability < 0.1 && !showingApology) {
-          status.append(
-            document.createElement("br"),
-            document.createTextNode(t("verification_longer")),
-          );
-          showingApology = true;
-        }
-      },
-    );
-    const t1 = Date.now();
-    console.log({ hash, nonce });
-
-    if (userReadDetails) {
-      const container: HTMLDivElement = document.getElementById(
-        "progress",
-      ) as HTMLDivElement;
-
-      // Style progress bar as a continue button
-      container.style.display = "flex";
-      container.style.alignItems = "center";
-      container.style.justifyContent = "center";
-      container.style.height = "2rem";
-      container.style.borderRadius = "1rem";
-      container.style.cursor = "pointer";
-      container.style.background = "#b16286";
-      container.style.color = "white";
-      container.style.fontWeight = "bold";
-      container.style.outline = "4px solid #b16286";
-      container.style.outlineOffset = "2px";
-      container.style.width = "min(20rem, 90%)";
-      container.style.margin = "1rem auto 2rem";
-      container.innerHTML = t("finished_reading");
-
-      function onDetailsExpand() {
-        const redir = getRedirectUrl();
-        window.location.replace(
-          u(`${basePrefix}/.within.website/x/cmd/anubis/api/pass-challenge`, {
-            id: challenge.id,
-            response: hash,
-            nonce,
-            redir,
-            elapsedTime: t1 - t0,
-          }),
-        );
-      }
-
-      container.onclick = onDetailsExpand;
-      setTimeout(onDetailsExpand, 30000);
-    } else {
-      const redir = getRedirectUrl();
-      window.location.replace(
-        u(`${basePrefix}/.within.website/x/cmd/anubis/api/pass-challenge`, {
-          id: challenge.id,
-          response: hash,
-          nonce,
-          redir,
-          elapsedTime: t1 - t0,
-        }),
-      );
-    }
-  } catch (err) {
-    ohNoes({
-      titleMsg: t("calculation_error"),
-      statusMsg: `${t("calculation_error_msg")} ${err.message}`,
-      imageSrc: imageURL("reject", anubisVersion, basePrefix),
-    });
-  }
-})();

web/js/main.tsx

@@ -0,0 +1,345 @@
+import { render } from "preact";
+import { useState, useEffect, useRef } from "preact/hooks";
+import algorithms from "./algorithms";
+
+// from Xeact
+const u = (url: string = "", params: Record<string, any> = {}) => {
+  let result = new URL(url, window.location.href);
+  Object.entries(params).forEach(([k, v]) => result.searchParams.set(k, v));
+  return result.toString();
+};
+
+const j = (id: string): any | null => {
+  const elem = document.getElementById(id);
+  if (elem === null) {
+    return null;
+  }
+
+  return JSON.parse(elem.textContent);
+};
+
+const imageURL = (
+  mood: string,
+  cacheBuster: string,
+  basePrefix: string,
+): string =>
+  u(`${basePrefix}/.within.website/x/cmd/anubis/static/img/${mood}.webp`, {
+    cacheBuster,
+  });
+
+// Detect available languages by loading the manifest
+const getAvailableLanguages = async () => {
+  const basePrefix = j("anubis_base_prefix");
+  if (basePrefix === null) {
+    return;
+  }
+
+  try {
+    const response = await fetch(
+      `${basePrefix}/.within.website/x/cmd/anubis/static/locales/manifest.json`,
+    );
+    if (response.ok) {
+      const manifest = await response.json();
+      return manifest.supportedLanguages || ["en"];
+    }
+  } catch (error) {
+    console.warn(
+      "Failed to load language manifest, falling back to default languages",
+    );
+  }
+
+  // Fallback to default languages if manifest loading fails
+  return ["en"];
+};
+
+// Use the browser language from the HTML lang attribute which is set by the server settings or request headers
+const getBrowserLanguage = async () => document.documentElement.lang;
+
+// Load translations from JSON files
+const loadTranslations = async (lang: string) => {
+  const basePrefix = j("anubis_base_prefix");
+  if (basePrefix === null) {
+    return;
+  }
+
+  try {
+    const response = await fetch(
+      `${basePrefix}/.within.website/x/cmd/anubis/static/locales/${lang}.json`,
+    );
+    return await response.json();
+  } catch (error) {
+    console.warn(
+      `Failed to load translations for ${lang}, falling back to English`,
+    );
+    if (lang !== "en") {
+      return await loadTranslations("en");
+    }
+    throw error;
+  }
+};
+
+const getRedirectUrl = () => {
+  const publicUrl = j("anubis_public_url");
+  if (publicUrl === null) {
+    return;
+  }
+  if (publicUrl && window.location.href.startsWith(publicUrl)) {
+    const urlParams = new URLSearchParams(window.location.search);
+    return urlParams.get("redir");
+  }
+  return window.location.href;
+};
+
+let translations: Record<string, string> = {};
+let currentLang;
+
+// Initialize translations
+const initTranslations = async () => {
+  currentLang = await getBrowserLanguage();
+  translations = await loadTranslations(currentLang);
+};
+
+const t = (key: string): string =>
+  translations[`js_${key}`] || translations[key] || key;
+
+interface AppProps {
+  anubisVersion: string;
+  basePrefix: string;
+}
+
+function App({ anubisVersion, basePrefix }: AppProps) {
+  const [phase, setPhase] = useState<
+    "loading" | "computing" | "reading" | "error"
+  >("loading");
+
+  // Error info
+  const [errorTitle, setErrorTitle] = useState("");
+  const [errorMessage, setErrorMessage] = useState("");
+  const [errorImage, setErrorImage] = useState("");
+
+  // Computing info
+  const [difficulty, setDifficulty] = useState(0);
+  const [speed, setSpeed] = useState("0kH/s");
+  const [progress, setProgress] = useState(0);
+  const [showApology, setShowApology] = useState(false);
+
+  // Reading redirect callback
+  const redirectFn = useRef<(() => void) | null>(null);
+  const detailsRead = useRef(false);
+
+  // Sync <h1 id="title"> when entering error state (it's outside the Preact tree)
+  useEffect(() => {
+    if (phase === "error") {
+      const titleEl = document.getElementById("title");
+      if (titleEl) {
+        titleEl.textContent = errorTitle;
+      }
+    }
+  }, [phase, errorTitle]);
+
+  // Main initialization
+  useEffect(() => {
+    const details = document.querySelector("details");
+    if (details) {
+      details.addEventListener("toggle", () => {
+        if (details.open) {
+          detailsRead.current = true;
+        }
+      });
+    }
+
+    const showError = (title: string, message: string, imageSrc: string) => {
+      setErrorTitle(title);
+      setErrorMessage(message);
+      setErrorImage(imageSrc);
+      setPhase("error");
+    };
+
+    const dependencies = [
+      {
+        name: "Web Workers",
+        msg: t("web_workers_error"),
+        value: window.Worker,
+      },
+      {
+        name: "Cookies",
+        msg: t("cookies_error"),
+        value: navigator.cookieEnabled,
+      },
+    ];
+
+    for (const { value, name, msg } of dependencies) {
+      if (!value) {
+        showError(
+          `${t("missing_feature")} ${name}`,
+          msg,
+          imageURL("reject", anubisVersion, basePrefix),
+        );
+        return;
+      }
+    }
+
+    const { challenge, rules } = j("anubis_challenge");
+
+    const process = algorithms[rules.algorithm];
+    if (!process) {
+      showError(
+        t("challenge_error"),
+        t("challenge_error_msg"),
+        imageURL("reject", anubisVersion, basePrefix),
+      );
+      return;
+    }
+
+    setPhase("computing");
+    setDifficulty(rules.difficulty);
+
+    const likelihood = Math.pow(16, -rules.difficulty);
+    let lastSpeedUpdate = 0;
+    let apologyShown = false;
+    const t0 = Date.now();
+
+    process(
+      { basePrefix, version: anubisVersion },
+      challenge.randomData,
+      rules.difficulty,
+      null,
+      (iters: number) => {
+        const delta = Date.now() - t0;
+        // only update the speed every second so it's less visually distracting
+        if (delta - lastSpeedUpdate > 1000) {
+          lastSpeedUpdate = delta;
+          setSpeed(`${(iters / delta).toFixed(3)}kH/s`);
+        }
+        // the probability of still being on the page is (1 - likelihood) ^ iters.
+        // by definition, half of the time the progress bar only gets to half, so
+        // apply a polynomial ease-out function to move faster in the beginning
+        // and then slow down as things get increasingly unlikely. quadratic felt
+        // the best in testing, but this may need adjustment in the future.
+
+        const probability = Math.pow(1 - likelihood, iters);
+        const distance = (1 - Math.pow(probability, 2)) * 100;
+        setProgress(distance);
+
+        if (probability < 0.1 && !apologyShown) {
+          apologyShown = true;
+          setShowApology(true);
+        }
+      },
+    )
+      .then((result: any) => {
+        const t1 = Date.now();
+        const { hash, nonce } = result;
+        console.log({ hash, nonce });
+
+        const doRedirect = () => {
+          const redir = getRedirectUrl();
+          window.location.replace(
+            u(`${basePrefix}/.within.website/x/cmd/anubis/api/pass-challenge`, {
+              id: challenge.id,
+              response: hash,
+              nonce,
+              redir,
+              elapsedTime: t1 - t0,
+            }),
+          );
+        };
+
+        if (detailsRead.current) {
+          redirectFn.current = doRedirect;
+          setPhase("reading");
+          setTimeout(doRedirect, 30000);
+        } else {
+          doRedirect();
+        }
+      })
+      .catch((err: Error) => {
+        showError(
+          t("calculation_error"),
+          `${t("calculation_error_msg")} ${err.message}`,
+          imageURL("reject", anubisVersion, basePrefix),
+        );
+      });
+  }, []);
+
+  const pensiveURL = imageURL("pensive", anubisVersion, basePrefix);
+
+  if (phase === "error") {
+    return (
+      <>
+        <img style="width:100%;max-width:256px;" src={errorImage} />
+        <p id="status">{errorMessage}</p>
+      </>
+    );
+  }
+
+  if (phase === "loading") {
+    return (
+      <>
+        <img style="width:100%;max-width:256px;" src={pensiveURL} />
+        <p id="status">{t("calculating")}</p>
+      </>
+    );
+  }
+
+  // computing or reading
+  return (
+    <>
+      <img style="width:100%;max-width:256px;" src={pensiveURL} />
+      <p id="status">
+        {`${t("calculating_difficulty")} ${difficulty}, `}
+        {`${t("speed")} ${speed}`}
+        {showApology && (
+          <>
+            <br />
+            {t("verification_longer")}
+          </>
+        )}
+      </p>
+      {phase === "reading" ? (
+        <div
+          id="progress"
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            height: "2rem",
+            borderRadius: "1rem",
+            cursor: "pointer",
+            background: "#b16286",
+            color: "white",
+            fontWeight: "bold",
+            outline: "4px solid #b16286",
+            outlineOffset: "2px",
+            width: "min(20rem, 90%)",
+            margin: "1rem auto 2rem",
+          }}
+          onClick={() => redirectFn.current?.()}
+        >
+          {t("finished_reading")}
+        </div>
+      ) : (
+        <div
+          id="progress"
+          role="progressbar"
+          aria-labelledby="status"
+          aria-valuenow={progress}
+          style={{ display: "inline-block" }}
+        >
+          <div class="bar-inner" style={{ width: `${progress}%` }}></div>
+        </div>
+      )}
+    </>
+  );
+}
+
+// Bootstrap: init translations, then mount Preact
+(async () => {
+  await initTranslations();
+  const anubisVersion = j("anubis_version");
+  const basePrefix = j("anubis_base_prefix");
+  const root = document.getElementById("app");
+  if (root) {
+    render(<App anubisVersion={anubisVersion} basePrefix={basePrefix} />, root);
+  }
+})();

web/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact",
+    "noEmit": true,
+    "skipLibCheck": true,
+    "strict": false
+  },
+  "include": ["js/**/*.ts", "js/**/*.tsx"]
+}