feat(share-web): reader + tombstone + report; OG meta + CSP + noindex

[graydawnc]

What

The public web at spool.pro that renders a published share — what someone landing on /s/<slug> actually sees.

Two routes:

• /s/<slug> → React <Reader>: paints the snapshot in its paper tone, full chrome (Header, Footer), reuses @spool/share-kit's <SnapshotReader> so the desktop preview and the public render share one renderer
• /s/<slug> → <Tombstone>: rendered when the snapshot endpoint returns 410 (revoked / expired) or 404 (not found). Distinct copy per reason — users hit this from a real link, so "this share was taken down" reads more honestly than a generic 404

Plus the Pages-Functions shell that makes it work:

• functions/api/[[path]].ts — dev-parity catch-all that proxies /api/* to the share-backend wrangler so a local share-web dev server reaches local D1 / KV / R2 without CORS gymnastics
• functions/s/[id].ts — injects OG / Twitter Card meta tags into the SSR'd HTML for /s/<slug>, reading title + summary + author handle from the backend so social previews stamp the actual share, not the spool.pro fallback
• og-meta.ts + tests — escape rules for the meta tag values (HTML, attribute, URL contexts); regression tests for known-bad inputs (<>"'&, surrogate pairs, BOM)
• mailto.ts + lib/safety.test.ts — report-this-share link: builds a mailto: with subject/body pre-populated and the slug embedded; e2e-validates it can't be coerced into header injection or scheme switching

Plus chrome:

• <Chrome> (Page / Header / Footer): the spool.pro shell every page renders inside. Centralised so the dark backdrop, paper tone, and the typeset look stay locked across Reader, Tombstone, and future surfaces (Me, Profile in PR feat(share-web): reader + tombstone + report; OG meta + CSP + noindex #364)
• styles.css + Tailwind tokens — share-kit's tokens lifted out so the reader uses the same --accent, --warm-bg, etc. as the desktop preview

Plus global safety:

• CSP applied via _middleware.ts on every reader response (script-src 'self', style-src 'self', img-src 'self' data: blob:, frame-src 'none', no eval, no inline)
• X-Robots-Tag: noindex on every reader page — published shares are unlisted by default, search engines do not get to surface them by guessing slugs
• Referrer-Policy: strict-origin-when-cross-origin so an outbound click from a share doesn't leak the slug to the destination

Why one PR

These pieces don't make sense apart:

• A reader without a tombstone path lands users on a generic 404 the moment a share is revoked, which looks like a bug
• A reader without OG meta means every link preview is the spool.pro home card — defeats the point of "share something I made"
• A reader without CSP + noindex starts leaking slugs to indexers the moment the first share publishes
• The Pages Functions proxy is what makes the whole thing testable in dev — without it every spec hits CORS errors

Bundling means one review for the whole public-side trust boundary.

Reader render flow

sequenceDiagram
    autonumber
    participant V as Visitor
    participant CF as Pages Function /s/:id
    participant API as share-backend /api/snapshots/:id
    participant R as <Reader>
    participant SK as @spool/share-kit
    participant T as <Tombstone>

    V->>CF: GET /s/<slug>
    CF->>API: fetch snapshot meta
    API-->>CF: {title, author_handle, og_image_url}
    CF-->>V: index.html + injected OG/Twitter meta
    V->>R: hydrate
    R->>API: GET /api/snapshots/<slug>
    alt 200
        API-->>R: snapshot JSON
        R->>SK: <SnapshotReader />
        SK-->>R: paginated rendered conversation
        R-->>V: paper-toned page in spool.pro chrome
    else 410 revoked|expired
        API-->>R: tombstone JSON {reason, at}
        R->>T: render with reason
        T-->>V: "This share was unpublished — Removed Jun 4, 14:02"
    else 404
        R->>T: reason='not-found'
        T-->>V: "We couldn't find that share"
    end

Loading

OG meta injection

flowchart LR
    L[Link in tweet/Slack/email] --> CRAWL[Social crawler]
    CRAWL --> CF["GET /s/<slug>"]
    CF --> META["fetch share meta from /api/snapshots/<slug>"]
    META --> HTML[inject og:title / og:image / twitter:card]
    HTML --> CRAWL
    CRAWL --> CARD[Card preview shows actual share]

    L2[Human click] --> CF
    CF --> HTML2[same response]
    HTML2 --> R[Reader hydrates]
    R --> SK[<SnapshotReader />]

Loading

The Pages Function reads the meta once and stamps it server-side so social crawlers (which don't run JS) see the right OG values without a second round trip. The reader hydrates over the same HTML.

Safety boundary

The reader is the most exposed surface in the system — every published share funnels here. The hardening is all-or-nothing across this PR:

Header / behavior	Where	Why
Content-Security-Policy: script-src 'self'	_middleware.ts	No inline scripts; no eval; even a stored-XSS-in-snapshot-title can't run JS. Snapshot bodies render via <SnapshotReader>'s prose pipeline which sanitises markdown.
frame-src 'none'	_middleware.ts	A share can never iframe arbitrary content; defends against the snapshot containing a hidden <iframe>
X-Robots-Tag: noindex	_middleware.ts	Default share visibility is unlisted — Google does not get to enumerate slugs. profile-listed shares are surfaced via the Profile page which has its own index directive.
Referrer-Policy: strict-origin-when-cross-origin	_middleware.ts	Clicking an outbound link from a share doesn't reveal the slug
mailto: report link sanitises every input	mailto.ts + safety.test.ts	A snapshot title containing Subject: … cannot inject mail headers
Tombstone copy per reason	Tombstone.tsx	A user landing on a revoked share via a stale link sees "the author unpublished this", not a confusing 404

Verification

• pnpm --filter @spool/share-web test — api.test.ts, mailto.test.ts, og-meta.test.ts, route.test.ts, safety.test.ts (header injection, control-char rejection, URL scheme guard)
• Manual: deploy preview, hit /s/<slug> for live + revoked + expired + 404; confirm OG meta in view-source matches the share; run a Lighthouse pass — no eval, no inline script warnings
• Cross-browser: Safari, Firefox, Chrome render the paper-toned page identically (tested at the prior design-doc gate)

Risk

Pure additive — share-web on main was previously a placeholder. The new routes are the first content served from spool.pro. The Pages Functions proxy only affects dev (production resolves /api/* directly against the share-backend Pages project; the proxy is short-circuited on prod URL).

CSP changes are a forward-only ratchet — if anything breaks it'll surface as a CSP violation report in the browser console, not a 500.

Submitted by @graydawnc.