kryptheon 0.1.35 → 0.1.37

package/README.md

@@ -70,6 +70,10 @@ npx kryptheon record https://your-app.example.com
 A browser opens. Use your app the way a customer would. Close the browser when
 you are done, and the recording is saved as a test.
 
+Add `--phone` to record in a phone-sized window (390 x 844) - for a menu or a
+layout that only changes on a phone. The recording keeps that size, so every
+replay uses it too. On the dashboard it is the "Phone size" box under Record.
+
 On its own, a recording knows that every button and field is still there and
 that the last page looks the same. To say what must be true — "Reservation
 received" appears after booking — use the toolbar at the top of the page while

package/bin/kryptheon.js

@@ -91,6 +91,7 @@ function usage() {
   console.log('  The same, for scripts and AI tools:');
   console.log('');
   console.log('  npx kryptheon record <url>   open your app and record what you do as a test');
+  console.log('    ... <url> --phone          the same in a phone-sized window, replayed at that size');
   console.log('  npx kryptheon check          run every recorded test and report in plain language');
   console.log('  npx kryptheon accept <name>  agree that one test\'s new result is the correct one');
   console.log('  npx kryptheon remove [name]  list the recordings, or remove one you no longer want');
@@ -1527,7 +1528,28 @@ async function prepareFolder(url) {
   return makeReady(USER_DIR) ? null : 1;
 }
 
-async function record(url) {
+// A phone's window: the size the recording is made at and replayed at.
+// Found on a blind test (Northstar): a mobile menu that never opened and a
+// card wider than the screen were only visible below 440px, and every
+// recording was made at desktop width.
+// Written with a comma: codegen's own help shows "1280x720", but codegen
+// itself refuses that ("use width,height") - measured on Playwright 1.62.
+const PHONE_SIZE = '390,844';
+
+/**
+ * What codegen is started with. At phone size, codegen writes
+ * test.use({ viewport: ... }) into the recording itself, so every replay
+ * opens at the size it was recorded at - nothing else has to remember it.
+ */
+function codegenArgs(outFile, target, options) {
+  const phone = options && options.phone;
+  return ['codegen', '--target', 'playwright-test']
+    .concat(phone ? ['--viewport-size=' + PHONE_SIZE] : [])
+    .concat(['-o', outFile, target]);
+}
+
+async function record(url, options) {
+  const phone = Boolean(options && options.phone);
   if (!url) {
     console.error('');
     console.error('  Which address should I open?');
@@ -1571,7 +1593,8 @@ async function record(url) {
   const specPath = path.join(USER_DIR, outFile);
 
   console.log('');
-  console.log('  Opening ' + target + ' in a browser.');
+  console.log('  Opening ' + target + (phone ? ' in a phone-sized window (' + PHONE_SIZE.replace(',', ' x ') + ').' : ' in a browser.'));
+  if (phone) console.log('  It is replayed at the same size every time.');
   console.log('');
   console.log('  Use your app normally - click, type, sign in, whatever you want');
   console.log('  covered. Every step is recorded as you go.');
@@ -1579,7 +1602,7 @@ async function record(url) {
   console.log('  When you are done, close the browser window to save the test.');
   console.log('');
 
-  const child = startCodegen(['codegen', '--target', 'playwright-test', '-o', outFile, target]);
+  const child = startCodegen(codegenArgs(outFile, target, { phone: phone }));
   if (!child) return 1;
 
   let stderr = '';
@@ -2450,10 +2473,11 @@ function recheckFromDashboard(id, opened, say) {
 }
 
 /** Records one flow the way `npx kryptheon record <address>` does, and names what it saved. */
-function recordFromDashboard(address, say) {
+function recordFromDashboard(address, say, options) {
+  const phone = Boolean(options && options.phone);
   const before = listSpecFiles();
-  say('A browser window opens on ' + address + '. Use your app, then close that window to save.');
-  return kryptheonChild(['record', address], say).then(({ code }) => {
+  say('A ' + (phone ? 'phone-sized ' : '') + 'browser window opens on ' + address + '. Use your app, then close that window to save.');
+  return kryptheonChild(['record', address].concat(phone ? ['--phone'] : []), say).then(({ code }) => {
     const added = listSpecFiles().filter((name) => !before.includes(name));
     if (!added.length) return { ok: false, exit: code, why: 'no recording was saved' };
     return { ok: true, exit: code, recordings: added, summary: 'saved ' + added.join(', ') };
@@ -2539,9 +2563,68 @@ function dashboardAlreadyRunning(port) {
   });
 }
 
+/**
+ * The dashboard, started from the home folder: kept in a kryptheon-tests
+ * folder there, the one record already uses - set up the first time, asked
+ * once, and simply opened every time after.
+ *
+ * Found when the first person paid: the site's Kryptheon.cmd download was
+ * flagged as dangerous by the browser and by Windows, and would not open
+ * once saved. Its replacement is Win+R and one pasted line - and Win+R starts
+ * in the home folder, where dashboard used to refuse to run at all.
+ */
+async function dashboardFromHome(plan) {
+  const ready = project.hasPackageJson(plan.into) && project.kryptheonInstalledIn(plan.into);
+  if (!ready) {
+    console.log('');
+    console.log('  Kryptheon keeps your recordings and results in a folder of their own:');
+    console.log('');
+    console.log('    ' + plan.into);
+    console.log('');
+    console.log('  The first time, I make it and install kryptheon in it (about 20MB).');
+    console.log('  Nothing else on this computer is touched.');
+    console.log('');
+    const question = project.setupQuestion(plan);
+    const yes = process.stdin.isTTY
+      ? project.answeredYes(await askLine(question.text), question.yesByDefault)
+      : question.yesByDefault;
+    if (!yes) {
+      console.log('');
+      console.log('  Nothing was changed. To keep them beside your app instead, open a');
+      console.log('  terminal in its folder and run:  npx kryptheon@latest dashboard');
+      console.log('');
+      return 1;
+    }
+    try {
+      fs.mkdirSync(plan.into, { recursive: true });
+    } catch (err) {
+      console.error('');
+      console.error('  Could not make the folder:  ' + plan.into);
+      console.error('');
+      return 1;
+    }
+    if (!makeReady(plan.into)) return 1;
+  }
+  // Run again from inside that folder, as record does: every path in this
+  // file is worked out once, from the folder the command started in.
+  const child = spawn(process.execPath, [__filename, 'dashboard'], { cwd: plan.into, stdio: 'inherit' });
+  const wait = () => {};
+  process.on('SIGINT', wait);
+  process.on('SIGTERM', wait);
+  const code = await new Promise((resolve) => {
+    child.on('error', () => resolve(1));
+    child.on('close', (status) => resolve(status === null ? 1 : status));
+  });
+  process.removeListener('SIGINT', wait);
+  process.removeListener('SIGTERM', wait);
+  return code;
+}
+
 async function dashboardCommand() {
   const here = project.inspectProject(USER_DIR);
   if (!here.ok) {
+    const plan = project.setupPlan(USER_DIR);
+    if (plan.action === 'home') return await dashboardFromHome(plan);
     for (const line of project.noProjectLines(here)) console.error(line);
     return 1;
   }
@@ -2565,7 +2648,7 @@ async function dashboardCommand() {
   const app = dash.createServer(USER_DIR, {
     run: (id, say) => runFromDashboard(id, opened, say),
     recheck: (id, say) => recheckFromDashboard(id, opened, say),
-    record: (address, say) => recordFromDashboard(address, say),
+    record: (address, say, options) => recordFromDashboard(address, say, options),
     db: (action, connection, say) => databaseFromDashboard(action, connection, say),
     words: (connection) => nightWords(connection),
   });
@@ -2867,7 +2950,7 @@ async function main() {
 
   switch (command) {
     case 'record':
-      return finishWith(await record(rest[0]));
+      return finishWith(await record(rest.find((a) => !/^--/.test(a)), { phone: rest.includes('--phone') }));
       break;
     case 'check': {
       const handedOver = handToFolderCopy();
@@ -2919,6 +3002,8 @@ async function main() {
 
 // Exported so the naming logic can be checked without opening a browser.
 module.exports = {
+  codegenArgs: codegenArgs,
+  PHONE_SIZE: PHONE_SIZE,
   packageVersion: packageVersion,
   humanisePath: humanisePath,
   nameFromTitle: nameFromTitle,

package/kryptheon-code.js

@@ -137,8 +137,11 @@ function calleeName(node) {
 // feeds another. It was 6, which a constant-only lookup (a template, a call,
 // its return, a map of maps) used up before reaching the strings at the
 // bottom, so a harmless label came back "unknown". Giving up always errs
-// towards reporting, never towards silence.
-const MAX_DEPTH = 12;
+// towards reporting, never towards silence. It was 12 until a blind test
+// (Northstar): a helper's parameter, back to its call inside a map() callback,
+// to the list, a slice of a list reassigned from a filter of the fixed one -
+// 13 steps. 18 leaves room for one more layer of the same.
+const MAX_DEPTH = 18;
 
 function classify(node, scope, code, depth, aliases) {
   if (!node || depth > MAX_DEPTH) return 'unknown';
@@ -483,7 +486,7 @@ function fromBinding(id, scope, code, depth, aliases) {
   const binding = scope.getBinding(id.name);
   if (!binding) return 'unknown';
   if (binding.path && binding.path.type === 'CatchClause') return 'error';
-  if (binding.kind === 'param') return fromCalls(binding, code, depth);
+  if (binding.kind === 'param') return fromCallback(binding, code, depth) || fromCalls(binding, code, depth);
   if (binding.kind === 'module') return fromImport(binding, depth);
   const init = binding.path && binding.path.node && binding.path.node.init;
   const later = binding.constantViolations || [];
@@ -518,6 +521,35 @@ function fromBinding(id, scope, code, depth, aliases) {
   return classify(init, binding.path.scope, code, depth + 1, aliases);
 }
 
+// Array methods that hand their callback the list's own items.
+const ITEM_CALLBACKS = /^(map|forEach|filter|find|findLast|findIndex|findLastIndex|some|every|flatMap|sort|toSorted)$/;
+
+/**
+ * A parameter of a callback handed to list.map(...) and its kin: the item is
+ * whatever the list holds, the index a number, the third the list itself.
+ * Null when the parameter is not that.
+ *
+ * Found on a blind test (Northstar): pageRows.map(row => `...${severityClass(row.severity)}...`).
+ * The helper's parameter was followed to its call, and there `row` was a
+ * parameter of an arrow nobody names - "unknown" - though pageRows only ever
+ * held the file's own fixed list. The map().join() reading knew what row was;
+ * a name followed back into the same callback did not.
+ */
+function fromCallback(binding, code, depth) {
+  const fn = binding.path && binding.path.parentPath;
+  if (!fn || !/Function/.test(fn.node.type)) return null;
+  const call = fn.parentPath;
+  if (!call || !/CallExpression$/.test(call.node.type) || call.node.arguments[0] !== fn.node) return null;
+  const method = calleeName(call.node.callee);
+  if (!/MemberExpression$/.test(call.node.callee.type) || !ITEM_CALLBACKS.test(method)) return null;
+  const index = fn.node.params.indexOf(binding.path.node);
+  const list = () => classify(call.node.callee.object, call.scope, code, depth + 1);
+  if (index === 0 || (index === 1 && /^(sort|toSorted)$/.test(method))) return list();
+  if (index === 1) return 'safe';
+  if (index === 2) return list();
+  return null;
+}
+
 /**
  * A parameter is as dangerous as the worst thing any call passes it. Every
  * use of the function has to be a call this file makes: one handed on as a

package/kryptheon-dashboard-page.js

@@ -155,6 +155,10 @@
   recordInput.placeholder = 'http://localhost:3000';
   recordInput.setAttribute('aria-label', 'Your app address');
   recordInput.spellcheck = false;
+  // Kept like the box beside it, so a page refresh does not untick it.
+  var phoneBox = el('input');
+  phoneBox.type = 'checkbox';
+  phoneBox.id = 'recordPhone';
   var dbInput = el('input', 'field');
   dbInput.type = 'password';
   dbInput.placeholder = 'postgresql://postgres.<project>:<password>@...pooler.supabase.com:5432/postgres';
@@ -441,7 +445,7 @@
     var go = button('sun sm', 'film', a.label, function () {
       var address = recordInput.value.trim();
       if (!address) { toast('Put your app\'s address in the box first - for example http://localhost:3000'); recordInput.focus(); return; }
-      runJob('/api/record', { url: address }).then(function (done) {
+      runJob('/api/record', { url: address, phone: phoneBox.checked }).then(function (done) {
         var r = done && done.result;
         toast(r && r.ok ? 'Saved: ' + (r.recordings || []).join(', ') : 'Nothing was saved' + (r && r.why ? ' - ' + r.why : ''));
       }, function () {});
@@ -450,6 +454,11 @@
     go.disabled = busy;
     line.appendChild(go);
     wrap.appendChild(line);
+    var size = el('label', 'fallback');
+    size.setAttribute('for', 'recordPhone');
+    size.appendChild(phoneBox);
+    size.appendChild(document.createTextNode(' Phone size (390 x 844) - for menus and layouts that only change on a phone. Replayed at the same size.'));
+    wrap.appendChild(size);
     wrap.appendChild(el('div', 'fallback', 'or in a terminal:  ' + a.command));
     return wrap;
   }

package/kryptheon-dashboard.js

@@ -825,7 +825,9 @@ function createServer(root, options) {
         if (url.pathname === '/api/record' && typeof opts.record === 'function') {
           const address = appAddress(input.url);
           if (!address) return json(res, 400, { ok: false, why: 'that is not a web address - it should look like http://localhost:3000' });
-          return begin('record', 'Recording ' + address, 'npx kryptheon record ' + address, (say) => opts.record(address, say));
+          const phone = input.phone === true;
+          return begin('record', 'Recording ' + address + (phone ? ' at phone size' : ''),
+            'npx kryptheon record ' + address + (phone ? ' --phone' : ''), (say) => opts.record(address, say, { phone: phone }));
         }
         if (url.pathname === '/api/db' && typeof opts.db === 'function') {
           const action = String(input.action || '');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kryptheon",
-  "version": "0.1.35",
+  "version": "0.1.37",
   "description": "Record what you do in your app and get plain-language reports when it breaks.",
   "license": "SEE LICENSE IN LICENSE",
   "type": "commonjs",
@@ -52,7 +52,7 @@
     "@playwright/test": "^1.62.1"
   },
   "scripts": {
-    "check": "node kryptheon-store.check.js && node kryptheon-code.check.js && node kryptheon-constdata.check.js && node kryptheon-accept.check.js && node kryptheon-keys.check.js && node kryptheon-dashboard.check.js && node kryptheon-autostart.check.js && node kryptheon-changes.check.js && node kryptheon-look.check.js && node kryptheon-verify.check.js && node kryptheon-recheck.check.js && node kryptheon-reporter.check.js && node kryptheon-signature.check.js && node kryptheon-signature.stream.check.js && node kryptheon-signature.baseline.check.js && node kryptheon-signature.settle.check.js && node kryptheon-signature.number.check.js && node kryptheon-env.check.js && node kryptheon-watchdog.check.js && node kryptheon-record.check.js && node kryptheon-selectors.check.js && node kryptheon-recordings.check.js && node kryptheon-cleanup.check.js && node kryptheon-orphan.check.js && node kryptheon-project.check.js && node kryptheon-setup.check.js && node kryptheon-browser.check.js && node kryptheon-heal.check.js && node kryptheon-load.check.js && node kryptheon-package.check.js",
+    "check": "node kryptheon-store.check.js && node kryptheon-code.check.js && node kryptheon-constdata.check.js && node kryptheon-accept.check.js && node kryptheon-keys.check.js && node kryptheon-dashboard.check.js && node kryptheon-autostart.check.js && node kryptheon-changes.check.js && node kryptheon-look.check.js && node kryptheon-verify.check.js && node kryptheon-recheck.check.js && node kryptheon-reporter.check.js && node kryptheon-signature.check.js && node kryptheon-signature.stream.check.js && node kryptheon-signature.baseline.check.js && node kryptheon-signature.settle.check.js && node kryptheon-signature.number.check.js && node kryptheon-env.check.js && node kryptheon-watchdog.check.js && node kryptheon-phone.check.js && node kryptheon-homedash.check.js && node kryptheon-record.check.js && node kryptheon-selectors.check.js && node kryptheon-recordings.check.js && node kryptheon-cleanup.check.js && node kryptheon-orphan.check.js && node kryptheon-project.check.js && node kryptheon-setup.check.js && node kryptheon-browser.check.js && node kryptheon-heal.check.js && node kryptheon-load.check.js && node kryptheon-package.check.js",
     "check:store": "node kryptheon-store.check.js",
     "check:code": "node kryptheon-code.check.js",
     "check:constdata": "node kryptheon-constdata.check.js",