Completes the migration started in f8c3ef9. That commit put hydrogen
underneath the existing shopifyFetch wrapper; this one removes the
wrapper so every query uses the package's own client API.
- All 22 call sites now call storefront.graphql(DOCUMENT, { variables })
(cachedStorefront for shop policies) instead of shopifyFetch, which
emulated the old client's {query, variables} -> {data} shape.
- shopifyFetch is replaced by unwrapStorefrontResult(result, operation),
which is only an error policy, not a transport wrapper: it returns
data and throws when Shopify reports GraphQL errors, since hydrogen
returns those rather than throwing. Naming the operation means a
failure points at the call site instead of just at "Shopify".
- Environment reads move to services/shopify/config, so client.ts is
only the hydrogen clients and shop-pay-button no longer imports from
a query module just to get the store domain.
- Removes @shopify/storefront-api-client, the superseded client. It had
no importers.
The SHOPIFY_STOREFRONT_API_URL export is gone too — hydrogen builds the
endpoint from storeDomain and apiVersion, and nothing else used it.
No behaviour change intended: same documents, same env var names, same
2025-07 API pin, same caching split between the two clients.
yarn typecheck passes with 0 errors. Verified against mock.shop: build
prerenders the policy pages, and in the browser product grid, search,
collection filters, cart restore, quantity update and discount-code
apply all work with no console errors. Customer account flows remain
untested — they need real credentials.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01JaxgqPbFxLsSuLPZom2kdC
Replaces the hand-rolled shopifyFetch wrapper and raw query strings with
the hydrogen preview package (0.0.0-preview-116d5d7-20260730141607), the
same build pinned in hydrogen-preview/.
- services/shopify/client: createStorefrontClient({type: "public"}) with a
static request context. Two module-scoped clients — uncached for carts,
products and customers; revalidate-3600 for shop policies — using the
client's custom fetch option to carry Next's caching hints.
- graphql/*: every document wrapped in gql(), fragments composed via the
second argument instead of string interpolation, and $country/$language
declared with @inContext so hydrogen injects them.
- shopifyFetch keeps its {query, variables} call shape so call sites are
unchanged, but is now generic over the document, so data is inferred. It
re-raises GraphQL errors, which hydrogen returns rather than throws.
Env var names, the 2025-07 API version pin, and the client-side fetching
architecture are unchanged.
Turning on type coverage surfaced real defects, not just annotations:
- hydrogen gql check caught $discountCodes: [String!] used where the field
requires [String!]!.
- Cart and customer mutation payloads are nullable and were dereferenced
unconditionally, so a failed mutation threw a TypeError. Adds a shared
unwrapCartPayload helper (collapsing five copies of the same userErrors
check) and explicit null handling in the customer service, so a null
payload reads as an error rather than success with no errors.
- Search results are a Product | Page | Article union; adds __typename to
the queries and narrows on it.
- Widens nullable fields (altText, image, customer.email, totalTaxAmount)
in the domain interfaces and in the structural duplicates some
components declare locally.
Adds a typecheck script (tsc --noEmit && hydrogen gql check); it passes
with 0 errors. Two deprecation warnings are left alone as acting on them
would change behaviour: ProductOption.values and CartCost.totalTaxAmount.
Verified against mock.shop: build prerenders the policy pages through the
cached client, and in the browser the product grid, search with facets,
collection filter round-trip, add-to-cart and quantity update all work.
Customer account flows are untested — they need real credentials.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01JaxgqPbFxLsSuLPZom2kdC
The header now carries a "Shop" dropdown that fetches the collection list
the first time it's opened and links each entry to its collection page.
Fetching is deferred so the request only happens on open: useCollections
loads on mount, which would put a collections query on every page. The new
useCollectionsOnDemand holds off until load() runs, keeps the result for
later opens, and clears its guard on failure so a retry can go through.
Rendered in the desktop nav as a floating panel and in the mobile menu as
an inline section, following the hand-rolled pattern in account-menu.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01D1vsTA4MX6qFd7nqSAKtdV
This reverts commit 3442f19816.
Removes the three .hbr siblings, returning the tree to ebdb0be. The
compiled files themselves were never generated from the templates, so
app/globals.css, app/layout.tsx and components/logo.tsx are unaffected.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013amafJZMQmXgeFEotYWfaw
Three files gain a .hbr sibling so a storefront can be compiled with a
store's own branding: app/globals.css, app/layout.tsx and
components/logo.tsx. The committed files stay as they are and remain the
hand-maintained default.
Fourteen variables drive them: shopName, logoUrl, primaryColor,
accentColor, bgColor, fontHeader and fontBody are supplied per store,
while fgColor, primaryFgColor, accentFgColor, surfaceColor, mutedColor,
mutedFgColor and borderColor derive from those unless pinned.
Two changes were needed for the fonts to be swappable. The CSS variables
next/font declares are now generic (--font-heading-family,
--font-body-family, --font-mono-family) rather than named after Geist,
and headings set font-family: var(--font-heading) so fontHeader has an
effect when it differs from fontBody.
The compiler lives outside this repo so the template carries no build
script or dependency for it.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013amafJZMQmXgeFEotYWfaw
The header inlined its own logo/wordmark fallback markup. Pull it into
components/logo.tsx so the footer can show the same mark, and drop the
now-unneeded 'use client' from the root layout.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01VUttSNLkLPvvR6Xf75QA1K
Shopify gives every single-variant product one option named Title with the
lone value Default Title. It isn't a real choice, so filter it out of the
product detail options, the cart line summaries, and the payload the store
assistant sees. Variant matching still reads the raw selectedOptions, so
single-SKU products keep resolving their variant.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01EuRVxuyMUTzWKXW8P5Tn8A
The assistant only ever renders prose, links and the odd list, but
Streamdown's plugin set dragged in shiki, mermaid and katex — and
streamdown core declares mermaid as a hard dependency, so dropping the
plugins alone would have left it installed. Rendering now runs on the
same unified pipeline Streamdown used internally, minus the plugin
surface: remark-parse -> remark-gfm -> remark-rehype -> rehype-sanitize
-> hast-util-to-jsx-runtime. GFM, streaming repair and the link-safety
hook all survive; fenced code renders as plain <pre>. Net -264/+101
packages.
remend now runs only while a part is still streaming. On settled text it
reads `*$89*` as an unclosed italic — the `$` throws off its
closing-delimiter scan — and appends a stray `*` that parses as an empty
bullet. Italic prices are ordinary storefront copy, so that would have
shown up in production.
Route-relative links go through next/link in the same tab; sending a
shopper to a product page in a new tab would strand the conversation
behind it. Only external destinations get the confirmation dialog.
code-block.tsx and tool.tsx were the sole users of shiki and had no
importers, so both are gone.
Also folded in two unrelated changes that were already in the tree: the
loader move out of app/components/ui, and dropping the fade on the
command palette so it opens instantly.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01KuySwKLSF4uEPpZjHkdHBP
Product and collection card images, gallery slides, the zoom overlay
image, and the products section were pinned to bg-white while every
other section uses bg-background. They are transparent now and inherit
the page.
Skeleton fills and image-placeholder tiles keep their zinc backgrounds —
those are load-state and empty-state affordances, not theming.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_016jWbNNJLksC1QG8z8845FX
- Storefront customer operations in graphql/customer.js and a server-safe
services/shopify/customer.ts
- Session held in an httpOnly, sameSite=lax cookie set by the
/api/account handlers; the access token never reaches client JS
- Pages: /account/login, /register, /recover, /reset/[id]/[token] and
/activate/[id]/[token] for Shopify's emailed links
- /account renders order history as master-detail on one screen, since
the Storefront API has no standalone order-by-id query for customers
- Header user icon: links to sign-in when signed out, otherwise a menu
with name, email, order history, and sign out
- Login errors are collapsed and password recovery responds identically
for known and unknown emails, so neither form enumerates accounts
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_016jWbNNJLksC1QG8z8845FX
- Gate the assistant on NEXT_PUBLIC_ENABLE_AI=1 (UI only; the /api/chat
route still responds if called directly)
- Chat model is openai/gpt-5.6-luna-pro with reasoning requested and
sendReasoning enabled, rendered via the Reasoning component
- Suggestion chips and reasoning come from ai-elements; attachments gain
hover-card previews, left alignment, and render under the user message
- Launcher: plain Button when closed, magicui RainbowButton when open
- Tool results replace the collapsible Tool UI with a shimmer while
running and a muted icon + summary line after, plus product previews
- Commerce icons in place of the folder icon for collections
- Add a thin announcement bar above the header; footer splits links and
socials onto separate rows and clears the launcher corner
- Add the shadcn base layer so Tailwind v4's bare `border` picks up the
theme colour instead of currentColor
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_016jWbNNJLksC1QG8z8845FX
- /api/chat streams via AI SDK v7 through OpenRouter (OPENROUTER_API_KEY),
with a store-specific system prompt and five read-only tools:
searchCatalogue, getProductDetails, listCollections,
getCollectionProducts, browseProducts
- Sidebar assistant on the right that opens from a launcher and expands,
built on ai-elements (conversation, message, prompt-input, tool) with
shimmer on in-flight tool calls
- Extract services/shopify/catalog.ts so the Storefront fetchers have no
React imports and can run in a Route Handler; the client hooks now
re-export from it
- ai-elements pulled in the canonical shadcn primitives, replacing the
hand-rolled command/dialog/button variants; search dialog moved to the
cmdk-based Command and CommandDialog forwards shouldFilter
- Pin shiki to ^3.19.0 to match streamdown and drop the duplicate copy
- Add .env.example documenting the required env vars
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_016jWbNNJLksC1QG8z8845FX
- Collections: filters and sort via the Storefront API — the products
connection now takes `filters`/`after` and returns its facets, with
cursor-based load more on the collection page
- Extract ProductFilters (renamed from SearchFilters) and a shared
ProductToolbar so search and collections use the same chrome
- PDP: mark option values with no in-stock variant using a diagonal
strike, computed against the other selected options
- PDP: pointer drag-scrolling for the mobile image carousel, since a
scroll container doesn't drag with a mouse
- Header/cart: circular icon buttons, tighter spacing, and icon sizes
set by class (Button's base CSS clamps un-classed svgs to size-4)
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_016jWbNNJLksC1QG8z8845FX
- Header: search button opening a command-palette dialog with debounced
product suggestions, a term chip, and View All
- Command: shadcn-shaped primitives built on the project's own Dialog so
no cmdk/radix dependency is introduced
- /search: results grid with item count, sort (relevance, price asc/desc),
and cursor-based load more
- Filters: driven by the API's productFilters facets — colour swatches,
labelled lists with counts, and a price range — round-tripped through
each facet's raw input string so no filter shape is hardcoded
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_016jWbNNJLksC1QG8z8845FX
- Cart drawer: single-column layout matching the site — no bag icon,
no dividers, square images, tighter type, discount code form,
estimated total, and a Go to Checkout button
- Cart: per-line loading state so one row's update no longer disables
every other row or the checkout button
- Discounts: cartDiscountCodesUpdate mutation plus discountCodes on the
cart fragment, wired to an applyDiscountCode store action
- Products: fix "load more" returning the same first page — the query
now takes an `after` cursor and getProductsPage exposes pageInfo
- Collections: cards match the product cards (no border, radius, blurb,
or CTA row) at 4-up on desktop and 2-up on mobile; section headers
match the products section
- Shop Pay: cart permalink with payment=shop_pay instead of the hosted
shop-js element
- Buttons converted to the shadcn Button component throughout
- PDP: swipeable image carousel with dots on mobile, sticky info column,
colour swatches never fall back to variant photos
- Rename the store from Stride to Shop; larger header wordmark
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_016jWbNNJLksC1QG8z8845FX
Product cards, header, footer, PDP, and typography reworked toward a
leaner layout; adds shop policy pages backed by the Storefront API.
- Type: switch to Geist Sans/Mono, regular-weight headings
- Product cards: drop borders, rounded corners, and action buttons
- Header: shorter bar, no bottom border, center-out hover underline,
bag icon replacing the cart icon (drawer wording updated to match)
- Footer: single line with policy links and social icons on bg-background
- Policies: /policies/[handle] renders shop.privacyPolicy,
termsOfService, refundPolicy, shippingPolicy, subscriptionPolicy
(SSG, hourly revalidation)
- PDP: image grid with mobile carousel + dots and click-to-zoom,
sticky info column, colour swatches from option optionValues with a
configurable name-to-colour fallback in config/swatches.ts,
Shop-purple checkout button
- Recommendations: left-aligned heading on bg-background
- Ignore .env*.local and tsconfig.tsbuildinfo
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_016jWbNNJLksC1QG8z8845FX
