Spike official Shopify Chat web component migration

[hta218]

Summary

• replace the legacy shopifyChatV1.js loader and private Shadow DOM selectors with Hydrogen's official ShopifyScripts Inbox integration and <shopify-chat> component
• keep the custom “Message us” action and overlay visibility guard while removing PUBLIC_SHOPIFY_INBOX_SHOP_ID
• isolate the July 30 Hydrogen developer preview behind a package alias so Pilot stays on stable Hydrogen

Verification

• npm run typecheck
• npm run test:unit — 11 passed
• npm run build
• production preview smoke test: official agent registration, show()/close(), and overlay hiding verified

Preview limitation

React 19 hydration leaves duplicate DOM script tags for each script generated by the preview ShopifyScripts component, despite SSR emitting one copy. The integration works in the smoke test, but this must be resolved upstream or during stable migration before production rollout.

Refs #467

[paul-phan]

Reviewed and verified locally against current main (6e6b7ece).

Converting to draft rather than merging — the duplicate-bootstrap defect you flagged is the right call, and the preview dependency compounds it. Not a quality objection; this is blocked upstream.

Verification

This PR predates the CI added in #454/#470, so its checks only ran CodeQL. I merged it with current main in a worktree and ran the full gate set:

Gate	Result
merge with main	clean, no conflicts
npm run biome	pass
npm run typecheck	pass
npm run weaverse:manifest:check	pass
npm run weaverse:audit	pass
npm run build	pass
npm run test:unit	11 passed

The migration itself holds up. Replacing the private Shadow DOM selectors ([data-spec="toggle-button"], inbox-online-store-chat) with the public <shopify-chat> API removes a real maintenance liability, and deriving the shop from SHOP_ID/PUBLIC_STOREFRONT_ID instead of a separate PUBLIC_SHOPIFY_INBOX_SHOP_ID is a genuine simplification. Net -41 lines.

Why it stays a draft

1. The duplicate bootstrap, as you documented. Hydration leaves two DOM scripts per generated ID — Inbox, consent, analytics bus. Pilot is the reference theme, so that ships to every downstream storefront.

2. The preview dependency.

"@shopify/hydrogen-preview": "npm:@shopify/hydrogen@0.0.0-preview-116d5d7-20260730141607"

A SHA-stamped dev-preview build aliased next to stable Hydrogen. #454 rejected an npm overrides workaround on the same grounds — a stale pin in the reference theme propagates downstream. Your own docs note the preview drops @shopify/hydrogen/react-router-types, so the alias is working around an incompatibility rather than migrating past it.

Both resolve when Shopify ships a compatible stable release. #467 tracks that.

One note for whenever this unblocks

<shopify-chat /> renders unconditionally, while openShopifyInbox() returns false when show is not yet a function. That is correct — the element can exist before its module loads — but it reads like a missing guard. Worth one line saying it is deliberate.