Oga Market: Day 2 hybrid shopper + creator app for Good Online

.gitignore

@@ -0,0 +1,8 @@
+.env
+.DS_Store
+*.log
+contract/.env
+contract/node_modules/
+contract/ListingNFT.abi.json
+contract/ListingNFT.bytecode
+node_modules/

AGENTS.md

@@ -0,0 +1,69 @@
+# AGENTS.md — Oga Market
+
+Portable agent guidance for the Oga Market codebase.
+
+## What this is
+
+**Day 2** entry for the 0G Onsite Lagos Hackathon. A web-only commerce app for [Good Online](https://good.online) with two surfaces:
+
+1. **Shopper** (`shopper.html`) — AI shopping assistant (voice + text), wishlist on 0G Storage, on-chain shopping receipts
+2. **Creator** (`creator.html`) — AI listing generator (vision + LLM), mints listings as iNFTs (ERC-7857-style) on 0G Chain
+
+Sibling project to **Day 1 Oga Mi** at `/Users/mac/OG/ogami` (which is the robot version).
+
+## File map
+
+| File | Purpose |
+|------|---------|
+| `index.html` | Landing page with mode selector |
+| `shopper.html` | Shopper experience (chat, voice, wishlist) |
+| `creator.html` | Creator studio (upload photo, generate listing, mint iNFT) |
+| `shared.js` | Catalog, system prompts, 0G helpers (askAI, askVision, transcribe, OG_CHAIN config, OG_STORAGE) |
+| `styles.css` | All CSS — design tokens from `colors_and_type.css` reference |
+| `contract/ListingNFT.sol` | Solidity source — ERC-7857-inspired |
+| `contract/deploy.js` | One-step compile + deploy via solc-js + ethers |
+| `contract/package.json` | Just `solc`, `ethers`, `dotenv` |
+
+## 0G integration
+
+**Direct mode endpoints** (browser-CORS-friendly, NOT Router API):
+- Chat: `compute-network-1.integratenetwork.work/v1/proxy/chat/completions`
+- Whisper: `compute-network-16.integratenetwork.work/v1/proxy/audio/transcriptions`
+
+Each provider needs a separate `app-sk-...` key minted from **Advanced mode** on pc.0g.ai.
+
+**Chain**: 0G testnet (Galileo), Chain ID 16602, RPC `https://evmrpc-testnet.0g.ai`.
+
+## Gotchas (copy-paste from Day 1 / hackathon docs)
+
+1. **CORS** — Router API (`router-api.0g.ai`) does NOT support browser preflight. Use Direct endpoints.
+2. **Key per provider** — Chat key won't authorize Whisper. Mint separate `app-sk-...` for each.
+3. **Whisper format** — Browser MediaRecorder gives webm/opus. 0G Whisper rejects raw webm. `webmBlobToWav()` in shared.js converts to PCM WAV first.
+4. **Vision** — May fail on `zai-org/GLM-5-FP8` if that provider's not vision-enabled. The creator flow catches this and falls back to a text stub. To use real vision, deposit to `qwen/qwen3-vl-30b-a3b-instruct` and update `CFG.visionModel` in `creator.html`.
+5. **iNFT contract** — Must be deployed once via `contract/deploy.js`, address pasted into `shared.js`. If empty, creator mode falls back to plain calldata transactions (still on-chain but not real iNFTs).
+
+## Editing conventions
+
+- **Single-file pages**: each HTML file is self-contained, scripts inline. Only `shared.js` and `styles.css` are imported.
+- **No build step**: serve with `python3 -m http.server`.
+- **Design tokens**: in `:root` of `styles.css`. Change colors there.
+- **System prompts**: in `shared.js` (`buildShopperPrompt`, `buildCreatorPrompt`). Edit there.
+- **Catalog**: in `shared.js` (`window.GOOD_CATALOG` string).
+
+## Day 1 vs Day 2
+
+| | Day 1 (Oga Mi) | Day 2 (Oga Market) |
+|---|---|---|
+| Surface | Robot + 3D sim | Web only, no robot |
+| Audience | In-store at Good House | Customers + creators online |
+| Hardware | Reachy Mini (WebRTC) | None |
+| Chain | Plain interaction calldata | iNFTs (ERC-7857-inspired) |
+| Vision | None | Photo → AI listing |
+| Catalog | Read-only (recommends) | Read + Write (creators add new) |
+
+## References
+
+- 0G docs: https://docs.0g.ai/ai-context
+- Hackathon repo: https://github.com/0gfoundation/reachy-mini-hackathon
+- Good Online: https://good.online
+- ERC-7857 spec: https://eips.ethereum.org/EIPS/eip-7857 (we use a minimal version — no TEE/ZKP since listings are public)

CLAUDE.md

@@ -0,0 +1,70 @@
+# CLAUDE.md — Oga Market
+
+@AGENTS.md
+
+## Claude Code workflow
+
+1. Edit `shopper.html`, `creator.html`, or `shared.js`
+2. Serve: `python3 -m http.server 8766`
+3. Test: http://localhost:8766 — refresh after edits
+4. Both modes work without hardware
+
+## Quick nav
+
+| Feature | Where |
+|---------|-------|
+| CSS tokens | `:root` block in `styles.css` |
+| Mode selector | `index.html` |
+| Shopper chat loop | `shopper.html` `sendMessage()` |
+| Shopper voice | `shopper.html` mic-btn click handler |
+| Wishlist | `shopper.html` `addToWishlist()`, `renderWishlist()` |
+| Creator upload | `creator.html` `file-input` change handler |
+| Creator AI listing gen | `creator.html` `generateListing()` |
+| Creator iNFT mint | `creator.html` `mintListing()` |
+| 0G Compute helpers | `shared.js` `askAI()`, `askVision()`, `transcribe()` |
+| 0G Chain config | `shared.js` `OG_CHAIN`, `LISTING_NFT_ABI` |
+| System prompts | `shared.js` `buildShopperPrompt()`, `buildCreatorPrompt()` |
+| Catalog | `shared.js` `GOOD_CATALOG` |
+| Contract source | `contract/ListingNFT.sol` |
+| Contract deploy | `contract/deploy.js` |
+
+## Smoke test
+
+```bash
+# Test chat key
+curl -sS https://compute-network-1.integratenetwork.work/v1/proxy/chat/completions \
+  -H "Authorization: Bearer YOUR_APP_SK" \
+  -H "Content-Type: application/json" \
+  -d '{"model":"zai-org/GLM-5-FP8","messages":[{"role":"user","content":"hi"}],"max_tokens":5}'
+```
+
+200 + JSON = key works.
+
+## Deploy iNFT contract
+
+```bash
+cd contract
+echo "PRIVATE_KEY=0x..." > .env
+npm install
+node deploy.js
+# Copy printed address into shared.js OG_CHAIN.listingNFT
+```
+
+## Adding features
+
+**New shopper feature** — edit `shopper.html`. State lives in module-scope `let` vars (CFG, customerMemory, wishlist).
+
+**New creator field** — add input to `creator.html` form, include in `generateListing()` prompt, persist to `creatorVault[CFG.name].listings[*]`.
+
+**New on-chain action** — extend `LISTING_NFT_ABI` in `shared.js`, add a function to `ListingNFT.sol`, redeploy contract, update address.
+
+## Publishing
+
+```bash
+git add -A
+git commit -m "your message"
+git push hf main       # HuggingFace Space
+git push origin main   # GitHub
+```
+
+HF Space lives at https://devharystyles-oga-market.static.hf.space/

README.md

@@ -0,0 +1,81 @@
+---
+title: Oga Market
+emoji: 🛍️
+colorFrom: green
+colorTo: yellow
+sdk: static
+pinned: false
+tags:
+  - 0g-hackathon
+---
+
+# Oga Market — Good Online on the 0G Stack
+
+Day 2 entry for the **0G Onsite Lagos Hackathon (Commerce x AI)**.
+
+Two surfaces on one app, both powered by 0G:
+
+- **Shopper mode** — AI shopping assistant (chat + voice) that knows the entire Good Online catalog, remembers what you like, and writes on-chain receipts for every interaction.
+- **Creator mode** — Upload a product photo → AI writes the listing (title, story, category, price feedback) → mint it as an **iNFT (ERC-7857-inspired)** on 0G Chain so the creator owns their listing as an on-chain asset.
+
+## Live
+
+- HuggingFace Space: https://devharystyles-oga-market.static.hf.space/ *(after deploy)*
+- GitHub: https://github.com/harystyleseze/oga-market *(after push)*
+
+## 0G integration
+
+| Service | Used by | What |
+|---------|---------|------|
+| Compute (Chat) | Both | GLM-5 FP8 for conversation + listing copy |
+| Compute (Whisper) | Shopper | Voice product search |
+| Compute (Vision) | Creator | Analyse uploaded product photos |
+| Storage | Both | Customer profiles, wishlists, minted listings (localStorage proxy) |
+| Chain | Both | Shopper receipts + creator iNFTs (ERC-7857-style) on 0G testnet |
+
+## Run locally
+
+```bash
+cd /Users/mac/OG/oga-market
+python3 -m http.server 8766
+```
+
+Open http://localhost:8766 → choose Shopper or Creator.
+
+## Deploy the iNFT contract
+
+The creator mode needs a deployed `ListingNFT` contract on 0G testnet. One-time setup:
+
+```bash
+cd contract
+echo "PRIVATE_KEY=0xYOUR_TESTNET_KEY" > .env
+npm install
+node deploy.js
+```
+
+Paste the printed address into `shared.js` → `window.OG_CHAIN.listingNFT`.
+
+Get free testnet 0G at https://faucet.0g.ai
+
+## Files
+
+```
+oga-market/
+├── index.html        Mode selector (Shopper or Creator)
+├── shopper.html      AI shopping assistant
+├── creator.html      AI listing generator + iNFT minter
+├── shared.js         Catalog + 0G helpers (Compute, Chain, Storage)
+├── styles.css        Good Online design system (cream/forest/saffron)
+├── contract/
+│   ├── ListingNFT.sol      ERC-7857-inspired contract source
+│   ├── deploy.js           One-step compile + deploy
+│   ├── package.json
+│   └── README.md
+├── CLAUDE.md
+├── AGENTS.md
+└── README.md
+```
+
+## Built for
+
+0G Onsite Lagos · Day 2 · Commerce x AI · 2026-05-28

contract/ListingNFT.sol

@@ -0,0 +1,93 @@
+// SPDX-License-Identifier: MIT
+pragma solidity ^0.8.20;
+
+/**
+ * @title ListingNFT
+ * @notice A minimal ERC-7857-inspired iNFT for Good Online product listings.
+ *         Each listing is minted by a creator with on-chain metadata description
+ *         and a content hash. Ownership is transferable.
+ *
+ *         This is a simplified version of ERC-7857 (Intelligent NFTs) that
+ *         skips the TEE/ZKP verification layer required for full encrypted
+ *         metadata transfer. Listings here are public by design (it's a
+ *         marketplace), so we just need: ownership + content commitment.
+ */
+contract ListingNFT {
+    struct IntelligentData {
+        string dataDescription;
+        bytes32 dataHash;
+        address creator;
+        uint256 timestamp;
+    }
+
+    string public constant name = "Good Online Listing";
+    string public constant symbol = "GOOD-LIST";
+
+    uint256 private _nextTokenId = 1;
+    mapping(uint256 => address) private _owners;
+    mapping(uint256 => IntelligentData) private _data;
+    mapping(address => uint256) private _balances;
+
+    event ListingMinted(
+        uint256 indexed tokenId,
+        address indexed creator,
+        string dataDescription,
+        bytes32 dataHash,
+        uint256 timestamp
+    );
+    event Transfer(address indexed from, address indexed to, uint256 indexed tokenId);
+
+    /// @notice Mint a new listing as an iNFT.
+    /// @param dataDescription JSON string describing the listing (title, category, price, etc.)
+    /// @param dataHash keccak256 commitment to the full content (image + text)
+    /// @return tokenId of the new listing
+    function mint(string memory dataDescription, bytes32 dataHash) external returns (uint256) {
+        uint256 tokenId = _nextTokenId++;
+        _owners[tokenId] = msg.sender;
+        _balances[msg.sender] += 1;
+        _data[tokenId] = IntelligentData({
+            dataDescription: dataDescription,
+            dataHash: dataHash,
+            creator: msg.sender,
+            timestamp: block.timestamp
+        });
+        emit ListingMinted(tokenId, msg.sender, dataDescription, dataHash, block.timestamp);
+        emit Transfer(address(0), msg.sender, tokenId);
+        return tokenId;
+    }
+
+    /// @notice Get the listing data for a token.
+    function getData(uint256 tokenId) external view returns (
+        string memory dataDescription,
+        bytes32 dataHash,
+        address creator,
+        uint256 timestamp
+    ) {
+        IntelligentData memory d = _data[tokenId];
+        return (d.dataDescription, d.dataHash, d.creator, d.timestamp);
+    }
+
+    function totalSupply() external view returns (uint256) {
+        return _nextTokenId - 1;
+    }
+
+    function ownerOf(uint256 tokenId) external view returns (address) {
+        require(_owners[tokenId] != address(0), "Token does not exist");
+        return _owners[tokenId];
+    }
+
+    function balanceOf(address owner) external view returns (uint256) {
+        return _balances[owner];
+    }
+
+    /// @notice Transfer ownership of a listing.
+    function transferFrom(address from, address to, uint256 tokenId) external {
+        require(_owners[tokenId] == from, "Not owner");
+        require(from == msg.sender, "Only owner can transfer");
+        require(to != address(0), "Cannot transfer to zero");
+        _balances[from] -= 1;
+        _balances[to] += 1;
+        _owners[tokenId] = to;
+        emit Transfer(from, to, tokenId);
+    }
+}

contract/README.md

@@ -0,0 +1,45 @@
+# ListingNFT — Contract Deploy
+
+Minimal ERC-7857-inspired iNFT contract for Good Online product listings. Creators mint listings as on-chain owned tokens.
+
+## Deploy in 3 commands
+
+```bash
+cd contract
+echo "PRIVATE_KEY=0xYOUR_TESTNET_PRIVATE_KEY" > .env
+npm install
+node deploy.js
+```
+
+The script compiles `ListingNFT.sol` with `solc-js`, deploys to **0G testnet** (Chain ID 16602), and prints the deployed address.
+
+## After deploy
+
+Copy the printed address and paste it into `../shared.js`:
+
+```js
+window.OG_CHAIN = {
+  rpc: 'https://evmrpc-testnet.0g.ai',
+  chainId: 16602,
+  explorerTx: (h) => `https://chainscan-galileo.0g.ai/tx/${h}`,
+  listingNFT: '0xYOUR_DEPLOYED_ADDRESS',  // ← paste here
+};
+```
+
+## Get testnet 0G
+
+Free from https://faucet.0g.ai (0.1 0G/day, more than enough for deploy)
+
+## Contract API
+
+```solidity
+function mint(string dataDescription, bytes32 dataHash) external returns (uint256 tokenId);
+function getData(uint256 tokenId) external view returns (string, bytes32, address, uint256);
+function ownerOf(uint256 tokenId) external view returns (address);
+function transferFrom(address from, address to, uint256 tokenId) external;
+function totalSupply() external view returns (uint256);
+```
+
+Events:
+- `ListingMinted(uint256 indexed tokenId, address indexed creator, string dataDescription, bytes32 dataHash, uint256 timestamp)`
+- `Transfer(address indexed from, address indexed to, uint256 indexed tokenId)` (ERC-721 compatible)

contract/deploy.js

@@ -0,0 +1,111 @@
+// deploy.js — compile and deploy ListingNFT.sol to 0G testnet
+//
+// Usage:
+//   cd contract
+//   echo "PRIVATE_KEY=0x..." > .env
+//   npm install
+//   node deploy.js
+//
+// Prints the deployed address — paste into ../shared.js OG_CHAIN.listingNFT
+
+import { readFileSync, writeFileSync } from 'fs';
+import { fileURLToPath } from 'url';
+import { dirname, resolve } from 'path';
+import { ethers } from 'ethers';
+import solc from 'solc';
+import 'dotenv/config';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+const OG_RPC = 'https://evmrpc-testnet.0g.ai';
+const OG_CHAIN_ID = 16602;
+
+function compile() {
+  console.log('Compiling ListingNFT.sol…');
+  const source = readFileSync(resolve(__dirname, 'ListingNFT.sol'), 'utf8');
+
+  const input = {
+    language: 'Solidity',
+    sources: { 'ListingNFT.sol': { content: source } },
+    settings: {
+      outputSelection: { '*': { '*': ['abi', 'evm.bytecode.object'] } },
+      optimizer: { enabled: true, runs: 200 },
+    },
+  };
+
+  const output = JSON.parse(solc.compile(JSON.stringify(input)));
+
+  if (output.errors) {
+    for (const err of output.errors) {
+      if (err.severity === 'error') {
+        console.error(err.formattedMessage);
+        process.exit(1);
+      }
+    }
+  }
+
+  const contract = output.contracts['ListingNFT.sol']['ListingNFT'];
+  const abi = contract.abi;
+  const bytecode = contract.evm.bytecode.object;
+
+  // Save artifacts for the frontend
+  writeFileSync(resolve(__dirname, 'ListingNFT.abi.json'), JSON.stringify(abi, null, 2));
+  writeFileSync(resolve(__dirname, 'ListingNFT.bytecode'), bytecode);
+  console.log('Compiled. ABI + bytecode written to contract/.');
+
+  return { abi, bytecode };
+}
+
+async function deploy() {
+  const privateKey = process.env.PRIVATE_KEY;
+  if (!privateKey) {
+    console.error('Missing PRIVATE_KEY in contract/.env');
+    console.error('Create one: echo "PRIVATE_KEY=0x..." > .env');
+    process.exit(1);
+  }
+
+  const { abi, bytecode } = compile();
+
+  console.log('Connecting to 0G testnet…');
+  const provider = new ethers.JsonRpcProvider(OG_RPC);
+  const wallet = new ethers.Wallet(privateKey, provider);
+
+  const network = await provider.getNetwork();
+  if (Number(network.chainId) !== OG_CHAIN_ID) {
+    console.warn(`Warning: chainId is ${network.chainId}, expected ${OG_CHAIN_ID}`);
+  }
+
+  const balance = await provider.getBalance(wallet.address);
+  console.log(`Wallet: ${wallet.address}`);
+  console.log(`Balance: ${ethers.formatEther(balance)} 0G`);
+
+  if (balance === 0n) {
+    console.error('Wallet has 0 balance. Get testnet tokens at https://faucet.0g.ai');
+    process.exit(1);
+  }
+
+  console.log('Deploying ListingNFT…');
+  const factory = new ethers.ContractFactory(abi, '0x' + bytecode, wallet);
+  const contract = await factory.deploy();
+  console.log(`Tx submitted: ${contract.deploymentTransaction().hash}`);
+  console.log('Waiting for confirmation…');
+  await contract.waitForDeployment();
+  const addr = await contract.getAddress();
+
+  console.log('');
+  console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');
+  console.log('✓ Deployed!');
+  console.log('');
+  console.log(`Address: ${addr}`);
+  console.log(`Explorer: https://chainscan-galileo.0g.ai/address/${addr}`);
+  console.log('');
+  console.log('Next step:');
+  console.log('  Edit ../shared.js and set:');
+  console.log(`    OG_CHAIN.listingNFT = '${addr}'`);
+  console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');
+}
+
+deploy().catch(e => {
+  console.error('Deploy failed:', e);
+  process.exit(1);
+});

