Task 11 reported `pnpm run verify` green, which was true, but the brief
asks for `pnpm run gate` -- and the gate also runs astro check, which
failed on ts(7006) implicit any.
Static markup-only component for the right-column review panel. Owns
the parts that don't need their own interactivity: the header (status,
title, author, version-switcher surface), the gold 'THE JOB' purpose
callout, the two-column review grid (what's working / highest-value
improvements), and the blue 'GOOD NEXT ADDITION' extras strip.
Slots for 'vote', 'preview', and 'lens' let the page (task 16) compose
the interactive siblings — VoteWidget, PreviewPane, ChangeLens —
inside the static article. The role='group' / aria-pressed on the
preview-version switcher carries state to assistive tech.
Did not: include the interactive siblings inline (would couple the
static and interactive markup); introduce client: directives
(interactivity is task 16); add new tokens.
Static markup-only component for the 'which draft would you ship?'
reader poll. Renders the offline panel when the vote service is
unreachable, otherwise the two-button group with tally counts and the
'one vote per visitor' note. Tally fetching and click handling are
task 16.
Preserves every CSS hook asserted by scripts/verify.mjs:
.vote-widget, .vote-buttons, [aria-pressed=true]. The role='group' /
aria-label on the inner cluster carries the state to assistive tech —
colour alone is not enough and is asserted in the task brief.
Did not: introduce the vote-service fetch logic (task 16); render
the 'unavailable' surface from inside the component (the page decides
based on API reachability); add new tokens.
Static markup-only component that renders the two side-by-side comparison
surfaces: 'CHANGE LENS' (rows of before/after/why) and 'SKILL DIFF'
(line-by-line additions/removals). Mode is selected via the 'mode' prop.
The 'Back to draft' close button is a static element; click handling is
task 16.
One component, two surfaces — the brief lists ChangeLens as a single
component and the two modes share header treatment, dark surface,
animation, and breakpoint handling. Splitting them would duplicate
~150 lines of CSS. Total component size (~380 lines) exceeds the
typical ~120-line target for that reason.
Preserves every CSS hook asserted by scripts/verify.mjs:
.change-lens, .change-rows, .skill-diff, .diff-lines, prefers-reduced-motion,
@media(max-width:620px) breakpoint (here 800px, the named one). Visual
fidelity gaps listed in the task report.
Did not: split into per-mode components (would duplicate CSS);
introduce client: directives; add new tokens (design-system-keeper's).
Static markup-only component for the dark code/markdown preview surface.
Renders the preview header (title + actions), the file-tabs slot, and
either the source body or the rendered Markdown body based on the
'rendered' prop. Toggling between modes is task 16.
Preserves every CSS hook asserted by scripts/verify.mjs:
.preview, .preview-title, .preview-markdown, .markdown-preview,
max-height:540px, .markdown-table-wrap, .markdown-frontmatter,
.markdown-toc, plus the dark surface treatment. Visual fidelity gaps
listed in the task report.
Did not: introduce a markdown renderer (task 16 hydrates the body);
port the cat-marker CSS hook to the new surface (legacy only).
Static markup-only component for the package-file switcher inside the
preview surface. Renders one button per file with the kind eyebrow and
file name; applies the 'active' class on the current file. Click
handling is task 16.
The dark tab strip uses --deep for the surface and --gold for the
active state; close to the legacy palette but with a few mid-tones
documented in the task report.
Did not: extract the eyebrow into a separate component (it is a
two-property chip, not a reusable element); introduce client: directives.
Static markup-only component for the review desk's left-column listbox.
Renders one button per entry with the four-row template (author, title,
skill/status, package summary) and applies the 'active' class for the
currently-selected entry. Click handling and URL sync are task 16.
Preserves every CSS hook asserted by scripts/verify.mjs:
#skill-list, .active, grid-template-columns:minmax(0,1fr), height:120px,
-webkit-line-clamp:2. Visual fidelity gaps (panel surface tints) listed
in the task report.
Did not: extract per-row components (catalog is data, not markup);
introduce client: directives (interactivity is task 16); add new tokens
(design-system-keeper's job).
Marcos Paulo