framewatch-mcp-server 0.1.0 → 0.2.0

package/dist/utils/test-data.js

@@ -0,0 +1,294 @@
+import { MAX_FORM_FILL_LENGTH } from "../constants.js";
+/**
+ * Test data generators.
+ *
+ * One job: given a field and a strategy, say what should go in it. Nothing
+ * here touches a browser, so the interesting decisions — what "valid" means
+ * for a field called `user_email`, what happens when Arabic text meets
+ * `<input type="date">` — are testable on their own.
+ *
+ * Two rules run through all of it:
+ *
+ *   - A value must be one the field can actually hold. Chromium refuses a
+ *     malformed value outright for the constrained input types (number, date,
+ *     color and friends), so a strategy that cannot be expressed in one of
+ *     them falls back to a valid value rather than producing a fill error that
+ *     says nothing about the app.
+ *   - A value never exceeds the field's own `maxlength`. Otherwise every
+ *     strategy would report the same truncation on the same short field, and
+ *     the one report that matters — an app truncating input in JavaScript,
+ *     with no maxlength anywhere — would be lost in it.
+ */
+export const FORM_STRATEGIES = [
+    "valid",
+    "empty",
+    "maxlength",
+    "special_chars",
+    "rtl_arabic",
+    "numbers_only",
+    "spaces_only",
+    "boundary",
+    "xss",
+];
+/**
+ * What `framewatch_form_test` runs when the caller names no strategies: the
+ * happy path, the empty submit, the characters that break naive escaping, and
+ * RTL text. Between them they catch most of what a form gets wrong.
+ */
+export const DEFAULT_FORM_STRATEGIES = ["valid", "empty", "special_chars", "rtl_arabic"];
+/**
+ * The global an XSS payload sets when it executes.
+ *
+ * Payloads are written to assign this rather than to do anything: whether the
+ * marker is set after a submit is a yes/no answer to "did my input run as
+ * code", where looking for the payload in the DOM afterwards is guesswork —
+ * an input's own `value` serialises with its angle brackets intact and would
+ * read as an injection on a page that escaped everything correctly.
+ */
+export const XSS_MARKER = "__framewatch_xss";
+/** Input types whose value Chromium validates syntactically, and will not hold arbitrary text. */
+const CONSTRAINED = new Set(["number", "range", "date", "month", "week", "time", "datetime-local", "color"]);
+/** A number field's value is a syntax, not a length — a thousand digits is not a longer number, it is Infinity. */
+const MAX_NUMBER_DIGITS = 15;
+export function describeStrategy(strategy) {
+    switch (strategy) {
+        case "valid":
+            return "realistic data of the right shape for each field — the happy path";
+        case "empty":
+            return "every field cleared, then submitted — does validation catch it";
+        case "maxlength":
+            return `every field filled to its maxlength, or ${MAX_FORM_FILL_LENGTH} characters when it has none`;
+        case "special_chars":
+            return "quotes, angle brackets, backslashes, an SQL fragment, CJK, Arabic and an emoji";
+        case "rtl_arabic":
+            return "Arabic text in every field — catches RTL layout and bidirectional text bugs";
+        case "numbers_only":
+            return "digits in every field, including the ones that expect words";
+        case "spaces_only":
+            return "whitespace only — input that looks filled in but is empty once trimmed";
+        case "boundary":
+            return "the edges: one character for text, min/max for numbers and dates";
+        case "xss":
+            return "harmless XSS payloads that set a marker instead of doing damage — reported if any of them runs";
+    }
+}
+/**
+ * The value to put in a text-like field.
+ *
+ * `variant` is the field's position in the form. It is used to walk through
+ * the XSS payload list, so a form with five fields tries five different
+ * injections in one pass instead of the same one five times.
+ */
+export function valueFor(field, strategy, variant = 0) {
+    if (strategy === "empty")
+        return "";
+    if (CONSTRAINED.has(field.type))
+        return clampToRange(field, constrainedValue(field, strategy));
+    return clampLength(field, textValue(field, strategy, variant));
+}
+/**
+ * Which option a `<select>` should end up on, or null to leave it alone.
+ *
+ * Disabled options are never chosen — picking one fails, and a form that
+ * offers nothing else has a bug worth reporting on its own.
+ */
+export function optionFor(field, strategy) {
+    const enabled = field.options.filter((option) => !option.disabled);
+    // The blank option is a placeholder ("Choose one…"), which is what "empty"
+    // means for a select — and the only way to clear one from the outside.
+    const placeholder = enabled.find((option) => option.value === "");
+    const real = enabled.filter((option) => option.value !== "");
+    if (strategy === "empty")
+        return placeholder ? placeholder.value : null;
+    if (strategy === "boundary")
+        return real.at(-1)?.value ?? placeholder?.value ?? null;
+    return real[0]?.value ?? placeholder?.value ?? null;
+}
+/** Whether a checkbox or radio should end up ticked. */
+export function checkedFor(strategy) {
+    return strategy !== "empty";
+}
+/* ── Text fields ──────────────────────────────────────────────────────── */
+const SPECIAL_CHARS = `O'Brien "quoted" <tag> & 100% \\ / ; -- ' OR '1'='1 — 你好 مرحبا ñ 🎉`;
+const ARABIC = "مرحبا بالعالم — اختبار فريم ووتش";
+const ARABIC_SHORT = "اختبار";
+/** Payloads that announce themselves instead of doing damage. See XSS_MARKER. */
+const XSS_PAYLOADS = [
+    `<img src=x onerror="window.${XSS_MARKER}=1">`,
+    `"><svg onload="window.${XSS_MARKER}=1">`,
+    `<script>window.${XSS_MARKER}=1</script>`,
+    `javascript:window.${XSS_MARKER}=1`,
+    `'><img src=x onerror=window.${XSS_MARKER}=1>`,
+];
+/** Repeated to fill a field to its limit. Not all one character, so a truncation point is visible in a screenshot. */
+const FILLER = "FrameWatch0123456789 ";
+function textValue(field, strategy, variant) {
+    switch (strategy) {
+        case "valid":
+            return validText(field);
+        case "maxlength":
+            return repeatTo(FILLER, field.maxlength ?? MAX_FORM_FILL_LENGTH);
+        case "special_chars":
+            return field.type === "email" ? `"${SPECIAL_CHARS}"@example.com` : SPECIAL_CHARS;
+        case "rtl_arabic":
+            return field.type === "email" ? `${ARABIC_SHORT}@example.com` : ARABIC;
+        case "numbers_only":
+            return "1234567890";
+        case "spaces_only":
+            return "   ";
+        case "boundary":
+            // The shortest thing a field of this kind can hold: the classic
+            // off-by-one, and for the typed fields the shortest *valid* value.
+            return field.type === "email" ? "a@b.co" : field.type === "url" ? "http://a.co" : "a";
+        case "xss":
+            return XSS_PAYLOADS[variant % XSS_PAYLOADS.length];
+        case "empty":
+            return "";
+    }
+}
+/**
+ * Realistic data for one field.
+ *
+ * The input type is the strongest signal and is read first. Beyond that a
+ * field is only ever `type="text"`, so the name, label and placeholder are
+ * matched for the handful of shapes that have a wrong answer — an address in
+ * a phone field tells you nothing about the app.
+ */
+function validText(field) {
+    switch (field.type) {
+        case "email":
+            return "framewatch@example.com";
+        case "tel":
+            return "+15550101234";
+        case "url":
+            return "https://example.com/framewatch";
+        case "password":
+            return "FrameWatch!2024";
+        case "search":
+            return "framewatch";
+    }
+    const hint = `${field.name ?? ""} ${field.label ?? ""} ${field.placeholder ?? ""}`.toLowerCase();
+    for (const [pattern, value] of HINTS) {
+        if (pattern.test(hint))
+            return value;
+    }
+    return field.type === "textarea" ? "FrameWatch test message. Nothing here is real data." : "FrameWatch test";
+}
+/**
+ * Name/label patterns worth answering specifically, most specific first —
+ * "email address" must not be read as an address.
+ */
+const HINTS = [
+    [/e-?mail/, "framewatch@example.com"],
+    [/phone|mobile|\btel\b/, "+15550101234"],
+    [/first.?name|given.?name|forename/, "Ada"],
+    [/last.?name|surname|family.?name/, "Lovelace"],
+    [/full.?name|^\s*name|user.?name|\blogin\b|nickname/, "Ada Lovelace"],
+    [/company|organi[sz]ation|business/, "FrameWatch Ltd"],
+    [/street|address(?!.*e-?mail)/, "123 Test Street"],
+    [/\bcity\b|town/, "Springfield"],
+    [/\bstate\b|province|region/, "California"],
+    [/post.?code|\bzip\b|postal/, "94103"],
+    [/country/, "Testland"],
+    [/card.?number|\bcc.?num/, "4111111111111111"],
+    [/\bcvv\b|\bcvc\b|security.?code/, "123"],
+    [/\bage\b|quantity|\bqty\b|amount|\bcount\b/, "30"],
+    [/message|comment|feedback|notes?\b|bio\b|description|about/, "FrameWatch test message. Nothing here is real data."],
+    [/subject|title|headline/, "FrameWatch test"],
+    [/\burl\b|website|\blink\b/, "https://example.com/framewatch"],
+    [/password|passphrase|\bpin\b/, "FrameWatch!2024"],
+    [/coupon|promo|voucher|referral/, "TESTCODE"],
+];
+/** Cut a value to the field's own maxlength. See the second rule at the top of this file. */
+function clampLength(field, value) {
+    const limit = field.maxlength;
+    if (limit === undefined || limit < 0 || value.length <= limit)
+        return value;
+    return value.slice(0, limit);
+}
+function repeatTo(pattern, length) {
+    if (length <= 0)
+        return "";
+    return pattern.repeat(Math.ceil(length / pattern.length)).slice(0, length);
+}
+/* ── Constrained fields ───────────────────────────────────────────────── */
+/**
+ * A value a constrained input will accept, varied by strategy as far as the
+ * type allows. Arabic text cannot go in a date field; what a date field can
+ * still say is what happens at its declared minimum, so the strategies that
+ * have no expression here collapse onto the valid value.
+ */
+function constrainedValue(field, strategy) {
+    const extreme = strategy === "boundary" || strategy === "maxlength";
+    switch (field.type) {
+        case "number":
+        case "range":
+            return numberValue(field, strategy, extreme);
+        case "date":
+            return extreme ? (field.max ?? field.min ?? "9999-12-31") : "2024-06-15";
+        case "month":
+            return extreme ? (field.max ?? field.min ?? "9999-12") : "2024-06";
+        case "week":
+            return extreme ? (field.max ?? field.min ?? "9999-W52") : "2024-W24";
+        case "time":
+            return extreme ? (field.max ?? field.min ?? "23:59") : "14:30";
+        case "datetime-local":
+            return extreme ? (field.max ?? field.min ?? "9999-12-31T23:59") : "2024-06-15T14:30";
+        case "color":
+            return extreme ? "#000000" : strategy === "numbers_only" ? "#123456" : "#3366ff";
+        default:
+            return "";
+    }
+}
+function numberValue(field, strategy, extreme) {
+    const min = toNumber(field.min);
+    const max = toNumber(field.max);
+    if (extreme) {
+        if (max !== undefined)
+            return field.max;
+        if (min !== undefined)
+            return field.min;
+        return strategy === "maxlength" ? "9".repeat(MAX_NUMBER_DIGITS) : "0";
+    }
+    if (min !== undefined && max !== undefined)
+        return String(Math.round((min + max) / 2));
+    if (min !== undefined)
+        return field.min;
+    if (max !== undefined)
+        return field.max;
+    return strategy === "numbers_only" ? "1234567890" : "42";
+}
+/**
+ * Keep a value inside the field's declared range. Every constrained type
+ * except colour orders lexicographically in its own syntax (ISO dates, times,
+ * weeks), so the same comparison works for all of them once numbers are
+ * handled numerically.
+ */
+function clampToRange(field, value) {
+    if (value === "" || field.type === "color")
+        return value;
+    if (field.type === "number" || field.type === "range") {
+        const parsed = Number(value);
+        if (!Number.isFinite(parsed))
+            return value;
+        const min = toNumber(field.min);
+        const max = toNumber(field.max);
+        if (min !== undefined && parsed < min)
+            return field.min;
+        if (max !== undefined && parsed > max)
+            return field.max;
+        return value;
+    }
+    if (field.min !== undefined && value < field.min)
+        return field.min;
+    if (field.max !== undefined && value > field.max)
+        return field.max;
+    return value;
+}
+function toNumber(value) {
+    if (value === undefined || value.trim() === "")
+        return undefined;
+    const parsed = Number(value);
+    return Number.isFinite(parsed) ? parsed : undefined;
+}
+//# sourceMappingURL=test-data.js.map

