oh-my-opencode 5.1.48 → 5.1.54

package/packages/omo-codex/plugin/skills/frontend/scripts/detect/rules/typography/support/svg-size.ts

@@ -0,0 +1,57 @@
+import { ancestors, fontSizePx, px, styleOf } from "../../../core/page"
+import type { ElementSnapshot, PageSnapshot } from "../../../types"
+
+const uniformScale = (value: string): number | null => {
+	if (value === "" || value === "none") return 1
+	if (/skew|matrix3d|rotate[XY]|perspective/i.test(value)) return null
+	const matrix = /^matrix\(([^)]+)\)$/.exec(value)
+	if (matrix?.[1]) {
+		const [a, b, c, d] = matrix[1].split(/[\s,]+/).map(Number)
+		if (a === undefined || b === undefined || c === undefined || d === undefined) return null
+		const x = Math.hypot(a, b)
+		const y = Math.hypot(c, d)
+		return Math.abs(x - y) < 0.001 && Math.abs(a * c + b * d) < 0.001 ? x : null
+	}
+	let scale = 1
+	for (const match of value.matchAll(/scale\(([^)]+)\)/g)) {
+		const [x, y] = (match[1] ?? "").split(/[\s,]+/).map(Number)
+		if (x === undefined || (y !== undefined && Math.abs(x - y) > 0.001)) return null
+		scale *= Math.abs(x)
+	}
+	return scale
+}
+
+export function drawnFontSize(s: PageSnapshot, e: ElementSnapshot): number {
+	const size = fontSizePx(e)
+	if (["text", "tspan", "textpath"].includes(e.tag) === false) return size
+	const chain = [e, ...ancestors(s, e)]
+	const svg = chain.find(n => n.tag === "svg")
+	if (svg === undefined) return size
+	const box = (svg.attributes["viewBox"] ?? svg.attributes["viewbox"] ?? "").trim().split(/[\s,]+/).map(Number)
+	const vw = box[2]
+	const vh = box[3]
+	if (box.length !== 4 || vw === undefined || vh === undefined || vw <= 0 || vh <= 0) return size
+	let inner = 1
+	for (const n of chain) {
+		if (n === svg) break
+		const computed = styleOf(n, "transform")
+		const scale = uniformScale(computed === "" || computed === "none" ? n.attributes["transform"] ?? "" : computed)
+		if (scale === null) return size
+		inner *= scale
+	}
+	const content = (axis: "width" | "height", sides: readonly string[]): number | null => {
+		const drawn = svg.rect[axis]
+		const inset = sides.reduce((n, p) => n + (px(styleOf(svg, p)) ?? 0), 0)
+		if (inset <= 0) return drawn
+		const css = px(styleOf(svg, axis)) ?? 0
+		if (Math.abs(css + inset - drawn) <= 1) return css
+		if (Math.abs(css - drawn) <= 1) return css - inset
+		return null
+	}
+	const w = content("width", ["padding-left", "padding-right", "border-left-width", "border-right-width"])
+	const h = content("height", ["padding-top", "padding-bottom", "border-top-width", "border-bottom-width"])
+	if (w === null || h === null || w <= 0 || h <= 0) return size
+	const aspect = svg.attributes["preserveAspectRatio"] ?? svg.attributes["preserveaspectratio"] ?? ""
+	const scale = aspect.includes("none") ? h / vh : aspect.includes("slice") ? Math.max(w / vw, h / vh) : Math.min(w / vw, h / vh)
+	return size * scale * inner
+}

package/packages/omo-codex/plugin/skills/frontend/scripts/detect/rules/typography/support/text-context.ts