contract/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "oga-market-contract",
+  "version": "1.0.0",
+  "description": "ListingNFT (ERC-7857-inspired) iNFT contract for Oga Market",
+  "type": "module",
+  "scripts": {
+    "deploy": "node deploy.js"
+  },
+  "dependencies": {
+    "dotenv": "^16.4.5",
+    "ethers": "^6.13.4",
+    "solc": "^0.8.20"
+  }
+}

creator.html

@@ -0,0 +1,468 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Oga Market — Creator Studio</title>
+<link rel="stylesheet" href="styles.css">
+</head>
+<body>
+
+<!-- ═══ SETUP ═══ -->
+<div id="setup" class="om-setup">
+  <div class="om-setup-card">
+    <h2>Creator studio.</h2>
+    <p class="sub">List your product on Good Online — AI writes the copy, you own it on-chain as an iNFT.</p>
+
+    <div class="om-field">
+      <label>Creator name</label>
+      <input id="cfg-name" type="text" placeholder="Your brand name (e.g. Arami, Jacqué Lagos)" spellcheck="false" />
+    </div>
+
+    <div class="om-field">
+      <label>0G Chat API Key</label>
+      <input id="cfg-chat-key" type="password" placeholder="app-sk-..." spellcheck="false" />
+      <div class="om-field-hint">Used for vision + copywriting via 0G Compute</div>
+    </div>
+
+    <div class="om-field">
+      <label>0G Chain Private Key</label>
+      <input id="cfg-chain-key" type="password" placeholder="0x... (required to mint iNFTs)" />
+      <div class="om-field-hint">Free testnet tokens at <a href="https://faucet.0g.ai" target="_blank">faucet.0g.ai</a></div>
+    </div>
+
+    <div id="cfg-err" class="om-err"></div>
+    <button class="om-cta" onclick="startCreator()">Enter studio</button>
+  </div>
+</div>
+
+<!-- ═══ TOPBAR ═══ -->
+<div class="om-topbar">
+  <div class="om-brand">
+    <svg width="24" height="24" viewBox="0 0 96 96" fill="none">
+      <rect x="14" y="30" width="68" height="56" rx="6" fill="#1F3B2D"/>
+      <circle cx="36" cy="58" r="6" fill="#F5EFE3"/>
+      <circle cx="60" cy="58" r="6" fill="#F5EFE3"/>
+      <line x1="34" y1="30" x2="34" y2="14" stroke="#15130F" stroke-width="3" stroke-linecap="round"/>
+      <line x1="62" y1="30" x2="62" y2="14" stroke="#15130F" stroke-width="3" stroke-linecap="round"/>
+    </svg>
+    <a href="index.html">Oga Market</a>
+    <span class="om-brand-tag">Creator</span>
+  </div>
+  <div class="om-topbar-actions">
+    <span id="creator-badge" style="font-size: 13px; color: var(--fg-2);"></span>
+    <div class="om-services">
+      <span class="om-chip compute" id="chip-compute">Compute</span>
+      <span class="om-chip storage" id="chip-storage">Storage</span>
+      <span class="om-chip chain" id="chip-chain">Chain</span>
+    </div>
+  </div>
+</div>
+
+<!-- ═══ APP ═══ -->
+<main class="om-app">
+  <div class="om-app-grid-creator">
+
+    <!-- LEFT: Upload form -->
+    <section class="om-upload">
+      <h3>1. Upload your product</h3>
+
+      <label for="file-input" class="om-dropzone" id="dropzone">
+        <div id="dropzone-empty">
+          <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="color: var(--fg-3);">
+            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+            <polyline points="17 8 12 3 7 8"/>
+            <line x1="12" y1="3" x2="12" y2="15"/>
+          </svg>
+          <p style="margin-top: 12px;">Click to upload photo<br><small style="color:var(--fg-3);">PNG, JPG, WebP · max 4MB</small></p>
+        </div>
+        <img id="dropzone-img" style="display:none;" />
+      </label>
+      <input id="file-input" type="file" accept="image/*" style="display:none;" />
+
+      <div class="om-field">
+        <label>Product name (working title)</label>
+        <input id="prod-name" type="text" placeholder="e.g. Hibiscus body oil" />
+      </div>
+
+      <div class="om-field">
+        <label>Price (NGN)</label>
+        <input id="prod-price" type="number" placeholder="13600" />
+      </div>
+
+      <button class="om-cta" id="generate-btn" onclick="generateListing()" disabled>
+        Generate listing with AI
+      </button>
+      <div id="gen-status" style="font-size: 12px; color: var(--fg-3); text-align: center; min-height: 16px;"></div>
+    </section>
+
+    <!-- RIGHT: Preview + mint -->
+    <section class="om-listing-preview">
+      <h3>2. Preview & mint</h3>
+      <div id="listing-empty" class="om-listing-preview-empty">Upload a photo and click Generate to see the AI listing here.</div>
+      <div id="listing-card" class="om-listing-card" style="display:none;">
+        <span class="om-listing-eyebrow" id="lp-eyebrow">Category</span>
+        <h4 class="om-listing-title" id="lp-title"></h4>
+        <p class="om-listing-tagline" id="lp-tagline"></p>
+        <p class="om-listing-desc" id="lp-desc"></p>
+        <div class="om-listing-meta" id="lp-meta"></div>
+        <div class="om-listing-price" id="lp-price"></div>
+        <div class="om-listing-feedback" id="lp-feedback"></div>
+        <div class="om-listing-actions">
+          <button class="om-cta" id="mint-btn" onclick="mintListing()">Mint as iNFT on 0G Chain</button>
+          <button class="om-cta om-cta-secondary" onclick="regenerate()">Regenerate</button>
+        </div>
+      </div>
+
+      <div id="mint-result" style="margin-top: 16px;"></div>
+
+      <div style="margin-top: var(--sp-8); padding-top: var(--sp-6); border-top: 1px solid var(--border-1);">
+        <span class="om-side-eyebrow">Your minted listings · on 0G Chain</span>
+        <div id="minted-grid" class="om-minted-grid">
+          <div style="font-size: 12px; color: var(--fg-3); padding: 12px 0;">None yet.</div>
+        </div>
+      </div>
+    </section>
+
+  </div>
+</main>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/ethers/6.13.4/ethers.umd.min.js"></script>
+<script src="shared.js"></script>
+<script>
+// ════════════════════════════════════════════════════════════════
+//  STATE
+// ════════════════════════════════════════════════════════════════
+let CFG = {};
+let chainProvider = null, chainWallet = null, listingContract = null;
+let currentImage = null;       // data URL of uploaded photo
+let currentListing = null;     // generated listing JSON
+
+let creatorVault = window.OG_STORAGE.load('omk-creator') || {};
+
+// Restore previous session
+(function () {
+  const saved = sessionStorage.getItem('omk-creator-cfg');
+  if (!saved) return;
+  try {
+    const s = JSON.parse(saved);
+    if (s.name) document.getElementById('cfg-name').value = s.name;
+    if (s.chatKey) document.getElementById('cfg-chat-key').value = s.chatKey;
+    if (s.chainKey) document.getElementById('cfg-chain-key').value = s.chainKey;
+  } catch (_) {}
+})();
+
+// ════════════════════════════════════════════════════════════════
+//  START
+// ════════════════════════════════════════════════════════════════
+window.startCreator = async function () {
+  const name = document.getElementById('cfg-name').value.trim();
+  const chatKey = document.getElementById('cfg-chat-key').value.trim();
+  const chainKey = document.getElementById('cfg-chain-key').value.trim();
+  if (!name) return showErr('Creator name is required.');
+  if (!chatKey) return showErr('0G Chat API key is required.');
+  if (!chainKey) return showErr('0G Chain key is required to mint iNFTs.');
+
+  CFG = { name, chatKey, chainKey, model: 'zai-org/GLM-5-FP8', visionModel: 'zai-org/GLM-5-FP8' };
+
+  // Verify chat key
+  try {
+    await window.askAI(chatKey, CFG.model, [{ role: 'user', content: 'hi' }], { maxTokens: 3 });
+  } catch (e) {
+    return showErr('Chat key failed: ' + e.message);
+  }
+
+  // Init chain
+  try {
+    chainProvider = new ethers.JsonRpcProvider(window.OG_CHAIN.rpc);
+    chainWallet = new ethers.Wallet(chainKey, chainProvider);
+    const balance = await chainProvider.getBalance(chainWallet.address);
+    if (balance === 0n) {
+      return showErr('Chain wallet has 0 balance. Visit faucet.0g.ai for testnet tokens.');
+    }
+    if (window.OG_CHAIN.listingNFT) {
+      listingContract = new ethers.Contract(window.OG_CHAIN.listingNFT, window.LISTING_NFT_ABI, chainWallet);
+    }
+  } catch (e) {
+    return showErr('Chain setup failed: ' + e.message);
+  }
+
+  sessionStorage.setItem('omk-creator-cfg', JSON.stringify(CFG));
+  document.getElementById('setup').classList.add('hidden');
+  document.getElementById('chip-compute').classList.add('active');
+  document.getElementById('chip-chain').classList.add('active');
+  document.getElementById('creator-badge').textContent = name + ' · ' + chainWallet.address.slice(0, 6) + '…' + chainWallet.address.slice(-4);
+
+  // Load creator's minted listings
+  if (!creatorVault[name]) creatorVault[name] = { listings: [] };
+  renderMinted();
+  if (creatorVault[name].listings.length > 0) {
+    document.getElementById('chip-storage').classList.add('active');
+  }
+};
+
+function showErr(msg) {
+  const el = document.getElementById('cfg-err');
+  el.textContent = msg;
+  el.style.display = 'block';
+}
+
+// ════════════════════════════════════════════════════════════════
+//  IMAGE UPLOAD
+// ════════════════════════════════════════════════════════════════
+const fileInput = document.getElementById('file-input');
+const dropzone = document.getElementById('dropzone');
+const dropzoneImg = document.getElementById('dropzone-img');
+const dropzoneEmpty = document.getElementById('dropzone-empty');
+
+fileInput.addEventListener('change', (e) => {
+  const f = e.target.files[0];
+  if (!f) return;
+  if (f.size > 4 * 1024 * 1024) { alert('Max 4MB please.'); return; }
+  const reader = new FileReader();
+  reader.onload = (ev) => {
+    currentImage = ev.target.result;
+    dropzoneImg.src = currentImage;
+    dropzoneImg.style.display = 'block';
+    dropzoneEmpty.style.display = 'none';
+    dropzone.classList.add('has-image');
+    document.getElementById('generate-btn').disabled = false;
+  };
+  reader.readAsDataURL(f);
+});
+
+// ════════════════════════════════════════════════════════════════
+//  GENERATE LISTING
+// ════════════════════════════════════════════════════════════════
+let generating = false;
+
+window.generateListing = async function () {
+  if (generating) return;
+  if (!currentImage) { alert('Upload a photo first.'); return; }
+  const name = document.getElementById('prod-name').value.trim();
+  const price = document.getElementById('prod-price').value.trim();
+  if (!name) { alert('Working name is required.'); return; }
+  if (!price) { alert('Price is required.'); return; }
+
+  generating = true;
+  const btn = document.getElementById('generate-btn');
+  const status = document.getElementById('gen-status');
+  btn.disabled = true;
+  btn.textContent = 'Generating…';
+
+  try {
+    // 1. Vision: analyse the photo
+    status.textContent = 'Analysing photo via 0G Compute (Vision)…';
+    let visionDesc;
+    try {
+      visionDesc = await window.askVision(CFG.chatKey, CFG.visionModel, currentImage,
+        'Describe this product photo in 2 sentences. Focus on: what the item is, colour, texture, mood. Keep it factual.');
+    } catch (e) {
+      // Vision may not be available on the chat provider — fall back to a stub
+      console.warn('Vision failed, falling back:', e);
+      visionDesc = `Product photo for "${name}".`;
+    }
+
+    // 2. LLM: generate the listing
+    status.textContent = 'Writing listing with GLM-5 on 0G Compute…';
+    const prompt = window.buildCreatorPrompt(visionDesc, name, Number(price), CFG.name);
+    const raw = await window.askAI(CFG.chatKey, CFG.model, [
+      { role: 'system', content: 'You are a Nigerian e-commerce copywriter. Always respond with valid JSON only.' },
+      { role: 'user', content: prompt },
+    ], { maxTokens: 600 });
+
+    // Extract JSON
+    let json;
+    try {
+      const jsonMatch = raw.match(/\{[\s\S]*\}/);
+      json = JSON.parse(jsonMatch ? jsonMatch[0] : raw);
+    } catch (e) {
+      throw new Error('AI returned invalid JSON. Try again.');
+    }
+
+    currentListing = {
+      ...json,
+      creator: CFG.name,
+      price: Number(price),
+      workingName: name,
+      image: currentImage,
+      visionDesc,
+      createdAt: Date.now(),
+    };
+    renderListing(currentListing);
+    status.textContent = '';
+  } catch (e) {
+    status.textContent = 'Error: ' + e.message;
+  }
+
+  generating = false;
+  btn.textContent = 'Generate listing with AI';
+  btn.disabled = false;
+};
+
+window.regenerate = () => generateListing();
+
+function renderListing(L) {
+  document.getElementById('listing-empty').style.display = 'none';
+  document.getElementById('listing-card').style.display = '';
+  document.getElementById('lp-eyebrow').textContent = (L.category || 'Uncategorised').toUpperCase();
+  document.getElementById('lp-title').textContent = L.title || '';
+  document.getElementById('lp-tagline').textContent = L.tagline || '';
+  document.getElementById('lp-desc').textContent = L.description || '';
+  const meta = document.getElementById('lp-meta');
+  meta.innerHTML = '';
+  if (L.category) {
+    const pill = document.createElement('span');
+    pill.className = 'pill';
+    pill.textContent = L.category;
+    meta.appendChild(pill);
+  }
+  if (L.curatedList && L.curatedList !== 'null' && L.curatedList) {
+    const pill = document.createElement('span');
+    pill.className = 'pill';
+    pill.textContent = 'List: ' + L.curatedList;
+    meta.appendChild(pill);
+  }
+  document.getElementById('lp-price').textContent = 'N' + L.price.toLocaleString();
+  document.getElementById('lp-feedback').textContent = L.priceFeedback || '';
+}
+
+// ════════════════════════════════════════════════════════════════
+//  MINT iNFT
+// ════════════════════════════════════════════════════════════════
+window.mintListing = async function () {
+  if (!currentListing) return;
+  if (!chainWallet) { alert('Chain not connected.'); return; }
+  const mintBtn = document.getElementById('mint-btn');
+  mintBtn.disabled = true;
+  mintBtn.textContent = 'Minting…';
+
+  const resultEl = document.getElementById('mint-result');
+  resultEl.innerHTML = '';
+
+  try {
+    // Build dataDescription (compact JSON)
+    const dataDescription = JSON.stringify({
+      title: currentListing.title,
+      tagline: currentListing.tagline,
+      description: currentListing.description,
+      category: currentListing.category,
+      curatedList: currentListing.curatedList,
+      creator: currentListing.creator,
+      price: currentListing.price,
+    });
+    // dataHash = keccak256(image bytes + listing text)
+    const imageHash = ethers.keccak256(ethers.toUtf8Bytes(currentListing.image.slice(0, 4000)));
+    const dataHash = ethers.keccak256(ethers.toUtf8Bytes(dataDescription + imageHash));
+
+    let txHash, tokenId;
+
+    if (listingContract) {
+      // Use deployed contract
+      const tx = await listingContract.mint(dataDescription, dataHash);
+      const receipt = await tx.wait();
+      txHash = receipt.hash;
+      // Try to parse the ListingMinted event for tokenId
+      const event = receipt.logs.find(l => {
+        try { return listingContract.interface.parseLog(l)?.name === 'ListingMinted'; } catch (_) { return false; }
+      });
+      if (event) {
+        tokenId = listingContract.interface.parseLog(event).args.tokenId.toString();
+      }
+    } else {
+      // Fallback: simple calldata transaction if contract not deployed yet
+      const data = ethers.AbiCoder.defaultAbiCoder().encode(
+        ['string', 'bytes32', 'address'],
+        [dataDescription, dataHash, chainWallet.address]
+      );
+      const tx = await chainWallet.sendTransaction({ to: chainWallet.address, value: 0n, data });
+      const receipt = await tx.wait();
+      txHash = receipt.hash;
+      tokenId = 'pending-deploy';
+    }
+
+    // Save to creator vault
+    const record = {
+      tokenId,
+      txHash,
+      title: currentListing.title,
+      price: currentListing.price,
+      category: currentListing.category,
+      mintedAt: Date.now(),
+    };
+    creatorVault[CFG.name].listings.unshift(record);
+    window.OG_STORAGE.save('omk-creator', creatorVault);
+    document.getElementById('chip-storage').classList.add('active');
+
+    // Show result
+    resultEl.innerHTML = '';
+    const success = document.createElement('div');
+    success.style.cssText = 'background: rgba(31,59,45,0.08); border-left: 3px solid var(--forest); padding: 12px 16px;';
+    const title = document.createElement('div');
+    title.style.cssText = 'font-family: var(--font-serif); font-style: italic; font-size: 18px; color: var(--forest);';
+    title.textContent = listingContract ? `Minted as iNFT #${tokenId}` : 'Logged on-chain (deploy iNFT contract for full ERC-7857)';
+    success.appendChild(title);
+    const link = document.createElement('a');
+    link.href = window.OG_CHAIN.explorerTx(txHash);
+    link.target = '_blank';
+    link.style.cssText = 'font-family: var(--font-mono); font-size: 11px; color: var(--fg-2); display: block; margin-top: 4px;';
+    link.textContent = window.shortHash(txHash) + ' →';
+    success.appendChild(link);
+    resultEl.appendChild(success);
+    renderMinted();
+  } catch (e) {
+    resultEl.innerHTML = '';
+    const err = document.createElement('div');
+    err.style.cssText = 'color: var(--terracotta); font-size: 13px;';
+    err.textContent = 'Mint failed: ' + e.message;
+    resultEl.appendChild(err);
+  }
+
+  mintBtn.disabled = false;
+  mintBtn.textContent = 'Mint another';
+};
+
+function renderMinted() {
+  const grid = document.getElementById('minted-grid');
+  const list = creatorVault[CFG.name]?.listings || [];
+  grid.innerHTML = '';
+  if (list.length === 0) {
+    const empty = document.createElement('div');
+    empty.style.cssText = 'font-size: 12px; color: var(--fg-3); padding: 12px 0;';
+    empty.textContent = 'None yet.';
+    grid.appendChild(empty);
+    return;
+  }
+  for (const item of list) {
+    const a = document.createElement('a');
+    a.className = 'om-minted-card';
+    a.href = window.OG_CHAIN.explorerTx(item.txHash);
+    a.target = '_blank';
+
+    const id = document.createElement('div');
+    id.className = 'id';
+    id.textContent = '#' + item.tokenId;
+    a.appendChild(id);
+
+    const n = document.createElement('div');
+    n.className = 'name';
+    n.textContent = item.title;
+    a.appendChild(n);
+
+    const p = document.createElement('div');
+    p.style.cssText = 'font-family: var(--font-mono); font-size: 11px; color: var(--ink);';
+    p.textContent = 'N' + item.price.toLocaleString();
+    a.appendChild(p);
+
+    const tx = document.createElement('div');
+    tx.className = 'tx';
+    tx.textContent = window.shortHash(item.txHash);
+    a.appendChild(tx);
+
+    grid.appendChild(a);
+  }
+}
+</script>
+
+</body>
+</html>