package/dist/utils/test-data.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"test-data.js","sourceRoot":"","sources":["../../src/utils/test-data.ts"],"names":[],"mappings":"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","sourcesContent":["import { MAX_FORM_FILL_LENGTH } from \"../constants.js\";\n\n/**\n * Test data generators.\n *\n * One job: given a field and a strategy, say what should go in it. Nothing\n * here touches a browser, so the interesting decisions — what \"valid\" means\n * for a field called `user_email`, what happens when Arabic text meets\n * `<input type=\"date\">` — are testable on their own.\n *\n * Two rules run through all of it:\n *\n *   - A value must be one the field can actually hold. Chromium refuses a\n *     malformed value outright for the constrained input types (number, date,\n *     color and friends), so a strategy that cannot be expressed in one of\n *     them falls back to a valid value rather than producing a fill error that\n *     says nothing about the app.\n *   - A value never exceeds the field's own `maxlength`. Otherwise every\n *     strategy would report the same truncation on the same short field, and\n *     the one report that matters — an app truncating input in JavaScript,\n *     with no maxlength anywhere — would be lost in it.\n */\n\nexport const FORM_STRATEGIES = [\n  \"valid\",\n  \"empty\",\n  \"maxlength\",\n  \"special_chars\",\n  \"rtl_arabic\",\n  \"numbers_only\",\n  \"spaces_only\",\n  \"boundary\",\n  \"xss\",\n] as const;\n\nexport type FormStrategy = (typeof FORM_STRATEGIES)[number];\n\n/**\n * What `framewatch_form_test` runs when the caller names no strategies: the\n * happy path, the empty submit, the characters that break naive escaping, and\n * RTL text. Between them they catch most of what a form gets wrong.\n */\nexport const DEFAULT_FORM_STRATEGIES: FormStrategy[] = [\"valid\", \"empty\", \"special_chars\", \"rtl_arabic\"];\n\n/**\n * The global an XSS payload sets when it executes.\n *\n * Payloads are written to assign this rather than to do anything: whether the\n * marker is set after a submit is a yes/no answer to \"did my input run as\n * code\", where looking for the payload in the DOM afterwards is guesswork —\n * an input's own `value` serialises with its angle brackets intact and would\n * read as an injection on a page that escaped everything correctly.\n */\nexport const XSS_MARKER = \"__framewatch_xss\";\n\nexport interface OptionInfo {\n  value: string;\n  label: string;\n  disabled: boolean;\n}\n\n/** What the generators need to know about a field. A subset of `FieldInfo` in engine/forms.ts. */\nexport interface FieldShape {\n  /** Input type lowercased (\"text\", \"email\", …), \"textarea\", or \"select-one\" / \"select-multiple\". */\n  type: string;\n  name?: string;\n  label?: string;\n  placeholder?: string;\n  maxlength?: number;\n  min?: string;\n  max?: string;\n  step?: string;\n}\n\n/** Input types whose value Chromium validates syntactically, and will not hold arbitrary text. */\nconst CONSTRAINED = new Set([\"number\", \"range\", \"date\", \"month\", \"week\", \"time\", \"datetime-local\", \"color\"]);\n\n/** A number field's value is a syntax, not a length — a thousand digits is not a longer number, it is Infinity. */\nconst MAX_NUMBER_DIGITS = 15;\n\nexport function describeStrategy(strategy: FormStrategy): string {\n  switch (strategy) {\n    case \"valid\":\n      return \"realistic data of the right shape for each field — the happy path\";\n    case \"empty\":\n      return \"every field cleared, then submitted — does validation catch it\";\n    case \"maxlength\":\n      return `every field filled to its maxlength, or ${MAX_FORM_FILL_LENGTH} characters when it has none`;\n    case \"special_chars\":\n      return \"quotes, angle brackets, backslashes, an SQL fragment, CJK, Arabic and an emoji\";\n    case \"rtl_arabic\":\n      return \"Arabic text in every field — catches RTL layout and bidirectional text bugs\";\n    case \"numbers_only\":\n      return \"digits in every field, including the ones that expect words\";\n    case \"spaces_only\":\n      return \"whitespace only — input that looks filled in but is empty once trimmed\";\n    case \"boundary\":\n      return \"the edges: one character for text, min/max for numbers and dates\";\n    case \"xss\":\n      return \"harmless XSS payloads that set a marker instead of doing damage — reported if any of them runs\";\n  }\n}\n\n/**\n * The value to put in a text-like field.\n *\n * `variant` is the field's position in the form. It is used to walk through\n * the XSS payload list, so a form with five fields tries five different\n * injections in one pass instead of the same one five times.\n */\nexport function valueFor(field: FieldShape, strategy: FormStrategy, variant = 0): string {\n  if (strategy === \"empty\") return \"\";\n  if (CONSTRAINED.has(field.type)) return clampToRange(field, constrainedValue(field, strategy));\n  return clampLength(field, textValue(field, strategy, variant));\n}\n\n/**\n * Which option a `<select>` should end up on, or null to leave it alone.\n *\n * Disabled options are never chosen — picking one fails, and a form that\n * offers nothing else has a bug worth reporting on its own.\n */\nexport function optionFor(field: FieldShape & { options: OptionInfo[] }, strategy: FormStrategy): string | null {\n  const enabled = field.options.filter((option) => !option.disabled);\n  // The blank option is a placeholder (\"Choose one…\"), which is what \"empty\"\n  // means for a select — and the only way to clear one from the outside.\n  const placeholder = enabled.find((option) => option.value === \"\");\n  const real = enabled.filter((option) => option.value !== \"\");\n\n  if (strategy === \"empty\") return placeholder ? placeholder.value : null;\n  if (strategy === \"boundary\") return real.at(-1)?.value ?? placeholder?.value ?? null;\n  return real[0]?.value ?? placeholder?.value ?? null;\n}\n\n/** Whether a checkbox or radio should end up ticked. */\nexport function checkedFor(strategy: FormStrategy): boolean {\n  return strategy !== \"empty\";\n}\n\n/* ── Text fields ──────────────────────────────────────────────────────── */\n\nconst SPECIAL_CHARS = `O'Brien \"quoted\" <tag> & 100% \\\\ / ; -- ' OR '1'='1 — 你好 مرحبا ñ 🎉`;\nconst ARABIC = \"مرحبا بالعالم — اختبار فريم ووتش\";\nconst ARABIC_SHORT = \"اختبار\";\n\n/** Payloads that announce themselves instead of doing damage. See XSS_MARKER. */\nconst XSS_PAYLOADS = [\n  `<img src=x onerror=\"window.${XSS_MARKER}=1\">`,\n  `\"><svg onload=\"window.${XSS_MARKER}=1\">`,\n  `<script>window.${XSS_MARKER}=1</script>`,\n  `javascript:window.${XSS_MARKER}=1`,\n  `'><img src=x onerror=window.${XSS_MARKER}=1>`,\n];\n\n/** Repeated to fill a field to its limit. Not all one character, so a truncation point is visible in a screenshot. */\nconst FILLER = \"FrameWatch0123456789 \";\n\nfunction textValue(field: FieldShape, strategy: FormStrategy, variant: number): string {\n  switch (strategy) {\n    case \"valid\":\n      return validText(field);\n    case \"maxlength\":\n      return repeatTo(FILLER, field.maxlength ?? MAX_FORM_FILL_LENGTH);\n    case \"special_chars\":\n      return field.type === \"email\" ? `\"${SPECIAL_CHARS}\"@example.com` : SPECIAL_CHARS;\n    case \"rtl_arabic\":\n      return field.type === \"email\" ? `${ARABIC_SHORT}@example.com` : ARABIC;\n    case \"numbers_only\":\n      return \"1234567890\";\n    case \"spaces_only\":\n      return \"   \";\n    case \"boundary\":\n      // The shortest thing a field of this kind can hold: the classic\n      // off-by-one, and for the typed fields the shortest *valid* value.\n      return field.type === \"email\" ? \"a@b.co\" : field.type === \"url\" ? \"http://a.co\" : \"a\";\n    case \"xss\":\n      return XSS_PAYLOADS[variant % XSS_PAYLOADS.length];\n    case \"empty\":\n      return \"\";\n  }\n}\n\n/**\n * Realistic data for one field.\n *\n * The input type is the strongest signal and is read first. Beyond that a\n * field is only ever `type=\"text\"`, so the name, label and placeholder are\n * matched for the handful of shapes that have a wrong answer — an address in\n * a phone field tells you nothing about the app.\n */\nfunction validText(field: FieldShape): string {\n  switch (field.type) {\n    case \"email\":\n      return \"framewatch@example.com\";\n    case \"tel\":\n      return \"+15550101234\";\n    case \"url\":\n      return \"https://example.com/framewatch\";\n    case \"password\":\n      return \"FrameWatch!2024\";\n    case \"search\":\n      return \"framewatch\";\n  }\n\n  const hint = `${field.name ?? \"\"} ${field.label ?? \"\"} ${field.placeholder ?? \"\"}`.toLowerCase();\n  for (const [pattern, value] of HINTS) {\n    if (pattern.test(hint)) return value;\n  }\n  return field.type === \"textarea\" ? \"FrameWatch test message. Nothing here is real data.\" : \"FrameWatch test\";\n}\n\n/**\n * Name/label patterns worth answering specifically, most specific first —\n * \"email address\" must not be read as an address.\n */\nconst HINTS: Array<[RegExp, string]> = [\n  [/e-?mail/, \"framewatch@example.com\"],\n  [/phone|mobile|\\btel\\b/, \"+15550101234\"],\n  [/first.?name|given.?name|forename/, \"Ada\"],\n  [/last.?name|surname|family.?name/, \"Lovelace\"],\n  [/full.?name|^\\s*name|user.?name|\\blogin\\b|nickname/, \"Ada Lovelace\"],\n  [/company|organi[sz]ation|business/, \"FrameWatch Ltd\"],\n  [/street|address(?!.*e-?mail)/, \"123 Test Street\"],\n  [/\\bcity\\b|town/, \"Springfield\"],\n  [/\\bstate\\b|province|region/, \"California\"],\n  [/post.?code|\\bzip\\b|postal/, \"94103\"],\n  [/country/, \"Testland\"],\n  [/card.?number|\\bcc.?num/, \"4111111111111111\"],\n  [/\\bcvv\\b|\\bcvc\\b|security.?code/, \"123\"],\n  [/\\bage\\b|quantity|\\bqty\\b|amount|\\bcount\\b/, \"30\"],\n  [/message|comment|feedback|notes?\\b|bio\\b|description|about/, \"FrameWatch test message. Nothing here is real data.\"],\n  [/subject|title|headline/, \"FrameWatch test\"],\n  [/\\burl\\b|website|\\blink\\b/, \"https://example.com/framewatch\"],\n  [/password|passphrase|\\bpin\\b/, \"FrameWatch!2024\"],\n  [/coupon|promo|voucher|referral/, \"TESTCODE\"],\n];\n\n/** Cut a value to the field's own maxlength. See the second rule at the top of this file. */\nfunction clampLength(field: FieldShape, value: string): string {\n  const limit = field.maxlength;\n  if (limit === undefined || limit < 0 || value.length <= limit) return value;\n  return value.slice(0, limit);\n}\n\nfunction repeatTo(pattern: string, length: number): string {\n  if (length <= 0) return \"\";\n  return pattern.repeat(Math.ceil(length / pattern.length)).slice(0, length);\n}\n\n/* ── Constrained fields ───────────────────────────────────────────────── */\n\n/**\n * A value a constrained input will accept, varied by strategy as far as the\n * type allows. Arabic text cannot go in a date field; what a date field can\n * still say is what happens at its declared minimum, so the strategies that\n * have no expression here collapse onto the valid value.\n */\nfunction constrainedValue(field: FieldShape, strategy: FormStrategy): string {\n  const extreme = strategy === \"boundary\" || strategy === \"maxlength\";\n\n  switch (field.type) {\n    case \"number\":\n    case \"range\":\n      return numberValue(field, strategy, extreme);\n    case \"date\":\n      return extreme ? (field.max ?? field.min ?? \"9999-12-31\") : \"2024-06-15\";\n    case \"month\":\n      return extreme ? (field.max ?? field.min ?? \"9999-12\") : \"2024-06\";\n    case \"week\":\n      return extreme ? (field.max ?? field.min ?? \"9999-W52\") : \"2024-W24\";\n    case \"time\":\n      return extreme ? (field.max ?? field.min ?? \"23:59\") : \"14:30\";\n    case \"datetime-local\":\n      return extreme ? (field.max ?? field.min ?? \"9999-12-31T23:59\") : \"2024-06-15T14:30\";\n    case \"color\":\n      return extreme ? \"#000000\" : strategy === \"numbers_only\" ? \"#123456\" : \"#3366ff\";\n    default:\n      return \"\";\n  }\n}\n\nfunction numberValue(field: FieldShape, strategy: FormStrategy, extreme: boolean): string {\n  const min = toNumber(field.min);\n  const max = toNumber(field.max);\n\n  if (extreme) {\n    if (max !== undefined) return field.max!;\n    if (min !== undefined) return field.min!;\n    return strategy === \"maxlength\" ? \"9\".repeat(MAX_NUMBER_DIGITS) : \"0\";\n  }\n  if (min !== undefined && max !== undefined) return String(Math.round((min + max) / 2));\n  if (min !== undefined) return field.min!;\n  if (max !== undefined) return field.max!;\n  return strategy === \"numbers_only\" ? \"1234567890\" : \"42\";\n}\n\n/**\n * Keep a value inside the field's declared range. Every constrained type\n * except colour orders lexicographically in its own syntax (ISO dates, times,\n * weeks), so the same comparison works for all of them once numbers are\n * handled numerically.\n */\nfunction clampToRange(field: FieldShape, value: string): string {\n  if (value === \"\" || field.type === \"color\") return value;\n\n  if (field.type === \"number\" || field.type === \"range\") {\n    const parsed = Number(value);\n    if (!Number.isFinite(parsed)) return value;\n    const min = toNumber(field.min);\n    const max = toNumber(field.max);\n    if (min !== undefined && parsed < min) return field.min!;\n    if (max !== undefined && parsed > max) return field.max!;\n    return value;\n  }\n\n  if (field.min !== undefined && value < field.min) return field.min;\n  if (field.max !== undefined && value > field.max) return field.max;\n  return value;\n}\n\nfunction toNumber(value: string | undefined): number | undefined {\n  if (value === undefined || value.trim() === \"\") return undefined;\n  const parsed = Number(value);\n  return Number.isFinite(parsed) ? parsed : undefined;\n}\n"]}

