[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_333":334,"_335":336},"routes/_app.x.$handle.$name",{"_101":100,"_32":44,"_109":89,"_27":110,"_13":14,"_111":-5,"_11":112,"_113":114,"_115":116,"_117":118,"_119":120,"_20":-5,"_121":-5,"_122":123,"_124":25,"_125":126,"_127":58,"_128":-5,"_129":-5,"_130":131},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_42":43,"_32":44,"_37":45,"_46":-5,"_47":25,"_48":49,"_50":49,"_51":52,"_53":-5,"_18":54,"_55":56,"_57":58,"_59":-5,"_60":-5,"_61":62,"_63":64,"_65":66,"_67":68,"_69":70,"_71":-5,"_72":73,"_74":73,"_75":76,"_77":76,"_78":76,"_79":73,"_80":73,"_81":82,"_83":84,"_85":86,"_87":25},"version",16,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":20,"_34":36,"_37":38,"_39":14,"_40":41,"_24":25},"previous",{"_30":31,"_32":28,"_33":20,"_34":35},"deleted",false,"deletedHere","path","README.md","latestPath","fileId","01a080bd-0b74-77b0-b17f-ec8772db6065","name","fileType","content","# React + Hono Starter\n\nA minimal starter template for building client-side React apps with a Hono\nbackend on Val Town. Click **Remix** to get your own copy.\n\n## Picking a starter\n\n| Starter | When to pick it |\n| --- | --- |\n| [`basic-html-starter`](https://www.val.town/x/templates/basic-html-starter) | Static HTML pages. Sprinkle of vanilla JS. No server-side rendering. |\n| [`hono-jsx-starter`](https://www.val.town/x/templates/hono-jsx-starter) | Dynamic server-rendered HTML with JSX. API routes. No React, no SPA. |\n| **[`react-hono-starter`](https://www.val.town/x/templates/react-hono-starter)** *(you're here)* | Client-side React SPA with a Hono API backend. |\n\n**Want to build UI?** Start writing React components in\n[`frontend/components/`](/frontend/components/). Import them into `App.tsx` and\nyou're good to go. Styling is [Twind](https://twind.style/) — just use Tailwind\nutility classes, zero config.\n\n**Want to add an API?** Add routes in [`index.ts`](/index.ts) (there's a\ncommented-out example). Fetch them from your React components.\n\n## Architecture\n\n```mermaid\ngraph LR\n Browser -->|\"GET /\"| Hono[\"index.ts
(Hono server)\"]\n Hono -->|serves| HTML[\"root.tsx\"]\n HTML -->|loads| Entry[\"index.tsx\"]\n Entry -->|renders| App[\"App.tsx\"]\n App -->|renders| Counter[\"Counter.tsx\"]\n```\n\n## File structure\n\n```\nindex.ts ← Hono backend (serves frontend + API routes)\nfrontend/\n root.tsx ← HTML shell (stamps immutable asset URLs)\n index.tsx ← React entrypoint (mounts )\n favicon.svg ← App icon\n components/\n App.tsx ← Root component (layout + view source link)\n Counter.tsx ← Example component with state\n```\n\n## How it works\n\n1. **`index.ts`** is the HTTP entrypoint — a Hono server that serves the\n frontend and any API routes you add.\n2. **`frontend/root.tsx`** is the HTML shell — it loads Twind and stamps\n immutable asset URLs for the favicon and React entrypoint.\n3. **`frontend/index.tsx`** mounts the React app.\n4. **`frontend/components/App.tsx`** is the root layout — add new components\n alongside it.\n5. **`frontend/components/Counter.tsx`** is an example stateful component —\n replace it with your own!\n\n## Next steps\n\n- Add API routes in `index.ts`\n- Add new components in `frontend/components/`\n- Add a SQLite database — see the\n [React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) for\n a full-stack example with database, queries, and shared types\n\nTemplate updates and upgrade paths for existing remixes: [CHANGELOG.md](/CHANGELOG.md)\n","# Diamond Deal Desk\n\nA small, internal-use wholesale offer comparator. Maintained directly in Val Town; this version is not automatically synchronized to the original GitHub repository.\n\n## Use the desk\n\nThe app opens with five clearly labeled example offers. Change a total asking price to recalculate automatically. Open a diamond or the details arrow to edit shape, weight, color, clarity and supplier, or see the calculation and list date. Supplier is optional. Prices are **USD per whole stone**, not per carat.\n\nSearch suppliers/specifications; filter above/below the reference; sort by discount, asking price or supplier. On smaller screens the table becomes individual offer cards. Offers are saved in this browser only, not synchronized between devices. Reset examples and removal require confirmation.\n\n## Live connection and access\n\nExisting Rapaport credentials are preserved in encrypted Val Town environment settings. Sign in through **Sign in for live prices** with the `omriluz` Val Town account. Live-price requests are authorized server-side only for that owner. Guests and other accounts get an explicitly labeled synthetic demo. The public source contains no credentials or licensed price lists.\n\nThe hosted app uses `std/oauth`; platform-level restricted HTTP access was unavailable on this account's plan. The public app shell remains available for demonstrations, while licensed pricing is protected by the app's owner check. Do not remove that check merely to share the demo.\n\nOnly these existing environment variables are used:\n\n👉 Add RAPAPORT_CLIENT_ID here: https://www.val.town/x/omriluz/diamond-dealdesk/environment-variables?key=RAPAPORT_CLIENT_ID\n\n👉 Add RAPAPORT_CLIENT_SECRET here: https://www.val.town/x/omriluz/diamond-dealdesk/environment-variables?key=RAPAPORT_CLIENT_SECRET\n\nOn returning from settings, the app rechecks access and configuration. Live status is shown only after a successful price response. Bad credentials, access errors and unavailable prices remain errors; demo prices are never substituted for a failed live request.\n\n## Calculation and limitations\n\n- Total reference = Rapaport price per carat × carat weight.\n- Percent difference = (total asking price / total reference − 1) × 100.\n- Negative means below the reference, positive means above. Neither is profit or a buy recommendation.\n- No fictitious buyers, estimated resale values, profit scores, trade history or deal ratings.\n- Scope: natural white diamonds, 0.30–5.99 ct, colors D–J, listed clarity grades IF–SI2. Other categories are outside this prototype.\n- Round and Pear have their own Rapaport lists. Oval, Cushion, Emerald, Princess and Marquise use an explicitly labeled Pear-list proxy, not a shape-specific market price.\n- Cut, lab/report quality, fluorescence, condition, fees, taxes and buyer demand are not evaluated. Confirm these before a transaction.\n- Supplier names and asking prices in the examples are fictional, even when benchmark prices are live.\n\nRapaport documentation: https://raptech.rapaport.com/rapaport-price-lists/\n\n## Implementation\n\n`index.ts`: Hono HTTP handler, JSON validation, owner-only live access, safe errors, no-store API responses.\n\n`rapaport.ts`: server-side credentials, single-flight authentication/price requests, 12-second upstream timeouts, one reauthentication after 401, 15-minute bounded in-memory price cache. Refresh bypasses the cache. No secret or upstream response-body logging.\n\n`frontend/domain.ts`: shared types, validation, examples, deterministic demo formula and arithmetic.\n\n`frontend/useDesk.ts`: browser-only offer persistence, delayed recalculation, per-row cancellation, request versions/fingerprints to reject stale results.\n\n`frontend/components/`: React UI, responsive offer sheet, explanation panels and accessible native dialogs. Frontend assets use versioned immutable URLs. Frontend asset serving is restricted to the frontend directory.\n\n## Verification\n\nRun `selftest.ts` in Val Town: 29 assertions covering arithmetic, input validation, date/proxy behavior, authentication rejection, public demo, live API lookup with the saved credentials and caching. Its output reports success only, not credentials or licensed price values.\n\nRun `ui-selftest.ts`: 14 React-renderer assertions covering initial calculation, editing, invalid values, stale-response protection, storage/reload, search, proxy explanations, failure handling, exact benchmark labeling and responsive component branches. All fixtures are synthetic.\n\nLayout snapshots were checked locally at 1440, 1024, 768, 390 and 320 pixels, with no document-level horizontal overflow. These are isolated layout checks, not an end-to-end browser test of the hosted OAuth flow. Completing interactive Val Town login still requires the owner’s browser.\n\nSee `PLAN.md` for the redesign checklist.\n","createdAt",["D",1788867480590],"branchVersion","branchId","9f23ebd9-83c3-4cee-95f6-8ff2be5419d0","id","8b68b606-e895-47b1-bdcb-922bde243fd7","diamond-dealdesk",["D",1788865286969],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Diamond deal analysis MVP with Rapaport pricing","imageUrl","f5be24e4-c798-4816-91e5-037b60b986f5","pinnedFileId","01a080ae-13c1-76f8-bf82-111d1bc14424","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","7f67379d-2d38-49bd-81ac-2c7f92a739e2","tursoName","8b68b606e89547b1bdcb922bde243fd7","tursoHostname","8b68b606e89547b1bdcb922bde243fd7-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789563628475],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_101":100,"_108":104},"org",{"_101":100,"_102":-5,"_103":104,"_18":54,"_105":106,"_107":25},"branch",{"_13":88,"_32":89,"_42":41,"_90":43,"_91":92,"_93":94,"_95":49,"_96":43,"_97":64,"_98":44,"_99":100},"isOwned",17,"professional-offer-desk","projectId","forkedBranchId","450da61b-2536-4be1-a391-9ccc0f0c6fbe","forkedBranchVersion",7,"forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","omriluz","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ycWxkOWxiOE00SkVtZENmRWM4YWxLWTRVUFMifQ","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_42":43,"_32":44,"_37":328,"_46":-5,"_47":25,"_48":49,"_50":49,"_51":52,"_53":-5,"_18":54,"_55":56,"_57":58,"_59":-5,"_60":-5,"_61":62,"_63":64,"_65":66,"_67":68,"_69":329,"_71":-5,"_72":73,"_74":73,"_75":76,"_77":76,"_78":76,"_79":73,"_80":73,"_81":330,"_83":331,"_85":332,"_87":25},"tree",[205,217,218,219,220,221,222],"files",[205,206,207,208,209,210,211,212,213,214,215,216,217,218,219,220,221,222],"counts",{"_194":62,"_195":196,"_197":62,"_198":199,"_200":201},"contents",[138,139,140,141,142,143,144],"upstreamProject","upstreamBranch",{"_42":92,"_37":132,"_133":134,"_32":135,"_90":43,"_13":94,"_91":-5,"_93":-5,"_136":137,"_46":-5,"_87":25,"_48":49,"_99":100,"_63":64,"_98":44},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1788865286969],"updatedAt",["D",1788867523446],"main","lockfileKey","1788867523579-esm.town_v_omriluz_diamond-dealdesk@7-main",{"_42":188,"_32":189,"_30":190,"_148":-5,"_40":41,"_39":152,"_150":58,"_37":191,"_13":62,"_33":192,"_34":-5,"_24":25,"_155":-5,"_27":193},{"_42":182,"_32":183,"_30":184,"_148":-5,"_40":41,"_39":152,"_150":58,"_37":185,"_13":62,"_33":20,"_34":186,"_24":25,"_155":-5,"_27":187},{"_42":179,"_32":28,"_30":31,"_148":-5,"_40":41,"_39":14,"_150":58,"_37":180,"_13":152,"_33":20,"_34":36,"_24":25,"_155":-5,"_27":181},{"_42":171,"_32":172,"_30":173,"_148":-5,"_40":41,"_39":174,"_150":58,"_37":175,"_13":152,"_33":176,"_34":177,"_24":25,"_155":-5,"_27":178},{"_42":164,"_32":165,"_30":166,"_148":-5,"_40":41,"_39":167,"_150":58,"_37":168,"_13":62,"_33":153,"_34":169,"_24":25,"_155":-5,"_27":170},{"_42":157,"_32":158,"_30":159,"_148":-5,"_40":41,"_39":160,"_150":58,"_37":161,"_13":62,"_33":153,"_34":162,"_24":25,"_155":-5,"_27":163},{"_42":145,"_32":146,"_30":147,"_148":-5,"_40":41,"_39":149,"_150":58,"_37":151,"_13":152,"_33":153,"_34":154,"_24":25,"_155":-5,"_27":156},"cd1bd86a-e62c-4d15-85f6-cbc332d55655","ui-selftest.ts","e8e60910-ab78-11f1-97e0-1607ee4eb77e","parentId",14,"latest",["D",1788867258354],1,"script","import React from 'https://esm.sh/react@18.2.0';\nimport {create} from 'https://esm.sh/react-test-renderer@18.2.0?deps=react@18.2.0';\nconst act = async (fn:()=>unknown) => {await fn(); await new Promise(r=>setTimeout(r,0));};\nimport {App} from './frontend/components/App.tsx';\nimport {validate,demoPrice,calculate} from './frontend/domain.ts';\n// Tests use synthetic fixtures only and never request licensed pricing.\nconst savedFetch=globalThis.fetch;\nconst data=new Map();\nObject.defineProperty(globalThis,'localStorage',{value:{getItem:(k:string)=>data.get(k)||null,setItem:(k:string,v:string)=>data.set(k,v)},configurable:true});\nObject.defineProperty(globalThis,'document',{value:{activeElement:null,body:{style:{overflow:''}}},configurable:true});\nObject.defineProperty(globalThis,'window',{value:{addEventListener(){},removeEventListener(){},confirm(){return true;}},configurable:true});\nlet fail=false;\nglobalThis.fetch=(async(url: string,init?:RequestInit)=>{\n if(String(url).endsWith('/api/status'))return Response.json({authorized:true,signedIn:true,configured:true,mode:'live'});\n if(fail)return Response.json({error:'Simulated pricing outage'},{status:502});\n const input=JSON.parse(String(init?.body));\n if(input.askingPrice==='10001')await new Promise(r=>setTimeout(r,900));\n const d=validate(input);return Response.json(calculate(d,{...demoPrice(d),source:'live',priceDate:'2026-09-04'}));\n}) as typeof fetch;\nconst passed:string[]=[];\nconst check=(test:unknown,name:string)=>{if(!test)throw new Error('FAILED: '+name);passed.push(name);};\nlet app:any;\nconst wait=async(ms=650)=>{await act(async()=>{await new Promise(r=>setTimeout(r,ms));});};\nconst text=()=>JSON.stringify(app.toJSON());\nconst input=()=>app.root.findAll((n:any)=>n.type==='input'&&n.props['aria-label']==='Total asking price for Ramesh')[0];\ntry {\n await act(async()=>{app=create(React.createElement(App),{createNodeMock:(node:any)=>node.type==='dialog'?{showModal(){}}:null});});\n await wait();\n check(text().includes('5 comparisons ready'),'Prefilled offers calculate on load');\n check(!text().includes('Best buyer')&&!text().includes('Strong opportunity'),'No invented buyer or buy recommendation');\n await act(async()=>input().props.onChange({target:{value:'10000'}}));await wait();\n check(text().includes('15.7% above Rap'),'Asking-price edits recalculate');\n check(text().includes('text-rose-700'),'Above-reference values have red styling');\n check(data.get('diamond-dealdesk-offers-v2')?.includes('10000'),'Offer edits persist locally');\n await act(async()=>input().props.onChange({target:{value:'-1'}}));await wait();\n check(text().includes('Enter a total asking price greater than'),'Invalid input has an actionable error');\n check(!text().includes('15.7% above Rap'),'Old result removed when the row is invalid');\n await act(async()=>input().props.onChange({target:{value:'10001'}}));await wait(450);\n await act(async()=>input().props.onChange({target:{value:'9000'}}));await wait(1100);\n check(text().includes('4.2% above Rap')&&!text().includes('15.8% above Rap'),'Out-of-order responses cannot overwrite edits');\n const search=app.root.find((n:any)=>n.type==='input'&&n.props['aria-label']==='Search offers');\n await act(async()=>search.props.onChange({target:{value:'nonexistent supplier'}}));\n check(text().includes('No offers match this view'),'Search empty state');\n await act(async()=>search.props.onChange({target:{value:''}}));\n await act(async()=>app.root.findAll((n:any)=>n.type==='button'&&n.props['aria-label']==='View details for Mehta')[0].props.onClick());\n check(text().includes('Pear-list proxy: there is no '),'Fancy-shape warning in details');\n await act(async()=>app.root.find((n:any)=>n.type==='button'&&n.props['aria-label']==='Close panel').props.onClick());\n fail=true;await act(async()=>input().props.onChange({target:{value:'8000'}}));await wait();\n check(text().includes('Simulated pricing outage')&&!text().includes('4.2% above Rap'),'Failed lookup clears old pricing, no fake fallback');\n fail=false;await act(async()=>input().props.onChange({target:{value:'8640'}}));await wait();\n check(text().includes('At benchmark'),'Exact-match comparison label');\n await act(async()=>app.unmount());\n await act(async()=>{app=create(React.createElement(App),{createNodeMock:()=>({showModal(){}})});});await wait();\n check(input().props.value==='8640','Reload restores saved offers');\n check(text().includes('lg:hidden')&&text().includes('hidden lg:block'),'Separate mobile-card and desktop-table layouts');\n console.log(JSON.stringify({passed:passed.length,checks:passed,fixtures:'synthetic',liveCredentialsRead:false}));\n} finally {if(app)app.unmount();globalThis.fetch=savedFetch;}\n","label",[146],"931ad9c3-c675-46a0-9370-1c7831bd27c5","selftest.ts","c3404eb4-ab78-11f1-a03e-1607ee4eb77e",11,["D",1788867058524],"import {calculate,validate,demoPrice,EXAMPLES} from './frontend/domain.ts';\nimport {normalizeDate,livePrice,configured} from './rapaport.ts';\nimport handler from './index.ts';\nconst checks: string[]=[];\nfunction check(condition: unknown,label:string){if(!condition)throw new Error('FAILED: '+label);checks.push(label);}\nconst base=validate(EXAMPLES[0]);\nconst synthetic={...demoPrice(base),caratPrice:8000};\nconst at=calculate({...base,askingPrice:8640},synthetic);\ncheck(at.direction==='at'&&at.percent===0&&at.difference===0,'Exact benchmark equality');\nconst below=calculate({...base,askingPrice:5400},synthetic);\ncheck(below.direction==='below'&&below.percent===-37.5&&below.difference===-3240,'Below reference arithmetic');\nconst above=calculate({...base,askingPrice:10000},synthetic);\ncheck(above.direction==='above'&&Math.abs(above.percent-15.7407407407407)<.000001,'Above reference arithmetic');\nfor(const change of [{carat:0},{carat:-1},{carat:NaN},{carat:true},{carat:6},{carat:1.234},{askingPrice:''},{askingPrice:0},{askingPrice:-1},{askingPrice:'Infinity'},{askingPrice:.001},{color:'Z'},{clarity:'bogus'},{shape:'

Diff · v16