index.html

@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Oga Market — Good Online on 0G</title>
+<link rel="stylesheet" href="styles.css">
+</head>
+<body>
+
+<div class="om-topbar">
+  <div class="om-brand">
+    <svg width="28" height="28" viewBox="0 0 96 96" fill="none">
+      <rect x="14" y="30" width="68" height="56" rx="6" fill="#1F3B2D"/>
+      <circle cx="36" cy="58" r="6" fill="#F5EFE3"/>
+      <circle cx="60" cy="58" r="6" fill="#F5EFE3"/>
+      <line x1="34" y1="30" x2="34" y2="14" stroke="#15130F" stroke-width="3" stroke-linecap="round"/>
+      <line x1="62" y1="30" x2="62" y2="14" stroke="#15130F" stroke-width="3" stroke-linecap="round"/>
+      <circle cx="34" cy="12" r="3.5" fill="#C84B23"/>
+      <circle cx="62" cy="12" r="3.5" fill="#E8B547"/>
+    </svg>
+    <a href="/">Oga Market</a>
+    <span class="om-brand-tag">Good Online · 0G</span>
+  </div>
+  <div class="om-topbar-actions">
+    <a href="https://good.online" target="_blank" style="font-size: 13px; color: var(--fg-2);">good.online ↗</a>
+  </div>
+</div>
+
+<main class="om-landing">
+  <div class="om-landing-eyebrow">Commerce × AI · 0G Onsite Lagos · Day 2</div>
+  <h1>Two sides of the same market.</h1>
+  <p class="sub">For shoppers who want a friendly assistant who knows every creator. For sellers who need their listings to feel as good as their craft. Both powered by 0G Compute, Storage, and Chain.</p>
+
+  <div class="om-modes">
+    <a href="shopper.html" class="om-mode">
+      <div class="om-mode-icon">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+          <path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/>
+          <line x1="3" y1="6" x2="21" y2="6"/>
+          <path d="M16 10a4 4 0 0 1-8 0"/>
+        </svg>
+      </div>
+      <h2 class="om-mode-title">I'm shopping.</h2>
+      <p class="om-mode-desc">Ask Oga Mi what to get for your wife, your mum, yourself. Voice or text. He remembers what you like across visits and saves your wishlist on 0G Storage. Every recommendation receipted on-chain.</p>
+      <span class="om-mode-cta">Open shopper mode →</span>
+    </a>
+
+    <a href="creator.html" class="om-mode">
+      <div class="om-mode-icon">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+          <path d="M12 19l7-7 3 3-7 7-3-3z"/>
+          <path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"/>
+          <path d="M2 2l7.586 7.586"/>
+          <circle cx="11" cy="11" r="2"/>
+        </svg>
+      </div>
+      <h2 class="om-mode-title">I'm a creator.</h2>
+      <p class="om-mode-desc">Upload a photo of what you made. AI writes you a listing — title, story, category, price feedback. Mint it as an iNFT on 0G Chain so you own the listing as an on-chain asset.</p>
+      <span class="om-mode-cta">Open creator studio →</span>
+    </a>
+  </div>
+
+  <div class="om-stack-row">
+    <span class="om-stack-item"><strong>0G Compute</strong> · GLM-5 + Whisper + Vision</span>
+    <span class="om-stack-item"><strong>0G Storage</strong> · profiles & listings</span>
+    <span class="om-stack-item"><strong>0G Chain</strong> · iNFTs (ERC-7857) & receipts</span>
+  </div>
+</main>
+
+</body>
+</html>

