Fake iMessage Chat

\n\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t\t\t‹\n\t\t\t\t\t\tMessages\n\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t\t\t\t

iMessage

\n\t\t\t\t\t\t

\n\t\t\t\t\t

⋯

\n\t\t\t\t

\n\n\t\t\t\t

\n\n\t\t\t\t\n\t\t\t

\n\t\t

\n\t\t\n\t\n`;\n\n// --- Hardcoded test job ---\nconst TEST_JOB = {\n messages: [\n {\n from: \"me\",\n text: \"My new Lox Club match is dangerously hot.\",\n delayMs: 2116,\n src:\n \"https://drive.google.com/uc?id=1PS6SOTh5iywfvC5pVGsYSfYiEg79lS5D&export=download\",\n durationMs: 2116,\n },\n {\n from: \"them\",\n text: \"Define 'dangerously'\",\n delayMs: 1672,\n src:\n \"https://drive.google.com/uc?id=1r8XThR8418V0joUpUUYh-N0FlMjy5_Sy&export=download\",\n durationMs: 1672,\n },\n ],\n};\n\nfunction dataUrlFromHtml(html: string) {\n // Safer for UTF-8 than btoa\n return \"data:text/html;charset=utf-8,\" + encodeURIComponent(html);\n}\n\n(async () => {\n console.log(\"[val] start\");\n\n const kernel = new Kernel();\n console.log(\"[val] creating Kernel browser…\");\n const kBrowser = await kernel.browsers.create();\n console.log(\"[val] kernel session:\", kBrowser.session_id);\n\n const browser = await chromium.connectOverCDP(kBrowser.cdp_ws_url);\n console.log(\"[val] connected to browser over CDP\");\n\n try {\n const ctx = await browser.newContext({\n viewport: { width: 1080, height: 1920 },\n deviceScaleFactor: 1,\n recordVideo: { dir: \"/tmp/vids\", size: { width: 1080, height: 1920 } },\n });\n console.log(\"[val] context created with video recording\");\n\n const page = await ctx.newPage();\n console.log(\"[val] page opened; viewport:\", await page.viewportSize());\n\n // Pipe page logs/errors to Val logs\n page.on(\"console\", (m) => {\n try {\n console.log(\"[page]\", m.type().toUpperCase(), m.text());\n } catch {\n console.log(\"[page]\", m.text());\n }\n });\n page.on(\"pageerror\", (err) => console.error(\"[pageerror]\", err));\n page.on(\"response\", (res) => {\n if (res.status() >= 400) console.warn(\"[resp]\", res.status(), res.url());\n });\n\n const url = dataUrlFromHtml(HTML);\n console.log(\"[val] navigating to data URL…\");\n await page.goto(url, { waitUntil: \"load\" });\n console.log(\"[val] page loaded\");\n\n // Ensure layout is ready\n await page.waitForTimeout(150);\n await page.evaluate(() =>\n new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(r)))\n );\n await page.waitForSelector(\".ios-header\", { timeout: 15000 });\n await page.waitForSelector(\"#chat\", { timeout: 10000 });\n console.log(\"[val] essential selectors present\");\n\n // Inject messages and start playback\n console.log(\n \"[val] injecting messages + starting playback:\",\n TEST_JOB.messages.length,\n );\n await page.exposeFunction(\n \"__valLog\",\n (s: string) => console.log(\"[inpage]\", s),\n );\n await page.evaluate(async (msgs) => {\n (window as any).__valLog?.(`received ${msgs.length} messages`);\n (window as any).conversation = msgs;\n if (typeof (window as any).startPlayback === \"function\") {\n await (window as any).startPlayback({ defaultDelayMs: 0 });\n } else {\n (window as any).__valLog?.(\"startPlayback not found\");\n }\n }, TEST_JOB.messages);\n\n // Poll for completion\n const expected = TEST_JOB.messages.length;\n const timeoutMs = 120_000;\n const stableNeeded = 2;\n let stable = 0;\n const start = Date.now();\n\n async function getState() {\n return await page.evaluate(() => ({\n done: Boolean((window as any).__playDone),\n rendered: Number((window as any).__renderedCount || 0),\n bubbles: (document.getElementById(\"chat\") || document.body)\n .querySelectorAll(\"p.from-them, p.from-me\").length,\n }));\n }\n\n while (true) {\n const s = await getState();\n console.log(\n `[val] poll done=${s.done} rendered=${s.rendered} bubbles=${s.bubbles} target=${expected}`,\n );\n const ready = s.done && s.bubbles >= expected && expected > 0;\n if (ready) {\n stable += 1;\n if (stable >= stableNeeded) break;\n } else {\n stable = 0;\n }\n if (Date.now() - start > timeoutMs) {\n throw new Error(\"timeout: did not reach done state\");\n }\n await page.waitForTimeout(300);\n }\n\n // Settle and flush\n await page.waitForTimeout(300);\n console.log(\"[val] finishing; grabbing video…\");\n const video = page.video();\n await page.close();\n await ctx.close(); // flush .webm\n console.log(\"[val] page + context closed\");\n\n const path = await video?.path();\n console.log(\"[val] video path:\", path);\n if (!path) throw new Error(\"no video path\");\n const bytes = await Deno.readFile(path);\n console.log(\"[val] video bytes:\", bytes.length);\n\n console.log(\"[val] done\");\n } catch (err) {\n console.error(\"[val] ERROR:\", err?.stack || err);\n } finally {\n console.log(\"[val] cleaning up browser + kernel\");\n await browser.close();\n await kernel.browsers.deleteByID(kBrowser.session_id);\n }\n})();","deleted","label",[98],"permalink","https://www.val.town/x/alec/kernel_starter/code/playwright.ts","extension","actionData","errors"]