System Flow Charts

┌─────────────────────────────────────────────────────────────────────────────┐
│                           COMPLETE SYSTEM ARCHITECTURE                       │
│                    11ty + Shopify UCP + Google AI Integration                │
└─────────────────────────────────────────────────────────────────────────────┘

┌──────────────────┐
│   User Browser   │
│                  │
│  ┌────────────┐  │
│  │ 11ty Site  │  │
│  │ (Static)   │  │
│  └────────────┘  │
│         │        │
└─────────┼────────┘
          │
          ├─────────────────┬──────────────────┬─────────────────┐
          │                 │                  │                 │
          ▼                 ▼                  ▼                 ▼
┌──────────────────┐ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐
│  Shopify UCP     │ │   OAuth 2.0  │ │  A2P Payment │ │  Google AI   │
│  Catalog API     │ │   Identity   │ │   Gateway    │ │  Data Stream │
│                  │ │   Provider   │ │              │ │              │
│ ┌──────────────┐ │ │              │ │              │ │              │
│ │  Products    │ │ │ ┌──────────┐ │ │ ┌──────────┐ │ │ ┌──────────┐ │
│ │  Variants    │ │ │ │ Login    │ │ │ │ Mandate  │ │ │ │ Analytics│ │
│ │  Inventory   │ │ │ │ Sessions │ │ │ │ Verify   │ │ │ │ ML Model │ │
│ └──────────────┘ │ │ │ Tokens   │ │ │ │ Process  │ │ │ │ Personalize│
│                  │ │ └──────────┘ │ │ └──────────┘ │ │ └──────────┘ │
└──────────────────┘ └──────────────┘ └──────────────┘ └──────────────┘
          │                 │                  │                 │
          └─────────────────┴──────────────────┴─────────────────┘
                                    │
                                    ▼
                          ┌──────────────────┐
                          │  Middleware      │
                          │  (Xano/n8n)      │
                          │                  │
                          │ ┌──────────────┐ │
                          │ │ Data Sync    │ │
                          │ │ Webhooks     │ │
                          │ │ Transform    │ │
                          │ └──────────────┘ │
                          └──────────────────┘
                                    │
                          ┌─────────┴─────────┐
                          ▼                   ▼
                  ┌──────────────┐    ┌──────────────┐
                  │   Database   │    │  WebSocket   │
                  │              │    │   Server     │
                  │ ┌──────────┐ │    │              │
                  │ │ Users    │ │    │ ┌──────────┐ │
                  │ │ Orders   │ │    │ │ Real-time│ │
                  │ │ Sessions │ │    │ │ Events   │ │
                  │ │ Consent  │ │    │ │ Streaming│ │
                  │ └──────────┘ │    │ └──────────┘ │
                  └──────────────┘    └──────────────┘

┌─────────────────────────────────────────────────────────────────┐
│                    11TY BUILD-TIME DATA FLOW                     │
└─────────────────────────────────────────────────────────────────┘

START BUILD
    │
    ▼
┌─────────────────────────┐
│  .eleventy.js           │
│  (Configuration)        │
└─────────────────────────┘
    │
    ▼
┌─────────────────────────┐
│  src/_data/             │
│                         │
│  ┌───────────────────┐  │
│  │ ucpClient.js      │  │  ← JWT Authentication
│  │ (API Client)      │  │
│  └───────────────────┘  │
│           │             │
│           ▼             │
│  ┌───────────────────┐  │
│  │ products.js       │  │  ← Fetch Products
│  │ (Data File)       │  │
│  └───────────────────┘  │
└─────────────────────────┘
    │
    │ [Product Data Array]
    │
    ▼
┌─────────────────────────┐
│  src/index.njk          │  ← Product Listing
│  src/product.njk        │  ← Product Details
│  (Templates)            │
└─────────────────────────┘
    │
    │ [Rendered HTML]
    │
    ▼
┌─────────────────────────┐
│  _site/                 │
│                         │
│  ├── index.html         │
│  ├── products/          │
│  │   ├── product-1.html │
│  │   ├── product-2.html │
│  │   └── ...            │
│  ├── css/               │
│  └── js/                │
└─────────────────────────┘
    │
    ▼
DEPLOY TO CDN

┌─────────────────────────────────────────────────────────────────┐
│                      RUNTIME USER FLOW                           │
└─────────────────────────────────────────────────────────────────┘

USER VISITS SITE
    │
    ▼
┌─────────────────────────┐
│  Load Static HTML       │
│  (from CDN)             │
└─────────────────────────┘
    │
    ▼