shared.js

@@ -0,0 +1,233 @@
+// shared.js — common catalog, system prompts, and 0G helpers for Oga Market
+
+// ════════════════════════════════════════════════════════════════
+//  GOOD ONLINE PRODUCT CATALOG (lifted from Oga Mi)
+// ════════════════════════════════════════════════════════════════
+window.GOOD_CATALOG = `
+## GOOD ONLINE PRODUCT CATALOG (good.online)
+"Made by Nigerians. Curated for you." — A marketplace connecting you with Nigerian creators committed to quality and positive impact. Delivers within Lagos only.
+
+### FEATURED PRODUCTS
+- Coconut Rice (430g) by Chumbys — N5,400 [Cook it Yourself]
+- Glow Oil by Arami — N13,600 [Beauty]
+- Whole Cashew Jar by The M & W Nuts Company — N11,875 [Snacks]
+- Gym Socks Box by Smileys Africa — N17,500 [Fashion]
+- Miniature Trio by Dala Craft — N54,000 [Home & Living]
+- Sugar Wax Kit by Sugar Wax By Audrey — N17,000 [Beauty]
+- Dudu Ball Chain by ITURA Jewelry — N40,000 [Fashion/Jewelry]
+- Mini Scented Candle Gift Set by Jacque Lagos — N70,000 [Gifts/Home]
+- Plantain Clusters by Good Originals — N5,520 [Snacks]
+
+### CATEGORIES
+Fashion, Beauty, Home & Living, Wellness, Gifts, Leisure, Good Originals, Snacks, Drinks, Cook it Yourself, Worklife, For Moms, For Women
+
+### CURATED LISTS (with starting prices)
+- "For Everyone Carrying This Economy on Their Back" — from N3,000
+- "A Good Place to Start" — from N500
+- "Something to Add to Your Skincare Routine" — from N4,000
+- "Some Thoughtful Gifts for Everyone" — from N13,000
+- "The Faster Way to Familiar Dishes" — from N2,250
+- "Everyday Comforts That Make Life Feel Lighter" — from N7,500
+- "For the Kids We're All Soft For" — from N5,160
+- "Cyn Ugwu's Picks to Living a Good Life" — from N4,200
+- "Travel Essentials That Actually Come in Handy" — from N4,500
+
+### TOP CREATORS (50+)
+Fashion: Smileys Africa, TETE AFRICA, Garmisland, Asabithebrand, AZACH, Claic Design, Captain Atelier, Marte Egele, Sarima By Ama, TwentySix, Crivel, OhMyCowries, Floy NG, Rade Label, 1403 Luxury, Lano Lagos, THESHOEBLOCC, Outlash, Vinc & Eliz, ITURA Jewelry, KunbiWorks
+Beauty: Arami, Tamed Lux, Infused Organics, ESTEVAN PERFUMERY, Sugar Wax By Audrey, Sublime Skin by Jumai, Msmetics, Viektors Bath and Body, TGIN, Onoh Naturals
+Home & Living: Jacque Lagos, Wallinggs Interior, Silkluxe Hub, Oeuvre Designs, Alore Lifestyle, Ediye Home Scents, Iluna Candles & Co, Hingees, The DA Brand, Scent L'avie
+Wellness: Soft Mum Era, Enjoca, Olile Enterprises, Clove and Nectar, Just Journals
+Snacks & Food: Chumbys, The M & W Nuts Company, Good Originals
+Gifts: The Kulture Company, Not Just Pulp, FCAL (FC Accessories), The Ajala Game Store
+Leisure: Atito, The Ajala Game Store
+
+### STORE INFO
+- Website: good.online
+- Good House: 19B Sasegbon Street, Ikeja GRA, Lagos
+- Good Village: Plot 33 Block 15, Admiralty Way, Lekki Phase 1, Lagos
+- Contact: +2348142511154 / support@goodthingco.xyz
+- Delivery: Lagos only
+- Gift vouchers available at good.online
+`;
+
+// ════════════════════════════════════════════════════════════════
+//  SYSTEM PROMPTS
+// ════════════════════════════════════════════════════════════════
+
+window.buildShopperPrompt = function (customerName, history, wishlist) {
+  let prompt = `You are Oga Mi, a warm AI shopping assistant for Good Online (good.online), Nigeria's curated marketplace.
+
+PERSONALITY:
+- Warm, like a helpful Lagos market seller who genuinely cares
+- Mix English with light Pidgin/Yoruba naturally ("Oga mi!", "Na good choice!", "E kaaro!")
+- Enthusiastic about Nigerian creators
+- Keep responses to 2-4 sentences. Recommend 1-2 products, not a long list
+- Always finish your sentences
+- Use Naira prices (write as N5,400)
+
+${window.GOOD_CATALOG}
+
+WHEN RECOMMENDING:
+- Always mention price + creator
+- Budget: "A Good Place to Start" (from N500)
+- Gifts: "Some Thoughtful Gifts for Everyone" (from N13,000)
+- Skincare: "Something to Add to Your Skincare Routine" (from N4,000)
+
+When you recommend a specific product, end your message with [PRODUCT:Product Name|Creator|Price] so the UI can show an add-to-wishlist button. Example: [PRODUCT:Glow Oil|Arami|13600]. Only include this tag for products from the catalog above.`;
+
+  if (customerName) {
+    prompt += `\n\nCUSTOMER: ${customerName}. Use their name naturally.`;
+  }
+  if (wishlist && wishlist.length > 0) {
+    prompt += `\n\nWISHLIST: ${wishlist.map(w => w.name).join(', ')}. Reference these naturally if relevant.`;
+  }
+  if (history && history.length > 0) {
+    prompt += `\n\nPREVIOUS INTERACTIONS:\n${history.map(h => `- ${h}`).join('\n')}`;
+  }
+  return prompt;
+};
+
+window.buildCreatorPrompt = function (visionDescription, productName, price, creator) {
+  return `You are a copywriter for Good Online (good.online), a Nigerian curated marketplace. A creator is listing a new product. Generate a beautiful, warm, Nigerian-style product listing.
+
+PRODUCT INFO:
+- Name from creator: "${productName}"
+- Creator: "${creator}"
+- Price: N${Number(price).toLocaleString()}
+- Vision analysis of the photo: "${visionDescription}"
+
+Reference catalog (for style + category matching):
+${window.GOOD_CATALOG}
+
+OUTPUT REQUIREMENTS — respond ONLY with valid JSON, no other text:
+{
+  "title": "A polished product name (max 6 words, sentence case)",
+  "tagline": "A 1-sentence editorial hook in warm, Nigerian voice (max 14 words)",
+  "description": "A 2-3 sentence description that tells the product's story, mentions the creator, and feels handmade/curated. Sentence case. No emoji.",
+  "category": "One category from this list: Fashion, Beauty, Home & Living, Wellness, Gifts, Leisure, Snacks, Drinks, Cook it Yourself, Worklife, For Moms, For Women",
+  "curatedList": "One of these curated lists if relevant, or null: A Good Place to Start | Some Thoughtful Gifts for Everyone | Something to Add to Your Skincare Routine | Everyday Comforts That Make Life Feel Lighter | For the Kids We're All Soft For | Travel Essentials That Actually Come in Handy",
+  "priceFeedback": "1 sentence: is this price aligned with similar products on Good? Be honest."
+}`;
+};
+
+// ════════════════════════════════════════════════════════════════
+//  0G COMPUTE HELPERS (Direct mode, browser-CORS-friendly)
+// ════════════════════════════════════════════════════════════════
+
+window.OG_ENDPOINTS = {
+  chat: 'https://compute-network-1.integratenetwork.work/v1/proxy/chat/completions',
+  whisper: 'https://compute-network-16.integratenetwork.work/v1/proxy/audio/transcriptions',
+  // Vision provider may live on a different compute-network — verify on pc.0g.ai
+  vision: 'https://compute-network-1.integratenetwork.work/v1/proxy/chat/completions',
+};
+
+window.askAI = async function (chatKey, model, messages, { maxTokens = 512 } = {}) {
+  const res = await fetch(window.OG_ENDPOINTS.chat, {
+    method: 'POST',
+    headers: { 'Authorization': `Bearer ${chatKey}`, 'Content-Type': 'application/json' },
+    body: JSON.stringify({ model, messages, max_tokens: maxTokens }),
+  });
+  if (!res.ok) throw new Error(`Chat ${res.status}: ${(await res.text()).slice(0, 200)}`);
+  const data = await res.json();
+  return (data.choices?.[0]?.message?.content || '').trim();
+};
+
+window.askVision = async function (chatKey, model, imageDataUrl, instruction, { maxTokens = 256 } = {}) {
+  // OpenAI-compatible vision message format
+  const res = await fetch(window.OG_ENDPOINTS.vision, {
+    method: 'POST',
+    headers: { 'Authorization': `Bearer ${chatKey}`, 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      model,
+      messages: [{
+        role: 'user',
+        content: [
+          { type: 'text', text: instruction },
+          { type: 'image_url', image_url: { url: imageDataUrl } },
+        ],
+      }],
+      max_tokens: maxTokens,
+    }),
+  });
+  if (!res.ok) throw new Error(`Vision ${res.status}: ${(await res.text()).slice(0, 200)}`);
+  const data = await res.json();
+  return (data.choices?.[0]?.message?.content || '').trim();
+};
+
+// Convert browser webm/opus audio to PCM WAV (0G Whisper rejects raw webm)
+window.webmBlobToWav = async function (blob) {
+  const buf = await blob.arrayBuffer();
+  const ctx = new (window.AudioContext || window.webkitAudioContext)();
+  const audio = await ctx.decodeAudioData(buf);
+  try { ctx.close(); } catch (_) {}
+  const ch0 = audio.getChannelData(0);
+  const len = ch0.length;
+  const sampleRate = audio.sampleRate;
+  const out = new ArrayBuffer(44 + len * 2);
+  const v = new DataView(out);
+  const ws = (off, s) => { for (let i = 0; i < s.length; i++) v.setUint8(off + i, s.charCodeAt(i)); };
+  ws(0, 'RIFF'); v.setUint32(4, 36 + len * 2, true); ws(8, 'WAVE');
+  ws(12, 'fmt '); v.setUint32(16, 16, true);
+  v.setUint16(20, 1, true); v.setUint16(22, 1, true);
+  v.setUint32(24, sampleRate, true); v.setUint32(28, sampleRate * 2, true);
+  v.setUint16(32, 2, true); v.setUint16(34, 16, true);
+  ws(36, 'data'); v.setUint32(40, len * 2, true);
+  let off = 44;
+  for (let i = 0; i < len; i++) {
+    const s = Math.max(-1, Math.min(1, ch0[i]));
+    v.setInt16(off, s < 0 ? s * 0x8000 : s * 0x7FFF, true);
+    off += 2;
+  }
+  return new Blob([out], { type: 'audio/wav' });
+};
+
+window.transcribe = async function (sttKey, webmBlob) {
+  const wav = await window.webmBlobToWav(webmBlob);
+  const form = new FormData();
+  form.append('file', wav, 'audio.wav');
+  form.append('model', 'openai/whisper-large-v3');
+  form.append('response_format', 'json');
+  const res = await fetch(window.OG_ENDPOINTS.whisper, {
+    method: 'POST',
+    headers: { 'Authorization': `Bearer ${sttKey}` },
+    body: form,
+  });
+  if (!res.ok) throw new Error(`STT ${res.status}: ${(await res.text()).slice(0, 200)}`);
+  return (await res.json()).text || '';
+};
+
+// ════════════════════════════════════════════════════════════════
+//  0G CHAIN HELPERS
+// ════════════════════════════════════════════════════════════════
+window.OG_CHAIN = {
+  rpc: 'https://evmrpc-testnet.0g.ai',
+  chainId: 16602,
+  explorerTx: (h) => `https://chainscan-galileo.0g.ai/tx/${h}`,
+  // Deployed ListingNFT contract address — paste after running contract/deploy.js
+  listingNFT: '',
+};
+
+window.LISTING_NFT_ABI = [
+  'function mint(string dataDescription, bytes32 dataHash) external returns (uint256)',
+  'function getData(uint256 tokenId) external view returns (string dataDescription, bytes32 dataHash, address creator, uint256 timestamp)',
+  'function totalSupply() external view returns (uint256)',
+  'function ownerOf(uint256 tokenId) external view returns (address)',
+  'function transferFrom(address from, address to, uint256 tokenId) external',
+  'event ListingMinted(uint256 indexed tokenId, address indexed creator, string dataDescription, bytes32 dataHash, uint256 timestamp)',
+];
+
+window.shortHash = function (h) {
+  return h.slice(0, 10) + '…' + h.slice(-6);
+};
+
+// ════════════════════════════════════════════════════════════════
+//  LOCAL STORAGE HELPERS (0G Storage proxy)
+// ════════════════════════════════════════════════════════════════
+window.OG_STORAGE = {
+  load(key) {
+    try { return JSON.parse(localStorage.getItem(key) || 'null'); } catch (_) { return null; }
+  },
+  save(key, value) {
+    localStorage.setItem(key, JSON.stringify(value));
+  },
+};

