feat(web): port PoW challenge page from vanilla JS to Preact by Xe · Pull Request #1522 · TecharoHQ/anubis

Xe · 2026-03-19T13:45:18Z

Closes: #1149

This is an experimental use of Claude Opus 4.6 via Claude Code to do a fairly nontrivial transformation in the Anubis project. Fine-combed review is welcome and encouraged. The rest of this PR body is generated by Claude and contains the plan that it generated when doing the big rewrite.

Civil comments in the thread are welcome. Uncivil comments will be deleted. Please take your debates about the tools being used to another forum. This use of Claude Opus is clearly disclosed in both the Assisted-by footer and by me stating that I used Claude Opus to do this work while recovering from major surgery.

I am not paying Anthropic for this use of Claude Opus. They gave me free access with their open source program. I was surprised that I got in it, but it's been a neat tool to use regardless.

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
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

Assisted-by: Claude Opus 4.6 via Claude Code

Checklist:

Added a description of the changes to the [Unreleased] section of docs/docs/CHANGELOG.md
Added test cases to the relevant parts of the codebase
Ran integration tests npm run test:integration (unsupported on Windows, please use WSL)
All of my commits have verified signatures

Copilot

Pull request overview

Ports the Proof-of-Work (PoW) challenge page frontend from imperative DOM manipulation to a declarative Preact implementation, aligning it with the project’s existing Preact usage for other challenge UIs.

Changes:

Replaced web/js/main.ts with a Preact-based web/js/main.tsx state-machine UI mounted on a new #app root.
Updated the web asset build pipeline to bundle .tsx via esbuild JSX automatic runtime, and added an IDE-only web/tsconfig.json.
Updated the PoW templ markup to provide a Preact mount point + fallback content; added challenge method to the “new challenge issued” log line; documented the change in the changelog.

Reviewed changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
web/tsconfig.json	Adds an editor/typechecking config for TS/TSX with Preact JSX types.
web/js/main.tsx	New Preact implementation of the PoW UI and worker orchestration glue.
web/js/main.ts	Removes the prior vanilla/imperative implementation.
web/build.sh	Bundles `.tsx` inputs and passes JSX flags to esbuild for TSX builds.
lib/challenge/proofofwork/proofofwork.templ	Introduces `#app` mount point with server-rendered fallback and removes standalone progress DOM.
lib/challenge/proofofwork/proofofwork_templ.go	Regenerated templ output reflecting the updated `.templ` markup.
lib/anubis.go	Adds the challenge method to the “new challenge issued” structured log event.
docs/docs/CHANGELOG.md	Notes the PoW Preact rewrite in the Unreleased section.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

web/js/main.tsx

lib/challenge/proofofwork/proofofwork.templ

web/js/main.tsx

lib/localization/locales/lt.json

web/js/main.tsx

SlyEcho · 2026-03-19T21:39:54Z

web/js/main.tsx

+  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>
+      </>
+    );
+  }


This seems kind of redundant. Probably could use the same <img> and <p id=status> tags that are inside the part // computing or reading below.

SlyEcho

Seems to be working.

Copilot

Pull request overview

Copilot reviewed 33 out of 33 changed files in this pull request and generated 3 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

web/js/main.tsx

SlyEcho · 2026-03-23T22:37:38Z

lib/localization/locales/lt.json

-  "missing_required_forwarded_headers": "Trūksta privalomų X-Forwarded-* antraščių"
-}
+  "js_challenge_data_missing": "Trūksta iššūkio duomenų. Prašome perkrauti puslapį."
+}


\n please 🥺

SlyEcho · 2026-03-23T22:41:52Z

web/js/algorithms/types.ts

+  data: string;
+  difficulty: number;
+  nonce: number;
+}


return the carriage or git gets mad

SlyEcho · 2026-03-23T22:46:10Z

lib/challenge/proofofwork/proofofwork.templ

-		<script async type="module" src={ anubis.BasePrefix + "/.within.website/x/cmd/anubis/static/js/main.mjs?cacheBuster=" + anubis.Version }></script>
-		<div id="progress" role="progressbar" aria-labelledby="status">
-			<div class="bar-inner"></div>
+		<img style="display:none;" src={ anubis.BasePrefix + "/.within.website/x/cmd/anubis/static/img/happy.webp?cacheBuster=" + anubis.Version }/>


Claude thinks happy.webp is vestigial from #745 and loaded without use. Same in the other templates.

But it's not part of this PR.

SlyEcho · 2026-03-23T22:49:27Z

web/tsconfig.json

+    "jsxImportSource": "preact",
+    "noEmit": true,
+    "skipLibCheck": true,
+    "strict": false


Maybe strict mode could find some issues with null checks and so on?

SlyEcho

I think it's fine. Some minor nits

SlyEcho · 2026-03-23T22:58:35Z

web/js/main.tsx

+  >("loading");
+
+  // Error info
+  const [errorTitle, setErrorTitle] = useState("");


This is not used any longer.

SlyEcho · 2026-03-23T22:59:01Z

web/js/main.tsx

+    }
+
+    const showError = (title: string, message: string, imageSrc: string) => {
+      setErrorTitle(title);


This is also not needed

SlyEcho

I'd remove the errorTitle state.

SlyEcho · 2026-03-23T23:06:27Z

web/js/main.tsx

+        // 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);
+        }


Maybe this could be moved inside the if above, so the progress and apology also updates only once-per-second?

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. 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. 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. - 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>

Translate the new challenge data missing error message across all 25 supported locales. Assisted-by: Claude Opus 4.6 via Claude Code Signed-off-by: Xe Iaso <me@xeiaso.net>