┌─────────────────────────┐
│  Initialize JavaScript  │
│  - Session Manager      │
│  - Consent Manager      │
│  - WebSocket Client     │
└─────────────────────────┘
    │
    ├─── Not Logged In ───┐
    │                     │
    │                     ▼
    │            ┌─────────────────────────┐
    │            │  Show Login Button      │
    │            └─────────────────────────┘
    │                     │
    │                     │ [User Clicks Login]
    │                     │
    │                     ▼
    │            ┌─────────────────────────┐
    │            │  OAuth 2.0 Flow         │
    │            │  1. Redirect to IdP     │
    │            │  2. User Authenticates  │
    │            │  3. Callback with Code  │
    │            │  4. Exchange for Token  │
    │            └─────────────────────────┘
    │                     │
    │                     ▼
    │            ┌─────────────────────────┐
    │            │  Store Session Token    │
    │            │  (httpOnly Cookie)      │
    │            └─────────────────────────┘
    │                     │
    └─────────────────────┘
              │
              ▼
┌─────────────────────────┐
│  User Logged In         │
│  - Show User Profile    │
│  - Enable Cart          │
│  - Track Behavior       │
└─────────────────────────┘
              │
              ├─── Browse Products ───┐
              │                       │
              │                       ▼
              │              ┌─────────────────────────┐
              │              │  View Product Details   │
              │              │  - Images               │
              │              │  - Price                │
              │              │  - Add to Cart          │
              │              └─────────────────────────┘
              │                       │
              │                       │ [Add to Cart]
              │                       │
              │                       ▼
              │              ┌─────────────────────────┐
              │              │  Update Cart State      │
              │              │  (localStorage)         │
              │              └─────────────────────────┘
              │                       │
              │                       │ [Proceed to Checkout]
              │                       │
              │                       ▼
              │              ┌─────────────────────────┐
              │              │  Checkout Flow          │
              │              │  1. Review Cart         │
              │              │  2. Shipping Info       │
              │              │  3. Payment Method      │
              │              └─────────────────────────┘
              │                       │
              │                       ▼
              │              ┌─────────────────────────┐
              │              │  A2P Payment Mandate    │
              │              │  1. Generate Mandate    │
              │              │  2. Sign with Key       │
              │              │  3. Submit to Gateway   │
              │              └─────────────────────────┘
              │                       │
              │                       ▼
              │              ┌─────────────────────────┐
              │              │  Payment Processing     │
              │              │  - Verify Signature     │
              │              │  - Charge Payment       │
              │              │  - Create Order         │
              │              └─────────────────────────┘
              │                       │
              │                       ▼
              │              ┌─────────────────────────┐
              │              │  Order Confirmation     │
              │              │  - Thank You Page       │
              │              │  - Email Receipt        │
              │              └─────────────────────────┘
              │
              └─── Throughout Session ───┐
                                        │
                                        ▼
                              ┌─────────────────────────┐
                              │  Data Streaming         │
                              │  (If Consent Given)     │
                              │                         │
                              │  WebSocket → Google AI  │
                              │  - Page Views           │
                              │  - Product Views        │
                              │  - Cart Actions         │
                              │  - Purchases            │
                              └─────────────────────────┘
                                        │
                                        ▼
                              ┌─────────────────────────┐
                              │  AI Personalization     │
                              │  - Product Recommendations │
                              │  - Dynamic Pricing      │
                              │  - Content Adaptation   │
                              └─────────────────────────┘

┌─────────────────────────────────────────────────────────────────┐
│                  OAUTH 2.0 AUTHENTICATION FLOW                   │
│                    (Authorization Code + PKCE)                   │
└─────────────────────────────────────────────────────────────────┘

┌──────────┐                                      ┌──────────────┐
│  Client  │                                      │   Identity   │
│ (11ty)   │                                      │   Provider   │
└──────────┘                                      └──────────────┘
     │                                                    │
     │ 1. User clicks "Login"                            │
     │                                                    │
     │ 2. Generate code_verifier & code_challenge        │
     │    (PKCE)                                          │
     │                                                    │
     │ 3. Redirect to Authorization Endpoint             │
     │────────────────────────────────────────────────────>
     │    GET /authorize?                                 │
     │      response_type=code                            │
     │      client_id=xxx                                 │
     │      redirect_uri=xxx                              │
     │      scope=openid profile email                    │
     │      code_challenge=xxx                            │
     │      code_challenge_method=S256                    │
     │                                                    │
     │                                4. Show Login Form  │
     │                                                    │
     │                                5. User Authenticates
     │                                                    │
     │ 6. Redirect back with authorization code          │
     │<────────────────────────────────────────────────────
     │    GET /callback?code=AUTH_CODE                    │
     │                                                    │
     │ 7. Exchange code for tokens                        │
     │────────────────────────────────────────────────────>
     │    POST /token                                     │
     │      grant_type=authorization_code                 │
     │      code=AUTH_CODE                                │
     │      redirect_uri=xxx                              │
     │      client_id=xxx                                 │
     │      code_verifier=xxx                             │
     │                                                    │
     │                                8. Validate Request │
     │                                9. Verify PKCE      │
     │                                                    │
     │ 10. Receive tokens                                 │
     │<────────────────────────────────────────────────────
     │    {                                               │
     │      "access_token": "...",                        │
     │      "id_token": "...",                            │
     │      "refresh_token": "...",                       │
     │      "expires_in": 3600                            │
     │    }                                               │
     │                                                    │
     │ 11. Store tokens securely                          │
     │     (httpOnly cookie)                              │
     │                                                    │
     │ 12. Decode id_token for user info                  │
     │                                                    │
     │ 13. User is logged in                              │
     │                                                    │
     │                                                    │
     │ [Later: Token Expires]                             │
     │                                                    │
     │ 14. Use refresh_token to get new access_token      │
     │────────────────────────────────────────────────────>
     │    POST /token                                     │
     │      grant_type=refresh_token                      │
     │      refresh_token=xxx                             │
     │      client_id=xxx                                 │
     │                                                    │
     │ 15. Receive new tokens                             │
     │<────────────────────────────────────────────────────
     │                                                    │

