olai PR #485 — evidence for the five missing Workflowy chords: the shot driver, its argv, and hashes of the five frames (gists are text-only; the PNGs reproduce in a minute)

README.md

PR #485 — the five missing Workflowy chords, on a real serve

The e2e pins are in the PR (features/the_missing_chords.feature, eight scenarios, red-first). This gist is the look of it: five screenshots taken by driver.ts against a dev server reading a copy of the suite's good corpus, the chords pressed by a headless Chromium rather than narrated. The PNGs themselves render on the PR — gists are text-only, so they live at juspay/olai#485 (comment) and are mirrored below via imgur.

The frames

Alt+. with the caret in install → house.olai/#install — breadcrumb house.olai › kitchen remodel #home, the node's own page drawn:

Alt+, with the caret in handles on that page → house.olai/#kitchen — the zoom pops one level, install is a row again:

Ctrl+Space with the caret in install — the gutter triangle turns and the branch folds away:

Ctrl+O on house.olai — the finished rows appear inline, struck through; a second press hides them:

⌘⇧↑, platform pinned to a Mac, caret in pick the knobs — the row moves above pick the hinges, the header's 1 uncommitted counting the write:

The Mac pinning is an init script answering MacIntel for navigator.platform — the same door the suite's ⌘⇧ scenario walks through, since every browser the suite runs is on one OS.

Reproducing

# in the PR's worktree:
just build-client
# serve a copy of packages/tests/fixtures/good on port 0 (the suite's own
# support/serve.sh spelling works), then:
nix develop .#e2e -c bun driver.ts "$OLAI_URL"
sha256sum /tmp/opencode/evidence/shots/*.png   # matches shots.sha256

(driver.ts writes the five PNGs to /tmp/opencode/evidence/shots/, one per chord. Adjust the paths at the top of the file if you parked yours elsewhere.)

Hashes

See shots.sha256. If a frame here and yours differ, what you are looking at is what a reviewer should also look at.

browser.ts

/**
 * The argv every Chromium this package launches is launched with.
 *
 * ONE list, because the reason for each flag is about where the browser RUNS
 * and not about what it is being asked to do: under Nix, in a container, on a
 * CI runner with no display and a 64 MB `/dev/shm`. Every one of them is
 * load-bearing there and harmless on a laptop, which is why the same argv is
 * used everywhere rather than branched on `CI` — a browser configured
 * differently in CI than on a laptop is a class of bug that only ever
 * reproduces where it is hardest to debug.
 *
 * It lives in its own module rather than in `./hooks.ts` beside the suite's own
 * launch, because importing that module REGISTERS cucumber hooks: a driver that
 * is not the suite (`../wire.ts`, `../shot.ts`) cannot reach
 * for it without also enrolling itself in a run. This file imports nothing —
 * not even from `@olai/*` — so a driver that is deliberately version-independent
 * can share it too.
 *
 * The drift this ends was real and quiet: three copies had grown, and two of
 * them had lost `--disable-dev-shm-usage` — the flag whose absence shows up as
 * a browser that dies mid-run on a small `/dev/shm`, which is exactly the
 * failure the paragraph above exists to prevent.
 */
export const BROWSER_ARGS: ReadonlyArray<string> = [
  "--no-sandbox",
  "--disable-setuid-sandbox",
  "--disable-gpu",
  "--disable-dev-shm-usage",
  "--headless=new",
];

driver.ts

/**
 * The shots behind PR #485's evidence: the five chords driven on a real
 * serve of a copy of the good corpus. A DRIVER, not a test — the suite's
 * `support/browser.ts` argv, one arc, a PNG per chord.
 *
 *   bun driver.ts <url>
 *
 * Nothing is asserted the suite does not already pin; the waits only hold
 * each frame until what the shot shows is true.
 */
import { chromium, type Page } from "playwright"

import { BROWSER_ARGS } from "./browser.ts"

