feat(preview): add social sharing image

[vyctorbrzezowski]

What Problem This Solves

Links to the Carapace reference site currently have no dedicated social preview image or complete Open Graph and Twitter Card metadata.

Why This Change Was Made

This PR adds the proposed 1200×630 Carapace social image and publishes complete sharing metadata. Generated deep routes and client-side navigation keep canonical URLs and og:url aligned with each route on carapace.design.

User Impact

Shared Carapace links will render with the branded lobster artwork, title, and description on platforms that consume Open Graph or Twitter Card metadata.

Evidence

Proposed social preview:

• Image output verified as PNG at 1200×630.
• Root and generated deep-route HTML verified with the expected image and route-specific canonical metadata.
• Client-side navigation preserves the public canonical origin.

Design System Checks

• bun run check — 161 tests passed; contract, skill, and package checks passed
• bun run preview:build
• Affected consumer and compatibility surfaces were considered
• No credentials, private paths, private hosts, or restricted assets are included

[clawsweeper]

Codex review: needs maintainer review before merge. Reviewed July 17, 2026, 5:10 PM ET / 21:10 UTC.

Summary
The PR adds a branded 1200×630 social image and complete canonical, Open Graph, Twitter Card, and route-specific og:url metadata to the Carapace preview site.

Reproducibility: not applicable. This PR adds a new preview-site sharing capability rather than repairing a reported current-main failure. The supplied build and contract-check evidence covers the intended static and generated HTML paths.

Review metrics: 2 noteworthy metrics.

• Changed surface: 7 files affected; 84 additions, 6 deletions. The diff is narrowly scoped to the preview site, one public image asset, and corresponding contract tests.
• Automated validation: 8 reported successful checks. Repository, security, and build checks all completed successfully on the PR head.

Merge readiness
Overall: 🐚 platinum hermit
Proof: 🌊 off-meta tidepool
Patch quality: 🐚 platinum hermit
Result: ready for maintainer review.

Overall follows the weaker of proof and patch quality, so missing proof can cap an otherwise strong patch.

Rank-up moves:

• none.

Next step before merge

• This is an active, clean, member-authored PR with no discrete repair finding; it should follow normal maintainer review rather than an automated repair lane.

Security
Cleared: The diff adds a local static PNG and declarative metadata only; no dependency, workflow, secret, permission, or execution-path change is evident.

Review details

Best possible solution:

Merge the focused metadata and asset change after ordinary maintainer review, retaining the route-level static and client-side metadata assertions as the regression boundary.

Do we have a high-confidence way to reproduce the issue?

Not applicable: this PR adds a new preview-site sharing capability rather than repairing a reported current-main failure. The supplied build and contract-check evidence covers the intended static and generated HTML paths.

Is this the best way to solve the issue?

Yes. Adding standard metadata at the bootstrap document, generated-route builder, and client-side navigation boundary is the narrowest way to keep the public canonical URL consistent across preview routes.

AGENTS.md: found and applied where relevant.

Codex review notes: model internal, reasoning high; reviewed against afb11fd3031d.

Label changes

Label changes:

• add P3: This is a low-risk preview-site sharing and discoverability enhancement rather than a broken core workflow.
• add proof: 📸 screenshot: Contributor real behavior proof includes screenshot evidence. The author is a repository MEMBER, so the external-contributor proof gate does not apply; the PR body nevertheless provides a visible proposed image and reports built-output validation.
• add rating: 🐚 platinum hermit: Overall readiness is 🐚 platinum hermit; proof is 🌊 off-meta tidepool and patch quality is 🐚 platinum hermit.
• add status: 👀 ready for maintainer look: ClawSweeper has no concrete contributor-facing blocker left for this PR. Not applicable: The author is a repository MEMBER, so the external-contributor proof gate does not apply; the PR body nevertheless provides a visible proposed image and reports built-output validation.

Label justifications:

• P3: This is a low-risk preview-site sharing and discoverability enhancement rather than a broken core workflow.
• rating: 🐚 platinum hermit: Overall readiness is 🐚 platinum hermit; proof is 🌊 off-meta tidepool and patch quality is 🐚 platinum hermit.
• status: 👀 ready for maintainer look: ClawSweeper has no concrete contributor-facing blocker left for this PR. Not applicable: The author is a repository MEMBER, so the external-contributor proof gate does not apply; the PR body nevertheless provides a visible proposed image and reports built-output validation.
• proof: 📸 screenshot: Contributor real behavior proof includes screenshot evidence. The author is a repository MEMBER, so the external-contributor proof gate does not apply; the PR body nevertheless provides a visible proposed image and reports built-output validation.

Evidence reviewed

What I checked:

• Focused preview implementation: The branch updates static metadata, generated deep-route metadata, and client-side route metadata so canonical URLs and og:url use the public https://carapace.design/ origin. (preview/app.jsx:25, 3cd62202c99c)
• Coverage accompanies behavior: The PR adds contract assertions for the static social tags, generated route canonical URLs, and client-side metadata updates. (tests/preview-build.test.ts:42, 3cd62202c99c)
• Repository validation evidence: The PR context reports successful bun run check, bun run preview:build, CodeQL, action analysis, and Socket checks on the current head. (package.json:1, 3cd62202c99c)
• Repository policy applied: The repository requires preview/shared-contract validation and keeps consumer-specific interfaces outside this package; this patch stays within the preview reference site and its tests. (AGENTS.md:1, afb11fd3031d)

Likely related people:

• vyctorbrzezowski: Authored the current focused preview metadata and asset change; no broader current-main ownership trail was available in the supplied review evidence. (role: recent preview-area contributor; confidence: low; commits: 3cd62202c99c; files: preview/app.jsx, preview/build-routes.js, preview/index.html)

What the crustacean ranks mean

• 🦀 challenger crab: rare, exceptional readiness with strong proof, clean implementation, and convincing validation.
• 🦞 diamond lobster: very strong readiness with only minor maintainer review expected.
• 🐚 platinum hermit: good normal PR, likely mergeable with ordinary maintainer review.
• 🦐 gold shrimp: useful signal, but proof or patch confidence is still limited.
• 🦪 silver shellfish: thin signal; proof, validation, or implementation needs work.
• 🧂 unranked krab: not merge-ready because proof is missing/unusable or there are serious correctness or safety concerns.
• 🌊 off-meta tidepool: rating does not apply to this item.

Shiny media proof means a screenshot, video, or linked artifact directly shows the changed behavior. Runtime, network, CSP, and security claims still need visible diagnostics.

How this review workflow works

• ClawSweeper keeps one durable marker-backed review comment per issue or PR.
• Re-runs edit this comment so the latest verdict, findings, and automation markers stay together instead of adding duplicate bot comments.
• A fresh review can be triggered by eligible @clawsweeper re-review comments, exact-item GitHub events, scheduled/background review runs, or manual workflow dispatch.
• PR/issue authors and users with repository write access can comment @clawsweeper re-review or @clawsweeper re-run on an open PR or issue to request a fresh review only.
• Maintainers can also comment @clawsweeper review to request a fresh review only.
• Fresh-review commands do not start repair, autofix, rebase, CI repair, or automerge.
• Maintainer-only repair and merge flows require explicit commands such as @clawsweeper autofix, @clawsweeper automerge, @clawsweeper fix ci, or @clawsweeper address review.
• Maintainers can comment @clawsweeper explain to ask for more context, or @clawsweeper stop to stop active automation.