package/dist/utils/vue-rules.d.ts

@@ -0,0 +1,72 @@
+/**
+ * What the Vue support decides and says.
+ *
+ * Pure: what a Vite console line means, whether a `navigate` value goes
+ * through vue-router or the address bar, and the wording of every line about
+ * a Vue app or one of its components. The measurements come from
+ * `engine/vue.ts`; nothing here touches a browser.
+ */
+/** One line Vite's client wrote to the console, decoded. */
+export type ViteEvent = {
+    kind: "update";
+    path: string;
+} | {
+    kind: "css";
+    path: string;
+} | {
+    kind: "reload";
+    path: string;
+} | {
+    kind: "connected";
+};
+/**
+ * Vite's client logs exactly these (unchanged since Vite 2):
+ *   `[vite] hot updated: /src/App.vue`
+ *   `[vite] css hot updated: /src/a.css?t=…`
+ *   `[vite] page reload src/main.js`
+ *   `[vite] connected.`
+ */
+export declare function parseViteLine(text: string): ViteEvent | null;
+export interface NavigatePlan {
+    /** `router` for vue-router's `push`; `load` for a full navigation. */
+    via: "router" | "load";
+    /** The router path (with query and hash) or the absolute URL to load. */
+    target: string;
+}
+/**
+ * A path, or a URL on the page's own origin, goes through the router when
+ * there is one — that keeps the app's state and skips the reload, which is
+ * what a person clicking a link in the app gets. Anything else is a full load.
+ */
+export declare function classifyNavigate(value: string, currentUrl: string, hasRouter: boolean): NavigatePlan;
+/** The app on the page, as detected. */
+export interface VueInfo {
+    version: string;
+    major: number;
+    router: boolean;
+    route?: {
+        path: string;
+        name?: string;
+    };
+    /** A production build: no component data on elements. */
+    production: boolean;
+}
+export declare function describeVue(info: VueInfo): string;
+/** One component, as read off an element. Values are already serialised. */
+export interface ComponentInfo {
+    name: string;
+    props: Record<string, string>;
+    state: Record<string, string>;
+    /** Ancestors, nearest first, up to the root. */
+    path: string[];
+}
+export interface ComponentUnavailable {
+    unavailable: string;
+}
+export declare function formatComponentLine(info: ComponentInfo | ComponentUnavailable): string;
+export interface ComponentNode {
+    name: string;
+    children: ComponentNode[];
+}
+/** The tree, indented by depth, identical leaf siblings collapsed with a count. */
+export declare function formatComponentTree(root: ComponentNode, total: number): string[];