shopper.html

@@ -0,0 +1,440 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Oga Market — Shopper</title>
+<link rel="stylesheet" href="styles.css">
+</head>
+<body>
+
+<!-- ═══ SETUP ═══ -->
+<div id="setup" class="om-setup">
+  <div class="om-setup-card">
+    <h2>Welcome, oga.</h2>
+    <p class="sub">Tell me your name and paste your 0G API key. I'll remember what you like.</p>
+
+    <div class="om-field">
+      <label>Your name</label>
+      <input id="cfg-name" type="text" placeholder="What should I call you?" spellcheck="false" />
+    </div>
+
+    <div class="om-field">
+      <label>0G Chat API Key</label>
+      <input id="cfg-chat-key" type="password" placeholder="app-sk-..." spellcheck="false" />
+      <div class="om-field-hint"><a href="https://pc.0g.ai" target="_blank">pc.0g.ai</a> → Advanced mode → fund <code>zai-org/GLM-5-FP8</code> → mint key</div>
+    </div>
+
+    <div class="om-field">
+      <label>Whisper API Key (optional — enables voice)</label>
+      <input id="cfg-stt-key" type="password" placeholder="app-sk-... (different key)" />
+    </div>
+
+    <div class="om-field">
+      <label>0G Chain Private Key (optional — on-chain receipts)</label>
+      <input id="cfg-chain-key" type="password" placeholder="0x..." />
+      <div class="om-field-hint">Free testnet tokens: <a href="https://faucet.0g.ai" target="_blank">faucet.0g.ai</a></div>
+    </div>
+
+    <div id="cfg-err" class="om-err"></div>
+    <button class="om-cta" onclick="startShopper()">Start shopping</button>
+  </div>
+</div>
+
+<!-- ═══ TOPBAR ═══ -->
+<div class="om-topbar">
+  <div class="om-brand">
+    <svg width="24" height="24" viewBox="0 0 96 96" fill="none">
+      <rect x="14" y="30" width="68" height="56" rx="6" fill="#1F3B2D"/>
+      <circle cx="36" cy="58" r="6" fill="#F5EFE3"/>
+      <circle cx="60" cy="58" r="6" fill="#F5EFE3"/>
+      <line x1="34" y1="30" x2="34" y2="14" stroke="#15130F" stroke-width="3" stroke-linecap="round"/>
+      <line x1="62" y1="30" x2="62" y2="14" stroke="#15130F" stroke-width="3" stroke-linecap="round"/>
+    </svg>
+    <a href="index.html">Oga Market</a>
+    <span class="om-brand-tag">Shopper</span>
+  </div>
+  <div class="om-topbar-actions">
+    <div class="om-services">
+      <span class="om-chip compute" id="chip-compute">Compute</span>
+      <span class="om-chip storage" id="chip-storage">Storage</span>
+      <span class="om-chip chain" id="chip-chain">Chain</span>
+    </div>
+  </div>
+</div>
+
+<!-- ═══ APP ═══ -->
+<main class="om-app">
+  <div class="om-app-grid-shopper">
+
+    <div class="om-conv">
+      <div class="om-conv-head">
+        <h3>Chat with Oga Mi</h3>
+        <span id="customer-badge"></span>
+      </div>
+
+      <div id="transcript"></div>
+
+      <div class="om-input-area">
+        <div class="om-input-row">
+          <input id="chat-input" placeholder="What are you looking for today?" autocomplete="off" />
+          <button class="om-mic" id="mic-btn" title="Tap to record">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
+              <rect x="9" y="2" width="6" height="11" rx="3"/>
+              <path d="M5 10a7 7 0 0 0 14 0"/>
+              <line x1="12" y1="17" x2="12" y2="21"/>
+            </svg>
+          </button>
+          <button class="om-send" onclick="sendMessage()">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M5 12h14m-6-6 6 6-6 6"/>
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <aside class="om-side">
+      <div>
+        <span class="om-side-eyebrow">Your wishlist · saved to 0G Storage</span>
+        <h4>What you're eyeing</h4>
+      </div>
+      <div id="wishlist" class="om-wishlist">
+        <div class="om-wishlist-empty">Nothing yet — ask Oga Mi for ideas.</div>
+      </div>
+      <div style="margin-top:auto; padding-top: 16px; border-top: 1px solid var(--border-1);">
+        <span class="om-side-eyebrow">Good House · Ikeja GRA</span>
+        <p style="font-size: 12px; color: var(--fg-2); margin-top: 4px; line-height: 1.5;">19B Sasegbon Street, Ikeja GRA. Stop by to meet the real Oga Mi (he's a robot!).</p>
+      </div>
+    </aside>
+  </div>
+</main>
+
+<!-- ethers.js for 0G Chain -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/ethers/6.13.4/ethers.umd.min.js"></script>
+<script src="shared.js"></script>
+<script>
+// ════════════════════════════════════════════════════════════════
+//  STATE
+// ════════════════════════════════════════════════════════════════
+let CFG = {};
+let conversationHistory = [];
+let interactionCount = 0;
+let chainProvider = null, chainWallet = null;
+
+// Customer memory (0G Storage proxy)
+let customerMemory = window.OG_STORAGE.load('omk-customers') || {};
+let currentCustomer = null;
+let wishlist = [];
+
+function saveMemory() {
+  window.OG_STORAGE.save('omk-customers', customerMemory);
+  document.getElementById('chip-storage').classList.add('active');
+}
+
+// ════════════════════════════════════════════════════════════════
+//  RESTORE
+// ════════════════════════════════════════════════════════════════
+(function () {
+  const saved = sessionStorage.getItem('omk-shopper-cfg');
+  if (!saved) return;
+  try {
+    const s = JSON.parse(saved);
+    if (s.name) document.getElementById('cfg-name').value = s.name;
+    if (s.chatKey) document.getElementById('cfg-chat-key').value = s.chatKey;
+    if (s.sttKey) document.getElementById('cfg-stt-key').value = s.sttKey;
+    if (s.chainKey) document.getElementById('cfg-chain-key').value = s.chainKey;
+  } catch (_) {}
+})();
+
+// ════════════════════════════════════════════════════════════════
+//  START
+// ════════════════════════════════════════════════════════════════
+window.startShopper = async function () {
+  const chatKey = document.getElementById('cfg-chat-key').value.trim();
+  if (!chatKey) return showErr('Chat API key is required.');
+  const name = document.getElementById('cfg-name').value.trim() || 'Friend';
+  const sttKey = document.getElementById('cfg-stt-key').value.trim();
+  const chainKey = document.getElementById('cfg-chain-key').value.trim();
+
+  CFG = { chatKey, sttKey, chainKey, name, model: 'zai-org/GLM-5-FP8' };
+
+  // Verify chat key
+  try {
+    await window.askAI(chatKey, CFG.model, [{ role: 'user', content: 'hi' }], { maxTokens: 3 });
+  } catch (e) {
+    return showErr('Key verification failed: ' + e.message);
+  }
+
+  sessionStorage.setItem('omk-shopper-cfg', JSON.stringify(CFG));
+  document.getElementById('setup').classList.add('hidden');
+  document.getElementById('chip-compute').classList.add('active');
+
+  currentCustomer = name;
+  if (!customerMemory[name]) {
+    customerMemory[name] = { visits: 0, interactions: [], wishlist: [] };
+  }
+  customerMemory[name].visits++;
+  customerMemory[name].lastVisit = new Date().toISOString();
+  wishlist = customerMemory[name].wishlist || [];
+  saveMemory();
+  renderWishlist();
+
+  const badge = document.getElementById('customer-badge');
+  badge.textContent = name;
+  badge.style.display = '';
+
+  const history = customerMemory[name].interactions.slice(-5);
+  conversationHistory = [{
+    role: 'system',
+    content: window.buildShopperPrompt(name, history, wishlist),
+  }];
+
+  const visits = customerMemory[name].visits;
+  if (visits > 1) {
+    addSystem(`0G Storage: Returning customer detected (visit #${visits})`);
+    document.getElementById('chip-storage').classList.add('active');
+  }
+
+  if (chainKey) initChain();
+
+  // Welcome
+  const welcomePrompt = visits > 1
+    ? `${name} just came back (visit #${visits}). Welcome them warmly in 1-2 sentences and ask what they're looking for.`
+    : `${name} just walked in for the first time. Greet warmly in 1-2 sentences. Ask what they need.`;
+
+  try {
+    const reply = await window.askAI(chatKey, CFG.model, [
+      ...conversationHistory,
+      { role: 'user', content: welcomePrompt },
+    ], { maxTokens: 100 });
+    addBot(reply);
+  } catch (e) {
+    addBot(`Welcome to Good Online, ${name}! How can I help you today?`);
+  }
+};
+
+function showErr(msg) {
+  const el = document.getElementById('cfg-err');
+  el.textContent = msg;
+  el.style.display = 'block';
+}
+
+// ════════════════════════════════════════════════════════════════
+//  CHAIN
+// ════════════════════════════════════════════════════════════════
+async function initChain() {
+  try {
+    chainProvider = new ethers.JsonRpcProvider(window.OG_CHAIN.rpc);
+    chainWallet = new ethers.Wallet(CFG.chainKey, chainProvider);
+    const balance = await chainProvider.getBalance(chainWallet.address);
+    if (balance > 0n) {
+      document.getElementById('chip-chain').classList.add('active');
+      addSystem(`0G Chain: ${chainWallet.address.slice(0, 8)}…${chainWallet.address.slice(-4)}`);
+    } else {
+      addSystem('0G Chain: no balance — visit faucet.0g.ai');
+    }
+  } catch (e) {
+    addSystem('0G Chain: ' + e.message);
+  }
+}
+
+async function logShopOnChain(query, recommendation) {
+  if (!chainWallet) return;
+  try {
+    const data = ethers.AbiCoder.defaultAbiCoder().encode(
+      ['string', 'string', 'string', 'uint256'],
+      [CFG.name, query.slice(0, 100), recommendation.slice(0, 200), Math.floor(Date.now() / 1000)]
+    );
+    const tx = await chainWallet.sendTransaction({ to: chainWallet.address, value: 0n, data });
+    const receipt = await tx.wait();
+    addReceipt(receipt.hash);
+  } catch (e) {
+    addSystem('Chain: ' + e.message.slice(0, 80));
+  }
+}
+
+// ════════════════════════════════════════════════════════════════
+//  CHAT
+// ════════════════════════════════════════════════════════════════
+let sending = false;
+
+window.sendMessage = async function () {
+  const input = document.getElementById('chat-input');
+  const text = input.value.trim();
+  if (!text || sending) return;
+  input.value = '';
+  sending = true;
+
+  addUser(text);
+  conversationHistory.push({ role: 'user', content: text });
+
+  try {
+    const raw = await window.askAI(CFG.chatKey, CFG.model, conversationHistory.slice(-12));
+    // Parse [PRODUCT:name|creator|price] tags
+    const productMatch = raw.match(/\[PRODUCT:([^|]+)\|([^|]+)\|(\d+)\]/i);
+    const clean = raw.replace(/\[PRODUCT:[^\]]+\]/gi, '').trim();
+    addBot(clean);
+    if (productMatch) {
+      addProductCard(productMatch[1].trim(), productMatch[2].trim(), Number(productMatch[3]));
+    }
+    conversationHistory.push({ role: 'assistant', content: raw });
+
+    // Save to memory
+    interactionCount++;
+    if (currentCustomer) {
+      customerMemory[currentCustomer].interactions.push(`Asked: "${text.slice(0, 60)}" — Said: "${clean.slice(0, 80)}"`);
+      if (customerMemory[currentCustomer].interactions.length > 20) {
+        customerMemory[currentCustomer].interactions = customerMemory[currentCustomer].interactions.slice(-20);
+      }
+      saveMemory();
+    }
+
+    // On-chain receipt every 2nd interaction
+    if (chainWallet && interactionCount % 2 === 0) {
+      logShopOnChain(text, clean);
+    }
+  } catch (e) {
+    addSystem('Error: ' + e.message);
+  }
+
+  sending = false;
+};
+
+document.getElementById('chat-input').addEventListener('keydown', e => {
+  if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendMessage(); }
+});
+
+// ════════════════════════════════════════════════════════════════
+//  VOICE
+// ════════════════════════════════════════════════════════════════
+let mediaRecorder = null, audioChunks = [];
+const micBtn = document.getElementById('mic-btn');
+
+micBtn.addEventListener('click', async () => {
+  if (mediaRecorder && mediaRecorder.state === 'recording') {
+    mediaRecorder.stop();
+    return;
+  }
+  if (!CFG.sttKey) { addSystem('Voice needs a Whisper key — add one in setup.'); return; }
+  try {
+    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+    mediaRecorder = new MediaRecorder(stream, { mimeType: 'audio/webm;codecs=opus' });
+    audioChunks = [];
+    micBtn.style.background = 'var(--terracotta)';
+    micBtn.style.color = 'var(--cream)';
+    mediaRecorder.ondataavailable = e => { if (e.data.size > 0) audioChunks.push(e.data); };
+    mediaRecorder.onstop = async () => {
+      stream.getTracks().forEach(t => t.stop());
+      micBtn.style.background = '';
+      micBtn.style.color = '';
+      if (audioChunks.length === 0) return;
+      const blob = new Blob(audioChunks, { type: 'audio/webm;codecs=opus' });
+      addSystem('Transcribing via 0G Whisper…');
+      try {
+        const txt = await window.transcribe(CFG.sttKey, blob);
+        if (txt.trim()) {
+          document.getElementById('chat-input').value = txt;
+          sendMessage();
+        } else { addSystem('No speech detected.'); }
+      } catch (e) { addSystem('STT: ' + e.message); }
+    };
+    mediaRecorder.start(250);
+  } catch (e) {
+    addSystem('Mic: ' + e.message);
+  }
+});
+
+// ════════════════════════════════════════════════════════════════
+//  WISHLIST
+// ════════════════════════════════════════════════════════════════
+function addToWishlist(name, creator, price) {
+  if (wishlist.find(w => w.name === name)) return;
+  wishlist.push({ name, creator, price, added: Date.now() });
+  if (currentCustomer) {
+    customerMemory[currentCustomer].wishlist = wishlist;
+    saveMemory();
+  }
+  renderWishlist();
+}
+
+function removeFromWishlist(name) {
+  wishlist = wishlist.filter(w => w.name !== name);
+  if (currentCustomer) {
+    customerMemory[currentCustomer].wishlist = wishlist;
+    saveMemory();
+  }
+  renderWishlist();
+}
+
+function renderWishlist() {
+  const el = document.getElementById('wishlist');
+  if (wishlist.length === 0) {
+    el.innerHTML = '<div class="om-wishlist-empty">Nothing yet — ask Oga Mi for ideas.</div>';
+    return;
+  }
+  el.innerHTML = wishlist.map(w => `
+    <div class="om-wishlist-item">
+      <span class="name">${escapeHtml(w.name)}<br><small style="color:var(--fg-3);font-size:10px;">${escapeHtml(w.creator)}</small></span>
+      <span class="price">N${w.price.toLocaleString()}</span>
+      <button class="remove" onclick="removeFromWishlist('${escapeHtml(w.name).replace(/'/g, "\\'")}')">×</button>
+    </div>
+  `).join('');
+}
+
+window.removeFromWishlist = removeFromWishlist;
+
+// ════════════════════════════════════════════════════════════════
+//  RENDER HELPERS
+// ════════════════════════════════════════════════════════════════
+function addUser(text) { addMsg('user', text); }
+function addBot(text) { addMsg('bot', text); }
+function addSystem(text) { addMsg('system', text); }
+
+function addMsg(role, text) {
+  const t = document.getElementById('transcript');
+  const el = document.createElement('div');
+  el.className = `msg ${role}`;
+  el.textContent = text;
+  t.appendChild(el);
+  t.scrollTop = t.scrollHeight;
+}
+
+function addReceipt(txHash) {
+  const t = document.getElementById('transcript');
+  const el = document.createElement('div');
+  el.className = 'msg receipt';
+  el.innerHTML = `<a href="${window.OG_CHAIN.explorerTx(txHash)}" target="_blank" style="color:inherit;text-decoration:none;">0G Chain · ${window.shortHash(txHash)}</a>`;
+  t.appendChild(el);
+  t.scrollTop = t.scrollHeight;
+}
+
+function addProductCard(name, creator, price) {
+  const t = document.getElementById('transcript');
+  const el = document.createElement('div');
+  el.className = 'msg product-card';
+  el.innerHTML = `
+    <div class="pc-img">${escapeHtml(name.slice(0,1))}</div>
+    <div class="pc-body">
+      <div class="pc-title">${escapeHtml(name)}</div>
+      <div class="pc-creator">by ${escapeHtml(creator)}</div>
+      <div class="pc-price">N${price.toLocaleString()}</div>
+      <button class="pc-add">+ Add to wishlist</button>
+    </div>
+  `;
+  el.querySelector('.pc-add').addEventListener('click', () => {
+    addToWishlist(name, creator, price);
+    el.querySelector('.pc-add').textContent = '✓ Saved';
+    el.querySelector('.pc-add').disabled = true;
+  });
+  t.appendChild(el);
+  t.scrollTop = t.scrollHeight;
+}
+
+function escapeHtml(s) {
+  return String(s).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
+}
+</script>
+
+</body>
+</html>

