Add AI store assistant with catalogue tool calls

- /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

hooks/use-shopify-collections.ts

@@ -1,142 +1,38 @@
 'use client';
 
 import { useState, useEffect, useCallback } from 'react';
-import { shopifyFetch } from '@/services/shopify/client';
 import {
-  GET_COLLECTIONS_QUERY,
-  GET_COLLECTION_PRODUCTS_QUERY,
-} from '@/graphql/collections';
-import type { Product } from '@/hooks/use-shopify-products';
+  getCollections,
+  getCollectionProducts,
+} from '@/services/shopify/catalog';
 
-interface CollectionImage {
-  url: string;
-  altText?: string;
-}
+export {
+  getCollections,
+  getCollectionProducts,
+  getCollectionProductsPage,
+} from '@/services/shopify/catalog';
+export type {
+  Collection,
+  CollectionWithProducts,
+  CollectionSortKey,
+  CollectionProductsPage,
+  ProductFilterFacet,
+} from '@/services/shopify/catalog';
 
-export interface Collection {
-  id: string;
-  title: string;
-  handle: string;
-  description?: string;
-  descriptionHtml?: string;
-  image?: CollectionImage;
-}
-
-export interface CollectionWithProducts extends Collection {
-  products: Product[];
-}
-
-export type CollectionSortKey =
-  | 'COLLECTION_DEFAULT'
-  | 'BEST_SELLING'
-  | 'CREATED'
-  | 'PRICE'
-  | 'TITLE';
+import type {
+  Collection,
+  CollectionWithProducts,
+  CollectionSortKey,
+} from '@/services/shopify/catalog';
 
 interface UseCollectionProductsOptions {
   first?: number;
   after?: string | null;
   sortKey?: CollectionSortKey;
   reverse?: boolean;
-  /** Raw `input` strings from the connection's `filters` facets. */
   filterInputs?: string[];
 }
 
-export interface CollectionProductsPage {
-  collection: Collection | null;
-  products: Product[];
-  filters: ProductFilterFacet[];
-  hasNextPage: boolean;
-  endCursor: string | null;
-}
-
-export interface ProductFilterFacet {
-  id: string;
-  label: string;
-  type: 'LIST' | 'PRICE_RANGE' | 'BOOLEAN';
-  values: Array<{
-    id: string;
-    label: string;
-    count: number;
-    input: string;
-  }>;
-}
-
-// Fetch all collections
-export async function getCollections(first = 50): Promise<Collection[]> {
-  const response = await shopifyFetch({
-    query: GET_COLLECTIONS_QUERY,
-    variables: { first },
-  });
-
-  return response.data.collections.edges.map((edge: { node: Collection }) => edge.node);
-}
-
-// Fetch products in a collection by handle
-export async function getCollectionProducts(
-  handle: string,
-  options: UseCollectionProductsOptions = {}
-): Promise<CollectionWithProducts | null> {
-  const page = await getCollectionProductsPage(handle, options);
-  if (!page.collection) return null;
-
-  return { ...page.collection, products: page.products };
-}
-
-// Same fetch, but keeps the cursor and facet list for filtering and paging.
-export async function getCollectionProductsPage(
-  handle: string,
-  {
-    first = 50,
-    after = null,
-    sortKey = 'COLLECTION_DEFAULT',
-    reverse = false,
-    filterInputs = [],
-  }: UseCollectionProductsOptions = {}
-): Promise<CollectionProductsPage> {
-  const filters = filterInputs.flatMap((input) => {
-    try {
-      return [JSON.parse(input)];
-    } catch {
-      console.warn('Ignoring malformed product filter input:', input);
-      return [];
-    }
-  });
-
-  const response = await shopifyFetch({
-    query: GET_COLLECTION_PRODUCTS_QUERY,
-    variables: {
-      handle,
-      first,
-      after,
-      sortKey,
-      reverse,
-      filters: filters.length ? filters : null,
-    },
-  });
-
-  const collection = response.data.collection;
-  if (!collection) {
-    return {
-      collection: null,
-      products: [],
-      filters: [],
-      hasNextPage: false,
-      endCursor: null,
-    };
-  }
-
-  const { edges, pageInfo, filters: facets } = collection.products;
-
-  return {
-    collection,
-    products: edges.map((edge: { node: Product }) => edge.node),
-    filters: facets ?? [],
-    hasNextPage: Boolean(pageInfo?.hasNextPage),
-    endCursor: pageInfo?.endCursor ?? null,
-  };
-}
-
 // Hook for fetching all collections
 export function useCollections(first = 50) {
   const [collections, setCollections] = useState<Collection[]>([]);