┌─────────────────────────────────────────────────────────────────┐
│                      A2P PAYMENT FLOW                            │
│              (Agent Payments Protocol - Cryptographic)           │
└─────────────────────────────────────────────────────────────────┘

┌──────────┐                                      ┌──────────────┐
│  Client  │                                      │   Payment    │
│ (11ty)   │                                      │   Gateway    │
└──────────┘                                      └──────────────┘
     │                                                    │
     │ 1. User completes checkout                        │
     │                                                    │
     │ 2. Generate payment mandate                       │
     │    {                                               │
     │      "mandate_id": "uuid",                         │
     │      "amount": 99.99,                              │
     │      "currency": "USD",                            │
     │      "merchant_id": "...",                         │
     │      "timestamp": "...",                           │
     │      "nonce": "random"                             │
     │    }                                               │
     │                                                    │
     │ 3. Sign mandate with private key                  │
     │    signature = sign(mandate, private_key)         │
     │                                                    │
     │ 4. Submit signed mandate                           │
     │────────────────────────────────────────────────────>
     │    POST /payments/mandate                          │
     │    {                                               │
     │      "mandate": {...},                             │
     │      "signature": "...",                           │
     │      "public_key": "..."                           │
     │    }                                               │
     │                                                    │
     │                                5. Verify Signature │
     │                                   verify(mandate,  │
     │                                          signature,│
     │                                          public_key)
     │                                                    │
     │                                6. Check Idempotency│
     │                                   (mandate_id)     │
     │                                                    │
     │                                7. Validate Amount  │
     │                                   & Merchant       │
     │                                                    │
     │                                8. Process Payment  │
     │                                   (Charge Card)    │
     │                                                    │
     │ 9. Payment confirmation                            │
     │<────────────────────────────────────────────────────
     │    {                                               │
     │      "status": "success",                          │
     │      "transaction_id": "...",                      │
     │      "mandate_id": "...",                          │
     │      "timestamp": "..."                            │
     │    }                                               │
     │                                                    │
     │ 10. Create order in database                       │
     │                                                    │
     │ 11. Show confirmation to user                      │
     │                                                    │
     │ 12. Send receipt email                             │
     │                                                    │

┌─────────────────────────────────────────────────────────────────┐
│                  WEBSOCKET DATA STREAMING FLOW                   │
│                    (Real-time to Google AI)                      │
└─────────────────────────────────────────────────────────────────┘

┌──────────┐         ┌──────────────┐         ┌──────────────┐
│  Client  │         │  WebSocket   │         │  Google AI   │
│ (11ty)   │         │   Server     │         │  Data Stream │
└──────────┘         └──────────────┘         └──────────────┘
     │                      │                         │
     │ 1. User gives consent│                         │
     │                      │                         │
     │ 2. Establish WS connection                     │
     │──────────────────────>                         │
     │    ws://server/stream?                         │
     │      token=xxx                                 │
     │                      │                         │
     │                      │ 3. Validate token       │
     │                      │                         │
     │ 4. Connection established                      │
     │<──────────────────────                         │
     │                      │                         │
     │ 5. Send events       │                         │
     │──────────────────────>                         │
     │    {                 │                         │
     │      "event": "pageview",                      │
     │      "page": "/products/123",                  │
     │      "timestamp": "...",                       │
     │      "user_id": "..."│                         │
     │    }                 │                         │
     │                      │                         │
     │                      │ 6. Forward to Google AI │
     │                      │─────────────────────────>
     │                      │    POST /ingest         │
     │                      │    {                    │
     │                      │      "events": [...]    │
     │                      │    }                    │
     │                      │                         │
     │                      │ 7. AI processes data    │
     │                      │                         │
     │                      │ 8. Send recommendations │
     │                      │<─────────────────────────
     │                      │    {                    │
     │                      │      "recommendations": [...]
     │                      │    }                    │
     │                      │                         │
     │ 9. Receive recommendations                     │
     │<──────────────────────                         │
     │    {                 │                         │
     │      "type": "recommendation",                 │
     │      "products": [...],                        │
     │      "confidence": 0.95                        │
     │    }                 │                         │
     │                      │                         │
     │ 10. Update UI with personalized content        │
     │                      │                         │
     │                      │                         │
     │ [Continuous streaming throughout session]      │
     │                      │                         │