feat(specimens): give the shell the chat ritual-tech finish - #7
Open
BunsDev wants to merge 3 commits into
Open
Conversation
Carry the OpenCoven Chat visual language onto the specimen browser so the two products read as cut from one material: near-black surfaces separated by depth rather than borders alone, violet depth under the shell, cyan reserved for circuitry and focus, and a hexagonal field held at texture strength. The shared token set already made this mostly a matter of arrangement -- the dark `--presence` is byte-identical to chat's `--accent-violet`. Cyan is the one hue that had to be introduced, and it resolves per scheme: against near-black it earns its keep, on the light paper surface it goes weak, so light falls back to the semantic presence and ring tokens that already own accent duty there. Nothing here reaches into packages/ui tokens or a public component's own surface; the design doc holds package and registry output fixed. Also adopts the in-flight CLI / React API tab split left behind in the working tree by a session that has since exited, and updates the contract that still described the previous single Install tab. Replace the blanket `gradient(` ban in verify-contracts with the intent it was standing in for. That ban was a blunt proxy added while recovering a broken shell, and the approved layout-parity design and plan both now specify gradient treatments in this exact file, so it had begun failing the repository's own accepted direction. Three precise contracts replace it: decorative layers stay out of public component surfaces, they yield to prefers-contrast and forced-colors, and the chrome never animates perpetually. Each was mutation-tested to confirm it fails when violated. Verification: pnpm check exit 0 (49 architecture contracts, 11 package tests, build, deploy and package export checks); 9/9 visual-review scenarios captured passing across dark, light, compact, mobile, 200% text and both routes; a 3x detail probe confirms the circuitry trace paints real cyan and that zero animations run on load. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
🟡 Changes recommended
The new scripts/serve-dist.mjs path join logic currently prevents serving static assets, and scripts/zoom-probe.mjs can fail on first run because it doesn’t create its output directory.
Once you've addressed the issues Copilot identified, you can request another Copilot review.
Pull request overview
This PR updates the specimens app shell to match the OpenCoven Chat visual language, while also adopting an in-flight “CLI / React API” split in the specimen card code panels and tightening CSS contract verification around decorative/animation constraints.
Changes:
- Adds “ritual-tech finish” styling to the specimens shell (depth layers, card gradients/trace, chrome/glass topbar/rail, contrast + forced-colors fallbacks).
- Reworks specimen card code panels into separate CLI and React API tabs, and updates the visual-review scenarios accordingly.
- Replaces the previous “no gradients” CSS contract with more targeted contracts, and adds new scripts to support capture workflows.
File summaries
| File | Description |
|---|---|
scripts/zoom-probe.mjs |
New Playwright probe for 3x card capture + computed-style checks and “no running animations” runtime check. |
scripts/visual-review.mjs |
Updates scenarios/assertions to match the new “CLI / React API” code tab split and mobile tab scroll validation. |
scripts/verify-contracts.mjs |
Replaces the blanket gradient ban with targeted CSS contracts; updates tab trigger expectations. |
scripts/serve-dist.mjs |
New minimal SPA static server for serving apps/specimens/dist during capture. |
apps/specimens/src/specimens.css |
Adds the ritual-tech finish styling and accessibility fallbacks; removes old install-grid styling. |
apps/specimens/src/app.tsx |
Splits the prior combined install/usage content into distinct “CLI” and “React API” tabs per specimen card. |
.gitignore |
Ignores agent scratch dir and new visual capture output directories. |
Review details
- Files reviewed: 6/7 changed files
- Comments generated: 3
- Review effort level: Lite
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Comment on lines
+23
to
+26
| const candidate = path.join(root, requested); | ||
|
|
||
| for (const file of [candidate, path.join(root, "index.html")]) { | ||
| if (!path.resolve(file).startsWith(root)) continue; |
Comment on lines
+12
to
+16
| import { chromium } from "playwright"; | ||
|
|
||
| const baseUrl = process.env.BASE_URL ?? "http://127.0.0.1:4321"; | ||
| const outDir = process.env.ZOOM_OUTPUT_DIR ?? "artifacts/visual-luxe"; | ||
| const executablePath = process.env.CHROME_PATH; |
| @@ -119,13 +119,13 @@ const assertions = [ | |||
| ], | |||
| [ | |||
| "install tab separates CLI from package API", | |||
Member
Author
|
@copilot Fix the code for all comments in this review thread. When a review comment includes a suggested change, apply the suggestion exactly. Do not make changes beyond what is described in the linked review thread. |
Co-authored-by: BunsDev <68980965+BunsDev@users.noreply.github.com>
Co-authored-by: BunsDev <68980965+BunsDev@users.noreply.github.com>
Addressed in 3e84ca3 (with the earlier thread fixes landed in 8885dd3). |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Carries the OpenCoven Chat visual language onto the specimen browser so the two products read as cut from one material.
The shared token set made this mostly a matter of arrangement — the dark
--presenceis byte-identical to chat's--accent-violet. Cyan is the one hue that had to be introduced, and it resolves per scheme: against near-black it earns its keep, on the light paper surface it goes weak and slightly sickly, so light falls back to the semanticpresenceandringtokens that already own accent duty there.Nothing here reaches into
packages/uitokens or a public component's own surface. The design doc holds package and registry output fixed, andpnpm checkconfirms 10 public exports and 34 registry items are unchanged.Adopted work
apps/specimens/src/app.tsxandscripts/visual-review.mjscarry an in-flight CLI / React API tab split that was left uncommitted in the working tree by a session that has since exited (documented in a prior triage). It is coherent, unique to that tree, and unrecoverable from any branch, so it is adopted here rather than discarded. Authorship is not claimed for it.Contract change worth a look
scripts/verify-contracts.mjsasserted!specimenCss.includes("gradient("). That guard came from8023647("lock the recovered shell contracts") and was a blunt proxy, added while recovering a broken shell, for the real fear: chrome turning gaudy or distracting from the components on display.It had already been overtaken by this repository's own accepted direction:
3152e5a) calls for "subtle grid or radial treatment that does not compete with the component";4aa3adf, the currentmainHEAD) writes literallinear-gradient(...)intoapps/specimens/src/specimens.cssfor.specimen-preview__canvas.So the ban would have failed the repo's own plan the moment anyone implemented it. Three precise contracts replace it, each mutation-tested to confirm it actually fails when violated:
[data-slot="composer"] { background: linear-gradient(...) }background-image: nonefrom theprefers-contrastblockanimation: pulse 2s infinite+@keyframesThe animation guard strips CSS comments before testing. Without that it matched the word "animation:" inside its own explanatory prose — a false positive caught during mutation round 2.
Verification
pnpm check→ exit 0: format, lint, typecheck, 11 package tests, 49 architecture contracts, registry validate/check, consumer test, build, deploy output (34 registry items), 10 public package exports.scripts/visual-review.mjs→ 9/9 scenarios captured passing across dark/light, cozy/compact, desktop/mobile, 200% text scale, and both the Library and Assembled routes. No horizontal overflow at 320px or 390px.scripts/zoom-probe.mjs(new) → 3x detail capture confirms the circuitry trace computes to real cyan rather than an unresolved custom property, anddocument.getAnimations()reports zero running animations, so the no-perpetual-motion rule holds at runtime and not only in prose.Also included
scripts/serve-dist.mjs— small static server with SPA fallback.vite previewwould not bind in this environment, and port 4173 is occupied by another project's dev server, so captures need an explicitBASE_URL..gitignore— ignores.superpowers/(agent brainstorm scratch that was breakingformat:check) and the two ad-hoc capture directories.Out of scope
The full layout-parity IA migration —
specimen-definitions.tsx,specimen-pages.tsx, the three-column documentation shell, per-component URLs — remains unimplemented and is deliberately untouched here. That work is planned indocs/superpowers/plans/2026-08-31-specimen-library-layout-parity.md.