styles.css

@@ -0,0 +1,843 @@
+/* Oga Market — styles using the Good Online + Oga Mi design system */
+
+@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@300;400;500;600&family=Geist+Mono:wght@400;500&display=swap');
+
+:root {
+  --forest: #1F3B2D;
+  --forest-hover: #16291F;
+  --forest-soft: #2E5840;
+  --terracotta: #C84B23;
+  --terracotta-soft: #E0744F;
+  --saffron: #E8B547;
+  --saffron-soft: #F2D080;
+  --cream: #F5EFE3;
+  --cream-deep: #ECE3CF;
+  --paper: #FBF7EE;
+  --ink: #15130F;
+  --ink-soft: #2A2620;
+  --stone-1: #EAE3D2;
+  --stone-2: #D9D2C0;
+  --stone-3: #B8AD96;
+  --stone-4: #8A8170;
+  --stone-5: #6B6354;
+  --fg-1: var(--ink);
+  --fg-2: var(--stone-5);
+  --fg-3: var(--stone-4);
+  --bg-1: var(--cream);
+  --bg-2: var(--paper);
+  --bg-3: var(--cream-deep);
+  --border-1: var(--stone-2);
+  --accent: var(--forest);
+  --accent-hover: var(--forest-hover);
+  --warn: var(--terracotta);
+  --highlight: var(--saffron);
+  --font-serif: 'Instrument Serif', Georgia, serif;
+  --font-sans: 'Geist', system-ui, sans-serif;
+  --font-mono: 'Geist Mono', 'Courier New', monospace;
+  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
+  --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; --sp-16: 64px;
+  --radius-sm: 2px;
+  --radius-md: 4px;
+  --radius-pill: 999px;
+  --shadow-1: 0 1px 2px rgba(21,19,15,0.06);
+  --shadow-2: 0 8px 24px -8px rgba(21,19,15,0.12);
+  --shadow-3: 0 24px 64px -16px rgba(21,19,15,0.22);
+  --ease: cubic-bezier(.2,.7,.2,1);
+  --dur-quick: 120ms;
+  --dur-state: 200ms;
+  --dur-panel: 400ms;
+  --content-max: 1280px;
+}
+
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+body {
+  font-family: var(--font-sans);
+  background: var(--cream);
+  color: var(--fg-1);
+  -webkit-font-smoothing: antialiased;
+  min-height: 100vh;
+}
+
+a { color: var(--forest); text-decoration: none; }
+a:hover { text-decoration: underline; }
+
+/* ═══ TOPBAR ═══ */
+.om-topbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px var(--sp-6);
+  background: var(--paper);
+  border-bottom: 1px solid var(--border-1);
+  position: sticky;
+  top: 0;
+  z-index: 50;
+}
+
+.om-brand {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-3);
+}
+
+.om-brand a {
+  font-family: var(--font-serif);
+  font-style: italic;
+  font-size: 22px;
+  color: var(--fg-1);
+  text-decoration: none;
+}
+
+.om-brand-tag {
+  font-family: var(--font-sans);
+  font-size: 10px;
+  font-weight: 500;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--fg-2);
+  padding: 3px 10px;
+  border: 1px solid var(--border-1);
+  border-radius: var(--radius-sm);
+}
+
+.om-topbar-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-3);
+}
+
+.om-services {
+  display: flex;
+  gap: var(--sp-2);
+}
+
+.om-chip {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-family: var(--font-sans);
+  font-size: 10px;
+  font-weight: 500;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  padding: 3px 8px;
+  border-radius: var(--radius-pill);
+  opacity: 0.35;
+  transition: opacity var(--dur-state);
+}
+
+.om-chip.active { opacity: 1; }
+.om-chip.compute { background: rgba(31,59,45,0.1); color: var(--forest); }
+.om-chip.storage { background: rgba(232,181,71,0.12); color: #8A6A1A; }
+.om-chip.chain { background: rgba(200,75,35,0.1); color: var(--terracotta); }
+
+.om-chip::before {
+  content: '';
+  width: 5px; height: 5px;
+  border-radius: 50%;
+  background: currentColor;
+}
+
+/* ═══ LANDING (mode selector) ═══ */
+.om-landing {
+  max-width: 1100px;
+  margin: 0 auto;
+  padding: var(--sp-16) var(--sp-6) var(--sp-8);
+}
+
+.om-landing-eyebrow {
+  font-family: var(--font-sans);
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--fg-2);
+  text-align: center;
+}
+
+.om-landing h1 {
+  font-family: var(--font-serif);
+  font-style: italic;
+  font-size: 84px;
+  line-height: 88px;
+  font-weight: 400;
+  letter-spacing: -0.02em;
+  text-align: center;
+  margin-top: var(--sp-4);
+}
+
+.om-landing .sub {
+  font-family: var(--font-sans);
+  font-size: 17px;
+  line-height: 26px;
+  color: var(--fg-2);
+  max-width: 600px;
+  margin: var(--sp-4) auto 0;
+  text-align: center;
+}
+
+.om-modes {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--sp-6);
+  margin-top: var(--sp-12);
+}
+
+.om-mode {
+  background: var(--paper);
+  border: 1px solid var(--border-1);
+  padding: var(--sp-8);
+  text-decoration: none;
+  color: var(--fg-1);
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-3);
+  transition: all var(--dur-state) var(--ease);
+}
+
+.om-mode:hover {
+  background: var(--bg-3);
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-2);
+  text-decoration: none;
+}
+
+.om-mode-icon {
+  width: 56px; height: 56px;
+  background: var(--forest);
+  color: var(--cream);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: var(--sp-3);
+}
+
+.om-mode-icon svg { width: 28px; height: 28px; }
+
+.om-mode-title {
+  font-family: var(--font-serif);
+  font-style: italic;
+  font-size: 36px;
+  line-height: 40px;
+}
+
+.om-mode-desc {
+  font-family: var(--font-sans);
+  font-size: 14px;
+  line-height: 22px;
+  color: var(--fg-2);
+}
+
+.om-mode-cta {
+  font-family: var(--font-sans);
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--forest);
+  margin-top: auto;
+  padding-top: var(--sp-3);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.om-stack-row {
+  display: flex;
+  justify-content: center;
+  gap: var(--sp-4);
+  margin-top: var(--sp-12);
+  padding-top: var(--sp-6);
+  border-top: 1px solid var(--border-1);
+}
+
+.om-stack-item {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--fg-3);
+  letter-spacing: 0.04em;
+}
+
+.om-stack-item strong {
+  color: var(--forest);
+  font-weight: 500;
+}
+
+/* ═══ APP SHELL (shopper + creator) ═══ */
+.om-app {
+  max-width: var(--content-max);
+  margin: 0 auto;
+  padding: var(--sp-6);
+}
+
+.om-app-grid-shopper {
+  display: grid;
+  grid-template-columns: 1fr 340px;
+  gap: var(--sp-6);
+  min-height: calc(100vh - 110px);
+}
+
+.om-app-grid-creator {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--sp-6);
+}
+
+/* ═══ SETUP CARD ═══ */
+.om-setup {
+  position: fixed;
+  inset: 0;
+  background: rgba(21,19,15,0.5);
+  backdrop-filter: blur(16px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.om-setup.hidden { display: none; }
+
+.om-setup-card {
+  width: 90%;
+  max-width: 460px;
+  background: var(--paper);
+  border-radius: var(--radius-md);
+  padding: 36px;
+  box-shadow: var(--shadow-3);
+}
+
+.om-setup-card h2 {
+  font-family: var(--font-serif);
+  font-style: italic;
+  font-size: 32px;
+  font-weight: 400;
+  margin-bottom: 4px;
+}
+
+.om-setup-card .sub {
+  font-size: 13px;
+  color: var(--fg-2);
+  line-height: 1.5;
+  margin-bottom: var(--sp-6);
+}
+
+.om-field { margin-bottom: var(--sp-4); }
+
+.om-field label {
+  display: block;
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--fg-3);
+  margin-bottom: 6px;
+}
+
+.om-field input, .om-field select, .om-field textarea {
+  width: 100%;
+  padding: 11px 14px;
+  font-family: var(--font-mono);
+  font-size: 13px;
+  color: var(--fg-1);
+  background: var(--bg-1);
+  border: 1px solid var(--border-1);
+  border-radius: var(--radius-sm);
+  outline: none;
+  -webkit-appearance: none;
+  transition: border-color var(--dur-state), box-shadow var(--dur-state);
+}
+
+.om-field input:focus, .om-field select:focus, .om-field textarea:focus {
+  border-color: var(--forest);
+  box-shadow: 0 0 0 3px rgba(31,59,45,0.08);
+}
+
+.om-field-hint {
+  font-size: 11px;
+  color: var(--fg-3);
+  margin-top: 4px;
+}
+
+.om-field-hint a { color: var(--forest); }
+
+.om-cta {
+  width: 100%;
+  padding: 13px;
+  font-family: var(--font-sans);
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--cream);
+  background: var(--forest);
+  border: none;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: background var(--dur-state);
+}
+
+.om-cta:hover { background: var(--forest-hover); }
+.om-cta:disabled { opacity: 0.5; cursor: default; }
+
+.om-cta-secondary {
+  background: transparent;
+  color: var(--ink);
+  border: 1px solid var(--ink);
+}
+
+.om-cta-secondary:hover { background: var(--ink); color: var(--cream); }
+
+.om-err {
+  color: var(--terracotta);
+  font-size: 12px;
+  margin-top: 8px;
+  display: none;
+}
+
+/* ═══ CONVERSATION (shopper) ═══ */
+.om-conv {
+  display: flex;
+  flex-direction: column;
+  background: var(--paper);
+  border: 1px solid var(--border-1);
+  min-height: 0;
+}
+
+.om-conv-head {
+  padding: 14px 20px;
+  border-bottom: 1px solid var(--border-1);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.om-conv-head h3 {
+  font-family: var(--font-serif);
+  font-style: italic;
+  font-size: 18px;
+  font-weight: 400;
+}
+
+#customer-badge {
+  font-size: 10px;
+  font-family: var(--font-mono);
+  padding: 2px 8px;
+  border-radius: var(--radius-pill);
+  background: rgba(31,59,45,0.08);
+  color: var(--forest);
+  display: none;
+}
+
+#transcript {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-3);
+  max-height: 60vh;
+}
+
+.msg {
+  max-width: 88%;
+  padding: 10px 16px;
+  font-size: 14px;
+  line-height: 1.55;
+  border-radius: var(--radius-pill);
+  animation: msgIn 0.35s var(--ease) both;
+}
+
+@keyframes msgIn {
+  from { opacity: 0; transform: translateY(6px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.msg.user {
+  align-self: flex-end;
+  background: var(--forest);
+  color: var(--cream);
+  border-bottom-right-radius: var(--radius-sm);
+}
+
+.msg.bot {
+  align-self: flex-start;
+  background: var(--bg-1);
+  border: 1px solid var(--border-1);
+  border-bottom-left-radius: var(--radius-sm);
+}
+
+.msg.system {
+  align-self: center;
+  background: transparent;
+  color: var(--fg-3);
+  font-size: 12px;
+}
+
+.msg.receipt {
+  align-self: center;
+  background: var(--ink);
+  color: var(--cream);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  padding: 8px 14px;
+  border-radius: var(--radius-sm);
+}
+
+.msg.receipt::before { content: '⛓ '; }
+
+.msg.product-card {
+  align-self: flex-start;
+  width: 88%;
+  max-width: 88%;
+  padding: 0;
+  background: var(--bg-1);
+  border: 1px solid var(--border-1);
+  border-radius: var(--radius-sm);
+  border-bottom-left-radius: var(--radius-sm);
+  display: grid;
+  grid-template-columns: 80px 1fr;
+  gap: 0;
+  overflow: hidden;
+}
+
+.msg.product-card .pc-img {
+  background: linear-gradient(135deg, var(--saffron-soft), var(--saffron));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--font-serif);
+  font-style: italic;
+  font-size: 32px;
+  color: var(--cream);
+}
+
+.msg.product-card .pc-body {
+  padding: 10px 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.msg.product-card .pc-title {
+  font-family: var(--font-serif);
+  font-size: 16px;
+  line-height: 20px;
+  color: var(--fg-1);
+}
+
+.msg.product-card .pc-creator {
+  font-size: 11px;
+  color: var(--fg-2);
+}
+
+.msg.product-card .pc-price {
+  font-family: var(--font-mono);
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--ink);
+  margin-top: 2px;
+}
+
+.msg.product-card .pc-add {
+  margin-top: 4px;
+  align-self: flex-start;
+  font-size: 11px;
+  padding: 4px 10px;
+  background: var(--forest);
+  color: var(--cream);
+  border: none;
+  border-radius: var(--radius-pill);
+  cursor: pointer;
+  font-family: var(--font-sans);
+}
+
+/* ═══ INPUT ═══ */
+.om-input-area {
+  padding: 14px 20px;
+  border-top: 1px solid var(--border-1);
+  background: var(--bg-3);
+}
+
+.om-input-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: var(--bg-1);
+  border: 1px solid var(--border-1);
+  border-radius: var(--radius-pill);
+  padding: 4px 4px 4px 18px;
+  transition: border-color var(--dur-state);
+}
+
+.om-input-row:focus-within { border-color: var(--forest); }
+
+#chat-input {
+  flex: 1;
+  background: transparent;
+  border: none;
+  outline: none;
+  font-family: var(--font-sans);
+  font-size: 14px;
+  padding: 8px 0;
+  min-width: 0;
+}
+
+.om-mic, .om-send {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  border: none;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: transform var(--dur-quick);
+}
+
+.om-mic { background: var(--bg-3); color: var(--fg-2); }
+.om-mic:hover { background: var(--stone-1); color: var(--fg-1); }
+.om-send { background: var(--forest); color: var(--cream); }
+.om-send:hover { background: var(--forest-hover); transform: scale(1.04); }
+.om-send svg { width: 16px; height: 16px; }
+
+/* ═══ SIDEBAR (wishlist) ═══ */
+.om-side {
+  background: var(--paper);
+  border: 1px solid var(--border-1);
+  padding: var(--sp-4);
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-4);
+}
+
+.om-side h4 {
+  font-family: var(--font-serif);
+  font-style: italic;
+  font-size: 20px;
+  font-weight: 400;
+}
+
+.om-side-eyebrow {
+  font-size: 10px;
+  font-weight: 500;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--fg-3);
+}
+
+.om-wishlist {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.om-wishlist-empty {
+  font-size: 12px;
+  color: var(--fg-3);
+  padding: 16px 0;
+  text-align: center;
+}
+
+.om-wishlist-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  padding: 8px 10px;
+  background: var(--bg-1);
+  border: 1px solid var(--border-1);
+  gap: 8px;
+}
+
+.om-wishlist-item .name {
+  font-size: 13px;
+  font-family: var(--font-serif);
+}
+
+.om-wishlist-item .price {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--forest);
+  white-space: nowrap;
+}
+
+.om-wishlist-item .remove {
+  border: none;
+  background: transparent;
+  color: var(--fg-3);
+  cursor: pointer;
+  font-size: 14px;
+  padding: 0 4px;
+}
+
+/* ═══ CREATOR MODE ═══ */
+.om-upload {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-4);
+  background: var(--paper);
+  border: 1px solid var(--border-1);
+  padding: var(--sp-6);
+}
+
+.om-upload h3 {
+  font-family: var(--font-serif);
+  font-style: italic;
+  font-size: 28px;
+  font-weight: 400;
+}
+
+.om-dropzone {
+  border: 2px dashed var(--stone-3);
+  padding: var(--sp-8);
+  text-align: center;
+  cursor: pointer;
+  background: var(--bg-1);
+  transition: all var(--dur-state) var(--ease);
+}
+
+.om-dropzone:hover {
+  border-color: var(--forest);
+  background: var(--bg-3);
+}
+
+.om-dropzone.has-image {
+  padding: 0;
+  border-style: solid;
+  border-color: var(--border-1);
+}
+
+.om-dropzone img {
+  display: block;
+  width: 100%;
+  max-height: 320px;
+  object-fit: cover;
+}
+
+.om-dropzone p {
+  font-size: 13px;
+  color: var(--fg-2);
+  margin-top: 6px;
+}
+
+.om-listing-preview {
+  background: var(--paper);
+  border: 1px solid var(--border-1);
+  padding: var(--sp-6);
+}
+
+.om-listing-preview h3 {
+  font-family: var(--font-serif);
+  font-style: italic;
+  font-size: 28px;
+  font-weight: 400;
+  margin-bottom: var(--sp-4);
+}
+
+.om-listing-preview-empty {
+  text-align: center;
+  color: var(--fg-3);
+  padding: var(--sp-12) 0;
+  font-size: 14px;
+}
+
+.om-listing-card {
+  border: 1px solid var(--border-1);
+  background: var(--bg-1);
+  padding: var(--sp-4);
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-3);
+}
+
+.om-listing-eyebrow {
+  font-size: 10px;
+  font-weight: 500;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--fg-3);
+}
+
+.om-listing-title {
+  font-family: var(--font-serif);
+  font-size: 28px;
+  line-height: 32px;
+  font-weight: 400;
+}
+
+.om-listing-tagline {
+  font-family: var(--font-serif);
+  font-style: italic;
+  font-size: 18px;
+  color: var(--forest);
+}
+
+.om-listing-desc {
+  font-size: 14px;
+  line-height: 1.55;
+  color: var(--fg-1);
+}
+
+.om-listing-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 4px;
+}
+
+.om-listing-meta .pill {
+  font-size: 11px;
+  padding: 4px 10px;
+  border-radius: var(--radius-pill);
+  background: var(--bg-3);
+  color: var(--fg-2);
+}
+
+.om-listing-price {
+  font-family: var(--font-mono);
+  font-size: 24px;
+  font-weight: 500;
+  color: var(--ink);
+}
+
+.om-listing-feedback {
+  background: var(--bg-3);
+  padding: 10px 14px;
+  font-size: 12px;
+  color: var(--fg-2);
+  border-left: 3px solid var(--saffron);
+}
+
+.om-listing-actions {
+  display: flex;
+  gap: 8px;
+  margin-top: var(--sp-3);
+}
+
+/* ═══ MINTED LISTINGS GRID ═══ */
+.om-minted-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: var(--sp-3);
+  margin-top: var(--sp-3);
+}
+
+.om-minted-card {
+  background: var(--bg-1);
+  border: 1px solid var(--border-1);
+  padding: var(--sp-3);
+  text-decoration: none;
+  color: var(--fg-1);
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.om-minted-card:hover { background: var(--bg-3); text-decoration: none; }
+.om-minted-card .id { font-family: var(--font-mono); font-size: 10px; color: var(--fg-3); }
+.om-minted-card .name { font-family: var(--font-serif); font-size: 15px; }
+.om-minted-card .tx { font-family: var(--font-mono); font-size: 10px; color: var(--forest); }
+
+@media (max-width: 900px) {
+  .om-app-grid-shopper, .om-app-grid-creator { grid-template-columns: 1fr; }
+  .om-modes { grid-template-columns: 1fr; }
+  .om-landing h1 { font-size: 56px; line-height: 60px; }
+}