@bezda/rhp-mcp 0.1.0 → 0.1.2

package/src/check/network.js

@@ -0,0 +1,168 @@
+// What a checked page may reach on the network. The page runs code the checker did not write, so its requests to the
+// web are made here, in Node, under three rules:
+//   - only public addresses: never loopback, private, link-local, shared (CGNAT), multicast or reserved ones, checked
+//     on the address actually connected to (so neither a redirect nor a DNS answer that changes can reach one)
+//   - only requests that read: GET, HEAD and OPTIONS (a chart reads fonts, scripts, styles, images and data while it
+//     renders; it has no reason to send anything)
+//   - the same 5 seconds and 5 redirects as before
+import dns from "dns";
+import net from "net";
+import http from "http";
+import https from "https";
+import zlib from "zlib";
+
+const MAX_BODY = 64 * 1024 * 1024;
+
+const BLOCKED = new net.BlockList();
+for (const [address, prefix] of [
+  ["0.0.0.0", 8], ["10.0.0.0", 8], ["100.64.0.0", 10], ["127.0.0.0", 8], ["169.254.0.0", 16], ["172.16.0.0", 12],
+  ["192.0.0.0", 24], ["192.0.2.0", 24], ["192.88.99.0", 24], ["192.168.0.0", 16], ["198.18.0.0", 15],
+  ["198.51.100.0", 24], ["203.0.113.0", 24], ["224.0.0.0", 4], ["240.0.0.0", 4],
+]) BLOCKED.addSubnet(address, prefix, "ipv4");
+for (const [address, prefix] of [
+  ["::", 128], ["::1", 128], ["64:ff9b::", 96], ["100::", 64], ["2001:db8::", 32], ["fc00::", 7], ["fe80::", 10], ["ff00::", 8],
+]) BLOCKED.addSubnet(address, prefix, "ipv6");
+
+// Whether an IP address is one a page may not reach (an IPv4 address written as IPv6 is judged as IPv4)
+export function isPrivate(ip) {
+
+  const mapped = /^::ffff:(\d+\.\d+\.\d+\.\d+)$/i.exec(ip);
+  if (mapped) return BLOCKED.check(mapped[1], "ipv4");
+  // URL canonicalizes IPv6 spellings, including dotted and expanded IPv4-mapped addresses.
+  if (net.isIP(ip) === 6) {
+    const canonical = new URL(`http://[${ip}]/`).hostname.slice(1, -1);
+    const hex = /^::ffff:([\da-f]+):([\da-f]+)$/i.exec(canonical);
+    if (hex) {
+      const a = parseInt(hex[1], 16), b = parseInt(hex[2], 16);
+      return BLOCKED.check(`${a >> 8}.${a & 255}.${b >> 8}.${b & 255}`, "ipv4");
+    }
+  }
+  const family = net.isIP(ip);
+  if (!family) return true;
+
+  return BLOCKED.check(ip, family === 4 ? "ipv4" : "ipv6");
+}
+
+const blocked = (why) => Object.assign(new Error(why), { code: "EBLOCKED" });
+
+// dns.lookup that refuses names answering with an address a page may not reach. Node calls it for every connection,
+// so the address checked is the one connected to.
+function publicLookup(hostname, options, callback) {
+
+  dns.lookup(hostname, { ...options, all: true }, (err, addresses) => {
+    if (err) return callback(err);
+    const bad = addresses.find((a) => isPrivate(a.address));
+    if (bad) return callback(blocked(`${hostname} is at ${bad.address}, which is not a public address`));
+    if (options.all) return callback(null, addresses);
+    return callback(null, addresses[0].address, addresses[0].family);
+  });
+}
+
+export const READ_METHODS = new Set(["GET", "HEAD", "OPTIONS"]);
+
+// Request headers that belong to one connection, or that would have the server compress (the body is handed to the
+// browser as it is, so it is asked for plain)
+const DROP_REQUEST = new Set(["host", "connection", "keep-alive", "proxy-connection", "transfer-encoding", "upgrade", "accept-encoding", "content-length"]);
+const DROP_RESPONSE = new Set(["connection", "keep-alive", "transfer-encoding", "content-encoding", "content-length"]);
+
+function once(url, method, headers, deadline) {
+
+  return new Promise((resolve) => {
+    const u = new URL(url);
+    const host = u.hostname.replace(/^\[|\]$/g, "");
+    if (net.isIP(host) && isPrivate(host)) return resolve({ error: `${host} is not a public address`, blocked: true });
+    const left = deadline - Date.now();
+    if (left <= 0) return resolve({ error: "Timeout" });
+    const sendHeaders = { "accept-encoding": "identity" };
+    for (const [k, v] of Object.entries(headers)) if (!DROP_REQUEST.has(k.toLowerCase())) sendHeaders[k] = v;
+    let timer;
+    let done = false;
+    const finish = (result) => {
+      if (done) return;
+      done = true;
+      clearTimeout(timer);
+      resolve(result);
+    };
+    const req = (u.protocol === "https:" ? https : http).request(u, { method, headers: sendHeaders, lookup: publicLookup }, (res) => {
+      const chunks = [];
+      let size = 0;
+      res.on("data", (c) => {
+        size += c.length;
+        if (size > MAX_BODY) req.destroy(new Error("Response exceeds 64 MB"));
+        else chunks.push(c);
+      });
+      res.on("end", () => {
+        if (done) return;
+        try {
+          let body = Buffer.concat(chunks);
+          // Some servers compress even when identity was requested.
+          const encoding = String(res.headers["content-encoding"] ?? "identity").toLowerCase();
+          const decode = { gzip: zlib.gunzipSync, deflate: zlib.inflateSync, br: zlib.brotliDecompressSync }[encoding];
+          if (decode) body = decode(body, { maxOutputLength: MAX_BODY });
+          else if (encoding !== "identity") throw new Error(`Unsupported content encoding: ${encoding}`);
+          finish({ status: res.statusCode, headers: res.headers, body });
+        } catch (e) {
+          finish({ error: e.message });
+        }
+      });
+      res.on("error", (e) => finish({ error: e.message }));
+    });
+    // One wall-clock deadline covers DNS, headers, the body, and every redirect.
+    timer = setTimeout(() => req.destroy(new Error("Timeout while fetching chart asset")), left);
+    req.on("error", (e) => finish({ error: e.message, blocked: e.code === "EBLOCKED" }));
+    req.end();
+  });
+}
+
+// Fetches a URL for the page: { status, headers, body }, or { error, blocked } when it is not allowed or fails
+export async function fetchPublic(url, { method = "GET", headers = {}, timeout = 5000, maxRedirects = 5 } = {}) {
+
+  method = method.toUpperCase();
+  if (!READ_METHODS.has(method)) return { error: `${method} requests are not sent: the check only reads from the web`, blocked: true };
+
+  const deadline = Date.now() + timeout;
+  let current = url;
+
+  for (let hop = 0; ; hop++) {
+    if (!/^https?:$/.test(new URL(current).protocol)) return { error: `${new URL(current).protocol} is not fetched`, blocked: true };
+    const got = await once(current, method, headers, deadline);
+    if (got.error) return got;
+    const location = got.headers.location;
+    if (got.status >= 300 && got.status < 400 && location && got.status !== 304) {
+      if (hop >= maxRedirects) return { error: `More than ${maxRedirects} redirects` };
+      const next = new URL(location, current);
+      if (next.origin !== new URL(current).origin) {
+        headers = Object.fromEntries(Object.entries(headers).filter(([k]) => !["authorization", "cookie", "proxy-authorization"].includes(k.toLowerCase())));
+      }
+      current = next.href;
+      continue;
+    }
+    const out = {};
+    for (const [k, v] of Object.entries(got.headers)) if (!DROP_RESPONSE.has(k)) out[k] = Array.isArray(v) ? v.join(", ") : String(v);
+    return { status: got.status, headers: out, body: got.body };
+  }
+}
+
+// A final network fence for renderer traffic not handled by Playwright's page routes (for example worker sockets).
+// Known HTTP asset requests are fulfilled by the Node fetcher before reaching this proxy.
+// Nothing accepted here is forwarded, and Chromium must proxy loopback traffic too.
+export async function denyBrowserNetwork(onBlocked) {
+  const deny = (request, socket) => {
+    onBlocked(request.url);
+    socket.destroy();
+  };
+  const server = http.createServer((request, response) => {
+    onBlocked(request.url);
+    response.writeHead(403).end();
+  });
+  server.on("connect", deny);
+  server.on("upgrade", deny);
+  await new Promise((resolve, reject) => {
+    server.once("error", reject);
+    server.listen(0, "127.0.0.1", resolve);
+  });
+  return {
+    proxy: { server: `http://127.0.0.1:${server.address().port}`, bypass: "<-loopback>" },
+    close: () => new Promise((resolve) => { server.close(resolve); server.closeAllConnections(); }),
+  };
+}

