mirror of
https://github.com/garrytan/gstack.git
synced 2026-10-03 09:56:57 +02:00
garrytan
a06d22e52a
- review-army-perf-n-plus-one: the parent copied full checklists into agent prompts and ran web research before dispatch (290 s on a 12-line diff); 212 s now. - review-design-lite: 5 of 6 captured trials reported the detector absent without probing; the probe is mandatory and its first line is reported, and the contract credits only fake-engine rule ids the checklist never names. - review-exploratory-small-cli: the fixture never gave review-log's direct invocation or status vocabulary; the model ran it through bun and wrote status "blocked". The prompt states both and the validator rejects out-of-vocabulary review statuses. Each case passed a focused paid run after repair.
35 lines
43 KiB
JSON
35 lines
43 KiB
JSON
{
|
||
"provenance": "review-output.md bodies written by the review-design-lite Write tool call in Periodic Evals native captures (native-captures-ci-<run>-1-eval-slices-N). scanRan records whether the transcript ran gstack-design-detect.ts scan. Only the 36633323521 t1 capture probed and scanned; the others never ran the probe yet the legacy contract accepted t3 and 36629958451 t1 because they mention 'detector' or the checklist-named [ai-color-palette]. The local focused run t2 (aba80c8 plus the first checklist repair) inferred absence from a file listing and never probed.",
|
||
"reports": [
|
||
{
|
||
"run": "36633323521",
|
||
"trial": "t1",
|
||
"scanRan": true,
|
||
"report": "# /review — feature/add-landing-page vs main\n\nBase branch: `main` (no `origin` remote; git-native fallback). Diff: `landing.html` (+41), `styles.css` (+86/−1).\nScope: `SCOPE_FRONTEND=true` → design checklist applied. No `DESIGN.md` → universal principles.\nDetector: `IMPECCABLE_READY`, exit 2, 6 hits (low-contrast ×3, skipped-heading, ai-color-palette, marketing-buzzword). Detector `file` field names `test/fixtures/review-eval-design-slop.html`, which does not exist in this repo — hits are credited only where they match code I read in `landing.html`/`styles.css`. No ignored rules in config.\nFixes are listed by tier but **not applied** — this run was requested as a written report.\n\n---\n\n## Pre-Landing Review: 4 issues (0 critical, 4 informational)\n\nPass 1 (SQL, races, LLM trust boundary, shell injection, enum completeness): nothing applicable — static HTML/CSS, no data or execution paths.\n\n**AUTO-FIX:**\n- [INFORMATIONAL] (confidence: 9/10) `styles.css:1`, `landing.html:10,17` — Eval annotations (`/* Planted design anti-patterns for E2E eval — 7 issues */`, `<!-- Issue 6: ... -->`) ship with the page.\n Fix: delete the fixture comments before landing.\n- [INFORMATIONAL] (confidence: 8/10) `landing.html:14` — `<button>` has no `type`; inside a future `<form>` it defaults to `submit`, and it currently does nothing at all (no handler, no link).\n Fix: `<a class=\"button\" href=\"/signup\">` if it navigates, or `<button type=\"button\">` with a handler.\n\n**NEEDS INPUT:**\n- [INFORMATIONAL] (confidence: 8/10) `landing.html:11,18,36` — Landmark regions are plain `<div>`s (`.hero`, `.features`, `.footer`); no `<main>`, `<header>`, `<footer>`, `<section>`. Screen readers get no page structure.\n Recommended fix: `<header class=\"hero\">`, `<main><section class=\"features\">`, `<footer class=\"footer\">`.\n- [INFORMATIONAL] (confidence: 7/10) `landing.html:38` — `<a href=\"#\">Terms of Service</a>` is a dead placeholder link (Completeness Gap — the real URL is a one-line change).\n Recommended fix: point at the actual terms page, or drop the link until one exists.\n\nShared-code opportunities: none — two files, no repeated authored blocks with ≥2 callers.\nTODOS.md: absent, skipped. Docs staleness: no root docs describe this page, skipped.\n\n---\n\n## Design Review: 19 issues (5 auto-fixable, 11 need input, 3 possible)\n\n**AUTO-FIX** (mechanical CSS, HIGH confidence):\n- [HIGH] `styles.css:6` — Blacklisted font: `font-family: 'Papyrus', sans-serif`. Also a fantasy face falling back to a sans stack, so the two renderings look nothing alike.\n Fix: pick a real text face (self-hosted or system stack) and give it a matching generic fallback.\n- [HIGH] [tiny-text] `styles.css:7` — Body text `font-size: 14px` (base was 16px on main; this PR regresses it).\n Fix: `font-size: 16px` (or `1rem`).\n- [HIGH] [tiny-text] `styles.css:71` — `.small-link { font-size: 11px }` — legal link at 11px is unreadable on mobile.\n Fix: `font-size: 1rem` (or 0.875rem minimum for secondary text).\n- [HIGH] `styles.css:61` — `button { outline: none }` with no replacement focus indicator — keyboard users lose the focus ring on the only CTA.\n Fix: remove `outline: none`; add `button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }`.\n- [HIGH] `styles.css:77-78` — `!important` ×2 (`color: red !important; margin-left: 10px !important`). `.override` is a single-class selector with nothing to override.\n Fix: drop both `!important`s; the rule already wins on specificity.\n\n**NEEDS INPUT** (design judgment):\n- [MEDIUM] [ai-color-palette] `styles.css:14` — `linear-gradient(135deg, #6366f1, #8b5cf6)` hero, `#6366f1` button (`:62`), `#ede9fe` icon circles (`:51`), `#1e1b4b` footer (`:84`). Indigo→violet is the canonical AI palette. (detector + checklist)\n Recommended fix: one solid brand color the product actually owns; kill the gradient.\n- [MEDIUM] Generic hero copy `landing.html:12-13,37` — \"Welcome to Our Platform\", \"Your all-in-one solution for everything you need\", \"Unlock the power of our platform today\". Three of the five phrases the checklist greps for, verbatim.\n Recommended fix: say what the product does, for whom, in one concrete sentence.\n- [MEDIUM] [marketing-buzzword] `landing.html:32` — \"streamline your workflow effortlessly\" hits two buzzwords in one clause; `:37` \"Unlock\". (detector + checklist)\n Recommended fix: replace with the specific thing the feature does.\n- [MEDIUM] `landing.html:14` — \"Get Started\" is the only CTA on the page.\n Recommended fix: name the outcome (\"Start a free project\", \"Book a demo\").\n- [MEDIUM] Centered everything — `text-align: center` on `.hero`, `.hero h1`, `.hero p`, `.features`, `.feature-card`, `.footer` (`styles.css:15,21,26,36,42,82`): 6 of 7 text containers, well past the 60% threshold.\n Recommended fix: left-align feature copy and footer; center only the hero if at all.\n- [MEDIUM] Emoji/symbols as icons — `landing.html:20,25,30` `★` ★ `⚡` ⚡ `⚙` ⚙ used as feature icons; rendering varies per platform.\n Recommended fix: inline SVG icons, or no icon.\n- [MEDIUM] Interaction states — `button` (`styles.css:60`) and `.small-link` (`:70`) have no `:hover`, `:focus`, or `:focus-visible` rules anywhere in the file.\n Recommended fix: add `:hover` and `:focus-visible` for both.\n- [MEDIUM] Contrast — `#ffffff` on `#8b5cf6` ≈ 4.2:1 and on `#6366f1` ≈ 4.47:1 (hero `.hero p` at 20px is borderline large-text; button text at 14px is not); `red` on `#1e1b4b` ≈ 4.0:1 (`.override`). All under WCAG AA 4.5:1 for body text. (detector + verified against `styles.css:14,17,62-63,77,84-85`)\n Recommended fix: darken the button/hero surface or switch to a palette that clears 4.5:1; drop `color: red` on the footer.\n- [HIGH] Heading hierarchy — `landing.html:12` `<h1>` followed directly by `<h3>` (`:21,26,31`) with no `<h2>`. (detector + checklist)\n Recommended fix: promote the feature titles to `<h2>`, or add a section `<h2>` above the grid.\n- [MEDIUM] No responsive handling — `.features { grid-template-columns: repeat(3, 1fr) }` (`styles.css:33`) with no `@media` anywhere; three 32px-padded cards squeeze at 375px wide.\n Recommended fix: `grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr))`.\n- [MEDIUM] No `max-width` on any text container — `.hero p`, `.feature-card p`, `.footer p` will run past 75 characters on wide viewports.\n Recommended fix: `max-width: 60ch` on paragraph wrappers, or a page `max-width` container.\n\n**POSSIBLE (verify visually):**\n- [LOW] 3-column feature grid — `landing.html:18-34` + `styles.css:31-37`: exactly three children, each icon-in-circle + `<h3>` + one-line `<p>`. The most recognizable AI layout. Verify with /design-review.\n- [LOW] Icons in colored circles — `.icon-circle` (`styles.css:47-57`): `border-radius: 50%` + `#ede9fe` background as decorative container. Verify with /design-review.\n- [LOW] Touch target — `.small-link` at 11px with `padding: 4px 8px` ≈ 19px tall, well under 44px. Verify with /design-review.\n\nSuppressed as below threshold: browser defaults unthemed (`::selection`, `caret-color`, etc. — none present) — real but noise for a one-page fixture; uniform border-radius (24px on 2 of 3 radiused elements, under the 80% rule).\n\n---\n\n## Summary\n\n| | Critical | Informational / Auto-fix | Needs input | Possible |\n|---|---|---|---|---|\n| Code review | 0 | 2 auto-fix, 2 ask | — | — |\n| Design review | — | 5 auto-fix | 11 | 3 |\n\nEvery planted issue in the fixture comments (Papyrus, 14px body, `outline: none`, `!important`, purple gradient, generic hero copy, 3-column grid) was caught, plus 12 unlisted ones (11px link, contrast, heading skip, no responsive grid, no hover/focus, no landmarks, dead link, buzzwords, emoji icons, centered-everything, sole \"Get Started\" CTA, missing max-width).\n"
|
||
},
|
||
{
|
||
"run": "36633323521",
|
||
"trial": "t2",
|
||
"scanRan": false,
|
||
"report": "# /review — feature/add-landing-page vs main\n\nBase branch: `main` (no `origin` remote; git-native fallback). Diff: `landing.html` (+41), `styles.css` (+86/−1).\nGreptile step skipped (no PR/remote). No `DESIGN.md` — universal design principles apply.\nFrontend files changed → design checklist applied. No source files were modified in this run (findings only); AUTO-FIX items are listed with the exact change to apply.\n\n---\n\n## Pre-Landing Review: 4 issues (0 critical, 4 informational)\n\nPass 1 (SQL / races / LLM trust / shell / enums): nothing applicable — static HTML+CSS, no data layer, no scripts.\n\n**AUTO-FIX:**\n- [styles.css:1] `/* Planted design anti-patterns for E2E eval — 7 issues */` and the `Issue N:` comments (styles.css:3-4, 12, 30, 57, 74; landing.html:10, 17) narrate the defects rather than the code → remove before landing.\n- [landing.html:11-38] Page is built from `<div>`s only — no `<main>`/`<header>`/`<section>`/`<footer>` landmarks → `<div class=\"hero\">` → `<header class=\"hero\">`, `<div class=\"features\">` → `<section class=\"features\">`, `<div class=\"footer\">` → `<footer class=\"footer\">`.\n\n**NEEDS INPUT:**\n- [landing.html:38] `<a href=\"#\" class=\"small-link\">Terms of Service</a>` is a dead placeholder link that navigates to page top.\n Recommended fix: point at the real ToS URL or drop the link until one exists.\n- [styles.css:75, 83] `.override { color: red }` on the `#1e1b4b` footer ≈ 4.0:1 contrast, below WCAG AA 4.5:1 for 14px text. (Medium confidence, verify this is actually an issue — computed, not measured.) `white` on `#6366f1` for the button is ≈ 4.5:1, borderline.\n Recommended fix: pick a footer accent from the palette with ≥4.5:1 against `#1e1b4b`, or drop the red entirely (see design finding on `.override`).\n\n---\n\n## Design Review: 20 issues (5 auto-fixable, 12 need input, 3 possible)\n\n**AUTO-FIX:**\n- [styles.css:6] `font-family: 'Papyrus', sans-serif` — blacklisted font [HIGH] → replace with a real typeface (e.g. a self-hosted humanist sans); keep `sans-serif` fallback.\n- [styles.css:7] `body { font-size: 14px }` — body text under 16px [HIGH, tiny-text]. Note the diff also *removed* the previous `body { font-size: 16px; }` → restore `font-size: 16px`.\n- [styles.css:59] `button { outline: none; }` with no replacement focus indicator — removes keyboard focus visibility [HIGH] → delete the line and add `button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }`.\n- [styles.css:75-76] `color: red !important; margin-left: 10px !important;` — `!important` in new CSS [HIGH]. `.override` is a single-class selector with nothing competing; the flags do nothing → remove both `!important`s.\n- [styles.css:69] `.small-link { font-size: 11px }` — text under 16px [HIGH, tiny-text] → `font-size: 16px` (or ≥14px with a documented reason for de-emphasized legal links).\n\n**NEEDS INPUT:**\n- [styles.css:14] `linear-gradient(135deg, #6366f1, #8b5cf6)` — the canonical indigo→violet AI gradient [MEDIUM, ai-color-palette]. The whole palette is derived from it: button `#6366f1` (:60), icon bg `#ede9fe` (:50), footer `#1e1b4b` (:84).\n Recommended fix: one solid brand color the product owns; if a gradient is kept, make it subtle and not blue-to-purple.\n- [landing.html:12-13] `Welcome to Our Platform` / `Your all-in-one solution for everything you need` — generic hero copy [MEDIUM]. Says nothing about what the product does.\n Recommended fix: lead with the concrete outcome for a named audience.\n- [landing.html:36] `Unlock the power of our platform today` — generic CTA copy [MEDIUM]; `unlock` is also a listed buzzword.\n Recommended fix: state what the click does.\n- [landing.html:31] `streamline your workflow effortlessly` — two buzzwords in one sentence [MEDIUM, marketing-buzzword]. Also `amazing feature that will change your life` (:21), `sets us apart from the competition` (:26).\n Recommended fix: replace with what each feature literally does.\n- [landing.html:14] `Get Started` is the only CTA on the page [MEDIUM].\n Recommended fix: name the outcome (e.g. \"Create a free workspace\", \"See the demo\").\n- [landing.html:20, 25, 30] `★` ★ `⚡` ⚡ `⚙` ⚙ — unicode symbols/emoji used as icons [MEDIUM]. Render inconsistently across platforms and can't be sized/colored reliably.\n Recommended fix: inline SVG icons, or drop the icons.\n- [styles.css:15, 21, 26, 35, 41, 82] `text-align: center` on every text container (hero, h1, p, features, cards, footer) — 100% centered [MEDIUM].\n Recommended fix: left-align body copy and feature descriptions; center only the hero heading if at all.\n- [landing.html:12 → 22] Heading hierarchy skips `h1` → `h3`; no `h2` in the file [HIGH, typography].\n Recommended fix: feature titles become `<h2>` (or add an `<h2>` section heading and keep `<h3>`s).\n- [styles.css:59-67, 69-72] `button` and `.small-link` have no `:hover` / `:focus-visible` states [MEDIUM, interaction states].\n Recommended fix: add hover (e.g. darker background) and focus-visible ring for both.\n- [styles.css:31-32] `grid-template-columns: repeat(3, 1fr)` with no `@media` breakpoint — three columns at 320px wide [MEDIUM, responsive].\n Recommended fix: `repeat(auto-fit, minmax(260px, 1fr))` or collapse to 1 column under ~768px.\n- [styles.css:25-28] `.hero p` has no `max-width`; at desktop widths the subheading runs well past 75ch [MEDIUM].\n Recommended fix: `max-width: 60ch; margin-inline: auto;`.\n- [styles.css] None of `::selection`, `caret-color`, `accent-color`, `scrollbar-color`, `text-underline-offset`, `font-variant-numeric` are set — browser defaults left unthemed [MEDIUM].\n Recommended fix: at minimum theme `::selection` and `accent-color` from the palette.\n\n**POSSIBLE (verify visually or run /design-review):**\n- [landing.html:18-33, styles.css:30-36] 3-column feature grid: icon-in-colored-circle + bold title + 2-line description × 3 [LOW]. The most recognizable AI layout.\n- [styles.css:45-55] `.icon-circle` — `border-radius: 50%` + tinted background as decorative icon container (SaaS-template look) [LOW].\n- [styles.css:69-72] `.small-link` effective height ≈ 11px line + 8px padding ≈ 21px, under the 44px touch target [LOW].\n\nNot flagged: `.hero h1` / `.hero p` `text-align: center` duplicating `.hero` (harmless redundancy, suppressed); border-radius uniformity (24px on 2 of 3 rounded elements, under the 80% threshold).\n\n---\n\n## Summary\n\n| | Count |\n|---|---|\n| Code — critical | 0 |\n| Code — informational | 4 |\n| Design — auto-fixable | 5 |\n| Design — needs input | 12 |\n| Design — possible | 3 |\n| **Total** | **24** |\n\nHighest-value fixes, in order: restore 16px body text and drop Papyrus (styles.css:6-7); remove `outline: none` and add `:focus-visible` (styles.css:59); strip `!important` (styles.css:75-76); replace the indigo gradient palette and the placeholder hero/feature copy — these together are what make the page read as AI-generated.\n"
|
||
},
|
||
{
|
||
"run": "36633323521",
|
||
"trial": "t3",
|
||
"scanRan": false,
|
||
"report": "# /review — feature/add-landing-page vs main\n\nBase branch: `main` (no `origin` remote → git-native fallback). Diff: `landing.html` (+41), `styles.css` (+86/-1).\nGreptile: skipped (no PR). Design detector: not installed, skipped. DESIGN.md: none → universal principles.\n\n**Fixes NOT applied.** `styles.css:1` declares the file a planted E2E fixture (\"Planted design anti-patterns for E2E eval — 7 issues\"), so editing it would alter the fixture. Every AUTO-FIX below has its exact replacement listed; say the word and I'll apply them.\n\n---\n\n## Pre-Landing Review: 5 issues (0 critical, 5 informational)\n\nPass 1 (SQL / races / LLM trust / shell / enum): nothing applicable — static HTML + CSS, no data paths.\n\n**AUTO-FIXED:** (none applied — see note above; these are the AUTO-FIX-tier items)\n- [INFORMATIONAL] (confidence: 9/10) `styles.css:1` — Comment announces the stylesheet is a planted test fixture with \"7 issues\"; must not ship on a real landing page. → Delete the header comment (and the per-issue `/* Issue N: ... */` comments at :3, :4, :12, :30, :46, :55, :71).\n- [INFORMATIONAL] (confidence: 8/10) `styles.css:71-74` — `.override` is named for its mechanism, not its meaning, and only exists to carry `!important`. → Rename to what it is (e.g. `.footer-tagline`) once the `!important`s are removed (design finding D2).\n\n**NEEDS INPUT:**\n- [INFORMATIONAL] (confidence: 8/10) `landing.html:38` + `styles.css:83` — Footer `<a class=\"small-link\">` gets the UA default link colour (`#0000EE`); `.footer { color: white }` does not cascade onto `<a>`. Blue on `#1e1b4b` is ~1.7:1 contrast — the Terms of Service link is effectively invisible.\n Recommended fix: `.footer a { color: inherit; }` (plus a visible underline / `text-underline-offset`).\n- [INFORMATIONAL] (confidence: 7/10) `styles.css:72` + `styles.css:80` — `color: red` on the `#1e1b4b` footer is ~4.0:1, below WCAG AA 4.5:1 for body-size text (and it's 14px, see D3).\n Recommended fix: drop the red override; let the paragraph inherit `white`, or pick a palette tint that clears 4.5:1.\n- [INFORMATIONAL] (confidence: 7/10) `landing.html:14`, `landing.html:38` — Completeness gap: `<button>Get Started</button>` has no `type`, no handler and no destination; `<a href=\"#\">Terms of Service</a>` is a dead placeholder link. Both CTAs are inert.\n Recommended fix: make the primary CTA an `<a href=\"/signup\">` styled as a button (or give the button a `type` + handler); point Terms at the real URL.\n\n---\n\n## Design Review: 18 issues (4 auto-fixable, 11 need input, 3 possible)\n\n**AUTO-FIXED:** (none applied — see note above; these are the AUTO-FIX-tier items)\n- D1 [HIGH] (confidence: 10/10) `styles.css:56` — `button { outline: none; }` with no replacement focus indicator; keyboard users lose the focus ring on the only CTA. → Remove `outline: none`; add `button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }`.\n- D2 [HIGH] (confidence: 10/10) `styles.css:72-73` — `!important` ×2 in `.override` (`color: red !important; margin-left: 10px !important;`). Nothing competes with `.override`'s specificity; the escape hatch is unneeded. → Delete both `!important`s.\n- D3 [HIGH] [tiny-text] (confidence: 10/10) `styles.css:7` — `body { font-size: 14px; }` — base body text under 16px (and this diff *removes* the previous `body { font-size: 16px; }`). → `font-size: 16px` (or `1rem`).\n- D4 [HIGH] [tiny-text] (confidence: 9/10) `styles.css:67` — `.small-link { font-size: 11px; }` — 11px link text is below any readable body floor. → Bump to ≥ 14px for a legal footer link, 16px preferred.\n\n**NEEDS INPUT:**\n- D5 [HIGH] Blacklisted font (confidence: 10/10) `styles.css:6` — `font-family: 'Papyrus', sans-serif;` — Papyrus is on the blacklist, and the fallback is a bare generic.\n Recommended fix: pick a real typeface with a proper stack (e.g. a self-hosted or system-available serif/sans, then generic fallback). Avoid the overused-default list too (Inter, Roboto, Poppins…).\n- D6 [MEDIUM] [ai-color-palette] (confidence: 9/10) `styles.css:14` — `linear-gradient(135deg, #6366f1, #8b5cf6)` is the canonical indigo→violet AI gradient. The whole palette follows it: button `#6366f1` (:57), icon circle `#ede9fe` (:49), footer `#1e1b4b` (:80).\n Recommended fix: one solid brand colour the palette owns for the hero and CTA; drop the gradient.\n- D7 [MEDIUM] Generic hero copy (confidence: 10/10) `landing.html:12-13` — \"Welcome to Our Platform\" / \"Your all-in-one solution for everything you need\" — two of the checklist's literal grep strings, plus `<title>Our Platform</title>` (:7).\n Recommended fix: say what the product does and for whom in the h1; make the subhead a concrete claim.\n- D8 [MEDIUM] [marketing-buzzword] (confidence: 9/10) `landing.html:32`, `landing.html:37` — \"streamline your workflow effortlessly\" (streamline + effortless) and \"Unlock the power of our platform today\" (unlock + a listed generic-copy phrase). Feature descriptions at :23/:28 (\"will change your life\", \"sets us apart from the competition\") are placeholder filler.\n Recommended fix: replace with specific outcomes/numbers per feature.\n- D9 [MEDIUM] \"Get Started\" as the only CTA (confidence: 9/10) `landing.html:14` — the page has exactly one button and its label is \"Get Started\".\n Recommended fix: name the outcome the click buys (\"Start a free project\", \"See pricing\", …).\n- D10 [MEDIUM] Centered everything (confidence: 9/10) `styles.css:15,21,26,35,41,77` — `text-align: center` on `.hero`, `.hero h1`, `.hero p`, `.features`, `.feature-card`, `.footer` — 6 of 6 text containers (100%, threshold 60%). The h1/p rules are also redundant with the parent.\n Recommended fix: left-align body copy and feature descriptions; center at most the hero.\n- D11 [HIGH] Heading hierarchy skips a level (confidence: 10/10) `landing.html:12` → `landing.html:21,26,31` — `<h1>` followed directly by three `<h3>`s with no `<h2>`.\n Recommended fix: change the feature titles to `<h2>` (or add a section `<h2>` above the grid and keep h3s).\n- D12 [MEDIUM] Missing hover/focus states (confidence: 9/10) `styles.css:55-63`, `styles.css:66-69` — no `:hover`, `:focus` or `:focus-visible` rule anywhere in the file for `button` or `.small-link`; combined with D1 the button has zero interaction feedback.\n Recommended fix: add `:hover` (colour shift) and `:focus-visible` (ring) for both.\n- D13 [MEDIUM] Grid has no responsive breakpoint (confidence: 9/10) `styles.css:32` — `grid-template-columns: repeat(3, 1fr)` with `padding: 60px 40px`, `gap: 24px`, and `.feature-card { padding: 32px }` and no `@media`. At 360px the content column is ~0px wide; cards collapse on phones.\n Recommended fix: `grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr))` or a single column under a breakpoint.\n- D14 [MEDIUM] Missing `max-width` on text containers (confidence: 8/10) `styles.css:25-28`, `styles.css:39-44` — `.hero p` and `.feature-card p` have no `max-width`; no `max-width` appears anywhere in the diff, so hero copy runs full-bleed on wide screens.\n Recommended fix: `max-width: 60ch; margin-inline: auto;` on the hero paragraph and a content wrapper.\n- D15 [MEDIUM] Unicode glyphs as icons (confidence: 8/10) `landing.html:20,25,30` — `★` ★, `⚡` ⚡, `⚙` ⚙ used as decorative icons inside the coloured circles; rendering varies by platform (⚡ renders as colour emoji on most systems) and they carry no semantics.\n Recommended fix: inline SVG icons with `aria-hidden=\"true\"`, or drop the icon slot entirely.\n\n**POSSIBLE (verify visually):**\n- D16 [LOW] 3-column feature grid (confidence: 9/10 on pattern, LOW-tier by checklist) `landing.html:18-34` + `styles.css:30-44` — exactly three symmetric children, each icon-in-circle + heading + 2-line paragraph. This is the checklist's \"THE most recognizable AI layout\". Verify with /design-review; consider a different rhythm (one real screenshot + copy, or an asymmetric list).\n- D17 [LOW] Icons in coloured circles as decoration `styles.css:46-54` — `.icon-circle` is `border-radius: 50%` + `background: #ede9fe` around a glyph. SaaS-template look; verify visually.\n- D18 [LOW] Touch target under 44px `styles.css:66-69` — `.small-link` at 11px + `4px 8px` padding ≈ 27px tall; `button` at 14px + `12px 24px` ≈ 41px. Both under 44px; verify with computed sizes.\n\nNot flagged (below threshold): border-radius uniformity — `24px` on 2 of 3 radiused elements (67%, threshold 80%); default-themed `::selection`/`accent-color`/scrollbars — worth doing once a real palette exists (D6), not a standalone finding here.\n\n---\n\n## Summary\n\n| Area | Count | AUTO-FIX tier | Needs input | Possible |\n|---|---|---|---|---|\n| Code review | 5 | 2 | 3 | 0 |\n| Design review | 18 | 4 | 11 | 3 |\n\nAll 7 planted anti-patterns in the fixture comments were caught (Papyrus, 14px body, `outline: none`, `!important`, purple gradient, generic hero copy, 3-column grid), plus 16 unannounced ones — the most consequential being the near-invisible footer link (UA link colour on dark indigo), the missing responsive breakpoint on the grid, and the total absence of hover/focus states.\n\nNo fixes were applied to `styles.css` or `landing.html`. Never commit/push from /review — that's /ship's job.\n"
|
||
},
|
||
{
|
||
"run": "36629958451",
|
||
"trial": "t1",
|
||
"scanRan": false,
|
||
"report": "# /review — feature/add-landing-page vs main\n\nBase branch: `main` (no `origin` remote; git-native fallback). Diff: `landing.html` (+41), `styles.css` (+86/−1).\nGreptile step skipped (no PR). No `DESIGN.md` → universal design principles. No `TODOS.md`.\nNote: the source is annotated \"Planted design anti-patterns for E2E eval\" — findings were **written, not applied**. Every AUTO-FIX row below is mechanical and can be applied on request.\n\n---\n\n## Pre-Landing Review: 8 issues (0 critical, 8 informational)\n\nPass 1 (SQL / Race / LLM trust / Shell / Enum): not applicable — static HTML+CSS only.\n\n**AUTO-FIXED (eligible — not applied):**\n- [INFORMATIONAL] (confidence: 9/10) styles.css:5-7 — Diff **deletes** the pre-existing `body { font-size: 16px; }` and replaces it with `14px`; this is a regression on a shared stylesheet, not just a new rule. → Restore `font-size: 16px` (or `1rem`).\n- [INFORMATIONAL] (confidence: 9/10) styles.css:1-3,12,30,45,56,70 — `/* Planted design anti-patterns for E2E eval — 7 issues */` and `/* Issue N: ... */` comments, plus `<!-- Issue 6/7 -->` in landing.html:10,17, ship to users via view-source. → Remove eval scaffolding comments before landing.\n- [INFORMATIONAL] (confidence: 8/10) landing.html:14 — `<button>` with no `type`; defaults to `submit` if ever placed in a form, and has no handler or `href` today. → `<a class=\"button\" href=\"/signup\">` or `<button type=\"button\">` wired to an action.\n\n**NEEDS INPUT:**\n- [INFORMATIONAL] (confidence: 9/10) landing.html:19-33 — Completeness gap: placeholder copy shipped (\"Feature One/Two/Three\", \"A short description of this amazing feature that will change your life\"). Page is not launch-ready.\n Recommended fix: replace with real feature names and one concrete sentence each describing what the product does.\n- [INFORMATIONAL] (confidence: 9/10) landing.html:38 — `<a href=\"#\">Terms of Service</a>` is a dead link; legal link pointing to `#` is a completeness gap, not a stub.\n Recommended fix: point at the real `/terms` URL.\n- [INFORMATIONAL] (confidence: 8/10) landing.html:11,18,36 — Non-semantic `<div class=\"hero|features|footer\">`; no landmarks (`<main>`, `<section>`, `<footer>`), so screen readers get a flat page.\n Recommended fix: `<main><section class=\"hero\">…</section><section class=\"features\">…</section></main><footer>…</footer>`.\n- [INFORMATIONAL] (confidence: 8/10) landing.html:38 + styles.css:83-88 — `.footer` sets `color: white` but `<a>` does not inherit color; default link blue (`#0000ee`) on `#1e1b4b` is ~1.7:1 contrast, and the text is 11px. Effectively unreadable.\n Recommended fix: `.footer a { color: inherit; text-underline-offset: 0.15em; }` and remove the 11px size (see design review).\n- [INFORMATIONAL] (confidence: 6/10) styles.css:76-79 — `margin-left: 10px !important` on a `text-align: center` paragraph knocks the centered text 5px off axis for no stated reason. Medium confidence, verify this is actually an issue.\n Recommended fix: delete the margin (and the `!important`, see below).\n\n---\n\n## Design Review: 20 issues (6 auto-fixable, 12 need input, 2 possible)\n\nFrontend scope: `landing.html`, `styles.css` (both read in full). Mechanical detector (`gstack-design-detect`) not installed on this host — checklist pass only.\n\n**AUTO-FIXED (eligible — not applied):**\n- [HIGH] styles.css:7 — [tiny-text] Body text `font-size: 14px` (<16px). → `font-size: 16px`. (Same line as the code-review regression above — one fix.)\n- [HIGH] styles.css:66 — `outline: none` on `button` with no replacement focus indicator; keyboard users lose focus visibility entirely. → Delete the line, or `button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }`.\n- [HIGH] styles.css:78 — `color: red !important` — specificity escape hatch. → Drop `!important`; `.footer .override { color: … }` already wins.\n- [HIGH] styles.css:79 — `margin-left: 10px !important`. → Remove (see code review: it also breaks centering).\n- [HIGH] styles.css:81-84 — `.small-link { font-size: 11px }` — text under 16px on an interactive legal link. → `font-size: 1rem` (or `0.875rem` minimum for footer meta); combined with `padding: 4px 8px` the touch target is ~19px tall — bump padding to reach 44px.\n- [HIGH] styles.css:6 — **Blacklisted font: `Papyrus`** as the primary body face, falling back to generic `sans-serif`. → Pick a real typeface (a non-`[overused-font]` face, self-hosted or via `@font-face`) with a sane fallback stack.\n\n**NEEDS INPUT (design judgment):**\n- [MEDIUM] styles.css:14 — [ai-color-palette] `linear-gradient(135deg, #6366f1, #8b5cf6)` — the exact indigo→violet range the checklist names as the AI default palette; `#6366f1` reused on `button:67`, `#ede9fe` on `.icon-circle:50`, `#1e1b4b` on `.footer:86`. The whole palette is Tailwind indigo/violet.\n Recommended fix: choose one brand color the product owns; solid background on the hero.\n- [MEDIUM] landing.html:12-13 — **Generic hero copy**: \"Welcome to Our Platform\" / \"Your all-in-one solution for everything you need\" — two of the checklist's literal grep strings on consecutive lines. `<title>Our Platform</title>` (line 7) is equally generic.\n Recommended fix: lead with what the product does and for whom; name the product in the `<title>`.\n- [MEDIUM] landing.html:14 — \"Get Started\" is the **only CTA** on the page. Name the outcome the click buys (e.g. \"Create a free workspace\").\n- [MEDIUM] landing.html:32,37 — [marketing-buzzword] \"streamline your workflow effortlessly\" (two buzzwords in one clause), \"Unlock the power of our platform today\". Say what the product does.\n- [MEDIUM] landing.html:20,25,30 — **Emoji/glyphs as icons**: `★` ★, `⚡` ⚡ (an emoji code point), `⚙` ⚙ used as decorative icons inside `.icon-circle`, with no `aria-hidden`. Renders inconsistently across platforms.\n Recommended fix: inline SVG icons with `aria-hidden=\"true\"`, or drop the icons.\n- [MEDIUM] styles.css:15,21,26,35,41,84 — **Centered everything**: `text-align: center` on `.hero`, `.hero h1`, `.hero p`, `.features`, `.feature-card`, `.footer` — 6 of 6 text containers (100%, threshold 60%). Also redundant: the child rules repeat what the parent already sets.\n Recommended fix: left-align the feature cards and footer; keep centering for the hero only if intentional.\n- [MEDIUM] styles.css:31-32 — `grid-template-columns: repeat(3, 1fr)` with **no `@media` breakpoint** — three columns on a 360px phone. `.hero h1 { font-size: 48px }` also has no responsive step.\n Recommended fix: `grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr))` or a mobile-first single column with a breakpoint.\n- [MEDIUM] styles.css:12-27,38-43 — **No `max-width` on any text container** (`.hero p`, `.feature-card p`); hero paragraph runs full viewport width on desktop.\n Recommended fix: `max-width: 60ch; margin-inline: auto` on paragraph wrappers.\n- [MEDIUM] styles.css:65-73,81-84 — **No `:hover`/`:focus-visible` states** on `button` or `.small-link`; the only interaction rule is the one removing focus.\n Recommended fix: add hover + focus-visible rules for both.\n- [MEDIUM] styles.css (whole file) — Browser defaults untouched: no `::selection`, `caret-color`, `accent-color`, `scrollbar-color`, `text-underline-offset`, `font-variant-numeric`. Theme from the palette once a palette exists.\n- [MEDIUM] styles.css:14,25 + landing.html:13 — Contrast: white 20px body text on the `#8b5cf6` end of the gradient is ≈4.2:1 (needs 4.5:1 below 24px). White on `#6366f1` button at default button size is ≈4.5:1 — borderline. Medium confidence, verify this is actually an issue.\n Recommended fix: darker solid background, or bump hero `p` to ≥24px / bold.\n- [HIGH] landing.html:12→21 — **Heading hierarchy skips a level**: `h1` followed directly by `h3` (×3) with no `h2` in the document.\n Recommended fix: `h2` for the card titles (style them down if the size is the concern).\n\n**POSSIBLE (verify visually or run /design-review):**\n- [LOW] landing.html:18-34 + styles.css:30-56 — **The 3-column feature grid**: exactly 3 children, each `border-radius: 50%` colored circle + heading + 2-line paragraph, symmetric. This is the checklist's \"THE most recognizable AI layout\"; `.icon-circle` (`60px`, `border-radius: 50%`, `background: #ede9fe`) is also the \"icons in colored circles\" pattern.\n Recommended fix: vary structure — a numbered list, alternating image/text rows, or a single strong feature with supporting detail.\n- [LOW] landing.html (document order) — Cookie-cutter section rhythm: hero → 3 features → CTA footer, every section centered with uniform 40–80px padding. Verify visually.\n\nNot flagged (below threshold): `border-radius: 24px` shared by `.feature-card` and `button` is 2 of 3 radius declarations (67% — under the 80% uniform-radius bar). Spacing values not checked against a scale — no DESIGN.md.\n\n---\n\n## Summary\n\n- Code: 8 informational, 0 critical. Key items: shared-stylesheet body font regression, eval scaffolding comments, placeholder copy and dead `#` link, unreadable footer link.\n- Design: 20 issues. Six are mechanical AUTO-FIX candidates (Papyrus, 14px body, `outline: none`, two `!important`, 11px link). The remaining 14 are the full AI-slop signature: indigo/violet gradient, generic hero copy, lone \"Get Started\", buzzwords, glyph icons in circles, 3-column grid, everything centered, no responsive breakpoints, no focus/hover states, h1→h3 skip.\n- Shared-code opportunities: none (no authored helpers or repeated logic beyond the redundant `text-align: center` children).\n- Documentation staleness: no docs describe this page; nothing to flag.\n"
|
||
},
|
||
{
|
||
"run": "local-focused-aba80c8",
|
||
"trial": "t2",
|
||
"scanRan": false,
|
||
"report": "# /review — feature/add-landing-page vs main\n\nBase branch: `main` (no `origin` remote; local merge-base used). Diff: `landing.html` (+41), `styles.css` (+86/−1).\nGreptile: skipped (no PR). DESIGN.md: none — universal principles. Design detector: not installed on this host — mechanical pass skipped, checklist pass only.\n\nNote: `styles.css:1` describes these files as planted eval fixtures, so AUTO-FIX items are listed but **not applied** to avoid altering the fixture. Approve and they can be applied in one pass.\n\n---\n\n## Pre-Landing Review: 5 issues (0 critical, 5 informational)\n\nPass 1 (SQL, races, LLM trust, shell, enums): no applicable code — static HTML/CSS only. Nothing to flag.\n\n**AUTO-FIX (pending approval):**\n- `[INFORMATIONAL] (confidence: 9/10) styles.css:7` — Base font size regressed from 16px (removed at old line 1) to 14px → restore `font-size: 16px`. (Same root cause as design tiny-text finding below.)\n- `[INFORMATIONAL] (confidence: 9/10) styles.css:76-79` — `.override` exists only to force `color`/`margin-left` with `!important`; nothing else targets `.footer p`, so no specificity conflict exists → drop `!important`, and drop the `margin-left: 10px` (it nudges a centered `<p>` 10px off-center inside `text-align: center`).\n\n**NEEDS INPUT:**\n- `[INFORMATIONAL] (confidence: 8/10) landing.html:38` — `<a href=\"#\">Terms of Service</a>` is a placeholder link that scrolls to top; ships a dead legal link.\n Recommended fix: point at the real terms URL, or remove until one exists.\n- `[INFORMATIONAL] (confidence: 7/10) landing.html:11,18,36` — Page is `<div>`-only: no `<header>`/`<main>`/`<section>`/`<footer>`, so screen readers get no landmarks.\n Recommended fix: `.hero` → `<header>` or `<section>` inside `<main>`, `.features` → `<section aria-labelledby=…>`, `.footer` → `<footer>`.\n- `[INFORMATIONAL] (confidence: 7/10) landing.html:10,17` / `styles.css:1,3,4,12,30,46,59,75` — \"Issue N: …\" / \"Planted … for E2E eval\" comments describe the review harness, not the code; they would ship to production.\n Recommended fix: strip before landing (or confirm these files are test-only fixtures).\n\nShared-code opportunities: none. Single page, no repeated authored logic; the three `.feature-card` blocks are markup, not code worth templating at this size.\nTODOS.md: absent, skipped. Doc staleness: no root docs describe this page, skipped.\n\n---\n\n## Design Review: 18 issues (5 auto-fixable, 10 need input, 3 possible)\n\n**AUTO-FIX (pending approval — HIGH confidence, mechanical CSS):**\n- `[styles.css:61]` `outline: none` on `button` with no replacement — removes the keyboard focus ring entirely → delete the line and add `button:focus-visible, a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }`.\n- `[styles.css:77]` `color: red !important` → `color: red` (no competing rule; see code review above).\n- `[styles.css:78]` `margin-left: 10px !important` → remove.\n- `[styles.css:7]` [tiny-text] `body { font-size: 14px }` — body text under 16px → `16px`.\n- `[styles.css:71]` [tiny-text] `.small-link { font-size: 11px }` — 11px is illegible on most displays and below WCAG-comfortable size for a legal link → `min 14px`, ideally `1rem`.\n\n**NEEDS INPUT (design judgment):**\n- `[styles.css:6]` **Blacklisted font:** `font-family: 'Papyrus', sans-serif` as the site-wide body/display face.\n Recommended fix: choose a real typeface for the page's voice (and note the fallback is the browser's generic sans, so most visitors get an unstyled default anyway).\n- `[styles.css:14]` [ai-color-palette] `linear-gradient(135deg, #6366f1, #8b5cf6)` — the exact indigo→violet gradient the checklist calls out, echoed by `button` `#6366f1` (`:62`), `.icon-circle` `#ede9fe` (`:51`) and `.footer` `#1e1b4b` (`:84`). Entire palette is Tailwind indigo/violet defaults.\n Recommended fix: pick a palette the brand owns; use one solid color for the hero and CTA.\n- `[landing.html:12-13]` **Generic hero copy:** \"Welcome to Our Platform\" / \"Your all-in-one solution for everything you need\". Also `<title>Our Platform</title>` (`:7`).\n Recommended fix: lead with what the product does and for whom; the `<title>` should name the product.\n- `[landing.html:14]` \"Get Started\" is the only CTA on the page, and the button is a bare `<button>` with no handler or form — it does nothing.\n Recommended fix: name the outcome (\"Start a free trial\", \"Book a demo\") and wire it to a link/action.\n- `[landing.html:32,37]` [marketing-buzzword] \"streamline your workflow effortlessly\", \"Unlock the power of our platform today\". Also filler feature copy: \"amazing feature that will change your life\", \"sets us apart from the competition\" (`:22,27`).\n Recommended fix: replace with concrete claims (what it does, measurable outcome).\n- `[landing.html:20,25,30]` Emoji/symbol glyphs (★ ⚡ ⚙ via `★ ⚡ ⚙`) used as feature icons — render inconsistently across platforms (⚡ is an emoji code point and will be a color emoji on most devices).\n Recommended fix: inline SVG icons, or drop the icons.\n- `[landing.html:12→21]` **Heading hierarchy skips a level:** `h1` followed directly by `h3` with no `h2`.\n Recommended fix: `.feature-card h3` → `h2` (or add a section `h2` above the grid and keep `h3`).\n- `[styles.css:15,21,26,36,42,82]` **Centered everything:** `text-align: center` on 6 of 6 text containers (hero, h1, p, features, cards, footer).\n Recommended fix: left-align body copy in the feature cards and footer; center only the hero if at all.\n- `[styles.css:33]` `grid-template-columns: repeat(3, 1fr)` with no `@media` breakpoint — three columns on a 360px phone at `padding: 60px 40px` leaves ~90px per card.\n Recommended fix: `repeat(auto-fit, minmax(16rem, 1fr))` or a mobile-first single column.\n- `[styles.css:60-73]` **No interaction states:** `button` and `.small-link` define no `:hover`, `:focus-visible`, or `:active`. Combined with `outline: none` there is zero visual feedback for keyboard or pointer.\n Recommended fix: add hover (`background` shift) and focus-visible rules for both.\n\n**POSSIBLE (verify visually or run /design-review):**\n- `[landing.html:18-34]` **3-column feature grid** — icon-in-colored-circle + bold title + 2-line description, repeated exactly 3×, with `.icon-circle` (`styles.css:47-57`) being the `border-radius: 50%` + tinted background decorative container. The most recognizable AI layout; verify whether the section earns its place.\n- `[styles.css:40,66]` Uniform large radius — `24px` on cards and a `24px` pill on the button (2 of 3 radii, the third is `50%`). Under the 80% threshold but reads as the \"bubbly everything\" pattern; verify.\n- `[styles.css:25-28,39-44]` No `max-width` on `.hero p` or `.feature-card p` — at desktop widths the hero subhead will exceed ~75 characters per line. Consider `max-width: 60ch`.\n- `[styles.css]` No `::selection`, `caret-color`, `accent-color`, `scrollbar-color`, or `text-underline-offset` — all browser defaults. Low priority; theme once the palette is decided.\n- `[styles.css:70-73]` `.small-link` at 11px with `4px 8px` padding computes to roughly 19×90px — well under the 44px touch-target floor.\n\nSuppressions honored: none applicable (no DESIGN.md, no vendor CSS, no resets).\n\n---\n\n## Summary\n\n| Category | Count |\n|---|---|\n| Code — critical | 0 |\n| Code — informational | 5 (2 auto-fixable) |\n| Design — auto-fixable | 5 |\n| Design — needs input | 10 |\n| Design — possible | 5 |\n\nNothing blocks a merge on correctness grounds — it's static markup. But every design category the checklist covers fires: blacklisted font, sub-16px body text, `outline: none`, `!important`, purple gradient palette, generic hero copy, buzzword copy, emoji icons, heading skip, centered-everything, no responsive grid, no interaction states, and the 3-column icon-circle feature grid. Applying the 5 auto-fixes is safe; the remaining items need a design decision on palette, type, and copy before this page ships.\n"
|
||
}
|
||
]
|
||
} |