A live dashboard for visualizing the Remote Settings collections that power Firefox's on-device ML inference (toolkit/components/ml) and the Firefox Smart Window (browser/components/aiwindow).
| Page | Collection | What it shows |
|---|---|---|
| Inference Options | ml-inference-options |
Which ML model is deployed for each Firefox feature |
| ONNX Runtime Binaries | ml-onnx-runtime |
WebAssembly runtime files (ONNX and wllama) |
| Model Allow/Deny List | ml-model-allow-deny-list |
URL prefixes permitted when loading models |
| Words Block List | ml-inference-words-block-list |
N-gram block lists for content filtering |
| AI Window Prompts | ai-window-prompts |
System prompts for each Smart Window feature and model |
This project is modeled directly after the mozilla/translations site — specifically its Firefox Models dashboard, which visualizes the translations-models Remote Settings collection in the same style. The shared utilities (utils.mjs) and base stylesheet (style.css) are taken directly from that project. The noodles decorations and overall visual language are also from there.
- Vanilla JS (ES modules) — no framework, no bundler, no build step. Files are served directly to the browser.
- JSDoc + TypeScript — type checking without compilation.
// @ts-checkat the top of each.mjsfile, interfaces defined in@types/records.d.ts. Runnpm run tsto check. - Remote Settings API — all data is fetched live from
firefox.settings.services.mozilla.com. CORS is open so pages work when opened directly from disk (file://).
No build step. The site is a collection of plain .html + .mjs + .css files. There is nothing to compile or bundle. This matches how the translations site works and keeps the project trivially easy to contribute to and deploy.
One page per collection. An earlier iteration put all collections on a single scrolling page. Splitting them out allows each page to include meaningful context about what the collection does, how Firefox uses it, and links into the Firefox source via Searchfox.
TypeScript as a linter, not a compiler. Types live in @types/records.d.ts as plain .d.ts interfaces and are referenced via JSDoc @import. This gives full IDE autocompletion and npm run ts catches type errors, with zero impact on the runtime files.
Preview bucket toggle. Each page has a checkbox to switch from the main bucket to main-preview, matching the pattern used in the translations dashboard. The state is stored in the URL (?preview=true) so it's shareable and survives page reloads.
Data exposed as globals. Each page calls exposeAsGlobal("records", records) so the raw Remote Settings data is accessible in the browser console for ad-hoc inspection.
The source code for this project was vibe coded with Claude Code.
No install required to view the site — open any index.html directly in a browser.
To run the type checker:
npm install
npm run ts