lazycodex-ai 5.1.40 → 5.1.41

package/packages/omo-codex/plugin/skills/frontend/scripts/perfection/accent-stripes/declarations.ts

@@ -72,10 +72,6 @@ function collectEdges(declarations: readonly Declaration[]): Map<Side, Edge> {
 }
 
 export type Corner = "tl" | "tr" | "br" | "bl"
-export const ALL_CORNERS: ReadonlySet<Corner> = new Set(["tl", "tr", "br", "bl"])
-export const SIDE_CORNERS: Readonly<Record<Side, readonly [Corner, Corner]>> = {
-	top: ["tl", "tr"], right: ["tr", "br"], bottom: ["br", "bl"], left: ["tl", "bl"],
-}
 const CORNER_LONGHAND: Readonly<Record<string, Corner>> = {
 	"top-left": "tl", "top-right": "tr", "bottom-right": "br", "bottom-left": "bl",
 	"start-start": "tl", "start-end": "tr", "end-end": "br", "end-start": "bl",
@@ -104,20 +100,33 @@ export function roundedCorners(declarations: readonly Declaration[]): Set<Corner
 	return corners
 }
 
-export function hasEdgeStripe(declarations: readonly Declaration[], corners: ReadonlySet<Corner> = ALL_CORNERS): boolean {
-	const bySide = collectEdges(declarations)
-	const edges = [...bySide.values()]
-	const isStripe = (e: Edge) => !e.hidden && (e.width ?? 0) >= MIN_STRIPE_PX && e.color === "chromatic"
-	const bent = SIDES.some((s) => {
-		const edge = bySide.get(s)
-		return edge !== undefined && isStripe(edge) && SIDE_CORNERS[s].some((c) => corners.has(c))
-	})
-	if (!bent) return false
+const isStripe = (e: Edge) => !e.hidden && (e.width ?? 0) >= MIN_STRIPE_PX && e.color === "chromatic"
+
+export function hasEdgeStripe(declarations: readonly Declaration[]): boolean {
+	const edges = [...collectEdges(declarations).values()]
+	if (!edges.some(isStripe)) return false
 	const first = edges[0]
 	const uniform = edges.every((e) => e.width === first?.width && e.color === first?.color && e.hidden === first?.hidden)
 	return !uniform
 }
 
+function isInsetRing(value: string): boolean {
+	return splitTopLevel(value, ",").some((layer) => {
+		const tokens = splitTopLevel(layer, " ")
+		if (!tokens.some((t) => t.toLowerCase() === "inset")) return false
+		const [x = 0, y = 0, blur = 0, spread = 0] = tokens.map(parseLength).filter((n): n is number => n !== undefined)
+		return x === 0 && y === 0 && blur === 0 && spread >= MIN_STRIPE_PX && tokens.some((t) => looksLikeColor(t) && classifyColor(t) === "chromatic")
+	})
+}
+
+/** A uniform accent border (not a gradient border-image) or inset ring of MIN_STRIPE_PX or more. */
+export function hasAccentOutline(declarations: readonly Declaration[]): boolean {
+	const image = declarations.some(({ prop }) => prop === "border-image" || prop === "border-image-source")
+	const edges = [...collectEdges(declarations).values()]
+	const frame = !image && edges.every((e) => isStripe(e) && e.width === edges[0]?.width)
+	return frame || declarations.some(({ prop, value }) => prop === "box-shadow" && isInsetRing(value))
+}
+
 export function hasRadius(declarations: readonly Declaration[]): boolean {
 	return roundedCorners(declarations).size > 0
 }

package/packages/omo-codex/plugin/skills/frontend/scripts/perfection/accent-stripes/findings.ts

@@ -1,4 +1,4 @@
-export type RuleId = "edge-stripe" | "pseudo-bar" | "inset-shadow-stripe" | "gradient-stripe"
+export type RuleId = "edge-stripe" | "pseudo-bar" | "inset-shadow-stripe" | "gradient-stripe" | "accent-outline"
 
 export type Finding = {
 	readonly file: string
@@ -9,14 +9,15 @@ export type Finding = {
 }
 
 export const RULE_MESSAGES: Readonly<Record<RuleId, string>> = {
-	"edge-stripe": "coloured one-side border on a rounded surface; the corners bend the stripe",
-	"pseudo-bar": "coloured ::before/::after bar on a rounded surface",
-	"inset-shadow-stripe": "inset box-shadow stripe on a rounded surface",
-	"gradient-stripe": "hard-stop gradient band along one edge of a rounded surface",
+	"edge-stripe": "coloured one-side border on a box, rounded or square",
+	"pseudo-bar": "coloured ::before/::after bar along one side of a box",
+	"inset-shadow-stripe": "inset box-shadow stripe along one side of a box",
+	"gradient-stripe": "hard-stop gradient band along one edge of a box",
+	"accent-outline": "accent-tinted full outline on a rounded card",
 }
 
 export const FIX_HINT =
-	"drop the stripe: separate with a tonal surface (one ink at a low alpha), an eyebrow or heading, a leading glyph, or spacing"
+	"drop the stripe or outline: separate with a tonal surface (one ink at a low alpha), an eyebrow or heading, a leading glyph, or spacing"
 
 export function lineLocator(text: string): (offset: number) => { line: number; column: number } {
 	const starts = [0]

package/packages/omo-codex/plugin/skills/frontend/scripts/perfection/accent-stripes/lint.ts

@@ -1,9 +1,9 @@
 import { type CssRule, type Declaration, parseCss } from "./css-parse"
-import { ALL_CORNERS, type Corner, hasEdgeStripe, hasInsetShadowStripe, hasRadius, isPseudoBar, roundedCorners } from "./declarations"
+import { hasAccentOutline, hasEdgeStripe, hasInsetShadowStripe, hasRadius, isPseudoBar, roundedCorners } from "./declarations"
 import { type Finding, lineLocator, type RuleId } from "./findings"
 import { hasGradientEdgeBand } from "./gradient"
 import { classGroups, cssTemplates, inlineStyles, styleBlocks } from "./markup"
-import { type Compound, compoundCovers, isExemptSelector, parseCompound, selectorParts } from "./selector"
+import { type Compound, compoundCovers, isExemptSelector, isExemptTag, parseCompound, selectorParts } from "./selector"
 import { checkClassSet } from "./tailwind"
 
 export type SourceFile = { readonly path: string; readonly text: string }
@@ -25,18 +25,14 @@ function radiusIndex(rules: readonly CssRule[]): Compound[] {
 	return rules.filter(ruleHasRadius).flatMap((r) => selectorParts(r.selector).map(parseCompound))
 }
 
-const NO_CORNERS: ReadonlySet<Corner> = new Set()
-
-function hostCorners(part: string, rule: CssRule, index: readonly Compound[]): ReadonlySet<Corner> {
-	if (!parseCompound(part).pseudoElement) {
-		if (hasRadius(rule.declarations)) return roundedCorners(rule.declarations)
-		if (ruleHasRadius(rule)) return ALL_CORNERS
-	}
-	const host = parseCompound(part.replace(/::?(before|after)\b/gi, ""))
-	return index.some((general) => compoundCovers(general, host)) ? ALL_CORNERS : NO_CORNERS
+function isRoundedHost(part: string, rule: CssRule, index: readonly Compound[]): boolean {
+	if (ruleHasRadius(rule)) return true
+	const host = parseCompound(part)
+	return index.some((general) => compoundCovers(general, host))
 }
 
 const EDGE_PROP = /^border(?:-(?:top|right|bottom|left|block|inline|width|color|image)(?:-[\w-]+)?)?$/
+const OUTLINE_PROP = /^(?:border(?:-width|-color)?|box-shadow)$/
 const BACKGROUND_PROP = /^background(?:-color|-image)?$/
 
 function declarationOffset(declarations: readonly Declaration[], prop: RegExp, fallback: number): number {
@@ -45,9 +41,10 @@ function declarationOffset(declarations: readonly Declaration[], prop: RegExp, f
 
 type Hit = { readonly id: RuleId; readonly offset: number }
 
-function declarationHits(declarations: readonly Declaration[], corners: ReadonlySet<Corner>, fallback: number): Hit[] {
+function declarationHits(declarations: readonly Declaration[], rounded: boolean, fallback: number): Hit[] {
 	const hits: Hit[] = []
-	if (hasEdgeStripe(declarations, corners)) hits.push({ id: "edge-stripe", offset: declarationOffset(declarations, EDGE_PROP, fallback) })
+	if (hasEdgeStripe(declarations)) hits.push({ id: "edge-stripe", offset: declarationOffset(declarations, EDGE_PROP, fallback) })
+	else if (rounded && hasAccentOutline(declarations)) hits.push({ id: "accent-outline", offset: declarationOffset(declarations, OUTLINE_PROP, fallback) })
 	if (hasInsetShadowStripe(declarations)) hits.push({ id: "inset-shadow-stripe", offset: declarationOffset(declarations, /^box-shadow$/, fallback) })
 	if (hasGradientEdgeBand(declarations)) hits.push({ id: "gradient-stripe", offset: declarationOffset(declarations, BACKGROUND_PROP, fallback) })
 	return hits
@@ -57,17 +54,14 @@ function checkRule(rule: CssRule, index: readonly Compound[]): Hit[] {
 	const found = new Map<RuleId, number>()
 	const add = (hit: Hit) => found.set(hit.id, found.get(hit.id) ?? hit.offset)
 	for (const part of selectorParts(rule.selector)) {
-		const corners = isExemptSelector(part) ? NO_CORNERS : hostCorners(part, rule, index)
-		if (corners.size === 0) continue
+		if (isExemptSelector(part)) continue
 		if (parseCompound(part).pseudoElement) {
 			if (isPseudoBar(rule.declarations)) add({ id: "pseudo-bar", offset: declarationOffset(rule.declarations, BACKGROUND_PROP, rule.offset) })
 			continue
 		}
-		declarationHits(rule.declarations, corners, rule.offset).forEach(add)
-		const ownRounding = rule.applyClasses.some((c) => c.startsWith("rounded"))
-		for (const id of checkClassSet(ownRounding ? rule.applyClasses : ["rounded", ...rule.applyClasses])) {
-			add({ id, offset: rule.applyOffset ?? rule.offset })
-		}
+		const rounded = isRoundedHost(part, rule, index)
+		declarationHits(rule.declarations, rounded, rule.offset).forEach(add)
+		for (const id of checkClassSet(rule.applyClasses, rounded)) add({ id, offset: rule.applyOffset ?? rule.offset })
 	}
 	return [...found].map(([id, offset]) => ({ id, offset }))
 }
@@ -97,13 +91,13 @@ export function lintFiles(files: readonly SourceFile[]): Finding[] {
 		}
 		if (STYLESHEET.test(file.path)) continue
 		for (const group of classGroups(file.text, SCRIPT.test(file.path))) {
+			if (isExemptTag(group.tag)) continue
 			for (const id of checkClassSet(group.tokens)) report(group.offset, id)
 		}
 		for (const style of inlineStyles(file.text)) {
-			const own = roundedCorners(style.declarations)
-			const corners = own.size > 0 ? own : style.tagRounded ? ALL_CORNERS : NO_CORNERS
-			if (corners.size === 0) continue
-			for (const hit of declarationHits(style.declarations, corners, style.offset)) report(style.offset, hit.id)
+			if (isExemptTag(style.tag)) continue
+			const rounded = style.tagRounded || roundedCorners(style.declarations).size > 0
+			for (const hit of declarationHits(style.declarations, rounded, style.offset)) report(style.offset, hit.id)
 		}
 	}
 	return findings.sort((a, b) => a.file.localeCompare(b.file) || a.line - b.line || a.column - b.column)

package/packages/omo-codex/plugin/skills/frontend/scripts/perfection/accent-stripes/markup.ts

@@ -1,8 +1,8 @@
 import type { Declaration } from "./css-parse"
 import { looksLikeClassList } from "./tailwind"
 
-export type ClassGroup = { readonly tokens: readonly string[]; readonly offset: number }
-export type InlineStyle = { readonly declarations: readonly Declaration[]; readonly offset: number; readonly tagRounded: boolean }
+export type ClassGroup = { readonly tokens: readonly string[]; readonly offset: number; readonly tag: string }
+export type InlineStyle = { readonly declarations: readonly Declaration[]; readonly offset: number; readonly tagRounded: boolean; readonly tag: string }
 export type StyleBlock = { readonly css: string; readonly offset: number }
 
 const UNITLESS = new Set(["opacity", "z-index", "flex", "flex-grow", "flex-shrink", "font-weight", "line-height", "order"])
@@ -51,6 +51,13 @@ function stripInterpolation(literal: string): string {
 	return literal.replace(/\$\{[^}]*\}/g, " ")
 }
 
+/** Name of the element whose open tag contains `offset` ("" outside a tag, e.g. a cva string). */
+function tagNameAt(text: string, offset: number): string {
+	const open = text.lastIndexOf("<", offset)
+	if (open < 0 || text.slice(open, offset).includes(">")) return ""
+	return /^<([A-Za-z][\w.-]*)/.exec(text.slice(open))?.[1] ?? ""
+}
+
 function tokensOf(text: string): string[] {
 	return text.split(/\s+/).filter(Boolean)
 }
@@ -83,11 +90,11 @@ export function classGroups(text: string, scanLiterals: boolean): ClassGroup[] {
 		if (ch === '"' || ch === "'") {
 			const close = text.indexOf(ch, start + 1)
 			if (close < 0) continue
-			groups.push({ tokens: tokensOf(text.slice(start + 1, close)), offset: start })
+			groups.push({ tokens: tokensOf(text.slice(start + 1, close)), offset: start, tag: tagNameAt(text, start) })
 			covered.push([start, close])
 		} else if (ch === "{") {
 			const { end, literals } = readBalanced(text, start)
-			groups.push({ tokens: literals.flatMap(tokensOf), offset: start })
+			groups.push({ tokens: literals.flatMap(tokensOf), offset: start, tag: tagNameAt(text, start) })
 			covered.push([start, end])
 		}
 	}
@@ -96,7 +103,7 @@ export function classGroups(text: string, scanLiterals: boolean): ClassGroup[] {
 		const offset = m.index ?? 0
 		if (covered.some(([a, b]) => offset >= a && offset <= b)) continue
 		const body = stripInterpolation(m[2] ?? "")
-		if (looksLikeClassList(body)) groups.push({ tokens: tokensOf(body), offset })
+		if (looksLikeClassList(body)) groups.push({ tokens: tokensOf(body), offset, tag: "" })
 	}
 	return groups
 }
@@ -136,13 +143,13 @@ export function inlineStyles(text: string): InlineStyle[] {
 	for (const m of text.matchAll(/\bstyle\s*=\s*\{\{([\s\S]*?)\}\}/g)) {
 		const offset = m.index ?? 0
 		const end = offset + m[0].length
-		styles.push({ declarations: objectDeclarations(m[1] ?? ""), offset, tagRounded: tagIsRounded(text, offset, end) })
+		styles.push({ declarations: objectDeclarations(m[1] ?? ""), offset, tagRounded: tagIsRounded(text, offset, end), tag: tagNameAt(text, offset) })
 	}
 	for (const m of text.matchAll(/\bstyle\s*=\s*(["'])([\s\S]*?)\1/g)) {
 		const offset = m.index ?? 0
 		const body = (m[2] ?? "").trim()
 		const declarations = body.startsWith("{") ? objectDeclarations(body) : cssDeclarations(body)
-		styles.push({ declarations, offset, tagRounded: tagIsRounded(text, offset, offset + m[0].length) })
+		styles.push({ declarations, offset, tagRounded: tagIsRounded(text, offset, offset + m[0].length), tag: tagNameAt(text, offset) })
 	}
 	return styles
 }

package/packages/omo-codex/plugin/skills/frontend/scripts/perfection/accent-stripes/selector.ts

@@ -27,9 +27,13 @@ export function parseCompound(part: string): Compound {
 	}
 }
 
+export function isExemptTag(tag: string): boolean {
+	return EXEMPT_TAGS.has(tag.toLowerCase())
+}
+
 export function isExemptSelector(part: string): boolean {
 	if (EXEMPT_STATE.test(part)) return true
-	return EXEMPT_TAGS.has(parseCompound(part).tag)
+	return isExemptTag(parseCompound(part).tag)
 }
 
 export function selectorParts(selector: string): string[] {

package/packages/omo-codex/plugin/skills/frontend/scripts/perfection/accent-stripes/tailwind.ts

@@ -43,11 +43,15 @@ const SIDE_TOUCHES: Readonly<Record<string, readonly Corner[]>> = {
 }
 const ALL: readonly Corner[] = ["tl", "tr", "br", "bl"]
 
-function wideSideCorners(util: string): readonly Corner[] {
-	const m = /^border-([tlrbsexy]|bs|be)-(\d+|\[[^\]]+\])$/.exec(util)
-	if (!m?.[1] || !m[2]) return []
-	const width = /^\d+$/.test(m[2]) ? Number.parseInt(m[2], 10) : arbitraryPx(m[2])
-	return (width ?? 0) >= MIN_STRIPE_PX ? (SIDE_TOUCHES[m[1]] ?? []) : []
+const SIDE = /^(?:[tlrbsexy]|bs|be)-/
+
+function isWide(width: string | undefined): boolean {
+	if (!width) return false
+	return ((/^\d+$/.test(width) ? Number.parseInt(width, 10) : arbitraryPx(width)) ?? 0) >= MIN_STRIPE_PX
+}
+
+function isWideSide(util: string): boolean {
+	return isWide(/^border-(?:[tlrbsexy]|bs|be)-(\d+|\[[^\]]+\])$/.exec(util)?.[1])
 }
 
 function roundedCorners(utils: readonly string[]): Set<Corner> {
@@ -65,14 +69,30 @@ function roundedCorners(utils: readonly string[]): Set<Corner> {
 	return corners
 }
 
-function borderColorIsChromatic(util: string): boolean {
-	const m = /^border(?:-(?:[tlrbsexy]|bs|be))?-(.+)$/.exec(util)
-	const fragment = m?.[1]
+function colorIsChromatic(fragment: string | undefined): boolean {
 	if (!fragment || BORDER_STYLE.has(fragment) || /^\d+$/.test(fragment)) return false
 	if (fragment.startsWith("[") && arbitraryPx(fragment) !== undefined) return false
 	return classifyUtilityColor(fragment) === "chromatic"
 }
 
+function borderColorIsChromatic(util: string): boolean {
+	return colorIsChromatic(/^border(?:-(?:[tlrbsexy]|bs|be))?-(.+)$/.exec(util)?.[1])
+}
+
+function hasOutline(utils: readonly string[]): boolean {
+	const border = utils.some((u) => isWide(/^border-(\d+|\[[^\]]+\])$/.exec(u)?.[1]))
+	const borderColor = utils.some((u) => {
+		const fragment = /^border-(.+)$/.exec(u)?.[1]
+		return fragment !== undefined && !SIDE.test(fragment) && colorIsChromatic(fragment)
+	})
+	const ring = utils.some((u) => isWide(/^ring-(\d+|\[[^\]]+\])$/.exec(u)?.[1]))
+	const ringColor = utils.some((u) => {
+		const fragment = /^ring-(.+)$/.exec(u)?.[1]
+		return fragment !== undefined && !/^(?:inset|offset-)/.test(fragment) && colorIsChromatic(fragment)
+	})
+	return (border && borderColor) || (ring && ringColor)
+}
+
 function thinBar(utils: readonly string[], axis: "w" | "h"): boolean {
 	return utils.some((u) => {
 		const m = new RegExp(`^${axis}-(px|0\\.5|1|1\\.5|2|\\[[^\\]]+\\])$`).exec(u)
@@ -93,14 +113,12 @@ function isPseudoBar(utils: readonly string[]): boolean {
 	return chromaticBg && ((thinBar(utils, "w") && longBar(utils, "h")) || (thinBar(utils, "h") && longBar(utils, "w")))
 }
 
-export function checkClassSet(tokens: readonly string[]): RuleId[] {
+export function checkClassSet(tokens: readonly string[], hostRounded = false): RuleId[] {
 	const utilities = tokens.map(toUtility).filter((u): u is Utility => u !== undefined)
 	const base = utilities.filter((u) => u.layer === "base").map((u) => u.util)
-	const corners = roundedCorners(base)
-	if (corners.size === 0) return []
 	const found: RuleId[] = []
-	const bent = base.some((u) => wideSideCorners(u).some((c) => corners.has(c)))
-	if (bent && base.some(borderColorIsChromatic)) found.push("edge-stripe")
+	if (base.some(isWideSide) && base.some(borderColorIsChromatic)) found.push("edge-stripe")
+	else if ((hostRounded || roundedCorners(base).size > 0) && hasOutline(base)) found.push("accent-outline")
 	const shadows = base.filter((u) => u.startsWith("shadow-[") && u.endsWith("]"))
 	if (shadows.some((u) => isInsetShadowStripe(u.slice("shadow-[".length, -1).replace(/_/g, " ")))) {
 		found.push("inset-shadow-stripe")
@@ -113,5 +131,5 @@ export function checkClassSet(tokens: readonly string[]): RuleId[] {
 }
 
 export function looksLikeClassList(text: string): boolean {
-	return /(?:^|\s)(?:[\w-]+:)*rounded/.test(text)
+	return /(?:^|\s)(?:[\w-]+:)*(?:rounded|border-|ring-|shadow-\[|(?:before|after):)/.test(text)
 }

package/packages/omo-codex/plugin/skills/frontend/scripts/perfection/check-accent-stripes.ts

@@ -1,5 +1,5 @@
 #!/usr/bin/env bun
-// Flags the "coloured accent edge on a rounded card" slop tell in CSS, Tailwind and JSX.
+// Flags coloured one-side bars on any box and accent outlines on rounded cards in CSS, Tailwind and JSX.
 // Usage: bun check-accent-stripes.ts [--json] <file-or-dir>...   Exit 0 clean, 1 findings, 2 usage.
 import { readdirSync, readFileSync, statSync } from "node:fs"
 import { join } from "node:path"

package/packages/omo-codex/plugin/skills/frontend/scripts/perfection/fixtures/accent-stripes/negative/inline-ok.tsx

@@ -3,5 +3,6 @@ export const Ok = () => (
     <div style={{ borderRadius: 8, border: "1px solid #e5e7eb" }}>Card</div>
     <div style={{ borderRadius: 8, boxShadow: "inset 0 0 0 1px rgba(0,0,0,.1)" }}>Ring</div>
     <p>Don't stripe {"rounded"} cards.</p>
+    <table><tbody><tr><td style={{ borderLeft: "4px solid #6366f1" }}>Sorted</td></tr></tbody></table>
   </>
 )

package/packages/omo-codex/plugin/skills/frontend/scripts/perfection/fixtures/accent-stripes/negative/neutral-and-flat.css

@@ -1,6 +1,6 @@
 .list-item { border-bottom: 1px solid #e5e7eb; }
 .panel { border-radius: 12px; border-top: 1px solid rgba(0, 0, 0, 0.08); }
 .quiet { border-radius: 12px; border-left: 4px solid #e5e7eb; }
-.section { border-top: 4px solid #6366f1; }
+blockquote { border-left: 3px solid #d4d4d8; padding-left: 16px; }
 .token { border-radius: 8px; border-left: 2px solid var(--color-border); }
 .ink { border-radius: 8px; border-left: 2px solid var(--text-primary); }

package/packages/omo-codex/plugin/skills/frontend/scripts/perfection/fixtures/accent-stripes/negative/tailwind-ok.tsx

@@ -4,8 +4,11 @@ export const Ok = () => (
     <div className="rounded-xl border-l-4 border-l-zinc-300 p-4">Neutral edge</div>
     <button className="rounded-md focus-visible:ring-2 focus-visible:ring-blue-500">Go</button>
     <input className="rounded-md border-b-2 aria-invalid:border-b-red-500 invalid:border-red-500" />
-    <div className="border-l-4 border-blue-500 pl-4">Flat quote, no corners</div>
-    <div className="rounded-none border-l-4 border-blue-500">Square</div>
+    <blockquote className="border-l-2 border-zinc-300 pl-4">Neutral quote rule</blockquote>
+    <button className="rounded-md border border-indigo-500 px-3">Outline button</button>
     <div className="rounded-lg bg-blue-50 p-4 text-blue-900">Tonal surface</div>
+    <input className="border-b-2 border-indigo-500" />
+    <select className="rounded-md border-2 border-indigo-500" />
+    <table><tbody><tr><td className="border-l-4 border-indigo-500">Sorted</td></tr></tbody></table>
   </div>
 )

package/packages/omo-codex/plugin/skills/frontend/scripts/perfection/fixtures/accent-stripes/negative/uniform-and-rings.css

@@ -1,3 +1,3 @@
-.selected { border-radius: 8px; border: 2px solid #6366f1; }
-.chip { border-radius: 999px; box-shadow: inset 0 0 0 2px #6366f1; }
+.outline-button { border-radius: 6px; border: 1px solid var(--primary); }
+.neutral-frame { border-radius: 8px; border: 2px solid #e5e7eb; }
 .lift { border-radius: 12px; box-shadow: 0 4px 12px rgb(0 0 0 / 0.12); }

package/packages/omo-codex/plugin/skills/frontend/scripts/perfection/fixtures/accent-stripes/positive/accent-outlines.css

@@ -0,0 +1,4 @@
+.selected { border-radius: 8px; border: 2px solid #6366f1; }
+.plan { border-radius: 16px; box-shadow: inset 0 0 0 2px #6366f1; }
+.card { border-radius: 12px; }
+.card.is-active { border-width: 2px; border-style: solid; border-color: var(--primary); }

package/packages/omo-codex/plugin/skills/frontend/scripts/perfection/fixtures/accent-stripes/positive/accent-outlines.tsx

@@ -0,0 +1,8 @@
+export const Plans = () => (
+  <>
+    <div className="rounded-xl border-2 border-indigo-500 p-6">Pro</div>
+    <div className="rounded-2xl p-6 ring-2 ring-primary">Team</div>
+    <div className="rounded-lg focus:ring-2 focus:ring-blue-500">Focused</div>
+    <div style={{ borderRadius: 12, border: "2px solid #6366f1" }}>Inline</div>
+  </>
+)

package/packages/omo-codex/plugin/skills/frontend/scripts/perfection/fixtures/accent-stripes/{negative → positive}/flat-stripe-side.tsx

@@ -1,4 +1,4 @@
-const css = `
+const styles = css`
   .alert { border-left: 4px solid #dc2626; border-radius: 0 6px 6px 0; }
 `
 
@@ -7,5 +7,7 @@ export const Quotes = () => (
     <blockquote className="rounded-r-lg border-l-4 border-blue-500 pl-4">Square on the stripe side</blockquote>
     <aside className="rounded-xl rounded-l-none border-l-4 border-sky-500">Left corners squared</aside>
     <style>{`.note { border-left: 4px solid #16a34a; border-top-right-radius: 8px; border-bottom-right-radius: 8px; }`}</style>
+    <div className="border-l-4 border-blue-500 pl-4">Flat quote, no corners</div>
+    <div className="rounded-none border-l-4 border-blue-500">Square</div>
   </>
 )

package/packages/omo-codex/plugin/skills/frontend/scripts/perfection/fixtures/accent-stripes/positive/report-callouts.html

@@ -0,0 +1,8 @@
+<style>
+  h2 { padding-bottom: 4px; border-bottom: 2px solid #1d1d1f; }
+  .cover { border-left: 6px solid #2f7d4f; padding: 6px 0 6px 14px; margin-bottom: 14px; }
+  th, td { border-bottom: 1px solid #e3e3e8; padding: 5px 6px; }
+  .warn { background: #fff6e5; border-left: 4px solid #e0a100; padding: 8px 12px; border-radius: 6px; }
+</style>
+<div class="cover"><h1>Weekly report</h1></div>
+<div class="warn">Two runs need a look.</div>

package/packages/omo-codex/plugin/skills/frontend/scripts/perfection/fixtures/accent-stripes/positive/square-surfaces.css

@@ -0,0 +1,8 @@
+.section { border-top: 4px solid #6366f1; }
+
+.stat { position: relative; padding: 16px; }
+.stat::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: #10b981; }
+
+.note { padding: 12px; box-shadow: inset 4px 0 0 0 #f59e0b; }
+
+.band { padding: 12px; background: linear-gradient(to right, #6366f1 4px, #fff 4px); }

package/packages/omo-codex/plugin/skills/ulw-research/SKILL.md

@@ -39,6 +39,8 @@ Run this skill only when the user explicitly demands it: the word "ulw-research"
 
 Open your reply with the line `ULW-RESEARCH MODE ENABLED!`. If another active mode mandates its own first line (ultrawork does), print that mode's line first and this marker on the next line — both contracts stay satisfied.
 
+**What a shortened run still owes.** If you judge the topic settled and shorten the research, say so, but two things survive any shortening: when the harness can show an HTML page inline, the final report is shown that way (the answer, its figures, its sources), and a visual reproduction is compared against real frames of its source with the side-by-side pairs inside that report (the final-materials phase). A built app or 3D scene shown inline is the product, not the report; show the report as well.
+
 ## Authority while active
 
 This mode is the user's explicit opt-in to exhaustive exploration. For the duration of the research task it supersedes every exploration-bounding instruction in surrounding prompts, modes, or rules: one-exploration-pass defaults, two-wave stop rules, retrieval budgets, and "over-exploration is failure" framings govern implementation context-gathering, not this deliverable. Here, under-exploration is the failure. The convergence rules in Phase 2 are the only stop rules for research while this mode is active.
@@ -57,6 +59,8 @@ The research is done when all of these hold:
 - The deliverable lane and format were derived from the destination or asked through the empty-info interview without blocking collection, recorded in `brief.md` with `answered_by`, and the final materials match that record.
 - The delivered artifact passed the delivery gates in order (static gates, layout gates, visual QA, and the proofread pass where the harness provides one), each status is in `outcome.json`, and `outcome verify` passed.
 - Every excursion opened during the run was closed by an EXIT rule, folded back into the claim or axis that triggered it, and recorded in both `excursion-log.md` and the ulw-loop ledger.
+- When the harness can show an HTML page inline, the report was shown inline before the artifact paths.
+- When the ask reproduces a visual source, the report carries side-by-side pairs of real source frames and the output rendered at the same moments, each with its critique, and the differences they surfaced were fixed or listed as gaps. A simple or well-understood topic shortens the research, never this comparison.
 - The delivery message carries the closing briefing printed by `outcome briefing`: sources (total + unique domains), elapsed minutes, every promised deliverable with its status, and any residual defects.
 - The session journal reconstructs what was searched, found, and expanded, wave by wave, and it was written in real time rather than reconstructed at the end.
 
@@ -161,7 +165,7 @@ Never block collection on the shape of the deliverable, and never guess it eithe
 1. **Derive first.** Name the lane (`template-strict`, `template-vibe`, `no-format`, `edit-existing`) and the promised formats from the request and its destination (the reference's section 3). When the request refers to an existing deliverable, decide its state with `node "$SKILL_DIR/scripts/report-tools.mjs" outcome state --deliverable <path> --session-dir "$SESSION_DIR"`: `partial` resumes the skeleton on disk, `complete` means edit-existing and never a regenerated report. `$SKILL_DIR` is this skill's own directory, the folder containing this SKILL.md.
 2. **Read the requester's format memory** with the memory tool when the harness exposes one: the pointer `system/human/report-style.md`, then `reference/human-report-style.md`; take the choice recorded for the most similar context (same destination kind and audience) as the first option.
 3. **Ask only what is still missing**: at most the reference's three questions (destination and format, audience and length, template lineage) in one call to the harness question tool (`ask_user_question` or `request_user_input`), non-blocking where the harness supports it, each with its default first, a free-text "describe the format" path, and "don't care, you decide". Collection starts without waiting; a late answer is folded in until the assembly worker starts, and after that it becomes a re-render request.
-4. **Record it.** Write `## Deliverable` into `brief.md` (lane, state, formats, destination, audience, template, format description, each with `answered_by: user|default|request`) and open the manifest in the same step: `node "$SKILL_DIR/scripts/report-tools.mjs" outcome init --promised <formats> --lane <lane> --session-dir "$SESSION_DIR"`.
+4. **Record it.** Write `## Deliverable` into `brief.md` (lane, state, formats, destination, audience, template, format description, each with `answered_by: user|default|request`) and open the manifest in the same step: `node "$SKILL_DIR/scripts/report-tools.mjs" outcome init --promised <formats> --lane <lane> --session-dir "$SESSION_DIR"`. When the ask is to recreate, reproduce, or rebuild something visual, add `Reference compare: required` with the source (URL or file) and the moments to compare; the comparison runs on every round of the build, not only at the end.
 
 Phase 5 opens by turning the recorded fields into `design-spec.md`.
 
@@ -336,6 +340,8 @@ Asset workers (background, parallel, each fed `design-spec.md`) — visuals are
 
 **Every final report is visual — binding.** It carries at least one data visualization of the run's own findings (a chart drawn from the data table, next to the claim it supports), a diagram wherever structure matters, and the topic's own screenshots and video, embedded or linked with attribution; every figure is captioned, sourced, and given alt text. Mermaid for flows, timelines, and relations; generated charts for numbers; image generation only where an illustration genuinely helps; PlotNeuralNet for paper-format reports that describe model architectures. Every asset lane reads [references/report-visualization.md](references/report-visualization.md) first: which tool fits which finding, the render commands, the quality bar, and the checklist the gates apply. A light-tier post still carries one visual when it reports numbers or structure.
 
+**Visual reproductions are compared against the source — binding.** When the ask is to recreate, reproduce, or rebuild something visual (a clip in 3D, an interface from a screenshot, a figure), real frames or captures from the source are the reference: extract them at the moments that define the source, render the output at the same moments and viewpoints, compose side-by-side pairs, critique every pair by looking at it, fix the largest differences, and compare again within the repair bound. The final pairs, and the first-round pairs in the correction log, go into the report. Procedure: [references/report-visualization.md](references/report-visualization.md), section 3, Reference compare. A reproduction checked only against itself is unverified.
+
 **Verify the asset manifest before rendering.** List every asset the document references, assert each file exists and is non-empty on disk, and re-render whatever is missing. A document that renders with three broken diagrams is a document you will publish twice.
 
 Assembly worker — `task(category="deep-low", load_skills=["frontend", "visual-qa", "open-design", "data-scientist", "imagegen", "ulw-loop"], run_in_background=true, ...)`: before writing, read every available design and visualization skill and apply it — the report is a designed artifact, not a text dump; the worker's prompt carries `design-spec.md`. Use the template the user approved; absent a stronger house style the default skeleton is executive summary → key findings by theme → detailed analysis (quotes under 20 words with attribution, charts, Mermaid graphs, generated visuals, SHA-pinned permalinks, verification results) → comparative analysis when options compete → numbered sources with access dates → methodology appendix (workers, waves, searches, verifications, debate rounds) → correction log naming what verification overturned. Write it long and specific: every claim cites `[Source N]`, and the sources section lists every source the run actually used rather than a curated few.
@@ -350,7 +356,7 @@ Nothing reaches the user until the gates pass. Record each result with `node "$S
 
 **Repair is bounded.** After every gate run that found defects, ask `node "$SKILL_DIR/scripts/report-tools.mjs" repair decide --state "$SESSION_DIR/repair-state.json" --defects "$SESSION_DIR/defects.json" --artifact-bytes <bytes> --renders <pages> --session-dir "$SESSION_DIR"` and obey it: `repair` means fix and re-run; `deliver` means stop and ship with the residual defects the manifest now lists; `block` means a content-integrity defect remains (or there is no usable artifact), so do not deliver: tell the user what blocks it and record the row as `failed` with the reason. Never repair past a stop decision (3 attempts, a 2-attempt plateau, an oscillation, or 15 minutes; the reference's section 8).
 
-Then resolve every manifest row (`outcome set <format> delivered --path <file>` or `blocked_capability` / `skipped` / `failed` with `--reason`) and deliver: the artifact plus a compact chat-readable summary of what it says — the answer in a few sentences, the numbers that matter, and what to look at first. The document is the deliverable; the summary is what gets it read.
+Then resolve every manifest row (`outcome set <format> delivered --path <file>` or `blocked_capability` / `skipped` / `failed` with `--reason`) and deliver. **Show the report inline first when the harness can.** When this session has a tool that shows an HTML page inline in the conversation (`show_html_page`, `html_render`), the requester's first view of the result is the report itself: the gated `report.html` when it fits the tool, otherwise an inline edition built from the same synthesis and assets, with the reference-compare pairs when the run has them ([references/deliverable-phase.md](references/deliverable-phase.md), section 9, Showing the report inline). Then give the artifact paths and a compact chat-readable summary of what the report says — the answer in a few sentences, the numbers that matter, and what to look at first. This holds on every tier, a chat answer included, and when the thing built is itself a page (an app, a 3D scene), showing it does not replace the report page. Without an inline page tool, deliver the artifact paths plus that summary. The document is the deliverable; the summary is what gets it read.
 
 ### The closing briefing — every run ends with it
 
@@ -415,4 +421,6 @@ High-yield combinations: official docs (`site:<docs domain>`), GitHub implementa
 | Chasing an interesting find with no ENTER trigger | Excursions need a named trigger; everything else stays a queued lead |
 | An excursion that never came back, or drifted into a new mission | EXIT rules are unconditional; depth 3 means promote it to an axis or record it as a gap |
 | An excursion whose result was never folded back | Every EXIT writes what it changed in the top-level answer, `none` included, and mirrors into the loop ledger |
+| Ending with file paths while an inline HTML page tool is available | Show the report inline first (the gated `report.html` or its inline edition), then the paths and the summary |
+| A visual reproduction checked only against itself | Reference compare: real source frames next to renders at the same moments, a critique per pair, fixes, and the pairs in the report |
 | Delivering without the closing briefing | Paste the block `outcome briefing` prints; never compute or recall its numbers by hand |

package/packages/omo-codex/plugin/skills/ulw-research/references/deliverable-phase.md

@@ -166,6 +166,16 @@ node "$SKILL_DIR/scripts/report-tools.mjs" outcome briefing --session-dir "$SESS
 - `finish` stamps the finish time, the elapsed minutes from the session directory's start stamp, and the source and domain counts from `sources-ledger.md`.
 - `briefing` prints the closing block from the manifest and the ledger: sources and distinct domains, elapsed minutes, every deliverable with its status, the gate results, the residual defects, and the repair summary. That text is the closing briefing, pasted as printed, never filled in from memory.
 
+### Showing the report inline
+
+When the session has a tool that shows a self-contained HTML page inline in the conversation (`show_html_page` in OmO, `html_render` on hosts that offer it), the requester sees the report there first, after `verify` passes and before the closing briefing. A path to a file the requester has to go and open is not the first thing they read.
+
+- **Which page.** The gated `report.html` itself when the promised deliverable is a self-contained HTML report within the tool's size limit. Otherwise (a PDF, DOCX, LaTeX, or slide deliverable, or an HTML report over the limit) build an inline edition from the same `SYNTHESIS.md` and the same assets: the answer, the headline figures, the reference-compare pairs when the run has them, the key findings with their citations, the numbered sources, and the paths of the promised artifacts. Run `check` on the inline edition like any HTML deliverable.
+- **Self-contained.** No network: styles and scripts inline, no remote fonts, no CDN. Pass local images as absolute file paths (the tool inlines them) or as data URIs. Render it once at the reply width and at 390 px before showing it, and pass the measured height. When the session has the `visualize` skill, follow its inline-page constraints.
+- **Every tier, and always the report.** A light-tier chat answer with no promised document still ends with an inline page: the answer, its figures, the reference-compare pairs, and the sources. When the thing built is itself a page (an app, a 3D scene, a demo), show it too, but it never stands in for the report page, and a page that only links or redirects to a file is not a report.
+- **Not a manifest format.** The inline page never replaces or resolves a promised format; every manifest row still ends `delivered`, `blocked_capability`, `skipped`, or `failed` with its own artifact.
+- **No inline tool.** Deliver the artifact paths and the chat summary as before.
+
 ## 10. Command reference
 
 Invoke every command as `node "$SKILL_DIR/scripts/report-tools.mjs" <command>`. Exit codes for all of them: `0` pass, `1` semantic failure, `2` usage or IO error.

package/packages/omo-codex/plugin/skills/ulw-research/references/report-visualization.md

@@ -25,6 +25,7 @@ A report that ships with none of these is incomplete. The static gate raises `re
 | A product, interface, or page the report discusses | A screenshot captured while reading the source, through the browser skill | PNG |
 | A concept that has no data and no structure, a cover | The image-generation skill, only when it helps the reader understand | PNG |
 | A source video or talk | An embed (web) or a still frame plus link and timestamp (paginated) | iframe or PNG |
+| A reproduction of a visual source (a clip rebuilt in 3D, an interface rebuilt from a screenshot, a figure redrawn) | Reference-compare pairs: a real source frame next to the output rendered at the same moment and viewpoint | PNG per pair |
 
 Image generation never draws data, numbers, diagrams with labels, or anything the reader could mistake for evidence. Its caption says it is an illustration.
 
@@ -86,6 +87,27 @@ pdftocairo -svg arch.pdf "$SESSION_DIR/assets/arch.svg"   # for an HTML report;
 - Capture product and page screenshots through the browser skill while the source is open, at a readable width, and crop to the part the claim is about. Caption with the source and the access date.
 - Embed a video in a web report with the platform's embed and a timestamp; in a paginated report, use a still frame from the moment the claim refers to, with the link and timestamp in the caption.
 
+### Reference compare (visual reproductions)
+
+When the deliverable reproduces a visual source (recreate a clip in 3D, rebuild an interface from a screenshot, redraw a figure), the source is the test oracle. An output checked only against itself looks finished to its author and wrong to anyone who has seen the original, so the run compares the two directly and shows the comparison.
+
+1. **Pick the moments.** Choose 4 to 8 moments that carry the identity of the source: the start and end state, the peak of each motion, distinctive poses, camera framings, and the shot the requester pointed at. Record each in `$SESSION_DIR/compare/moments.json` with its timestamp (or region, for a still), what it shows, and the camera or viewport.
+2. **Extract real frames from the source.** For a video, download only the sections you need, then cut one frame per moment. Run the download as a background job; a long download outlives a single tool call.
+   ```bash
+   mkdir -p "$SESSION_DIR/compare"
+   uvx yt-dlp -f 'bv*[height<=720]/b[height<=720]' --download-sections '*<start>-<end>' --force-keyframes-at-cuts --remux-video mp4 -o "$SESSION_DIR/compare/source-<start>.%(ext)s" '<url>'
+   ffmpeg -y -v error -ss <seconds into the section> -i "$SESSION_DIR/compare/source-<start>.mp4" -frames:v 1 "$SESSION_DIR/compare/ref-<n>.png"
+   ```
+   For an image, use the original file. For a page or interface, capture it through the browser skill at the viewport the output targets. Never substitute a thumbnail, a generated image, or a description for the real frame.
+3. **Render the output at the same moment and viewpoint.** Match the time into the motion, the camera position and field of view, the framing, and the aspect ratio. For a 3D scene, move the camera to the source shot instead of capturing the scene's default camera. Save `out-<n>.png`.
+4. **Compose each pair.** Reference on the left, output on the right, scaled to the same height:
+   ```bash
+   ffmpeg -y -v error -i "$SESSION_DIR/compare/ref-<n>.png" -i "$SESSION_DIR/compare/out-<n>.png" -filter_complex "[0:v]scale=-2:540[a];[1:v]scale=-2:540[b];[a][b]hstack=inputs=2" "$SESSION_DIR/compare/pair-<n>-r<round>.png"
+   ```
+5. **Critique every pair by looking at it.** Open each pair image and write `$SESSION_DIR/compare/critique-r<round>.md`: per pair, every visible difference ranked by how much a viewer would notice it (silhouette and proportions, pose and orientation, motion path and timing, camera and framing, scale against the surroundings, color and lighting, missing or extra elements), each with its likely cause and the fix.
+6. **Fix and compare again.** Fix the largest differences first, re-render the same moments, compose the next round, and critique again. Stop after 3 rounds or after 2 rounds that close no listed difference, the same bound the repair loop uses; every difference still open becomes a residual gap in the report.
+7. **Put the comparison in the report.** A "Reference comparison" section holds the final pair for each moment as a captioned figure: the moment and timestamp, the source with attribution and link, what now matches, and what still differs. The first-round pairs go in the correction log next to their final pairs, so the reader sees what the comparison changed. Alt text describes both halves.
+
 ### Generated illustrations
 
 Use the image-generation skill only for a cover or a concept illustration that helps the reader, prompted from the design spec's palette and register. Never let generated images carry text, numbers, or logos the reader could read as fact.
@@ -123,4 +145,5 @@ The static gate (`report-tools check`) enforces the machine-checkable rows; visu
 | Each major quantitative finding has a chart and each structural finding has a diagram | visual QA |
 | Diagram and chart text renders in the spec font and is legible at phone width | visual QA |
 | Source videos and screenshots are embedded or linked with attribution where the topic has them | visual QA |
+| A visual reproduction carries reference-compare pairs (final and first round) and a critique for every pair | visual QA |
 | Generated illustrations carry no fake data or text and are captioned as illustrations | visual QA |