@foldspace_npm/harness 0.1.27 → 0.1.28

package/src/lint/rules.mjs

@@ -57,7 +57,7 @@ const IMPERATIVE_PATTERNS = [
 const EMOJI_PATTERN = /\p{Extended_Pictographic}/u;
 
 const PROMPT_FIX =
-  "Put the wording in the action or agent instructions via MCP or Agent Studio; return data only.";
+  "Put the wording in the action's instructions (with the Foldspace tools or in Agent Studio) or in the agent's instructions (Agent Studio only); return data only.";
 
 function mergeBindings(fn, sourceFile) {
   return new Map([
@@ -98,7 +98,7 @@ function inspectReturnedObject(obj, bindings, sourceFile, relative, findings, or
           sourceFile,
           node: at,
           file: relative,
-          message: `${origin} sends the copilot operating instructions ('${text.slice(0, 80)}').`,
+          message: `${origin} sends the agent operating instructions ('${text.slice(0, 80)}').`,
           fix: PROMPT_FIX,
         }),
       );
@@ -128,19 +128,29 @@ export function ruleNoStaticAgentPrompt(sourceFile, relative, findings) {
     }
 
     if (name === "render") {
-      const cbName = callbackParamName(fn);
-      forEachCallNamed(fn, cbName, (call) => {
-        const arg = call.arguments[0];
-        if (!arg) return;
-        inspectReturnedObject(
-          resolveNode(arg, bindings),
-          bindings,
-          sourceFile,
-          relative,
-          findings,
-          "callback",
-        );
-      });
+      // What a card hands to callback, and to readyState (render's 6th
+      // parameter), reaches the agent as the card's result - check both.
+      const params = fn.parameters || [];
+      const readyName =
+        params.length >= 6 && ts.isIdentifier(params[5].name) ? params[5].name.text : null;
+      for (const [paramName, origin] of [
+        [callbackParamName(fn), "callback"],
+        [readyName, "readyState"],
+      ]) {
+        if (!paramName) continue;
+        forEachCallNamed(fn, paramName, (call) => {
+          const arg = call.arguments[0];
+          if (!arg) return;
+          inspectReturnedObject(
+            resolveNode(arg, bindings),
+            bindings,
+            sourceFile,
+            relative,
+            findings,
+            origin,
+          );
+        });
+      }
     }
   });
 }
@@ -208,8 +218,8 @@ function reportEmoji(node, sourceFile, relative, findings) {
       sourceFile,
       node,
       file: relative,
-      message: "Emoji in handler or widget copy reads as off-brand in a product UI that has none.",
-      fix: "Strip the glyph from handler/render copy. Put “no emoji” in the agent's Behavior instructions; the MCP cannot write that field, so each new action's Studio instructions must carry the line too.",
+      message: "Emoji in handler or card copy reads as off-brand in a product UI that has none.",
+      fix: "Strip the glyph from handler/render copy. Put “no emoji” in the agent's Behavior instructions; the Foldspace tools cannot write that field, so each new action's Studio instructions must carry the line too.",
     }),
   );
 }
@@ -450,30 +460,218 @@ export function ruleRegistryIntegrity({ indexFile, indexSource, actionFiles, pro
   }
 }
 
