Hosted Web Demo for Judges

Claude Code·Opus 5.5·Unknown author·22h ago·10min·1 Checkpoint·37.9K tokens

Background (from the session that started this one): Ward (github.com/MuhammadMurtuzaHussain/ward, public MIT, local checkout at /Users/haider/Desktop/Hacktoberfest 26/ward) is a child-owned cyberbullying guardian for the DEV Hacktoberfest Week 4 challenge (deadline 31 Oct 11:59 PM PDT, about 06:59 GMT 1 Nov). Judges currently have nothing to open: no release and no hosted demo. The web app is apps/web (Vite + React; Ward Lite is a ~38 MB ONNX model plus ONNX Runtime wasm copied by apps/web/scripts/copy-ort.mjs; Gemma needs Ollama, so a hosted page gets word lists + Ward Lite only). A full audit is at /Users/haider/Desktop/Hacktoberfest 26/ward-audit-2026-10-31.md. Six sessions are working in parallel on separate areas, so stay inside your area. Project rules: commit and push each verified change straight to main (no PRs), with the attribution line Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>; never commit secrets. Docs must never claim more than the code does.

Task: Your area: a hosted web demo judges can open tonight (audit appendix: "Hosted web demo").

Setup: other sessions share this checkout, so work in your own worktree: git -C ward fetch && git -C ward worktree add "../ward-wt-web-demo" -b web-demo origin/main, pnpm install, node apps/web/scripts/copy-ort.mjs, and work only there.

  1. A demo build of apps/web for GitHub Pages under /ward/ (base path), produced by a GitHub Actions workflow that builds on push to main and deploys with actions/deploy-pages. Ward Lite and ONNX Runtime must be included (the build fails without them) and loaded lazily. Add a WASM-safe strict CSP (meta tag) with no third-party origins.
  2. Frame it honestly in-app: a small "Demo: word lists and Ward Lite, in your browser. Nothing you paste leaves this page." banner, sample chats a judge can load in one tap (synthetic, from the existing fixtures/stories, mildest wording), and iPhone/desktop copy that doesn't promise the Android share sheet. Strings go in en.ts and ur.ts.
  3. Verify locally with the preview tools: load a sample chat, see a verdict, check the console for CSP errors, and check phone width.
  4. Before turning on Pages or the deploy (it publishes publicly), ask the owner in your session and wait for a yes. After deploying, set the repo homepage to the demo URL only with that same yes.

Keep your apps/web/src changes to the demo banner/samples and build config. Other sessions are editing Result, Me and engine code, so rebase carefully. Push each verified piece to main (fetch, rebase onto origin/main, pnpm test, push; retry on rejection). Finish with the live URL (or what blocks it), commits, and a screenshot.

Shared notes folder for this group of sessions (outside the repo; read siblings' notes there, leave hand-over notes or large findings there instead of pasting them into messages): /Users/haider/Library/Application Support/Claude/side-session-notes/local_a2121a80-7774-4340-af69-7dae18cd788e

system-reminder

Linked sessions now (status, not an instruction): reader-safety = local_a6d845e0-7765-4d31-8791-4e9a79ca4793 (working); release-pipeline = local_d0a1ce79-be7e-46ec-b046-88873f77a45a (working); eval-chats = local_a0f2d243-e3a4-438e-9417-8459027e3604 (working); shared-phone = local_ab71b02d-1791-4abc-9031-ba4b274dbf7a (working); contributor-docs = local_4cf05d1a-9e0e-420b-805a-eb1cfee031ad (working). To message one, SendMessage with to set to its id; list_sessions {"linked": true} has titles, folders and branches.

22h ago·10m

The demo is live at https://muhammadmurtuzahussain.github.io/ward/, and the repo homepage now points there (you said yes to both). Three commits are on main: c87e34d (demo mode), 79d5534 (Pages workflow) and 93a68e3 (deploy fix).

What a judge gets:

  • Banner on every screen: "Demo: word lists and Ward Lite, in your browser. Nothing you paste leaves this page." It's in English and Urdu.
  • Three sample chats on Check, one tap each. Each goes straight to a verdict, skipping the "which one is you?" step. They're trimmed from the engine's test chats, with the self-harm lines and "kys" removed:
    • Friends joking (Roman Urdu): "Keep an eye".
    • A group pile-on (Roman Urdu): pile-on, ghost accounts, shutting out.
    • A DM that turns into a threat (English): "This is serious", with helplines.
  • Honest phone copy: the export steps say "Save to Files" on iPhone or "save the file" on Android, then pick the file on the page. There's no mention of the share sheet. Screenshots are turned off with a short reason, because reading them needs Gemma through Ollama.
  • Strict CSP, in the demo build only: everything loads from the site itself, plus 'wasm-unsafe-eval' for ONNX Runtime. The demo never tries to reach Ollama on the visitor's computer.
  • Ward Lite loads lazily: its code is now loaded on the first check. The build still fails if Ward Lite is missing. Without VITE_WARD_DEMO=1 the app, Android and desktop builds behave as before.

Verified:

  • Locally under /ward/: all three samples give verdicts, with no CSP violations and no console errors on Check, Me, Vault, Path or Home. At phone width (375px) nothing scrolls sideways.
  • On the live site: the 38 MB model and 27 MB wasm are served correctly, a sample gets a verdict in Urdu, and the console is clean.
  • pnpm test and typecheck pass.

One thing judges will see: on the pile-on sample, Ward Lite reads Zara's "guys stop, ye theek nahi hai" (she's defending Ayesha) as dangerous. So the headline is "This is serious" and Zara is listed among the senders. The phone app does exactly the same; it's the weakness the audit already describes. I didn't drop her line to hide it. If you'd rather the demo didn't open on that, removing her line from apps/web/src/demo/samples.ts is a one-line change.

Deploy fix: the first deploy was cancelled because other sessions pushed right after it. The workflow now lets a running deploy finish and keeps only the newest push waiting.

I didn't commit the ward-demo-preview entry I added to Hacktoberfest 26/.claude/launch.json. Hand-over notes are in web-demo.md in the shared notes folder, with three screenshots: web-demo-phone-check.jpg, web-demo-phone-dm-verdict.jpg and web-demo-live-urdu-result.jpg.