Skip to content
Cradle
Sign inJoin

Guided tour · recorded, captioned, tested

Cradle in three short walkthroughs

Each video follows one workflow from start to finish, with the step on screen, in the captions and in the list beside it. A Playwright script recorded them and checked every step on the way (the quota refusal, the code lookup, the used code coming back as a free slot, every invariant holding), so a broken feature would fail the recording rather than appear in it.

Walkthrough 1 of 3 · /hub/invites

Join by invite

The whole invite loop under the 2022 quota: the demo member mints a code into her free slot, is refused a third, and a new member joins with the code; back in her account the code shows who used it and the slot is free again.

Setup: A fresh copy of the committed seed (data/seed.db), in which @mika holds one of her two codes. The new member is the tour fixture @tour-guest; codes are random, so the one minted differs between runs.Open the MP4

Steps (transcript)

  1. 1Try as member: one click signs in as the shared demo member, @mika
  2. 2My invites: @mika holds one code, so one of her two slots is free
  3. 3Make a code: the quota check and the insert are a single SQL statement
  4. 4Both slots are full: asking for a third gets the 2022 refusal, csc 101
  5. 5Sign out, then open the join link for the new code
  6. 6The form looks the code up (a code from @mika) and checks the username is free
  7. 7Create the account: the code is used up and the new member lands in their hub
  8. 8Back as @mika: the code shows who used it, the slot is free and a notice is in her inbox
Try it yourself

Walkthrough 2 of 3 · /tree

The invite tree

Who invited whom, back to the system inviter Cradle: the tidy tree, the per-generation counts, a search that lights up one member's path to the root, the list view, the invite-process estimates with their intervals, and a member's page.

Setup: The seeded cohort plus the member who joined in the first walkthrough, viewed as @mika. The estimates are a demo of the method on synthetic timings, labelled as such on the page.Open the MP4

Steps (transcript)

  1. 1The invite tree: every member sits under the member whose code they used
  2. 2By generation: how many members joined at each depth below Cradle
  3. 3Find a member: the search lights up their path back to Cradle
  4. 4Show me: @mika's own place in the tree
  5. 5The list view: the same tree as nested text, for phones and screen readers
  6. 6The invite process: each estimate with its n and a 95% interval; open codes count as waiting
  7. 7Open a member: lineage, inviter, the people they invited and their two slots
Try it yourself

Walkthrough 3 of 3 · /admin/records

Admin: records, audit log and invariants

The admin side: every table with counts, search and CSV export, the append-only audit log whose hash chain is verified on every view, and the quota invariants checked against the live data next to what the property-based tests add.

Setup: Signed in with the shared demo admin, @warden, on the same database as the first two walkthroughs, so the audit log already holds their sign-ins, the minted code and the sign-up.Open the MP4

Steps (transcript)

  1. 1Try as admin: the shared demo admin opens the records
  2. 2Records: every table with its row count, read-only, password hashes hidden
  3. 3Open a table and search it; any view exports to CSV
  4. 4The audit log: append-only, and each entry hashes the one before it
  5. 5The chain is verified on every view; database triggers refuse edits and deletes
  6. 6Quota invariants: the rules the property tests try to break, checked on the live data
  7. 7Every member, code and lineage is checked: exact counts, so no interval
  8. 8What the tests add: seeded random histories, and the 95% upper bound when none fail
Try it yourself

Screenshots

Every key feature at a glance

Captured by the same script at 1440 × 900 and on a 390 px phone. The landing and sign-in pages are always in the 2022 Dracula palette; the hub follows your light or dark setting, so it is shown in both. Select a screenshot to enlarge it; the arrow keys step through the set.

Desktop · 1440 × 900

Mobile · 390 × 844

How these were made

pnpm showcase runs web/e2e/showcase.spec.ts on the system Chrome against a local production build with a fresh copy of the committed seed, so the members and codes are the same on every run. It plays each journey at a human pace with an on-screen caption and cursor, asserts what it shows, and records it at 1280 × 800; ffmpeg then encodes the H.264 videos on this page and the GIFs in the README. The captions and step lists here are the same text as the on-screen steps.

The member who joins in the first walkthrough, @tour-guest, is a test fixture. No API key is used anywhere: the AI settings screenshot shows the empty dialog, and “Ask the records” runs hand-written SQL, which needs no key.