package/dist/utils/vue-rules.js

@@ -0,0 +1,108 @@
+/**
+ * What the Vue support decides and says.
+ *
+ * Pure: what a Vite console line means, whether a `navigate` value goes
+ * through vue-router or the address bar, and the wording of every line about
+ * a Vue app or one of its components. The measurements come from
+ * `engine/vue.ts`; nothing here touches a browser.
+ */
+/**
+ * Vite's client logs exactly these (unchanged since Vite 2):
+ *   `[vite] hot updated: /src/App.vue`
+ *   `[vite] css hot updated: /src/a.css?t=…`
+ *   `[vite] page reload src/main.js`
+ *   `[vite] connected.`
+ */
+export function parseViteLine(text) {
+    const line = text.trim();
+    let m = /^\[vite\] css hot updated: (.+)$/.exec(line);
+    if (m)
+        return { kind: "css", path: m[1].trim() };
+    m = /^\[vite\] hot updated: (.+)$/.exec(line);
+    if (m)
+        return { kind: "update", path: m[1].trim() };
+    m = /^\[vite\] page reload(?: (.+))?$/.exec(line);
+    if (m)
+        return { kind: "reload", path: (m[1] ?? "").trim() };
+    if (line === "[vite] connected.")
+        return { kind: "connected" };
+    return null;
+}
+/**
+ * A path, or a URL on the page's own origin, goes through the router when
+ * there is one — that keeps the app's state and skips the reload, which is
+ * what a person clicking a link in the app gets. Anything else is a full load.
+ */
+export function classifyNavigate(value, currentUrl, hasRouter) {
+    let resolved;
+    try {
+        resolved = new URL(value, currentUrl);
+    }
+    catch {
+        return { via: "load", target: value };
+    }
+    if (!hasRouter)
+        return { via: "load", target: resolved.href };
+    let origin;
+    try {
+        origin = new URL(currentUrl).origin;
+    }
+    catch {
+        return { via: "load", target: resolved.href };
+    }
+    if (resolved.origin !== origin)
+        return { via: "load", target: resolved.href };
+    return { via: "router", target: `${resolved.pathname}${resolved.search}${resolved.hash}` };
+}
+export function describeVue(info) {
+    const head = `Vue ${info.version}${info.production ? " (production build)" : ""}`;
+    if (!info.router || !info.route)
+        return `${head} — no router`;
+    const name = info.route.name ? ` (${info.route.name})` : "";
+    return `${head} — route ${info.route.path}${name}`;
+}
+export function formatComponentLine(info) {
+    if ("unavailable" in info)
+        return `component: ${info.unavailable}`;
+    const sections = [];
+    const props = entries(info.props);
+    if (props)
+        sections.push(`props: ${props}`);
+    const state = entries(info.state);
+    if (state)
+        sections.push(`state: ${state}`);
+    let line = `component: ${info.name}`;
+    if (sections.length > 0)
+        line += ` (${sections.join("; ")})`;
+    if (info.path.length > 0)
+        line += ` in ${info.path.join(" > ")}`;
+    return line;
+}
+function entries(record) {
+    const parts = Object.entries(record).map(([key, value]) => `${key}=${value}`);
+    return parts.length > 0 ? parts.join(", ") : null;
+}
+/** The tree, indented by depth, identical leaf siblings collapsed with a count. */
+export function formatComponentTree(root, total) {
+    const lines = [`Components (${total}):`];
+    const walk = (node, depth) => {
+        const indent = "  ".repeat(depth + 1);
+        lines.push(`${indent}${node.name}`);
+        const children = node.children;
+        for (let i = 0; i < children.length; i++) {
+            const child = children[i];
+            if (child.children.length === 0) {
+                let run = 1;
+                while (i + run < children.length && children[i + run].name === child.name && children[i + run].children.length === 0)
+                    run++;
+                lines.push(`${indent}  ${child.name}${run > 1 ? ` ×${run}` : ""}`);
+                i += run - 1;
+                continue;
+            }
+            walk(child, depth + 1);
+        }
+    };
+    walk(root, 0);
+    return lines;
+}
+//# sourceMappingURL=vue-rules.js.map

