tracker

47.2 KB

1. # tracker.worldapi.org
3. The new tracker: a Hybriel app that will track the TV shows (and later movies) the creator
4. follows and watches. **`CONCEPT.md` (the creator's) is the source of truth** — read it first;
5. nothing is built that it does not describe. Built step by step, one ticket per step
6. (tracker.worldapi.org#1, #2, …).
8. **Built so far — step 1 (ticket #1)**: the shell. The header carries the ident login (an
9. identity selector, like calendar/gitoria) and sign-out; the homepage itself stays empty. No
10. design carried over from the old app.
12. **Step 2 (ticket #2)**: the old tracker's MongoDB export is now in `storage/mpackdb/` (new
13. mpackdb ids, every reference re-pointed) — see "Data" and `STATUS.md`. Nothing is shown in the
14. UI yet; the homepage still renders empty. That is a later step, from the creator.
16. **Step 4 (ticket #4)**: the show page, `/shows/:slug` (`components/show.hl`) — poster, title,
17. genre pills, plot, cast (as described in "What it does (step 4)" below), every season with its
18. episodes, and the watch check (episode and season, season bulk-toggles its episodes).
20. **Step 5 (ticket #5)**: `/unwatched` (`components/unwatched.hl`) — every already-released,
21. unwatched episode of a show the signed-in user follows, newest release first (see "What it does
22. (step 5)" below).
24. **Step 6 (ticket #6)**: `/schedule` (`components/schedule.hl`) — every not-yet-released episode
25. of a show the signed-in user follows, soonest first, no check icons (see "What it does (step 6)"
26. below).
28. **Step 7 (ticket #7)**: `/my/shows` (`components/myshows.hl`) — every show the signed-in user
29. follows, newest follow first: small poster, title, last watched episode (`S08E35`) (see "What it
30. does (step 7)" below). The homepage itself is still empty.
32. **Step 8 (ticket #8)**: the personal lists all live under `/my/`: `/my/shows`, `/my/unwatched`,
33. `/my/schedule` (old `/unwatched`, `/schedule` answer 301). Episodes everywhere as `S01E01`, show
34. titles in lists with the year (`Doctor Who (2005)`), "1 episode" singular, and every `/my/` page
35. under 1 s full load on the real data (see "What it does (step 8)" below).
37. **Step 9 (ticket #9)**: the TMDB sync — every show someone follows gets its new seasons/episodes
38. (existing ones updated: title, summary, release) and its poster from TMDB, once a day inside the app
39. (04:00 UTC) and on demand with `tools/sync-tmdb.hl` (see "What it does (step 9)" below).
41. **Step 10 (ticket #10)**: an installable app (PWA) with its own icon — a TV with a check mark, tracker green
42. on dark; also the favicon. The shell (`/`) opens without network and says it is offline (see "What it does
43. (step 10)" below).
45. **Step 12 (ticket #12)**: the show page's header has small link icons to the show on TMDB, IMDb, TheTVDB and
46. TVmaze (a movie: TMDB + IMDb), only for the ids the show has, each in a new tab; the TMDB sync fills missing
47. ids (TMDB `external_ids`, TVmaze lookup) and never overwrites one (see "What it does (step 12)" below).
49. **Step 13 (ticket #13)**: the homepage has content — signed in, four big icons (Unwatched, Schedule, Shows,
50. Movies → the `/my/` pages); for everyone a short text about the site, the 10 latest released movies and the 10
51. series with the newest released episode (headings link to `/movies` and `/shows`: everything, 24 per page). Plus
52. `/my/movies` (the movies you follow); `/my/shows` is series only now (see "What it does (step 13)" below).
54. Written in **Hybriel** on **hl:web**, same stack and conventions as `ident.worldapi.org`
55. (vendored plugins/binary copied from there, see "Vendored Hybriel").
57. ## Run (dev, Loreana)
59. ```bash
60. cd /media/STORAGE/projects/tracker.worldapi.org
61. TRACKER_PORT=8700 TRACKER_SYNC=0 setsid nohup ./bin/hybriel project.hl > server.log 2>&1 < /dev/null & echo $! > server.pid
62. # TRACKER_SYNC=0: the runtime loads .env (real TMDB token) by itself — without it a dev server syncs from TMDB at 04:00 UTC
63. # stop: kill $(cat server.pid)
64. ```
66. * Config (env; the real environment outranks nothing here — there is no `.env` reader in
67. project.hl, unlike ident's SMTP settings — set these in the shell or `docker-compose.yml`):
69. | Variable | Default | |
70. |---|---|---|
71. | `TRACKER_PORT` | 45008 | |
72. | `TRACKER_URL` | `http://127.0.0.1:<port>` | this app's own origin — the ident login button's `return=` is built from it |
73. | `IDENT_URL` | `https://ident.worldapi.org` | |
74. | `TRACKER_KEY` / `TRACKER_SECRET` | `''` | this app's API key + secret, from ident's `/apps` (register once, origin = `TRACKER_URL`) — **not set yet on Byrodin**: the first deploy (architect) registers the app in the live ident and puts these in `.env` next to `docker-compose.yml`, exactly like ident's own `.env` holds its SMTP settings |
75. | `TRACKER_WATCH` | on | `0` = no dev watcher (the container) |
76. | `TRACKER_STORAGE` | `./storage/mpackdb` | the `usersTable` directory |
77. | `TRACKER_SESSIONS` | `./.sessions` (hl:web's own default) | this app's own session store |
78. | `HL_HOST` (or `HOST`) | 0.0.0.0 | interface to bind; `127.0.0.1` on Byrodin |
79. | `TMDB_READ_TOKEN` | — | TMDB v4 read token (in `.env`, never print it). Unset → the daily sync is off. **The runtime loads the `.env` beside `project.hl` by itself** (the real environment wins): every dev server on Loreana has the real token — start dev servers with `TRACKER_SYNC=0` |
80. | `TRACKER_SYNC` | on | `0` = no daily TMDB run inside the app |
81. | `TRACKER_SYNC_HOUR` | 4 | UTC hour of the daily run (hl:time has no time zones; the container is UTC) |
82. | `TMDB_BASE_URL` / `TMDB_IMAGE_URL` | `https://api.themoviedb.org/3` / `https://image.tmdb.org/t/p` | the gate points both at its fake TMDB |
83. | `TVMAZE_BASE_URL` | `https://api.tvmaze.com` | #12: the TVmaze id lookup; the gate points it at its fake (`<fake>/tvmaze`) |
85. Without `TRACKER_KEY`/`TRACKER_SECRET`, `/` still renders (signed out, the selector and "Log
86. in with ident" show in the header); a login attempt answers `'login is not set up on this
87. server (TRACKER_KEY / TRACKER_SECRET missing)'` instead of exchanging a code — so the app is
88. never a dead 500 while waiting for that one-time setup.
90. ## What it does (step 1)
92. * **Login, copied unchanged from calendar.worldapi.org** (rejected once for a centered
93. sign-in and no header selector — architect, 2026-09-27): ident only, no own passwords
94. (ident's login button flow, ident.worldapi.org README "How apps use ident"), the identity
95. selector (`<ident-selector>`, ident's `/selector.js`) sits in the header
96. (`components/main.hl`, `userBox`), a plain "Log in with ident" link beside it when signed
97. out. Choosing an identity in the selector fires `ident-login` (one-time code); `login.js`
98. (an external-component bridge, allowed per the creator: "login.js is correct, as thats for
99. externals in general") hands the code to a hidden input, whose `change` calls the server
100. face `trackerLogin` (`users.hl` `exchangeCode`, `POST <ident>/api/exchange` — nothing else:
101. ident does not hand over a display name yet, ident#23 done / ident#11 on hold), which makes
102. or finds this app's own user record (`usersTable`, `storage/mpackdb/users.db`) and sets
103. `session.user = { id }`. `/login/callback` is the same exchange as a plain redirect (the
104. login button's return URL) for a client that has no socket yet. "Log out" in the header
105. calls `trackerLogOut`; ident's own login is untouched. This app's own session cookie is
106. `trackersid` (cookies ignore ports, an own name keeps it apart from ident's `identsid` on
107. the same dev host, hybriel#10/#17).
108. * **The empty homepage** (until #13 — see "What it does (step 13)") (`/`, `components/home.hl`): no content at all, signed in or out —
109. the header alone carries the login state. Nothing else.
110. * **One mpackdb table**: `storage/mpackdb/users.db` (`identity` → this app's user id — no
111. display name, no other per-user data yet). Step 2 (tracker.worldapi.org#2, open) brings the
112. old tracker's data across.
114. ## What it does (step 4)
116. `/shows/:slug` (`components/show.hl`, slug = the migrated `urlSegment`), read-only data from
117. `shows.hl`, per-user watch state from `watches.hl` (both reused as-is by `/unwatched` and
118. `/schedule`, tickets #5/#6 — "reuse, don't copy"):
120. * **Header**: poster on the left (`/posters/<name>`, `project.hl` `posterRoute` — served from
121. `storage/mpackdb/posters/`; the real poster files were never in the Mongo backup, see
122. `DECISIONS.md` "tracker concept" — a placeholder SVG shows until a later TMDB step brings
123. real ones back), title, genre pills (blue, link to `/genre/<slug>`) and the plot summary to
124. its right, the cast below as comma-separated red links to `/person/<slug>`.
125. * **Seasons**, latest first, the latest expanded and every other one collapsed to start; each
126. row: a round check icon (a disc with a check, drawn in SVG/CSS, no icon font), the season
127. title/number, its episode count. Its episodes (number + title, and their own check icon)
128. show once expanded (click the row to toggle).
129. * **The watch check** (signed-in only — signed out, no check icons show at all): clicking an
130. episode's check toggles that one watch; clicking a season's check toggles the season's own
131. watch AND every one of its episodes at once (`watches.hl` `setSeasonWatched`). Every click is
132. a server round trip (`emit server showToggleEpisode` / `showToggleSeason` / `showRows` for
133. collapse/expand) that rebuilds the row list server-side and reassigns it whole — a season has
134. at most a few dozen episodes, cheap. A **Hybriel gap found here** (filed as hybriel#115,
135. reported after this ticket's first attempt): a plain per-instance member function that calls
136. an hl:mpackdb-backed import comes back `null` when called from inside an `on server` face,
137. even though the very same call works as a member's own top-level initializer — the fix is to
138. declare such helpers `static` (the same shape calendar.worldapi.org's `soonOf` already uses).
139. `components/show.hl`'s own helpers (`buildRows`, `genreRowsOf`, …) are `static` for exactly
140. this reason.
141. * **Data fix**: `tools/relink-episode-seasons.hl`, a one-off idempotent tool that links every
142. episode whose `season` was still null in the migrated data (36,194 of them, ticket #2) to its
143. season by matching `(show, seasonNumber)` — never touches an episode whose season is already
144. set, never runs `update()` on the live table (hybriel#113; it rebuilds a fresh episodes table
145. and swaps the files over, the same rule `tools/migrate.hl` follows). Not run against the live
146. data yet — the architect runs it (stop the container first, `storage/mpackdb` is not shared
147. across processes, hybriel#21).
149. ## What it does (step 5)
151. `/unwatched` (`components/unwatched.hl`): every episode of a show the signed-in user follows
152. (`follows.hl`, new) that is already released (`release` ≤ today) and not yet watched
153. (`watches.hl` `isWatched`), newest release first. Creator: "/unwatched lists all unwatched
154. episodes of shows followed in release date desc order"; "check icon is a disc with a check in
155. it" — the SAME icon/class (`watches.hl` `watchClassOf`, moved there from `components/show.hl` so
156. both pages share one definition instead of each declaring its own) and the same
157. `setWatched`/`isWatched` watch logic as the show page (step 4), not copied.
159. * Each row: check icon, the show's title (linking to `/shows/:slug`), "Ep `<number>` ·
160. `<title>`", the release date.
161. * A row only ever shows an unwatched episode, so a click always marks it watched (never toggles
162. back, unlike the show page's checks) — the row leaves the list. Signed out: no rows, a
163. "Sign in to see the shows you follow." message instead.
164. * `follows.hl` (new): read-only per-user follow data (`followedShowIds`), kept apart from
165. `shows.hl`/`watches.hl` the same way, for `/schedule` (ticket #6) to reuse.
167. ## What it does (step 6)
169. `/schedule` (`components/schedule.hl`): every episode of a show the signed-in user follows
170. (`follows.hl`) that is NOT yet released (`release` > today), soonest first. Creator: "/schedule
171. has a similar list without check icons for the upcoming episodes of shows followed" — same row
172. layout as `/unwatched` (show title linking to `/shows/:slug`, "Ep `<number>` · `<title>`", the
173. release date), minus the check icon and minus any click handling: the page is read-only, so it
174. needs no `on server` face at all. Signed out: no rows, the same "Sign in to see the shows you
175. follow." message as `/unwatched`.
177. ## What it does (step 7)
179. `/my/shows` (`components/myshows.hl`): every show the signed-in user follows, ordered by the
180. follow's `at` (epoch ms), newest first. Creator: "trackers /my/shows that just ists the shows in
181. desc order i followed them, small poster, title, last episode like s08e35". Read-only, no `on
182. server` face (like `/schedule`).
184. * Each row: a small poster (2.5rem wide, the same `/posters/<name>` route + placeholder as the show
185. page; a show with no poster name at all gets `/posters/none`, i.e. the route's placeholder), the
186. title linking to `/shows/<slug>`, and the **last watched episode** as `SxxEyy` (zero-padded to
187. two digits) = the HIGHEST season/episode number the user has an episode watch for (architect's
188. reading, in the ticket) — not the most recently watched one; season watches alone don't count.
189. Nothing watched → no episode element at all.
190. * Signed out: no rows, the same "Sign in to see the shows you follow." as `/unwatched`.
191. * Cost: touches only the user's follows + episode watches (one `episodeById` fetch per watch),
192. never all episodes of a followed show — 128 rows in ~0.2 s on a copy of the real data (STATUS.md).
193. * Reuse: `follows.hl` `followsOfUser` (new — the whole follow record, `followedShowIds` now
194. builds on it), `shows.hl` `episodeById` (new, one line), `showById`, `posterName`, `watches.hl`
195. `watchesOfUser`.
197. ## What it does (step 8)
199. * Routes (`project.hl`): `/my/unwatched`, `/my/schedule`; the old `/unwatched`, `/schedule` are
200. function routes answering **301** to them (`movedTo`, no query carried — the pages take none).
201. * `shows.hl` (shared by all lists): `episodeCode(s, e)` → `S01E01` (`/my/shows`, `/my/unwatched`,
202. `/my/schedule` rows: `S01E02 · <title>`), `titleWithYear(show)` → `Doctor Who (2005)` (`year`,
203. else the first 4 chars of `release`, else the bare title — 197 shows have no `year`), `pad2`,
204. `posterUrlOf(show)`. The show page's own `h1` stays without the year (it is not a list).
205. * Show page: season count `1 episode` / `N episodes`.
206. * **Speed** (the creator's real data: 128 follows, 11,692 watches, 831 unwatched rows):
207. * `/unwatched` was ~15 s: `isWatched` scanned all 11,692 watches per episode. Now
208. `watches.hl` `watchedSet(rows)` builds `'<type>:<id>' → true` ONCE; `/my/unwatched` and the
209. show page's `buildRows` look up that map. Now ~0.6 s server render (the rest is fetching
210. every episode of 128 shows; the insertion sort is ~50 ms).
211. * `/my/shows` "25 s full load while data takes 0.2 s": (1) **hl:web serves one request at a
212. time** — measured: a `/my/shows` request made during a 15 s `/unwatched` render waited 13.7 s;
213. every poster request of every visitor queues the same way. Fixing `/unwatched` removes that.
214. (2) 128 rows = 128 different `/posters/<oldId>.jpg` URLs, all answering the same placeholder
215. (no poster files exist yet) — 128 requests per load. `posterUrlOf` now gives rows without a
216. poster FILE the one URL `/posters/none` → 1 request, cached.
217. * How it was measured: see STATUS.md ticket #8 ("Real-data check").
219. ## What it does (step 9)
221. `tmdbsync.hl` (`syncShow`), run by the app every day and by `tools/sync-tmdb.hl`:
223. * **Which shows**: every show ANY user follows (`follows.hl` `allFollowedShowIds`, 126 on the real data).
224. * **Per show** (1 + ⌈seasons/20⌉ requests + the poster if new): `GET /tv/<tmdbId>?append_to_response=external_ids`
225. (status, counts, overview, `poster_path`, the season list, since #12 the external ids), then `GET /tv/<tmdbId>?append_to_response=season/1,…` (≤ 20
226. seasons with their episodes per request). Bearer `TMDB_READ_TOKEN`.
227. * **Matching, never duplicating, never deleting**: episode by `tmdbId`, else (161 migrated episodes have
228. none) by S/E number if that one has no tmdbId yet — then it gets the tmdbId; season by (show,
229. seasonNumber) (migrated seasons have no tmdbId). Existing episodes/seasons: title, summary, release
230. updated; an empty TMDB value never overwrites. New ones: self-assigned 16-hex ids (NOT mpackdb's own —
231. hybriel#113), `oldId = 'tmdb-episode:<id>'` / `'tmdb-season:<showTmdb>:<n>'` (the tables' `!oldId`
232. index), linked into `season.episodes` / `show.seasons`. Show: `status`, `seasonsCount`,
233. `episodesCount`, `tmdbSummary`, `tmdbPoster`, `tmdbSync` (ms). Season 0 (specials) only for a show that
234. already has one; a TMDB season with no episodes is not created.
235. * **Posters**: TMDB `poster_path`, size w342 → `storage/mpackdb/posters/<oldId>.<ext>` (the folder the
236. existing `/posters/:name` route already served; inside `storage/` → in the nightly backup), `show.image`
237. set to the ext. Downloaded again only when the file is missing or TMDB's `poster_path` changed.
238. * **Daily run inside the app** (`project.hl` `syncTick`): an hl:time `every(1)` clock; at
239. `TRACKER_SYNC_HOUR` (UTC), once per day, it queues all followed shows and then syncs ONE show per tick.
240. hl:web serves one request at a time and `fetch()` blocks the whole process, so a step blocks requests
241. for its duration (real data: ~0.7 s average, Saturday Night Live 53 seasons ~1.7 s; logged as
242. `tmdb sync: slow step …` above 1.5 s) — requests queued meanwhile are served between two ticks; a tick
243. never runs inside a page render. After a show with n requests the next waits n × 260 ms (TMDB ≤ 40
244. requests / 10 s). Log: `tmdb sync: daily at 4:00 UTC`, `tmdb sync: start, N followed shows`,
245. `tmdb sync done: shows=… newSeasons=… newEpisodes=… updatedEpisodes=… updatedSeasons=… posters=…
246. requests=… errors=… seconds=…` (`docker logs tracker.worldapi.org | grep tmdb`). Tables are persisted
247. every 10 shows and at the end (~36 ms).
248. * **The tool** (same sync, sequential, paced; prints one line per show + the totals). **App stopped or a
249. COPY only** — hl:mpackdb is one process per storage (hybriel#21):
250. ```bash
251. set -a; . ./.env; set +a # TMDB_READ_TOKEN, never print it
252. TRACKER_STORAGE=$PWD/.scratch/realdata/storage/mpackdb ./bin/hybriel tools/sync-tmdb.hl [--limit N]
253. ```
254. * Real data (copy, 2026-09-30): first run 126 shows → +20 seasons, +800 episodes, 2651 episodes
255. updated, 125 posters (6.4 MB), 380 requests, 0 errors, 186 s; a second run: all 0, 255 requests, 90 s.
256. Details: STATUS.md ticket #9.
258. ## What it does (step 10)
260. The installable app, the same way calendar.worldapi.org does it (its ticket #3) — hl:web's own manifest
261. and service worker from settings in `project.hl`, no JavaScript of ours:
263. * `appIcons` (192 + 512 PNG, each `any` and `maskable`), `appTouchIcon` (180 PNG), `appFavicon`
264. (`/icons/favicon.svg`), `appThemeColor` = token `darker` (the header, rgb(15, 20, 25)),
265. `appBackgroundColor` = token `dark` (rgb(25, 30, 35)); name = `appTitle` "tracker". hl:web serves
266. `/__hl/manifest.webmanifest` (start_url/scope `/`, display standalone) and links it, the
267. apple-touch-icon and theme-color from every head. `/favicon.ico` is a real icon (16/32/48) for
268. browsers that ask for it themselves. Each icon has its own `file` route in `project.hl`.
269. * **Icons** (`icons/`): `icon.svg` is the source (512, hand-written: a TV with antennas and a check on
270. the screen, `#4ec9b0` on rgb(25,30,35); everything inside the maskable safe zone, a circle of radius
271. 204, so one image serves `any` and `maskable`); `favicon.svg` is the same drawing cropped tight on a
272. rounded tile. Rendered on Loreana:
273. ```bash
274. rsvg-convert -w 192 -h 192 icons/icon.svg -o icons/icon-192.png
275. rsvg-convert -w 512 -h 512 icons/icon.svg -o icons/icon-512.png
276. rsvg-convert -w 180 -h 180 icons/icon.svg -o icons/apple-touch-icon.png
277. for s in 16 32 48; do rsvg-convert -w $s -h $s icons/favicon.svg -o /tmp/fav-$s.png; done
278. magick /tmp/fav-16.png /tmp/fav-32.png /tmp/fav-48.png icons/favicon.ico
279. ```
280. * **Offline**: `offline = [ Home ]` — the worker precaches the shell (runtime, modules, CSS, manifest,
281. icons, favicon) and the document of `/`. Navigations are network-first; without a network `/` comes
282. from the cache and every other page gets hl:web's own "Unavailable offline" page (503) — data pages
283. need the network, no offline data. The shell (`components/main.hl`) shows "You are offline. Your shows
284. and lists need the network." while `navigator.onLine` is false: hl:web gives a page no connection
285. state and no mount hook, so an invisible `netProbe` runs an endless 1 s CSS animation (`styles.hl`
286. `@keyframes tracker-net-tick`) and its `animationiteration` handler reads `navigator.onLine` (a write
287. only when it changes). A server that is down while the device is online shows no note.
289. ## What it does (step 12)
291. * **Link icons** (`components/show.hl`, `shows.hl` `externalLinksOf`, `styles.hl` `showLinks`/`a.extlink`): under the
292. title (phone: between the title row and the full-width poster; desktop: under the title, right of the poster) one
293. small monochrome badge per id the show HAS — `TMDB` https://www.themoviedb.org/tv/<tmdbId> (a movie: `/movie/<id>`),
294. `IMDb` https://www.imdb.com/title/<imdbId>/, `TVDB` https://thetvdb.com/dereferrer/series/<tvdbId>, `TVmaze`
295. https://www.tvmaze.com/shows/<tvmzId>. A movie (`type = 'movie'`) shows only TMDB + IMDb. Each `target="_blank"
296. rel="noopener"`. CSS only (muted grey badge, dark text, accent on hover), no copied logos. URL forms checked
297. 2026-10-01: all four 301 to the site's slug page (TheTVDB's old `?tab=series&id=` too; `dereferrer` is its id form).
298. * **Sync** (`tmdbsync.hl` `externalIdsFor`): the details request carries `append_to_response=external_ids` (no extra
299. request); a MISSING `imdbId` (`tt` + digits) / `tvdbId` (number > 0) is filled from it. A show still without
300. `tvmzId` → `GET <TVMAZE_BASE_URL>/lookup/shows?imdb=tt…`, on 404 `?thetvdb=<id>` (hl:fetch follows TVmaze's 301 to
301. `/shows/<id>`); 550 ms pause per lookup (TVmaze 20 / 10 s) — both runners wait `pauseMsAfter(r)`. **An id the show
302. has is never overwritten.** Totals gain `ids=` (ids filled) and `tvmazeRequests=`.
303. * **Movies** (7814 of 9453 migrated rows are `type = 'movie'`, 1 followed: Star Trek: First Contact): before #12 the
304. sync asked `/tv/<tmdbId>` for them — a DIFFERENT title on TMDB. Now a movie gets one `GET
305. /movie/<tmdbId>?append_to_response=external_ids`: missing imdbId + its poster; no seasons/status/overview.
306. * **Counting ids** (a COPY only): `TRACKER_STORAGE=$PWD/.scratch/realdata/storage/mpackdb ./bin/hybriel
307. tools/count-external-ids.hl` → per type, all / followed: shows, tmdbId, imdbId, tvdbId, tvmzId.
309. ## What it does (mission 047: checks after client-side navigation, mobile first, show page)
311. * **Invisible checks fixed** by re-vendoring Hybriel master ff51cf46 (see "Vendored Hybriel"): the old
312. build created SVG built in the BROWSER (client-side navigation, expand/collapse, a check click) in the
313. XHTML namespace — nothing drawn. Server-rendered pages were fine.
314. * **Mobile first** (`styles.hl`): every rule outside the one `@media (min-width: 40rem)` block is the
315. phone's (390 px); the block only adds the wide layout. The header is one row on a phone (brand, ident
316. selector, Log out); `/my/unwatched` + `/my/schedule` rows are two lines on a phone (show + date, the
317. episode below), one line from 40rem.
318. * **Show page** (`components/show.hl`): phone = title (+ Follow) first, then the poster at the full
319. content width, then genres/plot/cast (`showMeta` is `display: contents` there, the title row
320. `order: -1`); desktop unchanged (poster 10rem left). Season header: a caret at the right edge (down =
321. open, `season-row.collapsed` turns it right). Episode rows are not indented (episode check under the
322. season check). Artists orange (`#ce9178`, token `orange`). Unwatched check = the inverted solid icon:
323. accent outline circle + accent check mark; watched = filled accent disc, dark check.
324. * **Follow toggle** (signed in): "Follow" = the inverted button (accent border), "Following" = filled;
325. face `showToggleFollow` → `follows.hl` `setFollowed` (new record, `at` = now → top of `/my/shows`;
326. unfollow deletes the user's records for that show). **Signed out** the checks and Follow are visible;
327. a click opens the modal "You need to sign in to follow shows and mark episodes." (Close + "Sign in with
328. ident" = the ident login link) and sends nothing. The modal is `components/modal.hl`, copied verbatim
329. from components.hybriel.worldapi.org `components/modal/modal.hl` (becbd59, 2026-09-30) — its own
330. `Style` lands in `/__hl/app.css`.
332. ## What it does (step 13)
334. * **`/`** (`components/home.hl`): signed in, four icon tiles (inline SVG, accent) → `/my/unwatched`, `/my/schedule`,
335. `/my/shows`, `/my/movies` (2×2 on a phone, 4 in a row from 40rem). For everyone: the text about the site (signed out
336. plus a "Log in with ident" hint), then **Movies** (→ `/movies`) = the 10 latest RELEASED movies (release ≤ today) and
337. **Shows** (→ `/shows`) = the 10 series whose newest released episode is newest. Tiles: poster (`posterUrlOf`:
338. the file or `/posters/none`), title, year; a link to `/shows/<slug>` (movies too — same page, same Follow button).
339. Phone: each row scrolls sideways inside itself (`tile-row`, the page never does); from 40rem a grid of 5.
340. * **`/movies`, `/shows`** (`components/movies.hl`, `components/allshows.hl`, both compose `components/tilelist.hl`):
341. every movie by `release` desc (future-dated ones first, undated last — "all … sorted by release date desc"); every
342. series by its newest released episode (series with none released after them, by their own `release`). 24 per page,
343. grid of 3 (phone) / 6. **The page is a path segment: `/movies/page/2`**, page 1 = `/movies`; out of range → the last
344. page, not a number → page 1. NOT `?page=2` (the mission asked for it): a page component cannot read the query
345. (hybriel#11, query half open) and hl:web's Back (`popstate`) drops the query — every page change would be a full
346. reload and Back would land on page 1. With the path, paging is a client-side navigation and Back works.
347. * **Pagination** = components.hybriel's `components/pagination/pagination.hl`, **copied verbatim** to
348. `components/pagination.hl` (4b4dabe) — re-copy, don't edit. It has no data out (its README, hybriel#87), so
349. `tilelist.hl` wraps it in `pager-box { on click }`: a click on one of its buttons bubbles there, the button's text
350. ("Previous", "Next", a number; "…" nothing) gives the page → `navigate()`. Hidden when there is only one page.
351. `styles.hl` makes its buttons a bit tighter on a phone so "Previous 1 … 99 100 101 … 326 Next" stays one row.
352. * **`/my/movies`** (`components/mymovies.hl`): the movies the user follows, newest follow first (same rows as
353. `/my/shows`: small poster, title with year). `/my/shows` now leaves movies out. Shared sort: `follows.hl`
354. `insertByFollowDesc`.
355. * **Speed — `catalog.hl`**: built ONCE at start (one scan of shows + episodes: real data ~1 s, server answers
356. ~1.5 s after launch) into two sorted id lists in memory (`static index`; hand-written merge sort). A page only
357. slices 24 ids and fetches those shows: real data, server time ≈ 5 ms per page. Kept fresh without a rebuild:
358. `project.hl` `syncTick` calls `refreshCatalogShow(id)` after each synced show (its seasons/episodes only, ~2.5 ms;
359. 126 shows 0.3 s); a NEW DAY moves episodes that came out today (each series keeps its upcoming release dates) into
360. place on the first read. `tools/sync-tmdb.hl` runs with the app stopped → the next start rebuilds.
361. * **Content warning** (open, not decided here): the migrated movie table holds many adult titles (the old tracker
362. imported TMDB lists); they show on the public `/` and `/movies`. No `adult` flag is stored.
364. ## Test
366. ```bash
367. node tests/browser.mjs # THE GATE: this app's own server + its OWN ident (a copy of
368. # ident's code without .env, codes to a mail sink — no live
369. # ident, no real mail; tests/identkit.mjs, same as calendar's
370. # gate) + a real headless Chrome: signed out (header shows the
371. # selector + "Log in with ident"; since #13 the homepage has
372. # content, see below) -> sign in -> header shows "Log out" -> sign
373. # out -> signed out again -> a reload stays signed out. Also
374. # checks the header has no bottom border and filled buttons
375. # (incl. the ident selector's) have none, while inverted ones
376. # ("Log out") keep theirs.
377. # tracker.worldapi.org#4: a fixture show (tests/seed-show.hl,
378. # written into the gate's own storage before the server starts)
379. # proves /shows/:slug — header renders, no checks signed out;
380. # signed in, click an episode check (turns solid), click a
381. # season check (itself AND its episodes turn solid, proven
382. # after a reload — server-side, not just client state).
383. # tracker.worldapi.org#5: the same fixture (now followed by the
384. # test user) proves /unwatched — signed out, no rows; signed in,
385. # only the two already-released episodes show, newest first, the
386. # far-future one excluded; click a check, the row disappears
387. # (proven server-side after a reload).
388. # tracker.worldapi.org#6: the same fixture proves /schedule —
389. # signed out, no rows; signed in, only the far-future episode
390. # shows (the two already-released ones excluded), no check icons
391. # at all, unaffected by any watch toggle on the other pages.
392. # tracker.worldapi.org#7: the fixture now has a 2nd followed
393. # show (followed later, no poster name, never watched) and
394. # proves /my/shows — signed out, the sign-in message; signed
395. # in, newest follow first, title links, loaded posters (the
396. # placeholder), S01E02 after /unwatched's click, then S02E01
397. # (highest, not most recent) after the show-page checks; the
398. # unwatched show shows no episode.
399. # tracker.worldapi.org#8: the lists moved to /my/unwatched and
400. # /my/schedule (old addresses: 301, and the browser lands on
401. # the new one), rows say S01E02 / S02E01, titles carry the
402. # year ("Gate Test Show (2024)", "Unwatched Gate Show (2025)"
403. # — from `release`, that show has no `year`), the show page
404. # says "1 episode" / "2 episodes", /my/shows gives the show
405. # with a poster FILE (the gate writes posters/sh1.png) its
406. # own URL and the other one /posters/none.
407. # tracker.worldapi.org#9: a FAKE TMDB (tests/faketmdb.mjs, a
408. # node http server inside the gate, fixed JSON + a png; the
409. # app/tool get TMDB_BASE_URL/TMDB_IMAGE_URL + a gate token —
410. # never the real TMDB). App stopped → tools/sync-tmdb.hl: +2
411. # seasons, +4 episodes, 3 fixture episodes matched by S/E and
412. # updated, 2 posters, no season 0, Bearer token on every call;
413. # a 2nd run changes nothing. Restarted: /my/schedule and
414. # /my/unwatched show the new episodes, /my/shows + the show
415. # page the downloaded posters (/posters/sh2.png byte-equal),
416. # S1 keeps its watched episodes, no duplicates. Then the
417. # app's OWN daily run (TRACKER_SYNC_HOUR = the current UTC
418. # hour, fake TMDB slowed to 700 ms/request, one new episode):
419. # it runs, finds the episode, and pages asked meanwhile are
420. # answered < 2.5 s (between shows) though the run takes ≥ 3 s.
421. # tracker.worldapi.org#10: the PWA — head links (manifest,
422. # apple-touch-icon, favicon, theme-color = token darker), the
423. # manifest (type, name, start_url, scope, standalone, colours),
424. # every icon a real PNG of its size, touch icon 180, favicon
425. # svg + ico; Chrome: no installability error, manifest parsed
426. # without errors; the worker /__hl/sw.js registered, scope /,
427. # controls the page (a separate 390 px phone tab). OFFLINE:
428. # CDP offline → the note appears; the server STOPPED too (CDP's
429. # offline does not reach the worker's own fetches) → reload of
430. # / shows header + note from the cache; /my/shows gives
431. # "Unavailable offline"; server back → no note.
432. # mission 047: a CLIENT-SIDE navigation /my/shows → the show
433. # (window marker proves no reload): every check/caret svg in the
434. # SVG namespace and drawn — again after expand, an episode click,
435. # collapse (FAILED on the old vendored build: XHTML namespace,
436. # circle width 0 — /tmp/w047/old-build-gate.log); caret down/
437. # right and flips; episode check under the season check; artists
438. # rgb(206,145,120); unwatched icon = accent outline + accent
439. # check; Follow: "Following" filled → unfollow ("Follow",
440. # outlined) → gone from /my/shows, survives reload → follow →
441. # top of /my/shows; signed out: checks + Follow visible, a click
442. # (episode, season, Follow) opens the sign-in modal, Close
443. # closes it, a reload shows nothing was written. 390 px + 1280
444. # px: header one row, no sideways scroll, show-page order
445. # (phone: title, full-width poster, genres, plot, cast).
446. # tracker.worldapi.org#12: link icons only for existing ids
447. # (show 1: TMDB+IMDb, show 2: TMDB+TVDB, a fixture MOVIE: TMDB
448. # /movie/), exact hrefs, target _blank + rel noopener, a click
449. # opens a NEW tab (CDP target, canAccessOpener false) and the
450. # page stays; also after client-side navigation; phone/desktop
451. # position. Sync: external_ids come with the details request,
452. # the movie only via /movie/, a FAKE TVmaze (same fake server,
453. # /tvmaze/…, 301 like the real one): imdb hit, imdb 404 → thetvdb
454. # hit; afterwards the stored ids are unchanged (tt0000001, 4002
455. # — TMDB says otherwise) and the missing ones filled; 2nd run:
456. # ids=0, no TVmaze request.
457. # tracker.worldapi.org#13: fixture + 32 never-followed movies
458. # (Gate Movie 01…30 = 2001-01-01…30, one 2099, one undated) and
459. # a series with an episode 2021-01-01. Home signed out: no
460. # icons, the text, headings → /movies /shows, the 10 latest
461. # RELEASED movies (30…21, not the 2099 one), the series by
462. # newest released episode; signed in: 4 icons → /my/…, the
463. # Movies icon → /my/movies (client-side). /movies via the
464. # heading: page 1 = 2099 + 30…08, "1 2 Next"; Next →
465. # /movies/page/2 (client-side, 9 left, undated last), "1" →
466. # /movies, Back → page 2, direct load, page 99 → 2, abc → 1.
467. # /shows: series only, order, no pagination for one page; a
468. # tile → show page. Follow a MOVIE on its page → /my/movies
469. # has it, /my/shows does not. After the sync tool + restart
470. # /shows reorders (S03E01); after the IN-APP run (TMDB adds a
471. # released episode to show 2) /shows and the home row put
472. # show 2 first without a restart. Offline / from the cache
473. # still has the text and both rows.
474. # Session-sync (hybriel 64527baa): after each face-driven change
475. # (/my/unwatched click, expand, episode click, Follow) every row
476. # appears exactly once.
477. # 135 checks. Own servers :8700 (this app) / :8701 (ident copy)
478. # / :8710 (fake TMDB); own storage .scratch/gate-store; Chrome
479. # on 8702-8709. Other ports (workers get 8720-8739):
480. # TRACKER_GATE_PORT=8720 TRACKER_GATE_IDENT_PORT=8721 TRACKER_GATE_CHROME=8722-8726 TRACKER_GATE_TMDB_PORT=8727 node tests/browser.mjs
481. # TRACKER_GATE_SHOTS=/tmp/x also writes {home,show,my-shows,
482. # my-unwatched,my-schedule,movies,movies-page-2,shows-list,
483. # my-movies}-{390,1280}.png, signed-out-modal-
484. # 1280.png, synced-*.png (after the sync, 1280×900; synced-show-390
485. # + synced-movie-390 at 390) + pwa-phone-
486. # online/offline.png (390 px, dpr 2) — LOOK at them
487. ps -eo pid,args | grep [h]l-browser-tier # must print nothing afterwards
488. ```
490. ## Deploy (Byrodin)
492. Target: `/CONTAINERS/projects/tracker.worldapi.org` on Byrodin, container
493. `tracker.worldapi.org` (`docker-compose.yml`: debian:12-slim, host network,
494. `HL_HOST=127.0.0.1`, `TRACKER_PORT=45008`, `TRACKER_WATCH=0`, the folder mounted at
495. `/home/tracker`, `./bin/hybriel project.hl`), public https://tracker.worldapi.org/ via
496. nginx (TLS ends there; no baseUrl/tls in the app, like ident/notes).
497. * **First deploy: done by the architect** (folder, nginx vhost with WebSocket Upgrade
498. headers, cert, DNS, **and registering this app in the live ident** — `/apps` → name +
499. origin `https://tracker.worldapi.org` → the API key + secret go into `.env` next to
500. `docker-compose.yml`, `TRACKER_KEY=… TRACKER_SECRET=…`).
501. * **Later: `./deploy.sh`** on Loreana, in this folder: runs the gate (refuses on a failure;
502. `--skip-tests` skips it LOUDLY), backs up `storage/`/`.sessions/`/`.env` (what exists) to
503. Loreana's `/media/SLOW1TB2/deploy-backups/<app>/` (newest 5 kept; an empty/failed backup stops
504. the deploy), then rsyncs the code to
505. `[email protected]:/CONTAINERS/projects/tracker.worldapi.org` (never `storage/`,
506. `.sessions/`, `.env`, `.scratch/`, `server.*`, logs — the preview is checked for them; no
507. `--delete`), `docker compose up -d && docker compose restart` over `ssh -F /dev/null`,
508. then waits for https://tracker.worldapi.org/ to answer 200.
509. * `./deploy.sh --dry-run` = the gate + `rsync -n` + the commands it would run (no restart, no
510. URL check). `--target DIR|HOST:DIR` and `--url URL` point it elsewhere (tested against a
511. local directory, see STATUS.md).
513. ## Data
515. `storage/mpackdb/`: `users.db` (`identity` → this app's own user id, `users.hl`) plus, since
516. step 2, the old tracker's data — `genres.db` (27), `persons.db` (15157), `shows.db` (9453),
517. `seasons.db` (6430), `episodes.db` (231584), `follows.db` (128), `watches.db` (11692), all with
518. fresh mpackdb ids and every reference re-pointed (`tools/migrate.hl`); the one old user is this
519. app's user for ident short id `az5b2`. Since step 9 the TMDB sync adds seasons/episodes and
520. `storage/mpackdb/posters/<oldId>.<ext>` (w342, ~50 KB each), and sets `tmdbSync`/`tmdbPoster` on
521. shows. Known in the migrated data (not caused by the sync): 12 duplicate episode tmdbIds and 1
522. episode whose `show`/`season` disagrees among the followed shows. Counts and the referential-integrity proof:
523. `STATUS.md` "ticket #2". Real data 2026-10-01: 7,814 movies + 1,639 series (`shows.type`), 232,384 episodes (935
524. series have a released one).
526. ## Files
528. | File | |
529. |---|---|
530. | `CONCEPT.md` | the creator's concept — do not edit |
531. | `project.hl` | manifest: the installable app (`appIcons`, `appTouchIcon`, `appFavicon`, theme colours from the tokens, `offline = [ Home ]`, #10), the daily TMDB run (`syncTick`, #9), routes (`/login/callback`, `/login/failed`, `/login.js`, `/posters/:name`, `/movies` + `/movies/page/:page`, `/shows` + `/shows/page/:page` (#13), `/shows/:slug`, `/my/shows`, `/my/movies` (#13), `/my/unwatched`, `/my/schedule`, `/unwatched` + `/schedule` → 301, `/` component Home), the app's own session cookie |
532. | `users.hl` | the ident exchange + the `usersTable`, copied from calendar.worldapi.org's `users.hl` |
533. | `login.js` | bridge between `<ident-selector>`'s `ident-login` event and the shell, copied verbatim from calendar.worldapi.org |
534. | `components/home.hl` | `/` (#13): signed in the 4 icon tiles; the text; the latest 10 movies and series (catalog.hl) |
535. | `components/movies.hl`, `components/allshows.hl` | `/movies` (+ `/movies/page/:page`), `/shows` (+ `/shows/page/:page`): every movie / series, 24 per page (#13) |
536. | `components/tilelist.hl` | the poster grid + pagination both lists compose; turns a pagination click into `navigate()` (#13) |
537. | `components/pagination.hl` | the pagination, copied verbatim from components.hybriel.worldapi.org (`components/pagination/pagination.hl`, 4b4dabe) — re-copy, don't edit |
538. | `components/mymovies.hl` | `/my/movies`: followed movies, newest follow first (#13) |
539. | `catalog.hl` | the public lists: built once at start, refreshed per synced show and per new day (#13) |
540. | `components/main.hl` | the shell (header: brand, `<ident-selector>`, log in / log out; the offline note + its `netProbe` tick, #10) |
541. | `components/loginfailed.hl` | `/login/failed`: why a login didn't work |
542. | `components/show.hl` | `/shows/:slug`: the show page (header, Follow toggle, seasons with caret, episodes, watch check; signed out the sign-in modal) |
543. | `components/modal.hl` | the modal dialog, copied verbatim from components.hybriel.worldapi.org (`components/modal/modal.hl`, becbd59) — re-copy, don't edit |
544. | `components/unwatched.hl` | `/my/unwatched`: unwatched, already-released episodes of followed shows, newest first |
545. | `components/schedule.hl` | `/my/schedule`: not-yet-released episodes of followed shows, soonest first, no checks |
546. | `components/myshows.hl` | `/my/shows`: followed SERIES (#13: movies → `/my/movies`), newest follow first — small poster, title, last watched `SxxEyy` |
547. | `shows.hl` | read-only data access (shows/seasons/episodes/genres/persons), plus the list labels `episodeCode`/`titleWithYear`/`posterUrlOf` (#8), reused by the `/my/` pages; `externalLinksOf` (#12: the link icons) |
548. | `follows.hl` | per-user follow data (`followsOfUser`, `followedShowIds`), reused by `/unwatched`/`/schedule`/`/my/shows`; `allFollowedShowIds` (#9: every show anyone follows, for the sync); `isFollowing`/`setFollowed` (mission 047: the show page's Follow toggle) |
549. | `tmdbsync.hl` | the TMDB sync of one show (`syncShow`: seasons, episodes, poster; #12: external ids + TVmaze lookup, movies via `/movie/`) + run totals — used by `project.hl`'s daily run and `tools/sync-tmdb.hl` (#9) |
550. | `watches.hl` | per-user watch state (episode/season checks, the shared check-icon class `watchClassOf`, `watchedSet` = the user's watches as a map, built once per page), reused by `/unwatched`/`/schedule`/`/my/shows` |
551. | `icons/` | #10: `icon.svg` (source) → `icon-192.png`, `icon-512.png`, `apple-touch-icon.png`; `favicon.svg`, `favicon.ico` (commands in "What it does (step 10)") |
552. | `styles.hl` | all CSS (imports the tokens from `shared/tokens.hl`; accent green `#4ec9b0`) |
553. | `shared/tokens.hl` | the WorldAPI tokens, vendored verbatim from `ident.worldapi.org/shared/tokens.hl` |
554. | `tests/browser.mjs` | the gate (above) |
555. | `tests/seed-show.hl` | writes the gate's fixture show (two seasons, three episodes) and, since ticket #5, a follow of it for the test user (#7: plus a 2nd, later-followed, never-watched show; #12: partial external ids + a MOVIE followed by another user), before the server starts |
556. | `tests/identkit.mjs` | starts a throwaway ident copy for the gate, copied from calendar.worldapi.org's `tests/` |
557. | `tests/faketmdb.mjs` | the gate's fake TMDB (#9): details, `append_to_response=season/N`, w342 png; records every request; #12: `external_ids`, `/3/movie/<id>`, a fake TVmaze under `/tvmaze` (`tvmazeRequests`) |
558. | `tests/realdata-check.mjs` | NOT the gate: the real-data browser check on a COPY of live `storage/` (STATUS.md, mission 047 / #13): times of every page incl. `/`, `/movies`, `/shows`, `/my/movies`, pagination clicks + Back, client-side navigation, screenshots to `$REAL_SHOTS` |
559. | `tools/count-external-ids.hl` | #12: how many shows have each external id, per type, all / followed — ONLY on a copy |
560. | `tools/count-duplicate-ids.hl` | duplicate `@id`s per table — ONLY on a copy (hybriel#113 check, mission 047) |
561. | `tests/cdp.mjs`, `tests/ports.mjs` | the CDP browser driver, copied from `ident.worldapi.org/tests/` |
562. | `docker-compose.yml`, `Dockerfile`, `deploy.sh` | Byrodin container; the deploy from Loreana (section "Deploy") |
563. | `tools/migrate.hl` | one-off: old MongoDB export → `storage/mpackdb/` (step 2, idempotent, see `STATUS.md`) |
564. | `tools/verify.hl` | one-off: proves the migrated data against a COPY of `storage/mpackdb/` (counts, zero dangling references, one show end to end) |
565. | `tools/sync-tmdb.hl` | the TMDB sync from the command line (#9) — app stopped or a copy; `--limit N`; prints counts |
566. | `tools/relink-episode-seasons.hl` | one-off: links episodes with no `season` (step 2 leftovers) by `(show, seasonNumber)` — not run against the live data yet, see "What it does (step 4)" |
568. ## Vendored Hybriel
570. `bin/hybriel` + `plugins/` = **hybriel master ff51cf46** (2026-10-01 00:27, mission 047; includes
571. #113 b08384e8, #115/#116 428bc56c/6b721937, #118 f5d709a4, the client-built SVG fix, hl:markdown),
572. `bin/hybriel` sha256 `55a724a0cf8680247616a8b66b792cc0ee3ce797afe80d764347ee242d6facc5`. No local
573. patch. Built read-only from an archive (never in the hybriel checkout):
574. ```bash
575. git -C /media/STORAGE/projects/hybriel archive master | tar x -C .scratch/hybriel-047
576. cd .scratch/hybriel-047/native && /media/STORAGE/projects/hybriel/native/zig-toolchain/zig build -Dtarget=x86_64-linux-gnu.2.39 -Doptimize=ReleaseFast # → zig-out/bin/hybriel (hybriel README + ReleaseFast)
577. cp zig-out/bin/hybriel ../../../bin/hybriel
578. # plugins: copy every plugin dir the app already has (core crypto data fetch fs http http1 mpackdb proc smtp
579. # time web) from .scratch/hybriel-047/plugins/ over plugins/ — `diff -rq plugins .scratch/hybriel-047/plugins`
580. # must then list only plugins the app does not use
581. ```
582. The previous build (837fe120 via ident, sha256 `9e5e95b3…`) is kept in `.scratch/pre-047/` (bin/ +
583. plugins/). After a re-vendor run the gate.