@dodi-education/cli 0.0.0-stage → 0.1.0

package/dist/renderer-3K4ZMPYW.js

@@ -0,0 +1,444 @@
+#!/usr/bin/env node
+import {
+  DEFAULT_SCREENSHOT_VIEWPORT,
+  SCREENSHOT_CONTRACT_VERSION,
+  SCREENSHOT_LIMITS,
+  createBridgeToken
+} from "./chunk-KP4U5Z6H.js";
+import "./chunk-2ZK44UVJ.js";
+
+// ../../screenshot/src/renderer.ts
+import { randomUUID } from "node:crypto";
+import { chromium } from "playwright";
+
+// ../../screenshot/src/host-page.ts
+function buildHostPage(viewport) {
+  return `<!doctype html>
+<html>
+<head>
+<meta charset="utf-8" />
+<style>
+  html, body { margin: 0; padding: 0; background: #fff; overflow: hidden; }
+  iframe { border: 0; display: block; width: ${viewport.width}px; height: ${viewport.height}px; }
+</style>
+</head>
+<body>
+<iframe id="game" title="Game" sandbox="allow-scripts" referrerpolicy="no-referrer"></iframe>
+<script>
+(function () {
+  var frame = document.getElementById('game');
+  window.addEventListener('message', function (e) {
+    if (!frame || e.source !== frame.contentWindow) return;
+    var json;
+    try { json = JSON.stringify(e.data); } catch (err) { return; }
+    if (typeof json !== 'string') return;
+    if (typeof window.__onGameMessage === 'function') window.__onGameMessage(json);
+  });
+  window.__postToGame = function (msg) {
+    if (frame && frame.contentWindow) frame.contentWindow.postMessage(msg, '*');
+  };
+  window.__loadGame = function (doc) {
+    return new Promise(function (resolve) {
+      frame.addEventListener('load', function () { resolve(); }, { once: true });
+      frame.srcdoc = doc;
+    });
+  };
+})();
+</script>
+</body>
+</html>`;
+}
+
+// ../../screenshot/src/layout-probe.ts
+function probeLayout(options) {
+  const MIN_SIDE = 8;
+  const MIN_OVERLAP_SIDE = 4;
+  const MIN_OVERLAP_SHARE = 0.08;
+  const MAX_SCANNED = 1500;
+  const PAGE_LAYER_SHARE = 0.5;
+  const INTERACTIVE = /* @__PURE__ */ new Set([
+    "BUTTON",
+    "INPUT",
+    "SELECT",
+    "TEXTAREA",
+    "PROGRESS",
+    "METER",
+    "IMG",
+    "CANVAS",
+    "VIDEO",
+    "svg"
+  ]);
+  const SKIP = /* @__PURE__ */ new Set(["SCRIPT", "STYLE", "TEMPLATE", "NOSCRIPT", "BR", "HEAD", "META", "LINK"]);
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+  const viewArea = vw * vh;
+  const hasOwnText = (el) => {
+    for (const node of Array.from(el.childNodes)) {
+      if (node.nodeType === Node.TEXT_NODE && (node.textContent ?? "").trim()) return true;
+    }
+    return false;
+  };
+  const hasVisibleBox = (style) => {
+    const bg = style.backgroundColor;
+    const transparent = bg === "transparent" || /rgba\(.*,\s*0\)$/.test(bg);
+    if (!transparent) return true;
+    if (style.backgroundImage && style.backgroundImage !== "none") return true;
+    if (style.boxShadow && style.boxShadow !== "none") return true;
+    return ["Top", "Right", "Bottom", "Left"].some(
+      (side) => parseFloat(style.getPropertyValue(`border-${side.toLowerCase()}-width`)) > 0 && style.getPropertyValue(`border-${side.toLowerCase()}-style`) !== "none"
+    );
+  };
+  const depthOf = (el) => {
+    let depth = 0;
+    for (let node = el.parentElement; node; node = node.parentElement) depth++;
+    return depth;
+  };
+  const pathOf = (el) => {
+    const parts = [];
+    for (let node = el; node && node !== document.documentElement; node = node.parentElement) {
+      const parent = node.parentElement;
+      const index = parent ? Array.from(parent.children).indexOf(node) : 0;
+      parts.push(`${node.tagName}:${index}`);
+    }
+    return parts.reverse().join("/");
+  };
+  const nameOf = (el) => {
+    let name = el.tagName.toLowerCase();
+    if (el.id) name += `#${el.id}`;
+    const classes = Array.from(el.classList).slice(0, 2);
+    if (classes.length) name += `.${classes.join(".")}`;
+    const text = (el.textContent ?? "").replace(/\s+/g, " ").trim();
+    if (text) name += ` "${text.length > 24 ? `${text.slice(0, 23)}\u2026` : text}"`;
+    return name;
+  };
+  const candidates = [];
+  const all = document.body ? Array.from(document.body.querySelectorAll("*")) : [];
+  for (const el of all.slice(0, MAX_SCANNED)) {
+    if (SKIP.has(el.tagName)) continue;
+    if (el.tagName !== "svg" && el.closest("svg")) continue;
+    if (el.closest("[data-overlap-ok]")) continue;
+    const visible = el.checkVisibility?.({ checkOpacity: true, checkVisibilityCSS: true });
+    if (visible === false) continue;
+    const style = getComputedStyle(el);
+    const box = el.getBoundingClientRect();
+    const rect = {
+      left: Math.max(0, box.left),
+      top: Math.max(0, box.top),
+      right: Math.min(vw, box.right),
+      bottom: Math.min(vh, box.bottom)
+    };
+    const width = rect.right - rect.left;
+    const height = rect.bottom - rect.top;
+    if (width < MIN_SIDE || height < MIN_SIDE) continue;
+    const area = width * height;
+    if (area > viewArea * PAGE_LAYER_SHARE) continue;
+    const text = hasOwnText(el);
+    const interactive = INTERACTIVE.has(el.tagName) || el.getAttribute("role") === "button" || el.getAttribute("role") === "progressbar" || el.tagName === "A" && el.hasAttribute("href");
+    if (style.pointerEvents === "none" && !text && !interactive) continue;
+    if (!text && !interactive && !hasVisibleBox(style)) continue;
+    candidates.push({ el, rect, area, depth: depthOf(el) });
+  }
+  const found = [];
+  for (let i = 0; i < candidates.length; i++) {
+    for (let j = i + 1; j < candidates.length; j++) {
+      const a = candidates[i];
+      const b = candidates[j];
+      if (a.el.contains(b.el) || b.el.contains(a.el)) continue;
+      const left = Math.max(a.rect.left, b.rect.left);
+      const top = Math.max(a.rect.top, b.rect.top);
+      const width = Math.min(a.rect.right, b.rect.right) - left;
+      const height = Math.min(a.rect.bottom, b.rect.bottom) - top;
+      if (width < MIN_OVERLAP_SIDE || height < MIN_OVERLAP_SIDE) continue;
+      const overlap = width * height;
+      if (overlap < MIN_OVERLAP_SHARE * Math.min(a.area, b.area)) continue;
+      const hit = document.elementFromPoint(left + width / 2, top + height / 2);
+      const onTop = hit && (a.el === hit || a.el.contains(hit)) ? "a" : hit && (b.el === hit || b.el.contains(hit)) ? "b" : null;
+      const [small, big, smallKey] = a.area <= b.area ? [a, b, "a"] : [b, a, "b"];
+      const inside = small.rect.left >= big.rect.left && small.rect.top >= big.rect.top && small.rect.right <= big.rect.right && small.rect.bottom <= big.rect.bottom;
+      if (inside && onTop === smallKey) continue;
+      found.push({
+        a: { name: nameOf(a.el), path: pathOf(a.el) },
+        b: { name: nameOf(b.el), path: pathOf(b.el) },
+        top: onTop,
+        x: Math.round(left),
+        y: Math.round(top),
+        width: Math.round(width),
+        height: Math.round(height),
+        aEl: a.el,
+        bEl: b.el,
+        depth: a.depth + b.depth
+      });
+    }
+  }
+  found.sort((x, y) => x.depth - y.depth || y.width * y.height - x.width * x.height);
+  const reported = [];
+  const within = (outer, inner) => outer === inner || outer.contains(inner);
+  for (const pair of found) {
+    const covered = reported.some(
+      (r) => within(r.aEl, pair.aEl) && within(r.bEl, pair.bEl) || within(r.aEl, pair.bEl) && within(r.bEl, pair.aEl)
+    );
+    if (covered) continue;
+    reported.push(pair);
+    if (reported.length >= options.maxOverlaps) break;
+  }
+  return reported.map(({ a, b, top, x, y, width, height }) => ({ a, b, top, x, y, width, height }));
+}
+function probeLayoutScript(options) {
+  return `(() => { const __name = (fn) => fn; return (${probeLayout.toString()})(${JSON.stringify(options)}); })()`;
+}
+function collectLayoutIssues(perFrame, frameLabels) {
+  const byPair = /* @__PURE__ */ new Map();
+  perFrame.forEach((overlaps, frameIndex) => {
+    for (const overlap of overlaps) {
+      const key = [overlap.a.path, overlap.b.path].sort().join("|");
+      const entry = byPair.get(key);
+      if (entry) {
+        if (!entry.frames.includes(frameIndex)) entry.frames.push(frameIndex);
+      } else {
+        byPair.set(key, { overlap, frames: [frameIndex] });
+      }
+    }
+  });
+  const lines = [];
+  for (const { overlap, frames } of byPair.values()) {
+    const { a, b, top } = overlap;
+    const relation = top === "a" ? `${a.name} covers ${b.name}` : top === "b" ? `${b.name} covers ${a.name}` : `${a.name} overlaps ${b.name}`;
+    const where = `${overlap.width}\xD7${overlap.height} px at ${overlap.x},${overlap.y}`;
+    const shownIn = frames.map((i) => `${i + 1} (${frameLabels[i] ?? "?"})`).join(", ");
+    const line = `${relation} (${where}), frame${frames.length > 1 ? "s" : ""} ${shownIn}`;
+    lines.push(line.slice(0, SCREENSHOT_LIMITS.MAX_ERROR_CHARS));
+    if (lines.length >= SCREENSHOT_LIMITS.MAX_LAYOUT_ISSUES) break;
+  }
+  return lines;
+}
+
+// ../../screenshot/src/renderer.ts
+var INIT_RETRY_MS = 300;
+var POST_COMMAND_PAINT_MS = 150;
+var MAX_QUEUE_FACTOR = 2;
+var RenderBusyError = class extends Error {
+  constructor() {
+    super("render queue is full");
+    this.name = "RenderBusyError";
+  }
+};
+var RenderTimeoutError = class extends Error {
+  constructor(ms) {
+    super(`render exceeded ${ms}ms`);
+    this.name = "RenderTimeoutError";
+  }
+};
+function note(list, text) {
+  if (list.length >= SCREENSHOT_LIMITS.MAX_ERRORS) return;
+  const trimmed = text.replace(/\s+/g, " ").trim();
+  if (trimmed) list.push(trimmed.slice(0, SCREENSHOT_LIMITS.MAX_ERROR_CHARS));
+}
+var GameInbox = class {
+  #waiters = /* @__PURE__ */ new Set();
+  push(json) {
+    let parsed;
+    try {
+      parsed = JSON.parse(json);
+    } catch {
+      return;
+    }
+    if (!parsed || typeof parsed !== "object") return;
+    const msg = parsed;
+    if (typeof msg.type !== "string") return;
+    for (const waiter of this.#waiters) waiter(msg);
+  }
+  /** Resolves with the first message matching `predicate`, or null after `timeoutMs`. */
+  waitFor(predicate, timeoutMs) {
+    return new Promise((resolve) => {
+      const waiter = (msg) => {
+        if (!predicate(msg)) return;
+        done(msg);
+      };
+      const timer = setTimeout(() => done(null), timeoutMs);
+      const done = (value) => {
+        clearTimeout(timer);
+        this.#waiters.delete(waiter);
+        resolve(value);
+      };
+      this.#waiters.add(waiter);
+    });
+  }
+};
+async function drive(page, request, opts) {
+  const errors = [];
+  const warnings = [];
+  const frames = [];
+  const inbox = new GameInbox();
+  const token = createBridgeToken();
+  page.on("pageerror", (error) => note(errors, error.message));
+  page.on("console", (msg) => {
+    if (msg.type() === "error") note(errors, msg.text());
+  });
+  await page.exposeFunction("__onGameMessage", (json) => inbox.push(json));
+  void inbox.waitFor((msg) => {
+    if (msg.type === "game:error") {
+      const detail = msg.payload?.error;
+      note(errors, `game:error: ${typeof detail === "string" ? detail : "unknown"}`);
+    }
+    return false;
+  }, opts.renderTimeoutMs);
+  const viewport = request.viewport ?? DEFAULT_SCREENSHOT_VIEWPORT;
+  await page.setContent(buildHostPage(viewport), { waitUntil: "load" });
+  await page.evaluate(
+    (doc) => window.__loadGame(doc),
+    request.document
+  );
+  const post = (msg) => page.evaluate((m) => window.__postToGame(m), msg);
+  const shoot = async () => {
+    const buffer = await page.screenshot({
+      type: "jpeg",
+      quality: SCREENSHOT_LIMITS.JPEG_QUALITY,
+      clip: { x: 0, y: 0, width: viewport.width, height: viewport.height }
+    });
+    return `data:image/jpeg;base64,${buffer.toString("base64")}`;
+  };
+  const probes = [];
+  const probe = async () => {
+    const gameFrame = page.frames().find((frame) => frame.parentFrame() === page.mainFrame());
+    const found = gameFrame ? await gameFrame.evaluate(
+      probeLayoutScript({ maxOverlaps: SCREENSHOT_LIMITS.MAX_LAYOUT_ISSUES })
+    ).catch(() => []) : [];
+    probes.push(found);
+  };
+  const init = {
+    type: "dodi:init",
+    token,
+    payload: { gameId: randomUUID(), ...request.locale ? { locale: request.locale } : {} }
+  };
+  const readyPromise = inbox.waitFor(
+    (msg) => msg.type === "game:ready" && msg.token === token,
+    opts.readyTimeoutMs
+  );
+  const retry = setInterval(() => void post(init).catch(() => {
+  }), INIT_RETRY_MS);
+  await post(init).catch(() => {
+  });
+  const ready = await readyPromise !== null;
+  clearInterval(retry);
+  await page.waitForTimeout(request.settleMs ?? SCREENSHOT_LIMITS.DEFAULT_SETTLE_MS);
+  frames.push({ label: "initial", image: await shoot() });
+  await probe();
+  const steps = request.steps ?? [];
+  if (!ready && steps.length > 0) {
+    warnings.push(`skipped ${steps.length} step(s): the game never became ready`);
+  } else {
+    for (const [index, step] of steps.entries()) {
+      const waitMs = step.waitMs ?? SCREENSHOT_LIMITS.DEFAULT_STEP_WAIT_MS;
+      if (step.command) {
+        const resultPromise = inbox.waitFor(
+          (msg) => msg.type === "game:result" && msg.token === token,
+          waitMs
+        );
+        await post({ type: "dodi:command", token, payload: { command: step.command } });
+        if (await resultPromise === null) {
+          warnings.push(`step ${index + 1} (${step.label}): no game:result within ${waitMs}ms`);
+        }
+        await page.waitForTimeout(POST_COMMAND_PAINT_MS);
+      } else {
+        await page.waitForTimeout(waitMs);
+      }
+      frames.push({ label: step.label, image: await shoot() });
+      await probe();
+    }
+  }
+  const layoutIssues = collectLayoutIssues(
+    probes,
+    frames.map((frame) => frame.label)
+  );
+  return {
+    version: SCREENSHOT_CONTRACT_VERSION,
+    frames,
+    ready,
+    warnings,
+    errors,
+    ...layoutIssues.length > 0 ? { layoutIssues } : {}
+  };
+}
+function createRenderer(opts) {
+  let browserPromise = null;
+  let active = 0;
+  const waiting = [];
+  const browser = () => {
+    if (browserPromise) return browserPromise;
+    const launching = chromium.launch({ headless: true, chromiumSandbox: opts.chromiumSandbox }).then((launched) => {
+      launched.on("disconnected", () => {
+        if (browserPromise === launching) browserPromise = null;
+      });
+      return launched;
+    });
+    launching.catch(() => {
+      if (browserPromise === launching) browserPromise = null;
+    });
+    browserPromise = launching;
+    return launching;
+  };
+  async function acquire() {
+    if (active < opts.maxConcurrent) {
+      active++;
+      return;
+    }
+    if (waiting.length >= opts.maxConcurrent * MAX_QUEUE_FACTOR) throw new RenderBusyError();
+    await new Promise((resolve) => waiting.push(resolve));
+    active++;
+  }
+  function release() {
+    active--;
+    waiting.shift()?.();
+  }
+  async function renderOnce(request) {
+    const viewport = request.viewport ?? DEFAULT_SCREENSHOT_VIEWPORT;
+    const context = await (await browser()).newContext({
+      viewport,
+      deviceScaleFactor: 1,
+      // The document's CSP already forbids network; the context is offline and
+      // every request is aborted as belt and braces.
+      offline: true,
+      javaScriptEnabled: true
+    });
+    try {
+      const page = await context.newPage();
+      await page.route("**/*", (route) => route.abort());
+      const work = drive(page, request, opts);
+      work.catch(() => {
+      });
+      let timer;
+      const deadline = new Promise((_, reject) => {
+        timer = setTimeout(() => reject(new RenderTimeoutError(opts.renderTimeoutMs)), opts.renderTimeoutMs);
+      });
+      try {
+        return await Promise.race([work, deadline]);
+      } finally {
+        clearTimeout(timer);
+      }
+    } finally {
+      await context.close().catch(() => {
+      });
+    }
+  }
+  return {
+    async render(request) {
+      await acquire();
+      try {
+        return await renderOnce(request);
+      } finally {
+        release();
+      }
+    },
+    async close() {
+      const open = browserPromise;
+      browserPromise = null;
+      if (open) await open.then((b) => b.close()).catch(() => {
+      });
+    }
+  };
+}
+export {
+  RenderBusyError,
+  RenderTimeoutError,
+  createRenderer
+};

package/package.json

@@ -1,6 +1,77 @@
 {
   "name": "@dodi-education/cli",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0",
+  "description": "The dodi CLI: let your own AI agent build learning games and companion looks for your family on dodi.",
+  "license": "AGPL-3.0-only",
+  "author": "dodi",
+  "homepage": "https://dodi.app",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/dodi-education/dodi-app.git",
+    "directory": "clients/cli"
+  },
+  "bugs": {
+    "url": "https://github.com/dodi-education/dodi-app/issues"
+  },
+  "keywords": [
+    "dodi",
+    "cli",
+    "mcp",
+    "ai-agent",
+    "learning-games",
+    "kids",
+    "e2ee"
+  ],
+  "type": "module",
+  "bin": {
+    "dodi": "./dist/dodi.js"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "engines": {
+    "node": ">=20"
+  },
+  "dependencies": {
+    "yaml": "^2.9.1"
+  },
+  "peerDependencies": {
+    "playwright": ">=1.50.0"
+  },
+  "peerDependenciesMeta": {
+    "playwright": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "esbuild": "^0.28.2",
+    "tsx": "4.23.13",
+    "typescript": "^5",
+    "vitest": "^4.1.8",
+    "zod": "^4.3.6",
+    "@dodi/ai": "0.0.0",
+    "@dodi/character": "0.0.0",
+    "@dodi/crypto": "0.0.0",
+    "@dodi/games": "0.0.0",
+    "@dodi/intl": "0.0.0",
+    "@dodi/protocol": "0.0.0",
+    "@dodi/types": "0.0.0",
+    "@dodi/screenshot": "0.0.0",
+    "@dodi/vault": "0.0.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": false
+  },
+  "scripts": {
+    "dev": "tsx src/index.ts",
+    "build": "node scripts/build.mjs",
+    "typecheck": "tsc --noEmit",
+    "lint": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  }
 }