-// The panel saves every rendered card to the conversation history as an image
-// drawn with html2canvas, which cannot parse modern colour functions: one such
-// value and the saved card is blank ("data:," where the card was - seen on a
-// CRM, 2026-09-22). Hex and rgba survive.
-const UNSNAPSHOTTABLE_COLOR = /\b(oklch|oklab|lch|lab|color-mix|light-dark)\s*\(/i;
-
-export function ruleNoUnsnapshottableColor(sourceFile, relative, findings) {
-  forEachStringLiteral(sourceFile, (node) => {
-    if (ts.isImportDeclaration(node.parent) || ts.isExportDeclaration(node.parent)) return;
-    const text = node.getText(sourceFile);
-    const match = UNSNAPSHOTTABLE_COLOR.exec(text);
-    if (!match) return;
-    findings.push(
-      finding({
-        rule: "no-unsnapshottable-color",
-        severity: "error",
-        sourceFile,
-        node,
-        file: relative,
-        message: `${match[1]}() in a card: the panel saves cards to history as an image drawn with html2canvas, which cannot read it - the saved card comes out blank.`,
-        fix: "Use plain hex or rgba. Do not read the app's CSS variables either: on modern apps they resolve to oklch.",
-      }),
-    );
-  });
+// The card contract of the page SDK. A card is a view card or an input card.
+// An input card's render uses one of its 4th to 6th parameters - callback,
+// cancel, readyState - and the agent waits until callback or cancel runs, or
+// until readyState reports. A view card uses none of them: as soon as render
+// returns, the agent is told it was shown, with everything execute returned.
+// awaitUserInput is never needed. The chat panel ignores it; in headless mode
+// awaitUserInput: true forces the wait, so on a view card the agent waits for
+// a callback that never comes.
+//
+// "Uses" is read the way the SDK reads render in the built bundle, where
+// parameters are renamed and types are erased: the parameter's name anywhere
+// in the body, nested functions included, but not as a property name
+// (`host.callback`, `{ callback: 1 }`) and not inside a type. A destructured
+// parameter, a `...rest` parameter or `arguments` count as used. A TypeScript
+// `this` parameter is erased, so it takes no position.
+const CARD_PARAMS = ["callback", "cancel", "readyState"];
+
+function mentions(fn, test) {
+  let found = false;
+  function walk(node) {
+    if (found) return;
+    if (ts.isIdentifier(node) && test(node.text)) {
+      const parent = node.parent;
+      const isName =
+        parent &&
+        (ts.isPropertyAccessExpression(parent) ||
+          ts.isPropertyAssignment(parent) ||
+          ts.isMethodDeclaration(parent) ||
+          ts.isPropertyDeclaration(parent) ||
+          ts.isGetAccessorDeclaration(parent) ||
+          ts.isSetAccessorDeclaration(parent)) &&
+        parent.name === node;
+      const isKey = parent && ts.isBindingElement(parent) && parent.propertyName === node;
+      let inType = false;
+      for (let up = parent; up && up !== fn; up = up.parent) {
+        if (ts.isTypeNode(up) && !ts.isExpressionWithTypeArguments(up)) {
+          inType = true;
+          break;
+        }
+      }
+      if (!isName && !isKey && !inType) {
+        found = true;
+        return;
+      }
+    }
+    ts.forEachChild(node, walk);
+  }
+  if (fn.body) walk(fn.body);
+  return found;
+}
+
+/** What the SDK concludes about a render function: does the agent wait, and which card parameters are declared but unused. */
+function readRender(fn) {
+  const params = fn.parameters.filter((param) => !(ts.isIdentifier(param.name) && param.name.text === "this"));
+  const cardParams = params.slice(3, 3 + CARD_PARAMS.length);
+  const restOrArguments = params.some((param) => param.dotDotDotToken) || mentions(fn, (name) => name === "arguments");
+  const destructured = cardParams.some((param) => !ts.isIdentifier(param.name));
+  const names = cardParams.filter((param) => ts.isIdentifier(param.name)).map((param) => param.name.text);
+  const used = names.filter((name) => mentions(fn, (text) => text === name));
+  const waits = restOrArguments || destructured || used.length > 0;
+  return { waits, declaredUnused: !waits && names.length > 0 ? names : [] };
+}
+
+// The function `render` names: inline, a method, or - for `render` and
+// `render: renderCard` - a `function` or `const` of that name in the same file.
+function declaredFunction(sourceFile, name) {
+  let found = null;
+  function walk(node) {
+    if (found) return;
+    if (ts.isFunctionDeclaration(node) && node.name?.text === name) {
+      found = node;
+      return;
+    }
+    if (ts.isVariableDeclaration(node) && ts.isIdentifier(node.name) && node.name.text === name && isFunctionLike(node.initializer)) {
+      found = node.initializer;
+      return;
+    }
+    ts.forEachChild(node, walk);
+  }
+  walk(sourceFile);
+  return found;
+}
+
+function renderFunction(sourceFile, member) {
+  if (ts.isMethodDeclaration(member)) return member;
+  if (ts.isShorthandPropertyAssignment(member)) return declaredFunction(sourceFile, member.name.text);
+  let value = member.initializer;
+  while (
+    value &&
+    (ts.isParenthesizedExpression(value) ||
+      ts.isAsExpression(value) ||
+      ts.isSatisfiesExpression(value) ||
+      ts.isNonNullExpression(value) ||
+      ts.isTypeAssertionExpression(value))
+  )
+    value = value.expression;
+  if (isFunctionLike(value)) return value;
+  if (value && ts.isIdentifier(value)) return declaredFunction(sourceFile, value.text);
+  return null;
+}
+
+export function ruleCardContract(sourceFile, relative, findings) {
+  function walk(node) {
+    if (ts.isObjectLiteralExpression(node)) {
+      const members = node.properties;
+      const render = members.find(
+        (member) =>
+          propertyName(member) === "render" &&
+          (ts.isPropertyAssignment(member) || ts.isMethodDeclaration(member) || ts.isShorthandPropertyAssignment(member)),
+      );
+      const fn = render ? renderFunction(sourceFile, render) : null;
+      if (fn) {
+        const { waits, declaredUnused } = readRender(fn);
+        const flag = members.find((member) => propertyName(member) === "awaitUserInput");
+        const flagTrue = flag && ts.isPropertyAssignment(flag) && flag.initializer.kind === ts.SyntaxKind.TrueKeyword;
+        if (flagTrue && !waits) {
+          findings.push(
+            finding({
+              rule: "card-contract",
+              severity: "error",
+              sourceFile,
+              node: flag.name,
+              file: relative,
+              message:
+                "A view card (render uses neither callback nor cancel) sets awaitUserInput: true. The chat panel ignores it, but in headless mode the agent then waits for a callback that never comes.",
+              fix: "Remove awaitUserInput. A view card is reported to the agent as shown, with what execute returned.",
+            }),
+          );
+        }
+        if (flag && !waits && !flagTrue) {
+          findings.push(
+            finding({
+              rule: "card-contract",
+              severity: "warning",
+              sourceFile,
+              node: flag.name,
+              file: relative,
+              message:
+                "A view card does not need awaitUserInput: render uses neither callback nor cancel, so the agent is told the card was shown, with what execute returned.",
+              fix: "Remove awaitUserInput.",
+            }),
+          );
+        }
+        if (flag && waits) {
+          findings.push(
+            finding({
+              rule: "card-contract",
+              severity: "warning",
+              sourceFile,
+              node: flag.name,
+              file: relative,
+              message:
+                "An input card does not need awaitUserInput: render uses callback, cancel or readyState, and that is what makes the agent wait.",
+              fix: 'Remove awaitUserInput. Then check that every path calls callback or cancel - choosing, "none of these", closing the card, failing. When the conversation should go on while the user decides, call readyState(value) once the card is drawn.',
+            }),
+          );
+        }
+        if (declaredUnused.length > 0) {
+          const list =
+            declaredUnused.length === 1
+              ? declaredUnused[0]
+              : `${declaredUnused.slice(0, -1).join(", ")} and ${declaredUnused.at(-1)}`;
+          const unused = declaredUnused.length === 1 ? "never uses it" : "uses none of them";
+          findings.push(
+            finding({
+              rule: "card-contract",
+              severity: "warning",
+              sourceFile,
+              node: render.name,
+              file: relative,
+              message: `render declares ${list} but ${unused} - the SDK treats the card as a view card: the agent is told it was shown, with what execute returned.`,
+              fix: `For a view card, remove ${list} from render. For an input card, call callback or cancel on every path, or readyState(value) once the card is drawn.`,
+            }),
+          );
+        }
+      }
+    }
+    ts.forEachChild(node, walk);
+  }
+  walk(sourceFile);
+}
+
+// Test mode belongs to `attach --test-mode`, which never touches the bundle.
+// A call in agent code that turns it on can ship to production and mark real
+// users' conversations as test traffic. A call to `setTestMode` by name is
+// refused unless its first argument is the literal `false`. A call to
+// `armAllInstances` by name is always refused: even with `false` it sends a
+// partial `setConfiguration` to every instance.
+export function ruleNoTestModeInBundle(sourceFile, relative, findings) {
+  const walk = (node) => {
+    if (ts.isCallExpression(node)) {
+      const callee = node.expression;
+      const name = ts.isPropertyAccessExpression(callee) ? callee.name.text : ts.isIdentifier(callee) ? callee.text : "";
+      const first = node.arguments[0];
+      const setTestModeOff = name === "setTestMode" && first && first.kind === ts.SyntaxKind.FalseKeyword;
+      if ((name === "setTestMode" || name === "armAllInstances") && !setTestModeOff) {
+        findings.push(
+          finding({
+            rule: "no-test-mode-in-bundle",
+            severity: "error",
+            sourceFile,
+            node,
+            file: relative,
+            message: `\`${name}\` does not belong in agent code: any file in \`agent/\` can ship to production, where test mode would stop real users' conversations being tracked.`,
+            fix: "Remove it. Test mode is only for an agent that already has real users, and only through `npx foldspace attach --test-mode`, which never touches the bundle. For an agent with no real users yet, leave test mode off.",
+          }),
+        );
+      }
+    }
+    ts.forEachChild(node, walk);
+  };
+  walk(sourceFile);
 }
 
 export function lintActionFile(filePath, relative, findings) {
@@ -482,11 +680,10 @@ export function lintActionFile(filePath, relative, findings) {
   ruleNoStaticAgentPrompt(sourceFile, relative, findings);
   ruleNoRunTaskPrompt(sourceFile, relative, findings);
   ruleNoEmoji(sourceFile, relative, findings);
-  ruleNoUnsnapshottableColor(sourceFile, relative, findings);
+  ruleCardContract(sourceFile, relative, findings);
 }
 
 export function lintViewsFile(filePath, relative, findings) {
   const sourceFile = parseFile(filePath);
   ruleNoEmoji(sourceFile, relative, findings, { wholeFile: true });
-  ruleNoUnsnapshottableColor(sourceFile, relative, findings);
 }

package/src/observe-core.mjs

@@ -44,7 +44,7 @@ export function isSameSite(url, pageUrl, hosts = []) {
 }
 
 /**
- * One product often lives on several hosts (www., analyze., admin. ...), and a
+ * One product often lives on several hosts (www., reports., admin. ...), and a
  * project only works on the hosts it names. Given addresses seen from a page,
  * say which hosts look like the same product but are NOT covered, and the one
  * pattern that would cover them. The site is an approximation (see siteOf), so
@@ -81,7 +81,7 @@ export function uncoveredSiblings(urls, pageUrl, hosts = []) {
     hint:
       `This product also lives on ${found.slice(0, 4).map((entry) => entry.host).join(", ")}` +
       `${found.length > 4 ? ` and ${found.length - 4} more` : ""}, which this project does not cover. ` +
-      `To work there, add "${pattern}" to "hosts" in foldspace.dev.json - with the human's yes - then run inject and attach again.`,
+      `To work there, add "${pattern}" to "hosts" in foldspace.dev.json - with the human's yes - then \`npx foldspace attach --stop\`, \`npm run inject\` and \`npx foldspace attach --daemon\` with the flags it ran with.`,
   };
 }
 
@@ -132,7 +132,7 @@ export function gotoDestination(input, pageUrl, hosts = []) {
     throw new Error(
       `--goto: ${target.hostname} is not one of this project's hosts (${hosts.join(", ") || "none named"}). ` +
         (coverage.pattern
-          ? `If it is part of the product, add "${coverage.pattern}" to "hosts" in foldspace.dev.json - with the human's yes - then run inject and attach again.`
+          ? `If it is part of the product, add "${coverage.pattern}" to "hosts" in foldspace.dev.json - with the human's yes - then \`npx foldspace attach --stop\`, \`npm run inject\` and \`npx foldspace attach --daemon\` with the flags it ran with. If it is not, --goto a screen on this project's hosts.`
           : "observe only opens screens of the product this project is for."),
     );
   }
@@ -398,6 +398,11 @@ export function rankCandidates(candidates, words = [], max = 8) {
 
 const WRITE_FLAGS = ["method", "data", "body", "header", "headers", "json", "post", "put", "delete"];
 
+/** True for an option that would make `observe read` write (`--method`, `--body`, ...). */
+export function isWriteFlag(option) {
+  return WRITE_FLAGS.includes(String(option || "").replace(/^--/, ""));
+}
+
 /**
  * `observe read` is GET only. There is deliberately no way to pick a method,
  * add a header or send a body: anything else belongs in an action handler the
@@ -407,7 +412,7 @@ export function refuseWriteFlags(flags = {}) {
   const asked = WRITE_FLAGS.filter((name) => name in flags);
   if (asked.length) {
     throw new Error(
-      `observe read is GET only and never sends a body (refused: ${asked
+      `observe read is GET only - it never sets a method, a header or a body (refused: ${asked
         .map((name) => `--${name}`)
         .join(", ")}).`,
     );
@@ -706,8 +711,9 @@ export function looksLoggedIn({ url, hasPasswordField = false, hosts = [] }) {
 
 /** Computed colours come back as rgb()/rgba(); anything else passes through. */
 // oklch / oklab, as modern apps write their palettes and as Chrome reports
-// them back, converted to sRGB. Cards must be plain hex: the panel saves them
-// to history as an image drawn by a library that cannot read these.
+// them back, converted to sRGB hex like rgb() and rgba(): brandFile checks
+// contrast and works out its other keys from hex. lab(), lch() and color()
+// pass through; brandFile writes a default in their place.
 function okToHex(text) {
   const match = /^(oklch|oklab)\(\s*([\d.]+%?)\s+(-?[\d.]+%?)\s+(-?[\d.]+)(?:deg)?\s*(?:\/\s*([\d.]+%?))?\s*\)$/i.exec(text);
   if (!match) return null;
@@ -770,57 +776,180 @@ function luminance(hex) {
 
 const isHex = (value) => /^#[0-9a-f]{6}([0-9a-f]{2})?$/i.test(String(value || ""));
 
+/** `share` of the way from one #RRGGBB to another, channel by channel. */
+function mixHex(from, to, share) {
+  const channels = (hex) => [1, 3, 5].map((start) => parseInt(hex.slice(start, start + 2), 16));
+  const target = channels(to);
+  return `#${channels(from)
+    .map((value, i) => Math.round(value + (target[i] - value) * share).toString(16).padStart(2, "0"))
+    .join("")
+    .toUpperCase()}`;
+}
+
 /**
  * `agent/views/brand.ts` from what `observe styles` sampled: the app's own
- * accent, text, border, font and radius, on the panel's white surface. A dark
- * app keeps its accent, font and radius; its light-on-dark text and borders
+ * accent, text, muted text, border, font, radius and text size, on white (the
+ * panel's default background), plus every other key a recipe card reads - a
+ * fixed colour (surface2 and the status colours), one worked out from the
+ * sampled ones, or another name for one of them. A see-through text, muted or
+ * border colour is flattened onto the white; a see-through accent keeps its
+ * colour at full strength, so a tinted button still gives the app's own accent.
+ * A text, muted, border or accent colour still too light to read on white falls
+ * back to its default and says so. A dark app keeps its font, radius, text size
+ * and (unless it is too light) its accent; its light-on-dark text and borders
  * would vanish on white, so those fall back to neutral greys and say so.
  */
-export function brandFile(styles, { url, date, agentPrimary } = {}) {
+export function brandFile(styles, { url, date } = {}) {
   const notes = [];
   const pick = (value, fallback, name) => {
     const hex = value ? toHex(value) : null; // rgb / oklch / oklab -> hex; anything else stays as it was
     if (isHex(hex)) return hex.slice(0, 7).toUpperCase();
-    if (value) notes.push(`${name}: sampled "${value}" is not a plain colour - using ${fallback}`);
+    if (value) notes.push(`${name}: sampled "${value}" could not be converted to hex - using ${fallback}`);
     return fallback;
   };
+  // A see-through colour (rgba, or hex with alpha) is drawn on the panel's
+  // white, so flatten it onto white: dropping the alpha would turn an
+  // rgba(0, 0, 0, 0.12) border, and every key worked out from it, black.
+  const onPanel = (value, fallback, name) => {
+    const hex = value ? toHex(value) : null;
+    const alpha = isHex(hex) && hex.length === 9 ? parseInt(hex.slice(7), 16) / 255 : 1;
+    return mixHex("#FFFFFF", pick(value, fallback, name), alpha);
+  };
   const background = pick(styles.background, "#FFFFFF", "background");
   const darkApp = (luminance(background) ?? 1) < 0.4;
-  if (darkApp) notes.push(`the app is dark (${background}); cards sit in the white panel, so text, muted and border are neutral greys`);
-  const text = darkApp ? "#111827" : pick(styles.text, "#111827", "text");
-  const muted = darkApp ? "#6B7280" : pick(styles.textMuted, "#6B7280", "textMuted");
-  const border = darkApp ? "#E5E7EB" : pick(styles.border, "#E5E7EB", "border");
+  if (darkApp) notes.push(`the app is dark (${background}); cards sit in the panel, white by default, so text, muted and border are neutral greys`);
+  // A colour too light to read on white - white nav text on a light app, a
+  // white button on a dark one - falls back to its default, and says so.
+  const readable = (resolve, value, fallback, name, limit) => {
+    const hex = resolve(value, fallback, name);
+    if ((luminance(hex) ?? 0) <= limit) return hex;
+    notes.push(`${name}: sampled "${value}" would not read on white - using ${fallback}`);
+    return fallback;
+  };
+  const text = darkApp ? "#111827" : readable(onPanel, styles.text, "#111827", "text", 0.6);
+  const muted = darkApp ? "#6B7280" : readable(onPanel, styles.textMuted, "#6B7280", "textMuted", 0.75);
+  const border = darkApp ? "#E5E7EB" : readable(onPanel, styles.border, "#E5E7EB", "border", 0.97);
   const buttonBackground = styles.primaryButton?.background;
-  const accent = isHex(agentPrimary)
-    ? agentPrimary.slice(0, 7).toUpperCase()
-    : pick(buttonBackground || styles.link, "#3248F2", "accent");
-  const accentSource = isHex(agentPrimary) ? "the agent's own primary colour" : buttonBackground ? "the app's primary button" : styles.link ? "the app's links" : "Foldspace blue (nothing sampled)";
-  const accentText = pick(styles.primaryButton?.color, (luminance(accent) ?? 0) > 0.6 ? "#111827" : "#FFFFFF", "accentText");
+  const accentSample = buttonBackground || styles.link;
+  // The accent keeps its colour at full strength: a tinted button such as
+  // rgba(50, 72, 242, 0.08) still gives the app's own blue, which the cards
+  // draw white text on.
+  const accent = readable(pick, accentSample, "#3248F2", "accent", 0.85);
+  // The accent is the app's only when the sample could be converted to hex
+  // and reads on white; otherwise a NOTE says why it is the default.
+  const accentFromApp = Boolean(accentSample) && !notes.some((note) => note.startsWith("accent:"));
+  const accentSource = !accentSample
+    ? "a default blue (nothing sampled)"
+    : !accentFromApp
+      ? "a default blue (see the NOTE on accent)"
+      : buttonBackground
+        ? "the app's primary button"
+        : "the app's links";
+  // Only a solid button's text is kept, and only when the accent is that
+  // button's: a see-through button's text was chosen for its tint.
+  const buttonHex = toHex(buttonBackground);
+  const buttonText = accentFromApp && isHex(buttonHex) && buttonHex.length === 7 ? styles.primaryButton?.color : null;
+  const accentText = pick(buttonText, (luminance(accent) ?? 0) > 0.6 ? "#111827" : "#FFFFFF", "accentText");
   const font = String(styles.fontFamily || "").replace(/["'\\]/g, "").trim() || "Roboto, sans-serif";
   const radius = /^\d+(\.\d+)?px$/.test(String(styles.boxRadius || "")) ? styles.boxRadius : "8px";
+  // The app's most used text size, kept to 12-16px so a card fits the panel.
+  const sampledSize = /^(\d+(?:\.\d+)?)px$/.exec(String(styles.fontSize || ""));
+  const base = sampledSize ? Math.min(16, Math.max(12, Math.round(Number(sampledSize[1])))) : 14;
+  const white = "#FFFFFF";
+  const black = "#000000";
+  const good = "#047857";
+  const warn = "#B45309";
+  const derived = {
+    textStrong: mixHex(text, black, 0.5),
+    faint: mixHex(muted, white, 0.35),
+    row: mixHex(border, white, 0.75),
+    tableHead: mixHex(border, white, 0.5),
+    accentDeep: mixHex(accent, black, 0.15),
+    accentSoft: mixHex(accent, white, 0.9),
+    headerStart: mixHex(accent, white, 0.92),
+  };
+  // One shape for every card: each recipe's brand.ts is a placeholder with
+  // these keys, in this order.
+  const values = {
+    surface: white,
+    surface2: "#F5F6FA",
+    text,
+    muted,
+    border,
+    accent,
+    accentText,
+    font,
+    radius,
+    size: { base: `${base}px`, small: `${base - 2}px` },
+    ...derived,
+    good,
+    warn,
+    warnInk: "#FEF3C7",
+    bad: "#B91C1C",
+    primary: accent,
+    tint: derived.tableHead,
+    disabled: derived.faint,
+    money: good,
+    ok: good,
+    deals: accent,
+    contacts: derived.accentDeep,
+    cases: warn,
+  };
+  const groups = {
+    textStrong: "Worked out from the values above.",
+    good: "Status colours: fixed, so green, amber and red mean the same in every app.",
+    primary: "Other names some cards use for the colours above; a new card uses the original key.",
+  };
+  const comments = {
+    surface2: "a second background: a fixed light grey",
+    accentText: isHex(toHex(buttonText))
+      ? "text on accent: the app's button text"
+      : "text on accent: white, or near-black when accent is light",
+    size: sampledSize
+      ? "base: the app's most used text size, kept to 12-16px; small: 2px less"
+      : "base: 14px (no text size was sampled); small: 2px less",
+    textStrong: "names and headings: text, halfway to black",
+    faint: "hints and empty states: muted, 35% toward white",
+    row: "row backgrounds and alternate rows: border, 75% toward white",
+    tableHead: "table heads and summary boxes: border, halfway to white",
+    accentDeep: "gradients and hover: accent, 15% toward black",
+    accentSoft: "chips, selected rows and focus rings: accent, 90% toward white",
+    headerStart: "card headers and stage tags: accent, 92% toward white",
+    good: "done, valid, amounts",
+    warn: "late, at risk, needs a look",
+    warnInk: "the light amber behind a warning tag",
+    bad: "failed, not valid, critical",
+    primary: "same as accent",
+    tint: "pick-from-a-list's head and selected row: same as tableHead",
+    disabled: "a button that cannot be pressed: same as faint",
+    money: "amounts: same as good",
+    ok: "same as good",
+    deals: "the open-deals count: same as accent",
+    contacts: "the contacts count: same as accentDeep",
+    cases: "the open-cases count: same as warn",
+  };
+  const literal = (key, value) =>
+    key === "size" ? `{ base: "${value.base}", small: "${value.small}" }` : key === "font" ? `'${value}'` : `"${value}"`;
   const stamp = `${url || "the app"}${date ? ` on ${date}` : ""}`;
   const lines = [
     `// Brand reference for this product's cards. Sampled from ${stamp} with`,
-    "// `foldspace observe styles --write`. Cards live in the agent's panel, which is",
-    "// white, so the surface is the panel's; accent, text, border, font and radius",
-    "// are the app's own. Re-run the command to re-sample; do not edit by eye.",
-    "// Plain hex only: the panel saves cards to history as an image drawn by a",
-    "// library that cannot read oklch()/lab().",
+    "// `npx foldspace observe styles --write`. Cards live in the agent's panel,",
+    "// which is white by default, so surface is white. text, muted, border, accent,",
+    "// font, radius and size are the app's own, or a default where they were not",
+    "// sampled or would not read on white; every other key's comment, or the",
+    "// heading above it, says where it comes from. Keep every key, so any recipe",
+    "// card can use this file.",
+    "// Re-run the command to re-sample; do not edit by eye.",
     `// accent: ${accentSource}.`,
     ...notes.map((note) => `// NOTE ${note}.`),
     "",
     "export const brand = {",
-    `  surface: "#FFFFFF",`,
-    `  surface2: "#F5F6FA",`,
-    `  text: "${text}",`,
-    `  muted: "${muted}",`,
-    `  border: "${border}",`,
-    `  accent: "${accent}",`,
-    `  accentText: "${accentText}",`,
-    `  font: '${font}',`,
-    `  radius: "${radius}",`,
+    ...Object.entries(values).flatMap(([key, value]) => [
+      ...(groups[key] ? [`  // ${groups[key]}`] : []),
+      `  ${key}: ${literal(key, value)},${comments[key] ? ` // ${comments[key]}` : ""}`,
+    ]),
     "} as const;",
     "",
   ];
-  return { content: lines.join("\n"), notes, values: { text, muted, border, accent, accentText, font, radius } };
+  return { content: lines.join("\n"), notes, values };
 }

package/src/region.mjs

@@ -7,7 +7,7 @@
 // points at that region's agent, recording and tracking hosts - the US SDK on
 // an EU page talks to a US backend that does not have the EU agents.
 //
-// `server`: the Product MCP's name in the editor, as the region's playbook
+// `server`: the Foldspace tools' server name in the editor, as the region's playbook
 // installs it. Distinct per region, so both can sit side by side.
 export const REGIONS = Object.freeze({
   us: Object.freeze({

package/src/runtime/agent.ts

@@ -6,7 +6,7 @@ let cached: any | null = null;
  * Foldspace SDK handle for this agent's **overlay** instance.
  *
  * Takes no `mode` on purpose: `foldspace.agent({ apiName })` returns the overlay
- * handle. On an app that embeds the copilot in-page that is not the instance
+ * handle. On an app that embeds the agent in-page that is not the instance
  * serving the chat, so arming only it succeeds and leaves real conversations
  * untagged. For a specific instance, enumerate `window.foldspace.agentIds()`
  * (`"<mode>-<apiName>"`) and call `foldspace.agent({ apiName, mode })`.
@@ -25,20 +25,24 @@ export function getAgent(): any | null {
 }
 
 /**
- * Arm every Foldspace instance on the page for test mode and remote actions.
+ * Turns test mode on or off (`testMode`) on every Foldspace instance on the
+ * page (`window.foldspace.agentIds()`) and turns on their remote actions: SDK
+ * `setTestMode(testMode)` and `setConfiguration({ remoteActionsSettings })`.
  *
- * Calls SDK `setTestMode` and `setConfiguration({ remoteActionsSettings })`.
- * Local `foldspace attach` already injects test-mode arming without putting it
- * in `dist/index.js`. Prefer that. Importing this helper from an action can
- * ship those calls into the production CDN bundle.
+ * It does not belong in agent code: any file in `agent/` can ship to
+ * production, where test mode would stop real users' conversations being
+ * tracked. Leave it out even with `false`, which lint refuses too: it still
+ * calls `setConfiguration` on every instance, and a partial `setConfiguration`
+ * can shrink the agent's panel to 0×0. Test mode is only for an agent that
+ * already has real users, and only through `npx foldspace attach --test-mode`,
+ * which never touches the bundle. For an agent with no real users yet, leave
+ * test mode off.
  *
- * Do not call from `execute`. Partial `setConfiguration` has collapsed the
- * widget to 0×0 in a real build.
- *
- * @param testMode - When true, mark conversations as test traffic
- * @returns Instance ids that armed vs failed
+ * @param testMode - `true` marks new conversations on this page as test
+ *   traffic; `false` (the default) turns that off.
+ * @returns The instance ids it set (`armed`) and the ones that threw (`failed`)
  */
-export function armAllInstances(testMode = true): {
+export function armAllInstances(testMode = false): {
   armed: string[];
   failed: string[];
 } {