package/dist/utils/vue-rules.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vue-rules.js","sourceRoot":"","sources":["../../src/utils/vue-rules.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * What the Vue support decides and says.\n *\n * Pure: what a Vite console line means, whether a `navigate` value goes\n * through vue-router or the address bar, and the wording of every line about\n * a Vue app or one of its components. The measurements come from\n * `engine/vue.ts`; nothing here touches a browser.\n */\n\n/** One line Vite's client wrote to the console, decoded. */\nexport type ViteEvent =\n  | { kind: \"update\"; path: string }\n  | { kind: \"css\"; path: string }\n  | { kind: \"reload\"; path: string }\n  | { kind: \"connected\" };\n\n/**\n * Vite's client logs exactly these (unchanged since Vite 2):\n *   `[vite] hot updated: /src/App.vue`\n *   `[vite] css hot updated: /src/a.css?t=…`\n *   `[vite] page reload src/main.js`\n *   `[vite] connected.`\n */\nexport function parseViteLine(text: string): ViteEvent | null {\n  const line = text.trim();\n  let m = /^\\[vite\\] css hot updated: (.+)$/.exec(line);\n  if (m) return { kind: \"css\", path: m[1].trim() };\n  m = /^\\[vite\\] hot updated: (.+)$/.exec(line);\n  if (m) return { kind: \"update\", path: m[1].trim() };\n  m = /^\\[vite\\] page reload(?: (.+))?$/.exec(line);\n  if (m) return { kind: \"reload\", path: (m[1] ?? \"\").trim() };\n  if (line === \"[vite] connected.\") return { kind: \"connected\" };\n  return null;\n}\n\nexport interface NavigatePlan {\n  /** `router` for vue-router's `push`; `load` for a full navigation. */\n  via: \"router\" | \"load\";\n  /** The router path (with query and hash) or the absolute URL to load. */\n  target: string;\n}\n\n/**\n * A path, or a URL on the page's own origin, goes through the router when\n * there is one — that keeps the app's state and skips the reload, which is\n * what a person clicking a link in the app gets. Anything else is a full load.\n */\nexport function classifyNavigate(value: string, currentUrl: string, hasRouter: boolean): NavigatePlan {\n  let resolved: URL;\n  try {\n    resolved = new URL(value, currentUrl);\n  } catch {\n    return { via: \"load\", target: value };\n  }\n  if (!hasRouter) return { via: \"load\", target: resolved.href };\n  let origin: string;\n  try {\n    origin = new URL(currentUrl).origin;\n  } catch {\n    return { via: \"load\", target: resolved.href };\n  }\n  if (resolved.origin !== origin) return { via: \"load\", target: resolved.href };\n  return { via: \"router\", target: `${resolved.pathname}${resolved.search}${resolved.hash}` };\n}\n\n/** The app on the page, as detected. */\nexport interface VueInfo {\n  version: string;\n  major: number;\n  router: boolean;\n  route?: { path: string; name?: string };\n  /** A production build: no component data on elements. */\n  production: boolean;\n}\n\nexport function describeVue(info: VueInfo): string {\n  const head = `Vue ${info.version}${info.production ? \" (production build)\" : \"\"}`;\n  if (!info.router || !info.route) return `${head} — no router`;\n  const name = info.route.name ? ` (${info.route.name})` : \"\";\n  return `${head} — route ${info.route.path}${name}`;\n}\n\n/** One component, as read off an element. Values are already serialised. */\nexport interface ComponentInfo {\n  name: string;\n  props: Record<string, string>;\n  state: Record<string, string>;\n  /** Ancestors, nearest first, up to the root. */\n  path: string[];\n}\n\nexport interface ComponentUnavailable {\n  unavailable: string;\n}\n\nexport function formatComponentLine(info: ComponentInfo | ComponentUnavailable): string {\n  if (\"unavailable\" in info) return `component: ${info.unavailable}`;\n  const sections: string[] = [];\n  const props = entries(info.props);\n  if (props) sections.push(`props: ${props}`);\n  const state = entries(info.state);\n  if (state) sections.push(`state: ${state}`);\n  let line = `component: ${info.name}`;\n  if (sections.length > 0) line += ` (${sections.join(\"; \")})`;\n  if (info.path.length > 0) line += ` in ${info.path.join(\" > \")}`;\n  return line;\n}\n\nfunction entries(record: Record<string, string>): string | null {\n  const parts = Object.entries(record).map(([key, value]) => `${key}=${value}`);\n  return parts.length > 0 ? parts.join(\", \") : null;\n}\n\nexport interface ComponentNode {\n  name: string;\n  children: ComponentNode[];\n}\n\n/** The tree, indented by depth, identical leaf siblings collapsed with a count. */\nexport function formatComponentTree(root: ComponentNode, total: number): string[] {\n  const lines = [`Components (${total}):`];\n  const walk = (node: ComponentNode, depth: number): void => {\n    const indent = \"  \".repeat(depth + 1);\n    lines.push(`${indent}${node.name}`);\n    const children = node.children;\n    for (let i = 0; i < children.length; i++) {\n      const child = children[i];\n      if (child.children.length === 0) {\n        let run = 1;\n        while (i + run < children.length && children[i + run].name === child.name && children[i + run].children.length === 0) run++;\n        lines.push(`${indent}  ${child.name}${run > 1 ? ` ×${run}` : \"\"}`);\n        i += run - 1;\n        continue;\n      }\n      walk(child, depth + 1);\n    }\n  };\n  walk(root, 0);\n  return lines;\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "framewatch-mcp-server",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "MCP server for smart visual testing of web apps — frame capture, diffing, and interaction replay",
   "license": "MIT",
   "author": "kekoDev (https://github.com/kekoDev)",
@@ -43,16 +43,18 @@
   },
   "dependencies": {
     "@modelcontextprotocol/sdk": "^1.30.0",
+    "axe-core": "^4.10.0",
     "playwright": "^1.62.0",
     "sharp": "^0.35.0",
-    "zod": "^3.25.0",
-    "axe-core": "^4.10.0"
+    "zod": "^3.25.0"
   },
   "devDependencies": {
     "@types/node": "^22.0.0",
     "@vitest/coverage-v8": "^4.1.0",
     "typescript": "^5.9.0",
-    "vitest": "^4.1.0"
+    "vitest": "^4.1.0",
+    "vue": "^3.5.42",
+    "vue-router": "^4.6.4"
   },
   "engines": {
     "node": ">=20.9.0"