Ray-Ban Display Stock Watchlist

Two separate webapps sharing one backend:

• / (this folder) — phone/browser edit page. Add/remove tickers.
• /glasses/ — the actual Meta Ray-Ban Display webapp. D-pad navigable, built against the real meta-wearables-webapp toolkit (cloned and inspected directly — see "Toolkit compliance" below). Full parity with the phone page: add, remove, mute, view catalyst headlines — all D-pad/focus navigable, using a standard <input> for the Add Ticker screen (see "Text entry on glasses" below) rather than a read-only view.

Both talk to the same /api/watchlist, /api/quote, /api/news backend, so edits made on the phone page show up in the glasses app immediately.

There is no window.storage bridge or similar SDK-provided sync mechanism — that was an assumption from early mockups made before the real toolkit was available. The real toolkit gives each surface only plain localStorage, which can't sync across two separate browser contexts (a phone browser and the glasses' own WebView) on its own. /api/watchlist, backed by Upstash Redis, is what actually makes the two surfaces share state.

Run it locally

python devserver.py 8743

Then open http://localhost:8743 (edit page) and http://localhost:8743/glasses/ (the D-pad app — use arrow keys + Enter/Escape to navigate, same as the toolkit's own dev-testing instructions).

Do not use plain python -m http.server — it can't serve /api/*, so both pages will fall back to defaults/mock data.

To test the real watchlist sync locally (optional): copy .env.local.example to .env.local and fill in KV_REST_API_URL/KV_REST_API_TOKEN from your Vercel project's Environment Variables page.

Deployment note (2026-09-16)

ray-ban-watchlist.vercel.app (the Vercel project) is Git-connected to christopherwoon-dev/ray-ban-watchlist (a private repo under a second GitHub account), not christopherwoon/ray-ban-watchlist. Both repos exist and both need pushes if you want history to match — but only pushes to the christopherwoon-dev one actually trigger a deploy. This cost real time to track down (multiple fixes were pushed to the wrong repo and never went live), so worth knowing before pushing again.

/api/watchlist is now api/watchlist.js (Node), not api/watchlist.py (Python) — the Python version consistently threw <urlopen error [Errno 16] Device or resource busy> (and the same error persisted through several rewrites: http.client instead of urllib, then forcing IPv4). Root cause: the configured KV_REST_API_URL host doesn't resolve in public DNS at all (checked against Google's and Cloudflare's resolvers), even though upstash.io itself does — that's the signature of a private, Vercel-internal storage hostname only reachable from inside Vercel's own network fabric, and that path is far better supported from Vercel's Node.js runtime than from Python. The Node rewrite needs no dependencies (just built-in fetch). api/_shared.py's get_watchlist/ set_watchlist/_kv_request are dead code for the deployed app now but still used by devserver.py for local dev (plain local Python networking doesn't hit this sandbox-specific issue), so left in place.

glasses/index.html inlines its CSS directly in a <style> tag rather than linking a separate glasses/styles.css (deleted 2026-09-16) — on-device testing showed the glasses WebView occasionally failing to load a linked stylesheet while index.html and the JS files loaded fine, which leaves every .screen visible at once with default browser styling (tiny fonts, default <input>/<button> borders) since the .hidden/.screen rules that hide and position screens never apply — this reads as "wrong screen launches" and "can't navigate back," not obviously a missing-stylesheet issue. Inlining removes the second network request entirely. If you edit styles, edit the <style> block in glasses/index.html directly — there's no longer a separate CSS file for glasses to keep in sync.

Same fix applied to the JS (2026-09-16): glasses/index.html now inlines storage.js, scoring.js, data.js, and the glasses app.js into one <script> block instead of four separate <script src> tags. Reported symptom on-device: the ticker list stayed completely empty (not even the "Watchlist is empty" message, which only renders from JS) and every button press, including "+ Add Ticker", did nothing. That combination means no JS ran at all — app.js is the last of the four script requests, and losing it (or a file it depends on) leaves only the static HTML shell, since setupEvents() (click handling) and renderHome() (list rendering) both live inside it. Root cause presumed to be the same class of intermittent script-load failure already confirmed for the CSS case above. If you edit storage.js, scoring.js, or data.js (shared with the phone page), copy the change into the <script> block in glasses/index.html too — there's no longer a build step that would do this automatically. glasses/app.js itself is deleted (2026-09-16) rather than kept alongside as an unused duplicate — same reasoning as glasses/styles.css above, it had no other consumer, so a second copy could only drift.

This is the beginning of the README. Read the rest at the original. Read the full README ↗