- Remove duplicate style attribute on happy image preload in templ - Remove unused getAvailableLanguages function from main.tsx - Add type annotation to currentLang variable - Add null check for missing challenge data with localized error Assisted-by: Claude Opus 4.6 via Claude Code Signed-off-by: Xe Iaso <me@xeiaso.net>

- Guard j() helper against null/empty textContent before JSON.parse - Use <button> instead of clickable <div> for "finished reading" control to support keyboard navigation and screen readers - Make currentLang a local const inside initTranslations since it is not read elsewhere Assisted-by: Claude Opus 4.6 via Claude Code Signed-off-by: Xe Iaso <me@xeiaso.net>

Signed-off-by: Xe Iaso <me@xeiaso.net>

… function Signed-off-by: Xe Iaso <me@xeiaso.net>

Signed-off-by: Xe Iaso <me@xeiaso.net>

Replace <br/> tags with em dashes and strip all other HTML tags (keeping their text content) across all 25 locale files. Assisted-by: claude-sonnet-4-6 via Claude Code Signed-off-by: Xe Iaso <me@xeiaso.net>

Use literal spaced em dash ( — ) consistent with other locale files instead of unspaced \u2014 escape sequence. Assisted-by: claude-sonnet-4-6 via Claude Code Signed-off-by: Xe Iaso <me@xeiaso.net>

The process() function in fast.ts declared Promise<string> but actually resolved with the full worker message object { hash, data, difficulty, nonce }. main.tsx papered over this with `any`. Introduce a shared ChallengeResult type so the contract between workers, algorithms, and the main component is enforced by the type checker. Assisted-by: Claude Opus 4.6 via Claude Code Signed-off-by: Xe Iaso <me@xeiaso.net>

The useEffect registered a toggle listener on the <details> element but never removed it, which could leak handlers on remounts or in tests. Extract the handler to a named function and return a cleanup that calls removeEventListener. Assisted-by: Claude Opus 4.6 via Claude Code Signed-off-by: Xe Iaso <me@xeiaso.net>

Signed-off-by: Xe Iaso <me@xeiaso.net>

Xe self-assigned this Mar 19, 2026

Xe requested a review from Copilot March 19, 2026 19:26

Copilot started reviewing on behalf of Xe March 19, 2026 19:26 View session

Copilot AI reviewed Mar 19, 2026

View reviewed changes

SlyEcho reviewed Mar 19, 2026

View reviewed changes

lib/localization/locales/lt.json Outdated Show resolved Hide resolved

SlyEcho reviewed Mar 19, 2026

View reviewed changes

web/js/main.tsx Outdated Show resolved Hide resolved

SlyEcho reviewed Mar 19, 2026

View reviewed changes

web/js/main.tsx Outdated Show resolved Hide resolved

SlyEcho reviewed Mar 19, 2026

View reviewed changes

SlyEcho approved these changes Mar 19, 2026

View reviewed changes

Xe requested review from SlyEcho and Copilot March 20, 2026 10:52

Copilot started reviewing on behalf of Xe March 20, 2026 10:52 View session

Copilot AI reviewed Mar 20, 2026

View reviewed changes

web/js/main.tsx Show resolved Hide resolved

web/js/main.tsx Outdated Show resolved Hide resolved

web/js/main.tsx Show resolved Hide resolved

SlyEcho reviewed Mar 23, 2026

View reviewed changes

SlyEcho approved these changes Mar 23, 2026

View reviewed changes

SlyEcho reviewed Mar 23, 2026

View reviewed changes

SlyEcho suggested changes Mar 23, 2026

View reviewed changes

SlyEcho reviewed Mar 23, 2026

View reviewed changes

Xe added 8 commits March 24, 2026 19:20

feat(i18n): add translations for js_challenge_data_missing

4969e36

Translate the new challenge data missing error message across all 25 supported locales. Assisted-by: Claude Opus 4.6 via Claude Code Signed-off-by: Xe Iaso <me@xeiaso.net>

fix(locales/lt): revert change claude made

2ac8928

Signed-off-by: Xe Iaso <me@xeiaso.net>

fix(js/main): move title updating from an effect to the error handler…

b9b7a40

… function Signed-off-by: Xe Iaso <me@xeiaso.net>

fix(js/main): stop logging solution details when solved

b5342b6

Signed-off-by: Xe Iaso <me@xeiaso.net>

fix(localization): remove HTML tags from all translated strings

9195b08

Replace <br/> tags with em dashes and strip all other HTML tags (keeping their text content) across all 25 locale files. Assisted-by: claude-sonnet-4-6 via Claude Code Signed-off-by: Xe Iaso <me@xeiaso.net>

Xe added 4 commits March 24, 2026 19:22

fix(localization): normalize em dash formatting in batch A locales

e010d60

Use literal spaced em dash ( — ) consistent with other locale files instead of unspaced \u2014 escape sequence. Assisted-by: claude-sonnet-4-6 via Claude Code Signed-off-by: Xe Iaso <me@xeiaso.net>

fix(js/main): remove dead useState

cada118

Signed-off-by: Xe Iaso <me@xeiaso.net>

Xe force-pushed the Xe/feat-main-challenge-uses-preact branch from a8f9efc to cada118 Compare March 24, 2026 19:23

Uh oh!

Conversation

Xe commented Mar 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Approach

What changed

What stayed the same

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

SlyEcho left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

SlyEcho left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

SlyEcho left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Xe commented Mar 19, 2026 •

edited

Loading