@@ -0,0 +1,112 @@
+import { ancestors, childrenOf, fontSizePx, isHeading, px, styleOf } from "../../../core/page"
+import type { ElementSnapshot, PageSnapshot } from "../../../types"
+
+export const readingTags = ["p", "li", "td", "th", "dd", "blockquote", "figcaption"]
+export const lineage = (s: PageSnapshot, e: ElementSnapshot): readonly ElementSnapshot[] => [e, ...ancestors(s, e)]
+export const className = (e: ElementSnapshot): string => e.attributes["class"] ?? ""
+export const mono = (e: ElementSnapshot): boolean => {
+	const first = (styleOf(e, "font-family").split(",")[0] ?? "").trim().replace(/^['"]|['"]$/g, "").toLowerCase()
+	return ["courier", "courier new", "consolas", "menlo", "monaco", "andale mono", "lucida console"].includes(first) ||
+		first.split(/[^a-z0-9]+/).some(w => ["mono", "monospace", "monospaced", "sfmono"].includes(w))
+}
+export const letters = (text: string): readonly string[] => [...text].filter(c => /\p{L}/u.test(c))
+export const cjkChar = (c: string): boolean => /[\u1100-\u11ff\u3040-\u30ff\u3130-\u318f\u31f0-\u31ff\u3400-\u9fff\ua960-\ud7ff\uf900-\ufaff\uff66-\uff9f\u{20000}-\u{3ffff}]/u.test(c)
+export const cjk = (text: string): boolean => {
+	const sample = [...text].slice(0, 256)
+	const count = sample.filter(cjkChar).length
+	return count > 0 && count * 2 >= sample.filter(c => /\p{L}/u.test(c)).length
+}
+export const caps = (text: string): boolean => {
+	const chars = letters(text)
+	return chars.some(c => c.toUpperCase() !== c.toLowerCase()) && chars.every(c => /\p{Lu}/u.test(c))
+}
+
+export function visibleText(s: PageSnapshot, e: ElementSnapshot): boolean {
+	const box = (e.rect.width > 0 && e.rect.height > 0) || e.lineRects.some(r => r.width > 0 && r.height > 0)
+	return box && lineage(s, e).every(n =>
+		n.attributes["hidden"] === undefined && styleOf(n, "display") !== "none" &&
+		styleOf(n, "visibility") !== "collapse" && styleOf(n, "visibility") !== "hidden" &&
+		styleOf(n, "content-visibility") !== "hidden" &&
+		(Number.parseFloat(styleOf(n, "opacity")) <= 0.01) === false &&
+		((n.rect.width <= 0 || n.rect.height <= 0) &&
+			["overflow-x", "overflow-y"].some(p => ["hidden", "clip"].includes(styleOf(n, p)))) === false &&
+		/sr-only|visually-?hidden|screen-?reader|a11y-hidden|hidden-visually/i.test(className(n)) === false &&
+		/^(script|style|title|noscript|template|head|meta|link|base|param|source|track|datalist|col|colgroup|area)$/.test(n.tag) === false &&
+		/inset\(\s*(50%|99|100%)/.test(styleOf(n, "clip-path")) === false)
+}
+
+export function control(s: PageSnapshot, e: ElementSnapshot): boolean {
+	return lineage(s, e).some(n =>
+		["button", "summary", "label", "select", "textarea"].includes(n.tag) ||
+		(n.tag === "a" && n.attributes["href"] !== undefined) ||
+		/^(button|link|tab|menuitem|menuitemcheckbox|menuitemradio|option|checkbox|radio|switch|treeitem)$/.test(n.attributes["role"] ?? "") ||
+		(n.attributes["tabindex"] !== undefined && Number(n.attributes["tabindex"]) >= 0 && n.text.length <= 80))
+}
+
+export function headingText(s: PageSnapshot, e: ElementSnapshot): boolean {
+	for (const n of lineage(s, e)) {
+		if (isHeading(n) || n.attributes["role"] === "heading") return true
+		if (readingTags.includes(n.tag)) return false
+	}
+	return false
+}
+
+export function pitch(s: PageSnapshot, e: ElementSnapshot): number {
+	let height = px(styleOf(e, "line-height")) ?? 0
+	if (styleOf(e, "display") === "inline") {
+		for (const n of ancestors(s, e)) {
+			height = Math.max(height, px(styleOf(n, "line-height")) ?? 0)
+			if (["inline", "contents"].includes(styleOf(n, "display")) === false) break
+		}
+	}
+	return height
+}
+
+export const smallprint = (s: PageSnapshot, e: ElementSnapshot): boolean => lineage(s, e).some(n =>
+	["small", "footer"].includes(n.tag) || /legal|copyright|disclaimer|small-?print|fine-?print|disclosure|footnote/i.test(className(n)))
+
+export function finePrintExempt(s: PageSnapshot, e: ElementSnapshot): boolean {
+	if (fontSizePx(e) <= 0 || fontSizePx(e) >= 15 ||
+		lineage(s, e).some(n => n.tag === "label" || isHeading(n)) ||
+		childrenOf(s, e).some(n => ["input", "select", "textarea", "button"].includes(n.tag))) return false
+	const marked: ElementSnapshot[] = []
+	for (const n of lineage(s, e).slice(0, 4)) {
+		if (["html", "body", "main", "article", "form"].includes(n.tag)) break
+		const words = `${className(n)} ${n.attributes["id"] ?? ""}`.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase()
+		if (/(?:^|[-_\s])(legal|fine-?print|small-?print|disclaimers?|footnotes?|disclosures)(?:$|[-_\s])/.test(words) &&
+			/(?:type|text|typography|font|fs)[-_]footnote/.test(words) === false) marked.push(n)
+	}
+	if (marked.length === 0 || marked.some(n => n.tag === "details" || n.tag === "summary" ||
+		n.attributes["aria-expanded"] !== undefined || childrenOf(s, n).some(c => c.tag === "summary" || c.attributes["aria-expanded"] !== undefined))) return false
+	const outer = marked[marked.length - 1]
+	if (outer && outer.text.length >= 2000 &&
+		outer.text.length >= (s.elements.find(n => n.tag === "body")?.text.length ?? 0) * 0.5 &&
+		lineage(s, outer).some(n => n.tag === "footer" || n.attributes["role"] === "contentinfo") === false) return false
+	return true
+}
+
+export const codeContext = (s: PageSnapshot, e: ElementSnapshot): boolean => lineage(s, e).some(n =>
+	["pre", "code", "kbd", "samp", "var", "svg"].includes(n.tag) ||
+	n.attributes["aria-hidden"] === "true" || /terminal|console|code|mock|editor|syntax|diff/i.test(className(n)))
+
+export const uiContext = (s: PageSnapshot, e: ElementSnapshot): boolean => lineage(s, e).some(n =>
+	["button", "a", "label", "summary", "pre", "nav", "footer"].includes(n.tag) ||
+	n.attributes["aria-hidden"] === "true" ||
+	/^(button|link|tab|menuitem|option)$/.test(n.attributes["role"] ?? "") ||
+	/badge|caption|chip|code|console|diff|label|meta|mock|pill|preview|tag|terminal|writes/i.test(className(n)))
+
+export function buttonBox(s: PageSnapshot, e: ElementSnapshot): boolean {
+	for (const n of lineage(s, e).slice(0, 3)) {
+		if (n !== e && n.text.length > 80) return false
+		if (className(n).toLowerCase().split(/\s+/).some(t => t === "btn" || t.endsWith("-btn") || t.endsWith("_btn"))) return true
+	}
+	return false
+}
+
+export const furnitureClass = (value: string): boolean => value.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase()
+	.split(/[-_\s]+/).some(raw => {
+		const part = raw.replace(/[^\p{L}\p{N}]/gu, "")
+		return ["pillar", "pillars", "navy"].includes(part) === false &&
+			["meta", "label", "badge", "chip", "pill", "tag", "kicker", "eyebrow", "breadcrumb", "timestamp", "category", "caption", "nav"]
+				.some(w => part.startsWith(w) || part.endsWith(w))
+	})

package/packages/omo-codex/plugin/skills/frontend/scripts/detect/rules/typography/support/text-lines.ts

@@ -0,0 +1,43 @@
+import { childrenOf, px, styleOf } from "../../../core/page"
+import type { ElementSnapshot, PageSnapshot, Rect } from "../../../types"
+import { visibleText } from "./text-context"
+
+export function phrasingNodes(s: PageSnapshot, e: ElementSnapshot): readonly ElementSnapshot[] {
+	const nodes: ElementSnapshot[] = []
+	const walk = (n: ElementSnapshot): void => {
+		if (visibleText(s, n) === false) return
+		nodes.push(n)
+		for (const c of childrenOf(s, n)) {
+			if (["inline", "contents"].includes(styleOf(c, "display")) || ["br", "wbr"].includes(c.tag)) walk(c)
+		}
+	}
+	walk(e)
+	return nodes
+}
+
+export function mergedLines(nodes: readonly ElementSnapshot[]): readonly Rect[] {
+	const lines: Rect[] = []
+	for (const r of nodes.flatMap(n => n.lineRects).sort((a, b) => a.y - b.y || a.x - b.x)) {
+		const match = lines.find(l => Math.abs(l.y - r.y) <= Math.max(2, Math.min(l.height, r.height) * 0.5))
+		if (match) {
+			const i = lines.indexOf(match)
+			const x = Math.min(match.x, r.x)
+			const y = Math.min(match.y, r.y)
+			lines[i] = { x, y, width: Math.max(match.x + match.width, r.x + r.width) - x, height: Math.max(match.y + match.height, r.y + r.height) - y }
+		} else lines.push(r)
+	}
+	return lines
+}
+
+export function renderedCharacters(nodes: readonly ElementSnapshot[]): number {
+	return nodes.reduce((n, e) => n + [...e.ownText.normalize("NFC")].filter(c =>
+		/[\p{M}\u200b-\u200f\u202a-\u202e\u2060-\u206f]/u.test(c) === false).length, 0)
+}
+
+export function shownLines(s: PageSnapshot, e: ElementSnapshot, lineHeight: number): number {
+	const lines = mergedLines(phrasingNodes(s, e))
+	const top = lines[0]?.y
+	if (top === undefined || lineHeight <= 0) return 0
+	const bottom = Math.max(...lines.map(r => r.y + r.height))
+	return Math.max(1, Math.round((bottom - top - (px(styleOf(e, "font-size")) ?? 16)) / lineHeight) + 1)
+}

package/packages/omo-codex/plugin/skills/frontend/scripts/detect/rules/typography/support/type-hierarchy.ts

@@ -0,0 +1,48 @@
+export type TypeSample = { readonly role: string; readonly size: number; readonly weight: number }
+
+function dominant(role: string, values: readonly number[]): number | null {
+	const counts = new Map<number, number>()
+	for (const n of values) counts.set(n, (counts.get(n) ?? 0) + 1)
+	const ranked = [...counts].sort((a, b) => b[1] - a[1] || a[0] - b[0])
+	const first = ranked[0]
+	const second = ranked[1]
+	if (first === undefined) return null
+	if (second && first[1] === second[1]) {
+		return role === "h1" ? Math.max(...ranked.filter(n => n[1] === first[1]).map(n => n[0])) : null
+	}
+	if (second && role !== "h1" && role !== "body" && second[1] >= first[1] * 0.75 && second[0] >= first[0] * 1.25) return null
+	return first[0]
+}
+
+const largestStep = (values: readonly number[]): number => {
+	const sorted = [...values].sort((a, b) => a - b)
+	return sorted.reduce((n, v, i) => Math.max(n, v / (sorted[i - 1] ?? v)), 1)
+}
+
+export function flatHierarchy(samples: readonly TypeSample[]): readonly [string, number][] {
+	const groups = new Map<string, number[]>()
+	for (const s of samples) {
+		const values = groups.get(s.role) ?? []
+		values.push(Math.round(s.size * 10) / 10)
+		groups.set(s.role, values)
+	}
+	const roles: [string, number][] = []
+	const dropped: number[] = []
+	let settled = 0
+	for (const [role, values] of groups) {
+		const size = dominant(role, values)
+		if (size === null) {
+			if (role !== "body") dropped.push(...values)
+		} else {
+			roles.push([role, size])
+			if (role !== "body") settled += values.length
+		}
+	}
+	if (roles.length < 3) return []
+	const h1 = roles.find(r => r[0] === "h1")?.[1]
+	const body = roles.find(r => r[0] === "body")?.[1]
+	if (h1 !== undefined && body !== undefined && h1 < body) return []
+	const sizes = roles.map(r => r[1])
+	if (largestStep(sizes) >= 1.25 || (dropped.length > settled && dropped.some(n => largestStep([...sizes, n]) >= 1.25))) return []
+	return roles
+}

package/packages/omo-codex/plugin/skills/frontend/scripts/detect/rules/typography/tight-leading.ts

@@ -0,0 +1,47 @@
+import { fontSizePx, px, shortSnippet, styleOf } from "../../core/page"
+import type { PageRule } from "../../rule"
+import { caps, headingText, lineage, mono, pitch, visibleText } from "./support/text-context"
+import { itemsEachFitOneLine } from "./support/flex-runs"
+import { mergedLines, phrasingNodes, shownLines } from "./support/text-lines"
+
+export const tightLeading: PageRule = {
+	meta: {
+		id: "tight-leading", name: "Tight line height", category: "quality", severity: "warning", engine: "page",
+		description: "Multiline reading copy with line height below 1.3 crowds adjacent lines.",
+		fixHint: "Use line height around 1.5 to 1.7 for body copy.",
+	},
+	check: ({ snapshot }) => snapshot.elements.flatMap(element => {
+		const size = fontSizePx(element)
+		const height = pitch(snapshot, element)
+		const ratio = Math.round(height / size * 100) / 100
+		if (visibleText(snapshot, element) === false || element.ownText.length <= 10 || element.text.length <= 50 ||
+			size <= 0 || size >= 24 || height <= 0 || ratio >= 1.3 || headingText(snapshot, element)) return []
+		const lines = mergedLines(phrasingNodes(snapshot, element))
+		const top = lines[0]?.y
+		if (top === undefined) return []
+		const bottom = Math.max(...lines.map(l => l.y + l.height))
+		if (bottom - top < height * 1.5) return []
+		let count = shownLines(snapshot, element, height)
+		let clamped = false
+		for (const n of lineage(snapshot, element).slice(0, 4)) {
+			const display = styleOf(n, "display")
+			const clamp = Number.parseFloat(styleOf(n, "-webkit-line-clamp"))
+			if (["-webkit-box", "-webkit-inline-box"].includes(display) ||
+				(["flow-root", "inline-block"].includes(display) && clamp > 0)) clamped = true
+			if (["hidden", "clip"].includes(styleOf(n, "overflow-y"))) {
+				count = Math.min(count, Math.max(1, Math.round((n.rect.y + n.rect.height - top) / height)))
+				break
+			}
+		}
+		const weight = Number.parseFloat(styleOf(element, "font-weight"))
+		if (weight >= 600 && (clamped || count <= 2)) return []
+		if (size >= 20 && ratio >= 1.15 && count <= 3) return []
+		if (ratio >= 1 && ((styleOf(element, "text-transform") === "uppercase" && count <= 3) ||
+			(element.text.length < 80 && caps(element.text)))) return []
+		const ws = styleOf(element, "white-space")
+		if (mono(element) && ((ws.startsWith("pre") && ws !== "pre-line") || ws === "break-spaces") &&
+			(lineage(snapshot, element).some(n => ["pre", "code", "samp"].includes(n.tag)) || /[\u2500-\u257f]/.test(element.ownText))) return []
+		if (itemsEachFitOneLine(element, size)) return []
+		return [{ element, message: `Line height ${(height / size).toFixed(2)}x below 1.3`, snippet: shortSnippet(element) }]
+	}),
+}

package/packages/omo-codex/plugin/skills/frontend/scripts/detect/rules/typography/tiny-text.ts

@@ -0,0 +1,23 @@
+import { shortSnippet, styleOf } from "../../core/page"
+import type { PageRule } from "../../rule"
+import { buttonBox, caps, finePrintExempt, mono, smallprint, uiContext, visibleText } from "./support/text-context"
+import { drawnFontSize } from "./support/svg-size"
+import { textPainted } from "./support/painted-text"
+
+export const tinyText: PageRule = {
+	meta: {
+		id: "tiny-text", name: "Tiny body text", category: "quality", severity: "warning", engine: "page",
+		description: "Running copy smaller than 12px is difficult to read.",
+		fixHint: "Increase body copy to at least 14px, preferably 16px.",
+	},
+	check: ({ snapshot }) => snapshot.elements.flatMap(element => {
+		if (visibleText(snapshot, element) === false || !textPainted(snapshot, element) || element.ownText.length <= 10 || element.text.length <= 20 ||
+			drawnFontSize(snapshot, element) >= 12 ||
+			["sub", "sup", "code", "kbd", "samp", "var", "caption", "figcaption"].includes(element.tag) ||
+			uiContext(snapshot, element) || (buttonBox(snapshot, element) && smallprint(snapshot, element) === false) || finePrintExempt(snapshot, element) ||
+			styleOf(element, "text-transform") === "uppercase" ||
+			(element.text.length < 80 && caps(element.text)) ||
+			(mono(element) && styleOf(element, "white-space").startsWith("pre"))) return []
+		return [{ element, message: `${drawnFontSize(snapshot, element).toFixed(2)}px body text`, snippet: shortSnippet(element) }]
+	}),
+}

package/packages/omo-codex/plugin/skills/frontend/scripts/detect/rules/typography/undersized-ui-text.ts

@@ -0,0 +1,28 @@
+import { fontSizePx, shortSnippet, styleOf } from "../../core/page"
+import type { PageRule } from "../../rule"
+import { buttonBox, className, codeContext, control, furnitureClass, lineage, mono, smallprint, visibleText } from "./support/text-context"
+import { textPainted } from "./support/painted-text"
+
+export const undersizedUiText: PageRule = {
+	meta: {
+		id: "undersized-ui-text", name: "Undersized functional text", category: "quality", severity: "warning", engine: "page",
+		description: "Functional labels below 11px are difficult to read and use.",
+		fixHint: "Use at least 11px for functional text and at least 10px for noninteractive small print.",
+	},
+	check: ({ snapshot }) => snapshot.elements.flatMap(element => {
+		const size = fontSizePx(element)
+		const interactive = control(snapshot, element)
+		const floor = interactive === false && smallprint(snapshot, element) ? 10 : 11
+		const chain = lineage(snapshot, element)
+		const furniture = chain.some(n => ["nav", "td", "th", "caption", "figcaption", "dt", "dd", "footer"].includes(n.tag) ||
+			["navigation", "gridcell", "cell"].includes(n.attributes["role"] ?? "") ||
+			(n.tag !== "html" && furnitureClass(className(n))))
+		const codeRun = mono(element) && styleOf(element, "white-space").startsWith("pre") && /[{}[\]<>=;"`\\_]/.test(element.ownText)
+		if (visibleText(snapshot, element) === false || !textPainted(snapshot, element) || size <= 0 || Math.round((floor - size) * 1000) < 100 ||
+			element.ownText.trim().length < 2 || ["sub", "sup", "option"].includes(element.tag) ||
+			chain.some(n => ["sub", "sup"].includes(n.tag)) || codeContext(snapshot, element) || codeRun ||
+			(interactive === false && furniture === false &&
+				(buttonBox(snapshot, element) === false || smallprint(snapshot, element)) && element.ownText.length > 20)) return []
+		return [{ element, message: `${size}px functional text below ${floor}px floor`, snippet: shortSnippet(element) }]
+	}),
+}

package/packages/omo-codex/plugin/skills/frontend/scripts/detect/rules/typography/wide-tracking.ts

@@ -0,0 +1,26 @@
+import { fontSizePx, px, shortSnippet, styleOf } from "../../core/page"
+import type { PageRule } from "../../rule"
+import { caps, cjk, letters, lineage, visibleText } from "./support/text-context"
+import { shownLines } from "./support/text-lines"
+
+export const wideTracking: PageRule = {
+	meta: {
+		id: "wide-tracking", name: "Wide letter spacing on body text", category: "quality", severity: "warning", engine: "page",
+		description: "Widely tracked reading text splits words into individual characters.",
+		fixHint: "Keep body tracking at or below 0.05em; reserve wider spacing for capital labels.",
+	},
+	check: ({ snapshot }) => snapshot.elements.flatMap(element => {
+		const size = fontSizePx(element)
+		if (visibleText(snapshot, element) === false || element.ownText.length <= 10 || element.text.length <= 20 ||
+			size <= 0 || (px(styleOf(element, "letter-spacing")) ?? 0) / size <= 0.05) return []
+		const transform = styleOf(element, "text-transform")
+		const count = shownLines(snapshot, element, px(styleOf(element, "line-height")) ?? size * 1.2)
+		const capsLabel = transform === "uppercase" || (transform !== "lowercase" && caps(element.text) &&
+			(element.text.length < 80 || (letters(element.text).length <= 40 && count <= 1)))
+		const trackedControl = lineage(snapshot, element).some(n => n.tag === "button" ||
+			(n.tag === "a" && n.attributes["href"] !== undefined) ||
+			["button", "link", "tab"].includes(n.attributes["role"] ?? ""))
+		if (capsLabel || (trackedControl && letters(element.text).length <= 40 && count <= 1) || cjk(element.ownText)) return []
+		return [{ element, message: "Letter spacing exceeds 0.05em on reading text", snippet: shortSnippet(element) }]
+	}),
+}

package/packages/omo-codex/plugin/skills/frontend/scripts/detect/snapshot/collect.ts

@@ -0,0 +1,158 @@
+import type { ElementSnapshot, PageSnapshot, PseudoSnapshot, Rect } from "../types"
+
+// Runs inside the page: the renderer serializes this function with toString() and evaluates it there,
+// so it must stay self-contained (no imports at runtime, no references to module scope).
+export function collectPageSnapshot(props: readonly string[], maxElements: number): PageSnapshot {
+	const collapse = (s: string): string => s.replace(/\s+/g, " ").trim()
+	const toRect = (r: DOMRect): Rect => ({
+		x: Math.round(r.x * 100) / 100,
+		y: Math.round(r.y * 100) / 100,
+		width: Math.round(r.width * 100) / 100,
+		height: Math.round(r.height * 100) / 100,
+	})
+	const readStyle = (style: CSSStyleDeclaration): Record<string, string> => {
+		const out: Record<string, string> = {}
+		for (const p of props) out[p] = style.getPropertyValue(p)
+		return out
+	}
+	const pseudo = (el: Element, which: "::before" | "::after"): PseudoSnapshot | null => {
+		const style = getComputedStyle(el, which)
+		const content = style.getPropertyValue("content")
+		if (content === "none" || content === "normal" || content === "") return null
+		return { style: readStyle(style), rect: null }
+	}
+	const cssEscape = (s: string): string => (typeof CSS !== "undefined" && CSS.escape ? CSS.escape(s) : s)
+	const selectorOf = (el: Element): string => {
+		const parts: string[] = []
+		let node: Element | null = el
+		while (node && node.nodeType === 1 && parts.length < 6) {
+			if (node.id) {
+				parts.unshift(`#${cssEscape(node.id)}`)
+				break
+			}
+			const tag = node.tagName.toLowerCase()
+			const parentEl: Element | null = node.parentElement
+			if (!parentEl) {
+				parts.unshift(tag)
+				break
+			}
+			const current: Element = node
+			const same = Array.from(parentEl.children).filter((c) => c.tagName === current.tagName)
+			parts.unshift(same.length > 1 ? `${tag}:nth-of-type(${same.indexOf(current) + 1})` : tag)
+			node = parentEl
+		}
+		return parts.join(" > ")
+	}
+	const lineRectsOf = (el: Element): Rect[] => {
+		const rects: Rect[] = []
+		for (const child of Array.from(el.childNodes)) {
+			if (child.nodeType !== 3 || !child.textContent || child.textContent.trim() === "") continue
+			const range = document.createRange()
+			range.selectNodeContents(child)
+			for (const r of Array.from(range.getClientRects())) {
+				if (r.width === 0 && r.height === 0) continue
+				const last = rects[rects.length - 1]
+				if (last && Math.abs(last.y - r.y) < 2) {
+					const right = Math.max(last.x + last.width, r.x + r.width)
+					const x = Math.min(last.x, r.x)
+					rects[rects.length - 1] = { x, y: last.y, width: right - x, height: Math.max(last.height, r.height) }
+				} else rects.push(toRect(r))
+			}
+		}
+		return rects
+	}
+	const kebab = (p: string): string => (p === "cssOffset" ? "offset" : p.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`))
+	const motionOf = (el: Element): string[] => {
+		const moving = new Set<string>()
+		for (const anim of el.getAnimations()) {
+			if (anim.playState !== "running") continue
+			if (typeof CSSTransition !== "undefined" && anim instanceof CSSTransition) moving.add(anim.transitionProperty)
+			const effect = anim.effect
+			if (!(effect instanceof KeyframeEffect)) continue
+			for (const frame of effect.getKeyframes()) {
+				for (const key of Object.keys(frame)) if (!["offset", "computedOffset", "easing", "composite"].includes(key)) moving.add(kebab(key))
+			}
+		}
+		return [...moving].sort()
+	}
+	const all = Array.from(document.querySelectorAll("body, body *"))
+		.filter((el) => !["SCRIPT", "STYLE", "NOSCRIPT", "TEMPLATE", "HEAD", "META", "LINK"].includes(el.tagName))
+		.slice(0, maxElements)
+	const indexOf = new Map<Element, number>()
+	all.forEach((el, i) => indexOf.set(el, i))
+	const elements: ElementSnapshot[] = all.map((el, index) => {
+		const attributes: Record<string, string> = {}
+		for (const a of Array.from(el.attributes)) attributes[a.name] = a.value.slice(0, 500)
+		const parentIndex = el.parentElement ? indexOf.get(el.parentElement) : undefined
+		const ownText = collapse(
+			Array.from(el.childNodes)
+				.filter((n) => n.nodeType === 3)
+				.map((n) => n.textContent ?? "")
+				.join(" "),
+		)
+		return {
+			index,
+			parent: parentIndex === undefined ? null : parentIndex,
+			children: Array.from(el.children)
+				.map((c) => indexOf.get(c))
+				.filter((i): i is number => i !== undefined),
+			tag: el.tagName.toLowerCase(),
+			selector: selectorOf(el),
+			attributes,
+			rect: toRect(el.getBoundingClientRect()),
+			ownText,
+			textRuns: Array.from(el.childNodes)
+				.filter((n) => n.nodeType === 3)
+				.map((n) => collapse(n.textContent ?? ""))
+				.filter((t) => t !== ""),
+			text: collapse(el.textContent ?? "").slice(0, 2000),
+			lineRects: ownText === "" ? [] : lineRectsOf(el),
+			style: readStyle(getComputedStyle(el)),
+			before: pseudo(el, "::before"),
+			after: pseudo(el, "::after"),
+			scroll: { scrollWidth: el.scrollWidth, clientWidth: el.clientWidth, scrollHeight: el.scrollHeight, clientHeight: el.clientHeight },
+			motion: motionOf(el),
+			placeholder: el.matches(":placeholder-shown") ? { style: readStyle(getComputedStyle(el, "::placeholder")), rect: null } : null,
+			modal: (() => {
+				try {
+					return el.matches(":modal")
+				} catch (error) {
+					if (error instanceof DOMException) return false
+					throw error
+				}
+			})(),
+		}
+	})
+	const cssText: string[] = []
+	for (const sheet of Array.from(document.styleSheets)) {
+		const rules = (() => {
+			try {
+				return Array.from(sheet.cssRules)
+			} catch (error) {
+				if (error instanceof DOMException) return []
+				throw error
+			}
+		})()
+		cssText.push(rules.map((r) => r.cssText).join("\n"))
+	}
+	const root = document.documentElement
+	const errors: unknown = Reflect.get(globalThis, "__detectScriptErrors")
+	return {
+		viewport: { width: window.innerWidth, height: window.innerHeight },
+		url: location.href,
+		title: document.title,
+		lang: root.lang,
+		document: { scrollWidth: root.scrollWidth, clientWidth: root.clientWidth, scrollHeight: root.scrollHeight },
+		elements,
+		cssText,
+		scriptErrors: Array.isArray(errors) ? errors.filter((e): e is string => typeof e === "string") : [],
+		scriptErrorsCaptured: Array.isArray(errors),
+	}
+}
+
+/** Installed before page scripts run, so errors thrown during load reach the snapshot's scriptErrors. */
+export const SCRIPT_ERROR_PROBE = `(() => {
+	const sink = (globalThis.__detectScriptErrors = []);
+	addEventListener("error", (e) => sink.push(String(e.message || e.error || "error")));
+	addEventListener("unhandledrejection", (e) => sink.push(String(e.reason && e.reason.message || e.reason)));
+})();`

package/packages/omo-codex/plugin/skills/frontend/scripts/detect/snapshot/style-props.ts

@@ -0,0 +1,25 @@
+export const STYLE_PROPS = [
+	"display", "position", "visibility", "opacity", "z-index", "overflow-x", "overflow-y", "transform", "contain",
+	"top", "left", "right", "bottom", "width", "height", "max-width", "min-width", "max-height",
+	"color", "background-color", "background-image", "background-clip", "-webkit-background-clip", "-webkit-text-fill-color",
+	"background-size", "background-repeat", "background-position",
+	"font-family", "font-size", "font-weight", "font-style", "line-height", "letter-spacing", "word-spacing",
+	"text-transform", "text-align", "text-align-last", "text-decoration-line", "text-decoration-thickness", "text-underline-offset",
+	"text-overflow", "text-wrap", "white-space", "word-break", "overflow-wrap", "hyphens", "font-variant-numeric", "font-feature-settings",
+	"-webkit-line-clamp", "overflow-clip-margin", "font-variant", "font-variant-caps", "background-blend-mode", "mix-blend-mode", "scale", "rotate", "translate", "will-change",
+	"border-top-width", "border-right-width", "border-bottom-width", "border-left-width",
+	"border-top-style", "border-right-style", "border-bottom-style", "border-left-style",
+	"border-top-color", "border-right-color", "border-bottom-color", "border-left-color",
+	"border-top-left-radius", "border-top-right-radius", "border-bottom-right-radius", "border-bottom-left-radius",
+	"border-image-source", "outline-style", "outline-width", "outline-color", "outline-offset",
+	"box-shadow", "text-shadow", "filter", "backdrop-filter", "-webkit-backdrop-filter", "clip-path", "mask-image", "-webkit-mask-image",
+	"padding-top", "padding-right", "padding-bottom", "padding-left",
+	"margin-top", "margin-right", "margin-bottom", "margin-left",
+	"row-gap", "column-gap", "grid-template-columns", "flex-direction", "flex-wrap", "justify-content", "align-items", "column-count",
+	"animation-name", "animation-duration", "animation-iteration-count", "animation-timing-function", "animation-direction",
+	"animation-delay", "animation-fill-mode", "animation-play-state", "animation-composition",
+	"transition-property", "transition-duration", "transition-timing-function",
+	"object-fit", "caret-color", "content", "list-style-type", "cursor", "pointer-events",
+] as const
+
+export type StyleProp = (typeof STYLE_PROPS)[number]