const url = process.argv[2]
if (url === undefined) throw new Error("driver.ts takes the server's URL")

const node = (p: Page, id: string) => p.locator(`[data-testid="node"][data-node-id="${id}"]`)
const titleOf = (p: Page, id: string) => node(p, id).locator('[data-testid="node-title"]').first()

const lookAt = async (p: Page, id: string): Promise<void> => {
  const title = titleOf(p, id)
  await title.waitFor({ state: "visible" })
  const box = await title.boundingBox()
  if (box === null) throw new Error(`no box for ${id}`)
  await title.click({ position: { x: Math.max(box.width - 2, 0), y: box.height / 2 } })
  await p.waitForTimeout(150)
}

const browser = await chromium.launch({ args: [...BROWSER_ARGS] })
const shots = "/tmp/opencode/evidence/shots"

// The Linux side first: Alt+/Alt+, zoom, Ctrl+Space fold, Ctrl+O Done.
const plain = await browser.newPage({ viewport: { width: 1280, height: 800 } })

await plain.goto(`${url}/house.olai`)
await plain.waitForSelector('[data-testid="outline-list"]')
await lookAt(plain, "install")
await plain.keyboard.press("Alt+.")
await plain.waitForURL("**/#install")
await plain.waitForTimeout(300)
await plain.screenshot({ path: `${shots}/01-zoom-in.png` })

await lookAt(plain, "handles")
await plain.keyboard.press("Alt+,")
await plain.waitForURL("**/#kitchen")
await plain.waitForTimeout(300)
await plain.screenshot({ path: `${shots}/02-zoom-out.png` })

await plain.goto(`${url}/house.olai`)
await plain.waitForSelector('[data-testid="outline-list"]')
await lookAt(plain, "install")
await plain.keyboard.press("Control+Space")
await node(plain, "handles").waitFor({ state: "hidden" })
await plain.waitForTimeout(300)
await plain.screenshot({ path: `${shots}/03-folded.png` })
await plain.keyboard.press("Control+Space")
await node(plain, "handles").waitFor({ state: "visible" })

await plain.keyboard.press("Control+o")
await node(plain, "demo").waitFor({ state: "visible" })
await plain.waitForTimeout(300)
await plain.screenshot({ path: `${shots}/04-done-shown.png` })
await plain.keyboard.press("Control+o")
await node(plain, "demo").waitFor({ state: "hidden" })
await plain.close()

// The Mac side: ⌘⇧↑ moves the row the caret is in.
const mac = await browser.newPage({ viewport: { width: 1280, height: 800 } })
await mac.addInitScript(() => {
  Object.defineProperty(window.navigator, "platform", { get: () => "MacIntel" })
})
await mac.goto(`${url}/house.olai`)
await mac.waitForSelector('[data-testid="outline-list"]')
await lookAt(mac, "knobs")
await mac.keyboard.press("Meta+Shift+ArrowUp")
await mac.waitForTimeout(300)
await mac.screenshot({ path: `${shots}/05-meta-shift-move.png` })
await mac.close()

await browser.close()

shots.sha256

f7ee9871a5d37fce56734ba7bdbbc120ae586d9c4fd1cc82383e8f7e9ac658f9  /tmp/opencode/evidence/shots/01-zoom-in.png
896e5c67006d278ebfdbb924c2a5ffdedf21d4e38b2b8f251305737692c36b49  /tmp/opencode/evidence/shots/02-zoom-out.png
a9dc9dbe0468c283e34af801bc2b47131d7252c6c40b099dec490cd8048e82c6  /tmp/opencode/evidence/shots/03-folded.png
ffd05a8b67c9cdd95bb7952628a498b9905ca09ffb376dddfda22006b83f2593  /tmp/opencode/evidence/shots/04-done-shown.png
9f53bb8857e1101b695d65aa57c04e56c13f87eca137fd7eb47bf58418252f76  /tmp/opencode/evidence/shots/05-meta-shift-move.png