package/src/check/png.js

@@ -96,3 +96,21 @@ export function pixelsIn(image, { left, top, right, bottom }) {
 
   return out;
 }
+
+// How many pixels of two screenshots of one box differ enough to see (their channels by more than 24 in all: a
+// tint of 6% of the ink over the paper shows, drawing one page twice changes nothing)
+export function seenPixels(a, b) {
+
+  if (a.equals(b)) return 0;
+
+  const x = decode(a);
+  const y = decode(b);
+  if (x.width !== y.width || x.height !== y.height) return Infinity;
+
+  let n = 0;
+  for (let i = 0; i < x.data.length; i += 4) {
+    if (Math.abs(x.data[i] - y.data[i]) + Math.abs(x.data[i + 1] - y.data[i + 1]) + Math.abs(x.data[i + 2] - y.data[i + 2]) > 24) n++;
+  }
+
+  return n;
+}

package/src/check/report.js

@@ -52,7 +52,7 @@ export function report(r) {
   section("info", "Notes");
 
   const codes = new Set(r.findings.map((f) => f.code));
-  if (r.charts?.length || r.screenshots?.length) {
+  if (!codes.has("page-unsettled") && (r.charts?.length || r.screenshots?.length)) {
     const passed = [];
     for (const [fail, text] of PASSES) {
       if (fail.some((c) => codes.has(c))) continue;
@@ -88,6 +88,9 @@ export function report(r) {
       if (quiet.includes(x.kind)) continue;
       lines.push(`- ${x.kind} ${x.target}${x.width !== r.interactedAt ? ` at ${x.width}px` : ""}: ${x.how}${x.error ? `, and it threw: ${x.error}` : ""}`);
     }
+    // the sweep: one line, every width at which every slat was picked in turn
+    const swept = (r.swept ?? []).filter((x) => x.slats);
+    if (swept.length) lines.push(`- every slat picked in turn (${swept[0].slats}) at ${swept.map((x) => `${x.width}px`).join(", ")}: ${swept.some((x) => x.jumps) ? "the layout jumped (see the warnings)" : "nothing else moved"}`);
   } else if (r.charts?.length && r.interactedAt) {
     lines.push("", "Interactions: nothing to interact with (no slats to point at, no buttons, ranges or selects).");
   }

package/src/check/selection.js

@@ -0,0 +1,123 @@
+// A conditional audit of an existing click selection with a temporary hover override.
+// No click selection or no temporary hover means there is no interaction policy to repair here.
+// Run on a disposable page: clicks must not change the starting state of the normal interaction pass.
+import { seenPixels } from "./png.js";
+
+const SAME = 20;
+const same = (a, b) => seenPixels(a, b) < SAME;
+const name = (s) => `slat ${s.index} of ${s.of}${s.name ? ` (${s.name})` : ""}`;
+
+// Safe space inside this chart's poster, outside every chart and every control.
+// Pointing at text is safe; clicking a link, a legend button or another chart is not a reset gesture.
+function beside(target) {
+  const slat = window.__rhpTargets[target];
+  const poster = slat?.closest(".poster, figure");
+  if (!poster) return null;
+  const busy = "a, button, input, select, textarea, label, summary, [role], [tabindex], [contenteditable]";
+  const box = poster.getBoundingClientRect();
+  let margin = null;
+  for (let y = Math.max(12, box.top + 6); y < Math.min(innerHeight - 12, box.bottom - 6); y += 16) {
+    for (let x = Math.max(12, box.left + 6); x < Math.min(innerWidth - 12, box.right - 6); x += 16) {
+      const el = document.elementFromPoint(x, y);
+      if (!el || !poster.contains(el) || el.closest(".rhp-chart") || el.closest(busy)) continue;
+      const text = [...el.childNodes].some((n) => n.nodeType === 3 && n.textContent.trim());
+      const point = { x, y, what: text ? `"${el.textContent.trim().replace(/\s+/g, " ").slice(0, 40)}"` : "the poster's margin" };
+      if (text) return point;
+      margin ??= point;
+    }
+  }
+  return margin;
+}
+
+export async function selectionBehavior(page, { events }) {
+  const findings = [];
+  const audit = { findings, tested: null };
+  const start = events.length;
+  let doing = "checking existing selection and hover";
+  const settle = async () => {
+    const state = await page.evaluate(() => window.__rhpProbe.settle(1000));
+    if (!state.rest) throw new Error("The page is moving");
+  };
+  const look = async () => {
+    await settle();
+    return page.screenshot({ animations: "disabled", scale: "css" });
+  };
+  const away = async () => {
+    await page.mouse.move(-1, -1);
+    await settle();
+  };
+  const pointAt = (s) => page.evaluate((n) => window.__rhpProbe.pointAt(n, 0.5, false), s.target);
+  try {
+    // Use reachable marks, including marks inside a slat, from the main Plot.
+    // Keep the window still throughout the sequence so scrolling and sticky readouts cannot mimic a state change.
+    const slats = await page.evaluate(() => window.__rhpProbe.sweepTargets(12));
+    if (slats.length < 2) return audit;
+    await page.evaluate((n) => window.__rhpProbe.pointAt(n), slats[0].target);
+    await away();
+    const position = await page.evaluate(() => [scrollX, scrollY]);
+    const candidates = [];
+    for (const s of slats) {
+      const point = await pointAt(s);
+      if (point.covered) continue;
+      const safe = await page.evaluate(({ x, y }) => !document.elementFromPoint(x, y)?.closest("a, button, input, select, textarea, summary, [role=button], [role=slider], [contenteditable]"), point);
+      if (safe) candidates.push(s);
+      if (candidates.length === 3) break;
+    }
+    if (candidates.length < 2) return audit;
+    const off = await page.evaluate(beside, candidates[0].target);
+    if (!off) return audit;
+    const rest = await look();
+    if (!same(rest, await look())) return audit;
+    // At most three candidates, so an initial meaningful default on the first mark does not hide click selection.
+    for (const chosen of candidates) {
+      doing = `click ${name(chosen)}`;
+      const at = await pointAt(chosen);
+      if (at.covered) continue;
+      await page.mouse.click(at.x, at.y);
+      await away();
+      const pinned = await look();
+      if (same(rest, pinned)) continue;
+      for (const preview of candidates.filter((s) => s !== chosen)) {
+        doing = `hover ${name(preview)} after clicking ${name(chosen)}`;
+        const over = await pointAt(preview);
+        if (over.covered) continue;
+        await page.mouse.move(over.x, over.y);
+        const hovered = await look();
+        if (same(pinned, hovered)) continue;
+        await page.mouse.move(off.x, off.y);
+        const offChart = await look();
+        await away();
+        const restored = await look();
+        // Prove that click pins a state and hover temporarily overrides it.
+        // A hover-only chart, a click-only chart, or a scrubber that retains its last point does not qualify.
+        if (!same(pinned, restored)) continue;
+        const here = await page.evaluate(() => [scrollX, scrollY]);
+        if (position.some((v, i) => v !== here[i]) || !same(restored, await look())) return audit;
+        // Compare with the selected state at the same outside-chart pointer position (including CSS :hover).
+        await page.mouse.move(off.x, off.y);
+        const selected = await look();
+        const hoverBroken = !same(selected, offChart);
+        // This click is inside the poster, outside every chart and control.
+        doing = `click beside the chart after selecting ${name(chosen)}`;
+        await page.mouse.click(off.x, off.y);
+        await away();
+        const reset = await look();
+        const resetBroken = !same(rest, reset);
+        const end = await page.evaluate(() => [scrollX, scrollY]);
+        if (position.some((v, i) => v !== end[i]) || !same(reset, await look())) return audit;
+        audit.tested = { selected: name(chosen), preview: name(preview), hoverRestoresSelection: !hoverBroken, clickRestoresInitial: !resetBroken };
+        if (hoverBroken) findings.push({ code: "selection-hover-stays", target: name(preview), selected: name(chosen), what: off.what });
+        if (resetBroken) findings.push({ code: "selection-reset", target: name(chosen), what: off.what });
+        return audit;
+      }
+    }
+  } catch {
+    // Moving pages, covered marks and navigation cannot establish this interaction contract.
+    // The normal interaction pass reports failures to reach marks and the page's exceptions.
+  } finally {
+    for (const e of events.slice(start)) {
+      if ((e.kind === "pageerror" || e.kind === "console-error") && !e.during) e.during = doing;
+    }
+  }
+  return audit;
+}

package/src/guard/rhp.js

@@ -168,6 +168,10 @@ function inspectChart(props) {
   }
 
   checkTheme("Chart's theme", read(props, "theme"));
+  for (const prop of ["grid", "crossGrid"]) {
+    const value = read(props, prop);
+    if (value != null && typeof value !== "boolean") note("error", "bad-prop", `Chart's ${prop} is ${show(value)}.`, "Use false to hide grid lines while retaining axis numbers, or true to show them.");
+  }
 }
 
 // The keys of the objects in rows, over all of them (a row may leave one out)

package/src/guard/rules.js

@@ -25,7 +25,7 @@ export const SETTING_VALUE = {
   children: (v) => typeof v === "function",
 };
 
-export const CHART_PROPS = ["scale", "orientation", "height", "aspect", "ticks", "format", "animate", "theme", "static", "cross", "crossTicks", "crossFormat", "label", "id", "class", "role", "style", "ref", "children"];
+export const CHART_PROPS = ["scale", "orientation", "height", "aspect", "ticks", "grid", "format", "animate", "theme", "static", "cross", "crossTicks", "crossGrid", "crossFormat", "label", "id", "class", "role", "style", "ref", "children"];
 
 export const THEME_KEYS = ["series", "positive", "negative", "ink", "muted", "grid", "surface", "low", "high", "font"];
 

package/src/server.js

@@ -21,7 +21,7 @@ const LIMIT = 50;
 const MAX_WIDTH = 1280;
 const MAX_HEIGHT = 2000;
 
-const INSTRUCTIONS = `rhp 2 (@bezda/rhp) makes charts out of HTML elements and CSS with SolidJS. It came out in September 2026, after your training data, so what you remember about rhp is wrong or belongs to the unrelated rhp 1. Before you write or change any rhp code, call rhp_guide and follow its workflow. Start each chart from the closest recipe (rhp_recipe), and look up every prop you are unsure of with rhp_reference instead of guessing. After every edit, call rhp_check with the chart file's absolute path, fix what it reports and look at its screenshots, until it reports no errors and no warnings.`;
+const INSTRUCTIONS = `rhp 2 (@bezda/rhp) makes charts out of HTML elements and CSS with SolidJS. It came out in September 2026, after your training data, so what you remember about rhp is wrong or belongs to the unrelated rhp 1. Before you write or change any rhp code, call rhp_guide and follow its workflow. Take each chart's technique from the closest recipe (rhp_recipe) and design the chart for its own subject, and look up every prop you are unsure of with rhp_reference instead of guessing. After every edit, call rhp_check with the chart file's absolute path, fix what it reports and look at its screenshots, until it reports no errors and no warnings.`;
 
 const text = (body) => ({ content: [{ type: "text", text: body }] });
 const failure = (body) => ({ content: [{ type: "text", text: body }], isError: true });
@@ -112,7 +112,7 @@ async function images(browser, shots) {
 }
 
 // Checks a chart: the report, then each screenshot as an image after a line saying what it shows
-async function checkTool({ file, code, format, widths, dark, interact }) {
+async function checkTool({ file, code, format, widths, dark, interact, settleTimeout }) {
 
   if (file && code) return failure("Give file or code, not both.");
   if (!file && !code) return failure("Give the chart to check: file (the absolute path of its file) or code (its code).");
@@ -131,7 +131,7 @@ async function checkTool({ file, code, format, widths, dark, interact }) {
   const { check } = await import("./check/index.js");
   const got = await sharedBrowser();
   const browser = got.browser;
-  const running = check({ file, code, format, widths, dark, interact, browser }).then((result) => ({ result }), (error) => ({ error }));
+  const running = check({ file, code, format, widths, dark, interact, settleTimeout, browser }).then((result) => ({ result }), (error) => ({ error }));
   let timer;
   const late = new Promise((resolve) => {
     timer = setTimeout(resolve, LIMIT * 1000, { late: true });
@@ -185,9 +185,9 @@ server.registerTool("rhp_guide", {
 
 server.registerTool("rhp_reference", {
   title: "rhp reference",
-  description: "Returns one of rhp's references by name: api (every component, prop, helper and CSS variable, exactly), design (the editorial poster, looks, color, type, layout), interaction (which interaction for which story, with code), environments (plain HTML, Solid, React, Next.js, Vue, Svelte, Angular, Astro), forms (which chart for which data and story), pitfalls (mistakes and their fixes). Look props up here instead of guessing. A long reference comes back as its list of sections: call again with section to get the one you need.",
+  description: "Returns one of rhp's references by name: api (every component, prop, helper and CSS variable, exactly), design (art direction from the subject, the editorial poster, color, type, layout), looks (eight looks written out in full, as examples), interaction (which interaction for which story, with code), environments (plain HTML, Solid, React, Next.js, Vue, Svelte, Angular, Astro), forms (the subject's own form, which chart for which data and story), pitfalls (mistakes and their fixes). Look props up here instead of guessing. A long reference comes back as its list of sections: call again with section to get the one you need.",
   inputSchema: {
-    name: z.string().describe("The reference: api, design, environments, forms, interaction or pitfalls"),
+    name: z.string().describe("The reference: api, design, environments, forms, interaction, looks or pitfalls"),
     section: z.string().optional().describe('One "##" section of the reference, by its number or title, for example "4" or "Plot"'),
   },
   annotations: { readOnlyHint: true, openWorldHint: false },
@@ -200,7 +200,7 @@ server.registerTool("rhp_reference", {
 
 server.registerTool("rhp_recipe", {
   title: "rhp recipe",
-  description: 'Lists rhp\'s recipes (call it with no type), or returns one recipe\'s complete HTML file (type, for example "bar"). A recipe is a tested, designed chart page, a worked example of one way to build a chart: start every chart from the closest recipe, keep its structure and techniques, and replace its data, text and look.',
+  description: 'Lists rhp\'s recipes (call it with no type), or returns one recipe\'s complete HTML file (type, for example "bar"). A recipe is a tested chart page that shows the technique for one kind of chart: take its technique (how its Plots, slats and blocks are composed, its interaction, its phone rules) and leave its design, which was made for its own subject.',
   inputSchema: {
     type: z.string().optional().describe('The recipe, for example "bar", "line" or "donut"; leave it out for the list'),
   },
@@ -220,9 +220,10 @@ server.registerTool("rhp_check", {
     file: z.string().optional().describe("The chart file's absolute path"),
     code: z.string().optional().describe("The chart's code, instead of a file, when you cannot write files"),
     format: z.enum(["html", "solid", "react", "module"]).optional().describe("What the code is; found from the file's extension and the code when left out"),
-    widths: z.array(z.number().int().min(200).max(2560)).min(1).max(4).optional().describe("Page widths in px, [1280, 390] by default; the interactions are tried at the first, and slats are tapped at phone widths (600px or less)"),
+    widths: z.array(z.number().int().min(200).max(2560)).min(1).max(6).optional().describe("Page widths in px, [1280, 390] by default; the interactions are tried at the first, and slats are tapped at phone widths (600px or less)"),
     dark: z.boolean().optional().describe("Render with a dark color scheme (prefers-color-scheme: dark)"),
     interact: z.boolean().optional().describe("Try the chart's interactions (true by default)"),
+    settleTimeout: z.number().int().min(100).max(30000).optional().describe("Maximum milliseconds per readiness wait, 10000 by default. Increase for a slow machine; the overall check still has a 50-second limit."),
   },
   annotations: { readOnlyHint: true, openWorldHint: true },
 }, checkTool);
@@ -238,7 +239,7 @@ server.registerPrompt("chart", {
     role: "user",
     content: {
       type: "text",
-      text: `Make this chart with rhp (@bezda/rhp): ${request}\n\nFirst call rhp_guide and follow its workflow: write the brief, start from the closest recipe (rhp_recipe), and look up props with rhp_reference instead of guessing. After every edit, call rhp_check with the chart file's absolute path, fix what it reports and look at its screenshots, until it reports no errors and no warnings.`,
+      text: `Make this chart with rhp (@bezda/rhp): ${request}\n\nFirst call rhp_guide and follow its workflow: write the brief, take the technique from the closest recipe (rhp_recipe), design the chart for its own subject, and look up props with rhp_reference instead of guessing. After every edit, call rhp_check with the chart file's absolute path, fix what it reports and look at its screenshots, until it reports no errors and no warnings.`,
     },
   }],
 }));